add dom api tests

Author: george

.eslintrc.js

@@ -198,6 +198,7 @@ module.exports = {
     "no-var": ERROR,
     "object-shorthand": [ERROR, ALWAYS],
     "prefer-const": ERROR,
+    "prefer-spread": ERROR,
     "prefer-template": ERROR,
     "require-yield": ERROR,
 

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

@@ -2,33 +2,222 @@ 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 class="hello world test">Hello world again! <button type="button">I too, am focusable!</button></p>
+    <p style="height: 32px;" class="hello world test">Hello world again! <button type="button">I too, am focusable!</button></p>
   </div>\
 `
 
 describe("dom", () => {
-  beforeEach(() => {
-    document.body.innerHTML = testDom
+  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]))
+    })
   })
 
-  it("can get an attribute", () => {})
-  it("can set an attribute", () => {})
-  it("can remove an attribute", () => {})
-  it("can detect an attribute", () => {})
-  it("can retrieve an element", () => {})
-  it("can retrieve a collection of elements", () => {})
-  it("can retrieve css properties", () => {})
-  it("can set css properties", () => {})
-  it("can add a class", () => {})
-  it("can add multiple classes", () => {})
-  it("can remove a class from", () => {})
-  it("can remove multiple classes from", () => {})
-  it("can detect a class", () => {})
-  it("can detect a class from multiple inputs", () => {})
+  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", () => {
-  it("returns all focusable elements within a wrapper", () => {
+describe("getFocusableElements(container)", () => {
+  it("returns all focusable elements within a given element", () => {
     document.body.innerHTML = testDom
     const elements = getFocusableElements(".wrapper")
     expect(elements).toHaveLength(2)

src/js/utils.js

@@ -31,7 +31,7 @@ export const dom = {
   hasAttr: (element, attr) => element.hasAttribute(attr),
 
   find: (selector, parent = document) => parent.querySelector(selector),
-  findAll: (selector, parent = document) => Array.apply(null, parent.querySelectorAll(selector)),
+  findAll: (selector, parent = document) => [...parent.querySelectorAll(selector)],
 
   css: (element, property, value) => {
     if (typeof value === "string" || value === null) {
@@ -45,10 +45,11 @@ export const dom = {
   removeClass: (element, ...classes) => element.classList.remove(...classes),
   hasClass: (element, ...classes) => {
     if (classes.length) {
-      return classes.filter(cls => element.classList.contains(cls)).length
+      return classes.filter(givenClassName => element.classList.contains(givenClassName)).length > 0
     }
 
-    return element.classList.contains(classes[0])
+    const [givenClassName] = classes
+    return element.classList.contains(givenClassName)
   },
 }