Merge branch 'js/utils-tests' into develop

Author: george

app/pages/Home/__tests__/markdownContent.spec.js

@@ -15,6 +15,7 @@ describe("<StatusBadges />", () => {
     expect(wrapper).toMatchSnapshot()
   })
 })
+
 describe("<InstallNpm />", () => {
   it("renders", () => {
     const wrapper = mount(<InstallNpm />)

src/js/__tests__/utils.spec.js

@@ -0,0 +1,227 @@
+import ContextUtil, { dom, getFocusableElements } from "../utils"
+
+const testDom = `<div data-tester="true" data-removable class="wrapper">
+    <p>Hello world! <a href="#">this link is focusable</a> </p>
+    <p style="height: 32px;" class="hello world test">Hello world again! <button type="button">I too, am focusable!</button></p>
+  </div>\
+`
+
+describe("dom", () => {
+  describe(".addClass(element, ...classes)", () => {
+    it("can add a class", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const newClass = "test-class"
+      // When
+      dom.addClass(element, newClass)
+      // Then
+      const received = Object.values(element.classList)
+      expect(received).toContainEqual(newClass)
+    })
+
+    it("can add multiple classes", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const newClass1 = "test-class-1"
+      const newClass2 = "test-class-2"
+      // When
+      dom.addClass(element, newClass1, newClass2)
+      // Then
+      const received = Object.values(element.classList)
+      expect(received).toEqual(expect.arrayContaining([newClass1, newClass2]))
+    })
+  })
+
+  describe(".removeClass(element, ...classes)", () => {
+    it("can remove a class from an element", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const removedClass = "test"
+      // When
+      dom.removeClass(element, removedClass)
+      // Then
+      const received = Object.values(element.classList)
+      expect(received).not.toContainEqual(removedClass)
+    })
+
+    it("can remove multiple classes from an element", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const newClass1 = "hello"
+      const newClass2 = "world"
+      // When
+      dom.removeClass(element, newClass1, newClass2)
+      // Then
+      const received = Object.values(element.classList)
+      expect(received).not.toEqual(expect.arrayContaining([newClass1, newClass2]))
+    })
+  })
+
+  describe(".hasClass(element, ...classes)", () => {
+    it("returns false if class can't be found", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const classNameToDetect = "test-class"
+      // When
+      const received = dom.hasClass(element, classNameToDetect)
+      // Then
+      expect(received).toEqual(false)
+    })
+
+    it("returns true if class can be found", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const classNameToDetect = "hello"
+      // When
+      const received = dom.hasClass(element, classNameToDetect)
+      // Then
+      expect(received).toEqual(true)
+    })
+
+    it("returns false if class can't be found among given classes", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const classNameToDetect1 = "hello"
+      const classNameToDetect2 = "not-in-class-list"
+      // When
+      const received = dom.hasClass(element, classNameToDetect1, classNameToDetect2)
+      // Then
+      expect(received).toEqual(true)
+    })
+
+    it("returns true if class can be found among given classes", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const classNameToDetect1 = "hello"
+      const classNameToDetect2 = "not-in-class-list"
+      // When
+      const received = dom.hasClass(element, classNameToDetect1, classNameToDetect2)
+      // Then
+      expect(received).toEqual(true)
+    })
+  })
+
+  describe(".getAttr(element, attr)", () => {
+    it("returns an attribute", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const wrapper = document.querySelector(".wrapper")
+      // When
+      const received = dom.getAttr(wrapper, "data-tester")
+      // Then
+      expect(received).toEqual("true")
+    })
+  })
+
+  describe(".setAttr(element, attr, value)", () => {
+    it("can set an attribute", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const wrapper = document.querySelector(".wrapper")
+      // When
+      dom.setAttr(wrapper, "data-tester", "false")
+      // Then
+      const received = wrapper.dataset.tester
+      expect(received).toEqual("false")
+    })
+  })
+
+  describe(".removeAttr(element, attr)", () => {
+    it("can remove an attribute", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const wrapper = document.querySelector(".wrapper")
+      // When
+      dom.removeAttr(wrapper, "data-tester")
+      // Then
+      const received = wrapper.dataset.tester
+      expect(received).toEqual(undefined)
+    })
+  })
+
+  describe(".hasAttr(element, attr)", () => {
+    it("can detect an attribute", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const wrapper = document.querySelector(".wrapper")
+      // When
+      const received = dom.hasAttr(wrapper, "data-tester")
+      // Then
+      expect(received).toEqual(true)
+    })
+  })
+
+  describe(".find(element, parent = document)", () => {
+    it("returns an element", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const received = dom.find(".hello.world")
+      // Then
+      expect(received).toEqual(element)
+    })
+  })
+
+  describe(".findAll(element, parent = document)", () => {
+    it("returns a collection of elements", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const received = dom.findAll("p")
+      // Then
+      expect(received).toHaveLength(2)
+    })
+  })
+
+  describe(".css(element, property, value = undefined)", () => {
+    it("returns css property value", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      // When
+      const received = dom.css(element, "height")
+      // Then
+      expect(received).toEqual("32px")
+    })
+
+    it("can set css property as a string", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const newHeight = "60px"
+      // When
+      dom.css(element, "height", newHeight)
+      // Then
+      const received = element.style.height
+      expect(received).toEqual(newHeight)
+    })
+
+    it("can set css property as null", () => {
+      // Given
+      document.body.innerHTML = testDom
+      const element = document.querySelector(".hello.world")
+      const newHeight = null
+      // When
+      dom.css(element, "height", newHeight)
+      // Then
+      expect(element.style.height).toEqual("")
+    })
+  })
+})
+
+describe("getFocusableElements(container)", () => {
+  it("returns all focusable elements within a given element", () => {
+    document.body.innerHTML = testDom
+    const elements = getFocusableElements(".wrapper")
+    expect(elements).toHaveLength(2)
+  })
+})
+
+describe("ContextUtil", () => {})

src/js/accordion.js

@@ -88,8 +88,8 @@ export default class Accordion {
   // private
 
   _setup(instance) {
-    const buttonTargetId = dom.attr(instance, Selectors.DATA_TARGET)
-    const accordionId = dom.attr(instance, Selectors.DATA_PARENT)
+    const buttonTargetId = dom.getAttr(instance, Selectors.DATA_TARGET)
+    const accordionId = dom.getAttr(instance, Selectors.DATA_PARENT)
     const buttonContent = dom.find(`#${buttonTargetId}`)
 
     if (!accordionId) {
@@ -115,29 +115,29 @@ export default class Accordion {
 
     const buttonContentChildren = getFocusableElements(`#${buttonContent.id}`)
 
-    dom.attr(instance, Selectors.ARIA_CONTROLS, buttonTargetId)
-    dom.attr(buttonContent, Selectors.ARIA_LABELLEDBY, buttonId)
+    dom.setAttr(instance, Selectors.ARIA_CONTROLS, buttonTargetId)
+    dom.setAttr(buttonContent, Selectors.ARIA_LABELLEDBY, buttonId)
 
-    const contentShouldExpand = dom.attr(accordionRow, Selectors.DATA_VISIBLE)
+    const contentShouldExpand = dom.getAttr(accordionRow, Selectors.DATA_VISIBLE)
 
     if (!contentShouldExpand) {
       throw new Error(Messages.NO_VISIBLE_ERROR(buttonTargetId))
     }
 
     if (contentShouldExpand === "true") {
       dom.css(buttonContent, "maxHeight", `${buttonContent.scrollHeight}px`)
-      dom.attr(instance, Selectors.ARIA_EXPANDED, "true")
-      dom.attr(buttonContent, Selectors.ARIA_HIDDEN, "false")
+      dom.setAttr(instance, Selectors.ARIA_EXPANDED, "true")
+      dom.setAttr(buttonContent, Selectors.ARIA_HIDDEN, "false")
 
       buttonContentChildren.forEach(element => {
-        dom.attr(element, Selectors.TABINDEX, "0")
+        dom.setAttr(element, Selectors.TABINDEX, "0")
       })
     } else {
-      dom.attr(instance, Selectors.ARIA_EXPANDED, "false")
-      dom.attr(buttonContent, Selectors.ARIA_HIDDEN, "true")
+      dom.setAttr(instance, Selectors.ARIA_EXPANDED, "false")
+      dom.setAttr(buttonContent, Selectors.ARIA_HIDDEN, "true")
 
       buttonContentChildren.forEach(element => {
-        dom.attr(element, Selectors.TABINDEX, "-1")
+        dom.setAttr(element, Selectors.TABINDEX, "-1")
       })
     }
   }
@@ -170,14 +170,14 @@ export default class Accordion {
   }
 
   _setVisibleState() {
-    const accordionButtonState = dom.attr(this._activeRow, Selectors.DATA_VISIBLE)
+    const accordionButtonState = dom.getAttr(this._activeRow, Selectors.DATA_VISIBLE)
     this._nextButtonExpandState = accordionButtonState === "true" ? "false" : "true"
     this._nextContentHiddenState = this._nextButtonExpandState === "false" ? "true" : "false"
   }
 
   _setIds() {
-    this._activeContainerId = dom.attr(this._activeButton, Selectors.DATA_PARENT)
-    this._activeAccordionRowId = dom.attr(this._activeButton, Selectors.DATA_TARGET)
+    this._activeContainerId = dom.getAttr(this._activeButton, Selectors.DATA_PARENT)
+    this._activeAccordionRowId = dom.getAttr(this._activeButton, Selectors.DATA_TARGET)
   }
 
   _setActiveContainer() {
@@ -223,13 +223,13 @@ export default class Accordion {
   }
 
   _toggleSelectedAccordion() {
-    dom.attr(this._activeRow, Selectors.DATA_VISIBLE, this._nextButtonExpandState)
-    dom.attr(this._activeButton, Selectors.ARIA_EXPANDED, this._nextButtonExpandState)
-    dom.attr(this._activeContent, Selectors.ARIA_HIDDEN, this._nextContentHiddenState)
+    dom.setAttr(this._activeRow, Selectors.DATA_VISIBLE, this._nextButtonExpandState)
+    dom.setAttr(this._activeButton, Selectors.ARIA_EXPANDED, this._nextButtonExpandState)
+    dom.setAttr(this._activeContent, Selectors.ARIA_HIDDEN, this._nextContentHiddenState)
 
     getFocusableElements(`#${this._activeAccordionRowId}`).forEach(element => {
       const value = this._nextButtonExpandState === "true" ? "0" : "-1"
-      dom.attr(element, Selectors.TABINDEX, value)
+      dom.setAttr(element, Selectors.TABINDEX, value)
     })
 
     if (dom.css(this._activeContent, "maxHeight")) {
@@ -239,7 +239,7 @@ export default class Accordion {
     }
   }
 
-  _toggleAttributeInCollection(elements, attributeName, newValue) {
-    elements.forEach(element => dom.attr(element, attributeName, newValue))
+  _toggleAttributeInCollection(elements, attributeName, value) {
+    elements.forEach(element => dom.setAttr(element, attributeName, value))
   }
 }