refactor
This commit is contained in:
parent
a8584096d8
commit
bc86f8e7c9
|
@ -0,0 +1,60 @@
|
|||
import test from 'ava'
|
||||
import { JSDOM } from 'jsdom'
|
||||
|
||||
import { displayEvents, displayErrorMessage } from './events-displayer'
|
||||
|
||||
let document
|
||||
|
||||
test.before(() => {
|
||||
document = new JSDOM().window.document
|
||||
})
|
||||
|
||||
test.beforeEach(t => {
|
||||
t.context.list = document.createElement('ul')
|
||||
t.context.list.setAttribute('data-locale', 'en-GB')
|
||||
t.context.list.setAttribute('data-maximum', '2')
|
||||
const listElement = document.createElement('li')
|
||||
listElement.setAttribute('style', 'display: none;')
|
||||
t.context.list.appendChild(listElement)
|
||||
})
|
||||
|
||||
test('#displayEvents one event', t => {
|
||||
const list = t.context.list
|
||||
const data = {
|
||||
events: {
|
||||
elements: [
|
||||
{
|
||||
title: 'a',
|
||||
url: 'b',
|
||||
beginsOn: '2021-04-15T10:30:00Z',
|
||||
endsOn: '2021-04-15T15:30:00Z',
|
||||
physicalAddress: {
|
||||
description: 'c',
|
||||
locality: 'd'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
displayEvents({ data, document, list })
|
||||
t.is(list.children.length, 2)
|
||||
t.is(list.children[1].childNodes[0].tagName, 'A')
|
||||
t.is(list.children[1].childNodes[0].getAttribute('href'), 'b')
|
||||
t.is(list.children[1].childNodes[0].childNodes[0].nodeValue, 'a')
|
||||
t.is(list.children[1].childNodes[1].tagName, 'BR')
|
||||
t.is(list.children[1].childNodes[2].nodeValue, '15/04/2021 12:30 - 17:30')
|
||||
t.is(list.children[1].childNodes[3].tagName, 'BR')
|
||||
t.is(list.children[1].childNodes[4].nodeValue, 'c, d')
|
||||
})
|
||||
|
||||
test('#displayErrorMessage no children added', t => {
|
||||
const list = t.context.list
|
||||
displayErrorMessage({ data: '', list })
|
||||
t.is(list.children.length, 1)
|
||||
})
|
||||
|
||||
test('#displayErrorMessage error message display', t => {
|
||||
const list = t.context.list
|
||||
displayErrorMessage({ data: '', list })
|
||||
t.is(list.children[0].style.display, 'block')
|
||||
})
|
|
@ -0,0 +1,43 @@
|
|||
import Formatter from './formatter'
|
||||
import { createAnchorElement } from './html-creator'
|
||||
|
||||
export function displayEvents({ data, document, list }) {
|
||||
const locale = list.getAttribute('data-locale')
|
||||
const maxEventsCount = list.getAttribute('data-maximum')
|
||||
const events = data.events ? data.events.elements : data.group.organizedEvents.elements
|
||||
const eventsCount = Math.min(maxEventsCount, events.length)
|
||||
for (let i = 0; i < eventsCount; i++) {
|
||||
const li = document.createElement('li')
|
||||
|
||||
const a = createAnchorElement({ document, text: events[i].title, url: events[i].url })
|
||||
li.appendChild(a)
|
||||
|
||||
const br = document.createElement('br')
|
||||
li.appendChild(br)
|
||||
|
||||
const date = Formatter.formatDate({ locale, start: events[i].beginsOn, end: events[i].endsOn })
|
||||
const textnode = document.createTextNode(date)
|
||||
li.appendChild(textnode)
|
||||
|
||||
if (events[i].physicalAddress) {
|
||||
const location = Formatter.formatLocation({
|
||||
description: events[i].physicalAddress.description,
|
||||
locality: events[i].physicalAddress.locality
|
||||
})
|
||||
if (location) {
|
||||
const brBeforeLocation = document.createElement('br')
|
||||
li.appendChild(brBeforeLocation)
|
||||
|
||||
const textnodeLocation = document.createTextNode(location)
|
||||
li.appendChild(textnodeLocation)
|
||||
}
|
||||
}
|
||||
|
||||
list.appendChild(li)
|
||||
}
|
||||
}
|
||||
|
||||
export function displayErrorMessage({ data, list }) {
|
||||
console.error(data)
|
||||
list.children[0].style.display = 'block'
|
||||
}
|
|
@ -1,52 +1,8 @@
|
|||
import Formatter from './formatter'
|
||||
import { displayEvents, displayErrorMessage } from './events-displayer'
|
||||
import * as GraphqlWrapper from './graphql-wrapper'
|
||||
import { createAnchorElement } from './html-creator'
|
||||
|
||||
const NAME = '<wordpress-name>'
|
||||
|
||||
function displayEvents(data, list) {
|
||||
const locale = list.getAttribute('data-locale')
|
||||
const maxEventsCount = list.getAttribute('data-maximum')
|
||||
const events = data.events ? data.events.elements : data.group.organizedEvents.elements
|
||||
const eventsCount = Math.min(maxEventsCount, events.length)
|
||||
for (let i = 0; i < eventsCount; i++) {
|
||||
const li = document.createElement('li')
|
||||
|
||||
const a = createAnchorElement({ document, text: events[i].title, url: events[i].url })
|
||||
li.appendChild(a)
|
||||
|
||||
const br = document.createElement('br')
|
||||
li.appendChild(br)
|
||||
|
||||
const date = Formatter.formatDate({ locale, start: events[i].beginsOn, end: events[i].endsOn })
|
||||
const textnode = document.createTextNode(date)
|
||||
li.appendChild(textnode)
|
||||
|
||||
if (events[i].physicalAddress) {
|
||||
const location = Formatter.formatLocation({
|
||||
description: events[i].physicalAddress.description,
|
||||
locality: events[i].physicalAddress.locality
|
||||
})
|
||||
if (location) {
|
||||
const brBeforeLocation = document.createElement('br')
|
||||
li.appendChild(brBeforeLocation)
|
||||
|
||||
const textnodeLocation = document.createTextNode(location)
|
||||
li.appendChild(textnodeLocation)
|
||||
}
|
||||
}
|
||||
|
||||
list.appendChild(li)
|
||||
}
|
||||
}
|
||||
|
||||
function displayErrorMessage(data, list) {
|
||||
console.error(data)
|
||||
for (let i = 0; i < list.children.length; i++) {
|
||||
list.children[i].style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const eventLists = document.getElementsByClassName(NAME + '_events-list')
|
||||
for (let list of eventLists) {
|
||||
|
@ -55,12 +11,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const groupName = list.getAttribute('data-group-name')
|
||||
if (groupName) {
|
||||
GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
|
||||
.then((data) => displayEvents(data, list))
|
||||
.catch((data) => displayErrorMessage(data, list))
|
||||
.then((data) => displayEvents({ data, document, list }))
|
||||
.catch((data) => displayErrorMessage({ data, list }))
|
||||
} else {
|
||||
GraphqlWrapper.getUpcomingEvents({ url, limit })
|
||||
.then((data) => displayEvents(data, list))
|
||||
.catch((data) => displayErrorMessage(data, list))
|
||||
.then((data) => displayEvents({ data, document, list }))
|
||||
.catch((data) => displayErrorMessage({ data, list }))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue