From d2bf060ae98ad929d3c273673da3f56c88a1b39e Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Mon, 20 Mar 2023 17:46:52 +0700
Subject: [PATCH] [#19] Add some tests to Sidebar component and auth logout

---
 src/adapters/authAdapter.test.ts      | 18 ++++++++++
 src/components/Sidebar/index.test.tsx | 52 +++++++++++++++++++++++++++
 src/components/Sidebar/index.tsx      | 13 +++++--
 3 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Sidebar/index.test.tsx

diff --git a/src/adapters/authAdapter.test.ts b/src/adapters/authAdapter.test.ts
index a676ea5..5448c81 100644
--- a/src/adapters/authAdapter.test.ts
+++ b/src/adapters/authAdapter.test.ts
@@ -81,4 +81,22 @@ describe('AuthAdapter', () => {
       expect(scope.isDone()).toBe(true);
     });
   });
+
+  describe('logout', () => {
+    test('The logout endpoint is called', async () => {
+      const token = 'access_token';
+
+      const scope = nock(`${process.env.REACT_APP_API_ENDPOINT}`)
+        .defaultReplyHeaders({
+          'access-control-allow-origin': '*',
+          'access-control-allow-credentials': 'true',
+        })
+        .post('/oauth/revoke')
+        .reply(200);
+
+      expect(scope.isDone()).toBe(false);
+      expect(await AuthAdapter.logout(token));
+      expect(scope.isDone()).toBe(true);
+    });
+  });
 });
diff --git a/src/components/Sidebar/index.test.tsx b/src/components/Sidebar/index.test.tsx
new file mode 100644
index 0000000..175bfbf
--- /dev/null
+++ b/src/components/Sidebar/index.test.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable camelcase */
+import { BrowserRouter } from 'react-router-dom';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import AuthAdapter from 'adapters/authAdapter';
+import { User } from 'types/User';
+
+import Sidebar from '.';
+import { setItem } from '../../helpers/localStorage';
+
+const mockTokenData = {
+  access_token: 'test_access_token',
+  refresh_token: 'test_refresh_token',
+  token_type: 'Bearer',
+  expires_in: 7200,
+  created_at: 1677045997,
+};
+
+const mockUserProfileData = {
+  email: 'testemail@gmail.com',
+  name: 'TestName',
+  avatar_url: 'https://secure.gravatar.com/avatar/6733d09432e89459dba795de8312ac2d',
+};
+
+describe('Sidebar', () => {
+  const user: User = { name: 'Test User', email: 'testemail@email.com', avatarUrl: 'an-avatar-url' };
+
+  test("renders a sidebar on the page with the user's name, profile image", () => {
+    render(<Sidebar user={user} />, { wrapper: BrowserRouter });
+
+    expect(screen.getByTestId('username')).toHaveTextContent(user.name);
+
+    const profileImage = screen.getByAltText('profile') as HTMLImageElement;
+    expect(profileImage.src).toContain('an-avatar-url');
+  });
+
+  test('renders a sidebar on the page with a logout button that when clicked, calls Logout adapter', async () => {
+    setItem('UserProfile', { auth: mockTokenData, user: mockUserProfileData });
+
+    const mockLogout = jest.spyOn(AuthAdapter, 'logout');
+
+    render(<Sidebar user={user} />, { wrapper: BrowserRouter });
+
+    const submitButton = screen.getByRole('button', { name: 'Logout' });
+
+    await userEvent.click(submitButton);
+
+    expect(mockLogout).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index d14ff81..f3cd33c 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -26,8 +26,17 @@ function Sidebar({ user }: SidebarProps) {
   return (
     <aside className={`${styles.sidebar} fixed top-0 right-0 flex h-screen w-1/6 min-w-fit flex-col gap-10 p-0`}>
       <div className="flex h-16 flex-col items-center justify-between px-5 md:flex-row md:border-b md:border-b-white">
-        <span className="pt-2 font-bold text-white">{user.name}</span>
-        <img className="cursor-pointer rounded-full" height={36} width={36} src={user.avatarUrl} alt="profile"></img>
+        <span data-test-id="username" className="pt-2 font-bold text-white">
+          {user.name}
+        </span>
+        <img
+          data-test-id="avatar"
+          className="cursor-pointer rounded-full"
+          height={36}
+          width={36}
+          src={user.avatarUrl}
+          alt="profile"
+        ></img>
       </div>
       <button onClick={performLogout} className="relative left-5 self-start text-xl text-white opacity-50">
         Logout