Merge pull request #689 from cozy/fix-logout

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "8"
+  - "10"
 env:
   global:
     # BUNDLESIZE_GITHUB_TOKEN

package.json

@@ -37,6 +37,7 @@
     "example": "env USE_REACT=true nf -j examples/Procfile start"
   },
   "devDependencies": {
+    "@testing-library/react": "^10.2.1",
     "autoprefixer": "9.6.0",
     "babel-jest": "23.6.0",
     "babel-loader": "7.1.5",
@@ -63,8 +64,8 @@
     "jest": "23.6.0",
     "json-loader": "0.5.7",
     "mini-css-extract-plugin": "0.8.0",
-    "my-react": "npm:react@16.10.1",
-    "my-react-dom": "npm:react-dom@16.10.1",
+    "my-react": "npm:react@16.13.1",
+    "my-react-dom": "npm:react-dom@16.13.1",
     "npm-run-all": "4.1.5",
     "postcss": "7.0.21",
     "postcss-discard-duplicates": "4.0.2",

src/components/Drawer.jsx

@@ -18,6 +18,7 @@ class Drawer extends Component {
       isScrolling: false,
       isClosing: false
     }
+    this.handleLogout = this.handleLogout.bind(this)
   }
 
   onDrawerClick = event => {
@@ -151,14 +152,25 @@ class Drawer extends Component {
     this.asideRef.style.transform = 'translateX(-' + progress * 100 + '%)'
   }
 
+  async handleLogout() {
+    const { onLogOut, logOut } = this.props
+
+    if (onLogOut && typeof onLogOut === 'function') {
+      const res = onLogOut()
+      if (res instanceof Promise) {
+        await res
+      }
+    }
+
+    logOut()
+  }
+
   render() {
     const {
       onClaudy,
       visible,
       isClaudyLoading,
       toggleSupport,
-      onLogOut,
-      logOut,
       settingsAppURL,
       storageData
     } = this.props
@@ -182,13 +194,7 @@ class Drawer extends Component {
           <hr className="coz-sep-flex" />
           <nav className="coz-drawer--settings">
             <SettingsContent
-              onLogOut={() => {
-                if (onLogOut && typeof onLogOut === 'function') {
-                  onLogOut()
-                }
-
-                logOut()
-              }}
+              onLogOut={this.handleLogout}
               storageData={storageData}
               settingsAppURL={settingsAppURL}
               isClaudyLoading={isClaudyLoading}
@@ -203,6 +209,8 @@ class Drawer extends Component {
   }
 }
 
+export { Drawer }
+
 const mapStateToProps = state => ({
   storageData: getStorageData(state),
   settingsAppURL: getSettingsAppURL(state)

src/components/Drawer.spec.jsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+
+import I18n from 'cozy-ui/react/I18n'
+import { createStore } from 'lib/store'
+import enLocale from 'locales/en.json'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { Drawer } from './Drawer'
+
+const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
+
+const fakeStore = createStore()
+
+const Wrapper = ({ children }) => {
+  return (
+    <Provider store={fakeStore}>
+      <I18n dictRequire={() => enLocale} lang="en">
+        {children}
+      </I18n>
+    </Provider>
+  )
+}
+
+describe('bar', () => {
+  describe('logout', () => {
+    const findLogoutButton = () => {
+      return screen.getByText('Sign out')
+    }
+    const setup = ({ onLogOut, logOut }) => {
+      render(
+        <Wrapper>
+          <Drawer
+            toggleSupport={jest.fn()}
+            logOut={logOut}
+            onLogOut={onLogOut}
+          />
+        </Wrapper>
+      )
+    }
+
+    const clickLogout = () => {
+      const logoutButton = findLogoutButton()
+      fireEvent(
+        logoutButton,
+        new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true
+        })
+      )
+    }
+
+    it('should await the onLogOut', async () => {
+      let prom
+      const callOrder = []
+      const logOut = jest.fn().mockImplementation(() => {
+        callOrder.push('logOut')
+      })
+      const onLogOut = jest.fn().mockImplementation(async () => {
+        prom = sleep(100)
+        callOrder.push('onLogOut')
+        await prom
+      })
+
+      setup({ logOut, onLogOut })
+
+      act(() => {
+        clickLogout()
+      })
+
+      expect(logOut).not.toHaveBeenCalled()
+      await prom
+      await sleep(0)
+      expect(logOut).toHaveBeenCalled()
+      expect(onLogOut).toHaveBeenCalled()
+      expect(callOrder).toEqual(['onLogOut', 'logOut'])
+    })
+
+    it('should work if onLogOut has not been passed', () => {
+      const logOut = jest.fn()
+      setup({ logOut })
+      act(() => {
+        clickLogout()
+      })
+      expect(logOut).toHaveBeenCalled()
+    })
+
+    it('should work if onLogOut does not return a promise', () => {
+      const logOut = jest.fn()
+      const onLogOut = jest.fn()
+      setup({ logOut, onLogOut })
+      act(() => {
+        clickLogout()
+      })
+      expect(logOut).toHaveBeenCalled()
+      expect(onLogOut).toHaveBeenCalled()
+    })
+  })
+})