Merge branch 'develop'

Author: george

app/components/SideNav/SideNav.js

@@ -16,10 +16,10 @@ export default class SideNav extends React.Component {
   constructor(props) {
     super(props)
     this.handleMenuVisibility = throttle(this.handleMenuVisibility, 50)
-  }
 
-  state = {
-    menuIsOpen: window.innerWidth > MENU_COLLAPSE_WIDTH,
+    this.state = {
+      menuIsOpen: window.innerWidth > MENU_COLLAPSE_WIDTH,
+    }
   }
 
   static propTypes = {
@@ -51,6 +51,13 @@ export default class SideNav extends React.Component {
     Accordions.stop()
   }
 
+  componentDidUpdate(_, prevState) {
+    if (prevState.menuIsOpen !== this.state.menuIsOpen) {
+      Accordions.stop()
+      Accordions.start()
+    }
+  }
+
   handleCollapseClick = () => {
     if (window.innerWidth <= MENU_COLLAPSE_WIDTH) {
       this.setState({ menuIsOpen: false })

app/components/SideNav/__tests__/SideNav.spec.js

@@ -1,13 +1,17 @@
 import React from "react"
 import SideNav from "../SideNav"
 import { BrowserRouter as Router } from "react-router-dom"
+import { Accordions } from "undernet"
 
 jest.mock("react-feather/dist/icons/chevron-right", () => global.simpleMock("ChevronRight"))
 jest.mock("react-feather/dist/icons/menu", () => global.simpleMock("Menu"))
 jest.mock("projectRoot/package.json", () => ({
   version: "9.9.9",
 }))
 
+Accordions.start = jest.fn()
+Accordions.stop = jest.fn()
+
 const MENU_COLLAPSE_WIDTH = 1199
 const MENU_EXPAND_WIDTH = MENU_COLLAPSE_WIDTH + 1
 const DEFAULT_WIDTH = 1024
@@ -41,6 +45,21 @@ describe.only("<SideNav />", () => {
     })
   })
 
+  describe("#state", () => {
+    beforeEach(() => {
+      const wrapper = mountComponent()
+      wrapper.find("SideNav").setState({ menuIsOpen: true })
+    })
+
+    it("calls Accordions.stop if state.menuIsOpen changes", () => {
+      expect(Accordions.stop).toHaveBeenCalled()
+    })
+
+    it("calls Accordions.start if state.menuIsOpen changes", () => {
+      expect(Accordions.start).toHaveBeenCalled()
+    })
+  })
+
   describe("#handleMenuVisibility", () => {
     afterEach(() => {
       updatePageWidth(DEFAULT_WIDTH)