This commit is contained in:
Daniel Waxweiler 2021-05-05 10:02:57 +02:00
parent a8584096d8
commit bc86f8e7c9
3 changed files with 108 additions and 49 deletions

View File

@ -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')
})

View File

@ -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'
}

View File

@ -1,52 +1,8 @@
import Formatter from './formatter' import { displayEvents, displayErrorMessage } from './events-displayer'
import * as GraphqlWrapper from './graphql-wrapper' import * as GraphqlWrapper from './graphql-wrapper'
import { createAnchorElement } from './html-creator'
const NAME = '<wordpress-name>' 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', () => { document.addEventListener('DOMContentLoaded', () => {
const eventLists = document.getElementsByClassName(NAME + '_events-list') const eventLists = document.getElementsByClassName(NAME + '_events-list')
for (let list of eventLists) { for (let list of eventLists) {
@ -55,12 +11,12 @@ document.addEventListener('DOMContentLoaded', () => {
const groupName = list.getAttribute('data-group-name') const groupName = list.getAttribute('data-group-name')
if (groupName) { if (groupName) {
GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName }) GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
.then((data) => displayEvents(data, list)) .then((data) => displayEvents({ data, document, list }))
.catch((data) => displayErrorMessage(data, list)) .catch((data) => displayErrorMessage({ data, list }))
} else { } else {
GraphqlWrapper.getUpcomingEvents({ url, limit }) GraphqlWrapper.getUpcomingEvents({ url, limit })
.then((data) => displayEvents(data, list)) .then((data) => displayEvents({ data, document, list }))
.catch((data) => displayErrorMessage(data, list)) .catch((data) => displayErrorMessage({ data, list }))
} }
} }
}) })