From 088117fa762f8a1076491683318eb764f474ae14 Mon Sep 17 00:00:00 2001
From: knolnsokn <113459475+knolnsokn@users.noreply.github.com>
Date: Tue, 4 Oct 2022 10:26:38 -0400
Subject: [PATCH] Closes #64 - Add logout button (#160)

---
 .../MenuList/LogoutButton.test.tsx            | 39 +++++++++++++++
 .../NavigationBar/MenuList/LogoutButton.tsx   | 18 +++++++
 .../NavigationBar/MenuList/MenuList.test.tsx  | 49 +++++++++++++++++++
 .../UI/NavigationBar/MenuList/MenuList.tsx    |  5 ++
 4 files changed, 111 insertions(+)
 create mode 100644 src/components/UI/NavigationBar/MenuList/LogoutButton.test.tsx
 create mode 100644 src/components/UI/NavigationBar/MenuList/LogoutButton.tsx
 create mode 100644 src/components/UI/NavigationBar/MenuList/MenuList.test.tsx

diff --git a/src/components/UI/NavigationBar/MenuList/LogoutButton.test.tsx b/src/components/UI/NavigationBar/MenuList/LogoutButton.test.tsx
new file mode 100644
index 00000000..53b9d5c1
--- /dev/null
+++ b/src/components/UI/NavigationBar/MenuList/LogoutButton.test.tsx
@@ -0,0 +1,39 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { NavigationBarContextProvider } from 'components/UI/NavigationBar/NavigationBarContext'
+import { mockAxios } from 'test/axios-mock'
+import { TServerConfig } from 'test/test-values'
+import { LoggedInProviders } from 'test/testMocks'
+
+import { MenuList } from './MenuList'
+
+describe('LogoutButton', () => {
+  test('logs user out when clicked', async () => {
+    mockAxios
+      .onGet('/config')
+      .reply(200, Object.assign({}, TServerConfig, { auth_enabled: true }))
+
+    render(
+      <LoggedInProviders>
+        <NavigationBarContextProvider
+          toggleDrawer={(open: boolean) => () => {
+            // noop
+          }}
+          drawerIsOpen={true}
+        >
+          <MenuList />
+        </NavigationBarContextProvider>
+      </LoggedInProviders>,
+    )
+
+    await waitFor(() => {
+      expect(screen.getByText('Logout')).toBeInTheDocument()
+    })
+
+    const logOutButton = screen.getByText('Logout')
+    fireEvent.click(logOutButton)
+
+    await waitFor(() => {
+      expect(screen.queryByText('Logout')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/components/UI/NavigationBar/MenuList/LogoutButton.tsx b/src/components/UI/NavigationBar/MenuList/LogoutButton.tsx
new file mode 100644
index 00000000..09797d84
--- /dev/null
+++ b/src/components/UI/NavigationBar/MenuList/LogoutButton.tsx
@@ -0,0 +1,18 @@
+import LogoutIcon from '@mui/icons-material/Logout'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
+import { AuthContainer } from 'containers/AuthContainer'
+
+const LogoutButton = () => {
+    const { logout } = AuthContainer.useContainer()
+
+    return (
+      <ListItemButton onClick={logout} sx={{ pl: 1 }}>
+        <ListItemIcon>
+          <LogoutIcon fontSize="small" />
+        </ListItemIcon>
+        <ListItemText primary={'Logout'} />
+      </ListItemButton>
+    )
+  
+}
+export { LogoutButton }
diff --git a/src/components/UI/NavigationBar/MenuList/MenuList.test.tsx b/src/components/UI/NavigationBar/MenuList/MenuList.test.tsx
new file mode 100644
index 00000000..0028a1c9
--- /dev/null
+++ b/src/components/UI/NavigationBar/MenuList/MenuList.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { NavigationBarContextProvider } from 'components/UI/NavigationBar/NavigationBarContext'
+import { mockAxios } from 'test/axios-mock'
+import { TServerConfig } from 'test/test-values'
+import { AllProviders, LoggedInProviders } from 'test/testMocks'
+
+import { MenuList } from './MenuList'
+
+describe('Menu List', () => {
+  test('should hide Logout button when not logged in', async () => {
+    render(
+      <AllProviders>
+        <NavigationBarContextProvider
+          toggleDrawer={(open: boolean) => () => {
+            // noop
+          }}
+          drawerIsOpen={true}
+        >
+          <MenuList />
+        </NavigationBarContextProvider>
+      </AllProviders>,
+    )
+    await waitFor(() => {
+      expect(screen.queryByText('Logout')).not.toBeInTheDocument()
+    })
+  })
+
+  test('should show logout button when logged in', async () => {
+    mockAxios
+      .onGet('/config')
+      .reply(200, Object.assign({}, TServerConfig, { auth_enabled: true }))
+
+    render(
+      <LoggedInProviders>
+        <NavigationBarContextProvider
+          toggleDrawer={(open: boolean) => () => {
+            // noop
+          }}
+          drawerIsOpen={true}
+        >
+          <MenuList />
+        </NavigationBarContextProvider>
+      </LoggedInProviders>,
+    )
+    await waitFor(() => {
+      expect(screen.getByText('Logout')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/components/UI/NavigationBar/MenuList/MenuList.tsx b/src/components/UI/NavigationBar/MenuList/MenuList.tsx
index ce54b5f2..d216dbe2 100644
--- a/src/components/UI/NavigationBar/MenuList/MenuList.tsx
+++ b/src/components/UI/NavigationBar/MenuList/MenuList.tsx
@@ -4,10 +4,14 @@ import FactoryIcon from '@mui/icons-material/Factory'
 import { Divider, MenuList as MuiMenuList } from '@mui/material'
 import { AdminMenu } from 'components/UI/NavigationBar/MenuList/AdminMenu'
 import { ListItemLink } from 'components/UI/NavigationBar/MenuList/ListItemLink'
+import { LogoutButton } from 'components/UI/NavigationBar/MenuList/LogoutButton'
 import { OptionsMenu } from 'components/UI/NavigationBar/MenuList/OptionsMenu'
+import { AuthContainer } from 'containers/AuthContainer'
 import * as React from 'react'
 
 const MenuList = () => {
+  const { user } = AuthContainer.useContainer()
+
   return (
     <MuiMenuList>
       {mainEntries.map((entry: mainEntriesType) => {
@@ -24,6 +28,7 @@ const MenuList = () => {
       <AdminMenu />
       <Divider />
       <OptionsMenu />
+      {user && <LogoutButton />}
     </MuiMenuList>
   )
 }