refactor

source/connector-mobilizon/front/events-displayer-test.js

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

source/connector-mobilizon/front/events-displayer.js

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

source/connector-mobilizon/front/events-loader.js

@@ -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))
+        .then((data) => displayEvents({ data, document, list }))
-        .catch((data) => displayErrorMessage(data, list))
+        .catch((data) => displayErrorMessage({ data, list }))
     } else {
       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 }))
     }
   }
 })