simplify Undernet calls in Article component

Author: george

app/components/Article/Article.js

@@ -4,20 +4,19 @@ import Prism from "prismjs"
 import classNames from "classnames"
 import PropTypes from "prop-types"
 
-import Undernet from "undernet"
 import { COMPONENTS } from "./constants"
 import ScrollUpOnMount from "app/components/ScrollUpOnMount"
 
 export default function Article(props) {
   const [domIsLoaded, setDomIsLoaded] = useState(false)
 
   const componentUnmountFunction = () => {
-    COMPONENTS.forEach(component => Undernet[component].stop())
+    COMPONENTS.forEach(Component => Component.stop())
   }
 
   useEffect(() => {
     Prism.highlightAll()
-    COMPONENTS.forEach(component => Undernet[component].start())
+    COMPONENTS.forEach(Component => Component.start())
     setDomIsLoaded(true)
 
     return componentUnmountFunction

app/components/Article/__tests__/Article.spec.js

@@ -1,16 +1,15 @@
 import React from "react"
 import Article from "../Article"
-import Undernet from "undernet"
 import Prism from "prismjs"
 import { COMPONENTS } from "../constants"
 
 jest.mock("app/components/ScrollUpOnMount", () => global.simpleMock("ScrollUpOnMount"))
 
 global.scrollTo = jest.fn()
 
-COMPONENTS.forEach(component => {
-  Undernet[component].start = jest.fn()
-  Undernet[component].stop = jest.fn()
+COMPONENTS.forEach(Component => {
+  Component.start = jest.fn()
+  Component.stop = jest.fn()
 })
 
 jest.mock("prismjs", () => ({
@@ -51,25 +50,25 @@ describe("<Article />", () => {
       expect(Prism.highlightAll).toHaveBeenCalled()
     })
 
-    COMPONENTS.forEach(component => {
-      it(`calls Undernet.${component}.start`, () => {
+    COMPONENTS.forEach(Component => {
+      it(`calls ${Component}.start`, () => {
         // Given
         mountComponent()
         // Then
-        expect(Undernet[component].start).toHaveBeenCalled()
+        expect(Component.start).toHaveBeenCalled()
       })
     })
   })
 
   describe("#componentWillUnmount", () => {
-    COMPONENTS.forEach(component => {
-      it(`calls Undernet.${component}.stop`, () => {
+    COMPONENTS.forEach(Component => {
+      it(`calls ${Component}.stop`, () => {
         // Given
         const wrapper = mountComponent()
         // When
         wrapper.unmount()
         // Then
-        expect(Undernet[component].stop).toHaveBeenCalled()
+        expect(Component.stop).toHaveBeenCalled()
       })
     })
   })

app/components/Article/constants.js

@@ -1 +1,3 @@
-export const COMPONENTS = ["Tooltips", "Accordions", "Modals", "Dropdowns"]
+import { Tooltips, Accordions, Modals, Dropdowns } from "undernet"
+
+export const COMPONENTS = [Tooltips, Accordions, Modals, Dropdowns]