fix/tests: add missing tests (#19)

stavros-liaskos · Dec 4, 2022 · 73f100d · 73f100d · vercel · Dec 4, 2022
1 parent 92d5fa2
commit 73f100d
Show file tree

Hide file tree

Showing 16 changed files with 149 additions and 298 deletions.
diff --git a/.env.dist → .env b/.env.dist → .env
@@ -10,4 +10,4 @@ AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
 # Your Auth0 application's Client Secret
 AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'
 # The base url of the BE endpoints
-BE_BASE_URL='https://release-racconBE.com'
+BE_BASE_URL='https://release-raccoon.com'
diff --git a/components/FollowedArtistList/FollowedArtistList.test.tsx b/components/FollowedArtistList/FollowedArtistList.test.tsx
@@ -26,14 +26,14 @@ describe('List', () => {
     const mockedFetch = jest.fn().mockResolvedValueOnce(mRes);
     global.fetch = mockedFetch;
 
-    const container = render(<FollowedArtistList i18n={listI18n} />);
-    const buttons = await container.findAllByText('unfollow');
+    const component = render(<FollowedArtistList i18n={listI18n} />);
+    const buttons = await component.findAllByText('unfollow');
 
     expect(buttons).toHaveLength(2);
     expect(mockedFetch).toBeCalledTimes(1);
     expect(mRes.json).toBeCalledTimes(1);
 
-    expect(container).toMatchSnapshot();
+    expect(component.container).toMatchSnapshot();
   });
 
   it('unfollows artist on btn click', async () => {

diff --git a/components/FollowedArtistList/__snapshots__/FollowedArtistList.test.tsx.snap b/components/FollowedArtistList/__snapshots__/FollowedArtistList.test.tsx.snap
@@ -1,224 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`List renders artists with "unfollow" btn 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
+<div>
+  <div
+    class="overflow-auto w-full"
+  >
+    <div
+      class="flex justify-between md:justify-center items-center dark:even:bg-gh-darkly even:bg-gray-100"
+    >
+      <p
+        class="grow text-clip rr-text"
+      >
+        Chris Clark
+      </p>
       <div
-        class="overflow-auto w-full"
+        class="flex basis-2 mx-4 md:mx-8"
       >
-        <div
-          class="flex justify-between md:justify-center items-center dark:even:bg-gh-darkly even:bg-gray-100"
-        >
-          <p
-            class="grow text-clip rr-text"
-          >
-            Chris Clark
-          </p>
-          <div
-            class="flex basis-2 mx-4 md:mx-8"
-          >
-            <a
-              class="inline"
-              href="https://www.last.fm/music/Chris+Clark"
-            >
-              <svg
-                height="30"
-                viewBox="0 0 112.195 112.195"
-                width="30"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M112.195 56.097c0 30.983-25.114 56.099-56.097 56.099C25.115 112.195 0 87.08 0 56.097 0 25.117 25.115 0 56.099 0c30.982 0 56.096 25.117 56.096 56.097z"
-                  fill="#d31f27"
-                />
-                <path
-                  d="M80.487 52.141c-6.203-1.849-8.412-2.874-8.412-4.922 0-3.416 4.937-4.702 5.497-4.79 3.139-.465 7.072 1.173 8.34 4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975-7.788 1.146-12.782 6.786-12.782 13.327 0 8.8 8.244 11.332 14.43 13.181 6.509 1.944 8.401 2.637 8.401 5.023 0 2.016-1.196 3.895-4.374 4.735-6.32 1.664-14.586-.672-16.887-4.523-1.351-2.261-2.733-5.203-4.001-8.53-3.766-9.866-8.926-23.371-23.764-23.371-7.731 0-21.851 3.743-21.851 24.868 0 8.744 7.481 19.613 21.578 19.613 11.829 0 13.888-4.32 14.358-5.085L47.5 65.574c-.098.138-3.692 4.936-10.497 4.936-11.107 0-12.735-11.776-12.735-11.909 0-10.967 4.687-16.238 13.008-16.238 8.094 0 11.382 7.04 15.48 17.759 1.397 3.683 2.922 6.966 4.65 9.865 3.657 6.116 11.55 8.091 19.473 8.091 2.418 0 5.2.137 7.351-.432 7.093-1.878 10.905-6.178 10.905-12.224.002-9.204-8.283-11.378-14.648-13.281z"
-                  fill="#fff"
-                />
-              </svg>
-            </a>
-          </div>
-          <button
-            class="btn flex btn-small lg:ml-8 my-2 "
-          >
-            unfollow
-          </button>
-        </div>
-        <div
-          class="flex justify-between md:justify-center items-center dark:even:bg-gh-darkly even:bg-gray-100"
+        <a
+          class="inline"
+          href="https://www.last.fm/music/Chris+Clark"
         >
-          <p
-            class="grow text-clip rr-text"
-          >
-            Ill Considered, Oli Savill
-          </p>
-          <div
-            class="flex basis-2 mx-4 md:mx-8"
+          <svg
+            height="30"
+            viewBox="0 0 112.195 112.195"
+            width="30"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <a
-              class="inline"
-              href="https://www.last.fm/music/Ill+Considered,+Oli+Savill"
-            >
-              <svg
-                height="30"
-                viewBox="0 0 112.195 112.195"
-                width="30"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M112.195 56.097c0 30.983-25.114 56.099-56.097 56.099C25.115 112.195 0 87.08 0 56.097 0 25.117 25.115 0 56.099 0c30.982 0 56.096 25.117 56.096 56.097z"
-                  fill="#d31f27"
-                />
-                <path
-                  d="M80.487 52.141c-6.203-1.849-8.412-2.874-8.412-4.922 0-3.416 4.937-4.702 5.497-4.79 3.139-.465 7.072 1.173 8.34 4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975-7.788 1.146-12.782 6.786-12.782 13.327 0 8.8 8.244 11.332 14.43 13.181 6.509 1.944 8.401 2.637 8.401 5.023 0 2.016-1.196 3.895-4.374 4.735-6.32 1.664-14.586-.672-16.887-4.523-1.351-2.261-2.733-5.203-4.001-8.53-3.766-9.866-8.926-23.371-23.764-23.371-7.731 0-21.851 3.743-21.851 24.868 0 8.744 7.481 19.613 21.578 19.613 11.829 0 13.888-4.32 14.358-5.085L47.5 65.574c-.098.138-3.692 4.936-10.497 4.936-11.107 0-12.735-11.776-12.735-11.909 0-10.967 4.687-16.238 13.008-16.238 8.094 0 11.382 7.04 15.48 17.759 1.397 3.683 2.922 6.966 4.65 9.865 3.657 6.116 11.55 8.091 19.473 8.091 2.418 0 5.2.137 7.351-.432 7.093-1.878 10.905-6.178 10.905-12.224.002-9.204-8.283-11.378-14.648-13.281z"
-                  fill="#fff"
-                />
-              </svg>
-            </a>
-          </div>
-          <button
-            class="btn flex btn-small lg:ml-8 my-2 !border-gh-dark"
-          >
-            unfollow
-          </button>
-        </div>
+            <path
+              d="M112.195 56.097c0 30.983-25.114 56.099-56.097 56.099C25.115 112.195 0 87.08 0 56.097 0 25.117 25.115 0 56.099 0c30.982 0 56.096 25.117 56.096 56.097z"
+              fill="#d31f27"
+            />
+            <path
+              d="M80.487 52.141c-6.203-1.849-8.412-2.874-8.412-4.922 0-3.416 4.937-4.702 5.497-4.79 3.139-.465 7.072 1.173 8.34 4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975-7.788 1.146-12.782 6.786-12.782 13.327 0 8.8 8.244 11.332 14.43 13.181 6.509 1.944 8.401 2.637 8.401 5.023 0 2.016-1.196 3.895-4.374 4.735-6.32 1.664-14.586-.672-16.887-4.523-1.351-2.261-2.733-5.203-4.001-8.53-3.766-9.866-8.926-23.371-23.764-23.371-7.731 0-21.851 3.743-21.851 24.868 0 8.744 7.481 19.613 21.578 19.613 11.829 0 13.888-4.32 14.358-5.085L47.5 65.574c-.098.138-3.692 4.936-10.497 4.936-11.107 0-12.735-11.776-12.735-11.909 0-10.967 4.687-16.238 13.008-16.238 8.094 0 11.382 7.04 15.48 17.759 1.397 3.683 2.922 6.966 4.65 9.865 3.657 6.116 11.55 8.091 19.473 8.091 2.418 0 5.2.137 7.351-.432 7.093-1.878 10.905-6.178 10.905-12.224.002-9.204-8.283-11.378-14.648-13.281z"
+              fill="#fff"
+            />
+          </svg>
+        </a>
       </div>
+      <button
+        class="btn flex btn-small lg:ml-8 my-2 "
+      >
+        unfollow
+      </button>
     </div>
-  </body>,
-  "container": <div>
     <div
-      class="overflow-auto w-full"
+      class="flex justify-between md:justify-center items-center dark:even:bg-gh-darkly even:bg-gray-100"
     >
-      <div
-        class="flex justify-between md:justify-center items-center dark:even:bg-gh-darkly even:bg-gray-100"
+      <p
+        class="grow text-clip rr-text"
       >
-        <p
-          class="grow text-clip rr-text"
-        >
-          Chris Clark
-        </p>
-        <div
-          class="flex basis-2 mx-4 md:mx-8"
-        >
-          <a
-            class="inline"
-            href="https://www.last.fm/music/Chris+Clark"
-          >
-            <svg
-              height="30"
-              viewBox="0 0 112.195 112.195"
-              width="30"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M112.195 56.097c0 30.983-25.114 56.099-56.097 56.099C25.115 112.195 0 87.08 0 56.097 0 25.117 25.115 0 56.099 0c30.982 0 56.096 25.117 56.096 56.097z"
-                fill="#d31f27"
-              />
-              <path
-                d="M80.487 52.141c-6.203-1.849-8.412-2.874-8.412-4.922 0-3.416 4.937-4.702 5.497-4.79 3.139-.465 7.072 1.173 8.34 4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975-7.788 1.146-12.782 6.786-12.782 13.327 0 8.8 8.244 11.332 14.43 13.181 6.509 1.944 8.401 2.637 8.401 5.023 0 2.016-1.196 3.895-4.374 4.735-6.32 1.664-14.586-.672-16.887-4.523-1.351-2.261-2.733-5.203-4.001-8.53-3.766-9.866-8.926-23.371-23.764-23.371-7.731 0-21.851 3.743-21.851 24.868 0 8.744 7.481 19.613 21.578 19.613 11.829 0 13.888-4.32 14.358-5.085L47.5 65.574c-.098.138-3.692 4.936-10.497 4.936-11.107 0-12.735-11.776-12.735-11.909 0-10.967 4.687-16.238 13.008-16.238 8.094 0 11.382 7.04 15.48 17.759 1.397 3.683 2.922 6.966 4.65 9.865 3.657 6.116 11.55 8.091 19.473 8.091 2.418 0 5.2.137 7.351-.432 7.093-1.878 10.905-6.178 10.905-12.224.002-9.204-8.283-11.378-14.648-13.281z"
-                fill="#fff"
-              />
-            </svg>
-          </a>
-        </div>
-        <button
-          class="btn flex btn-small lg:ml-8 my-2 "
-        >
-          unfollow
-        </button>
-      </div>
+        Ill Considered, Oli Savill
+      </p>
       <div
-        class="flex justify-between md:justify-center items-center dark:even:bg-gh-darkly even:bg-gray-100"
+        class="flex basis-2 mx-4 md:mx-8"
       >
-        <p
-          class="grow text-clip rr-text"
-        >
-          Ill Considered, Oli Savill
-        </p>
-        <div
-          class="flex basis-2 mx-4 md:mx-8"
+        <a
+          class="inline"
+          href="https://www.last.fm/music/Ill+Considered,+Oli+Savill"
         >
-          <a
-            class="inline"
-            href="https://www.last.fm/music/Ill+Considered,+Oli+Savill"
+          <svg
+            height="30"
+            viewBox="0 0 112.195 112.195"
+            width="30"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              height="30"
-              viewBox="0 0 112.195 112.195"
-              width="30"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M112.195 56.097c0 30.983-25.114 56.099-56.097 56.099C25.115 112.195 0 87.08 0 56.097 0 25.117 25.115 0 56.099 0c30.982 0 56.096 25.117 56.096 56.097z"
-                fill="#d31f27"
-              />
-              <path
-                d="M80.487 52.141c-6.203-1.849-8.412-2.874-8.412-4.922 0-3.416 4.937-4.702 5.497-4.79 3.139-.465 7.072 1.173 8.34 4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975-7.788 1.146-12.782 6.786-12.782 13.327 0 8.8 8.244 11.332 14.43 13.181 6.509 1.944 8.401 2.637 8.401 5.023 0 2.016-1.196 3.895-4.374 4.735-6.32 1.664-14.586-.672-16.887-4.523-1.351-2.261-2.733-5.203-4.001-8.53-3.766-9.866-8.926-23.371-23.764-23.371-7.731 0-21.851 3.743-21.851 24.868 0 8.744 7.481 19.613 21.578 19.613 11.829 0 13.888-4.32 14.358-5.085L47.5 65.574c-.098.138-3.692 4.936-10.497 4.936-11.107 0-12.735-11.776-12.735-11.909 0-10.967 4.687-16.238 13.008-16.238 8.094 0 11.382 7.04 15.48 17.759 1.397 3.683 2.922 6.966 4.65 9.865 3.657 6.116 11.55 8.091 19.473 8.091 2.418 0 5.2.137 7.351-.432 7.093-1.878 10.905-6.178 10.905-12.224.002-9.204-8.283-11.378-14.648-13.281z"
-                fill="#fff"
-              />
-            </svg>
-          </a>
-        </div>
-        <button
-          class="btn flex btn-small lg:ml-8 my-2 !border-gh-dark"
-        >
-          unfollow
-        </button>
+            <path
+              d="M112.195 56.097c0 30.983-25.114 56.099-56.097 56.099C25.115 112.195 0 87.08 0 56.097 0 25.117 25.115 0 56.099 0c30.982 0 56.096 25.117 56.096 56.097z"
+              fill="#d31f27"
+            />
+            <path
+              d="M80.487 52.141c-6.203-1.849-8.412-2.874-8.412-4.922 0-3.416 4.937-4.702 5.497-4.79 3.139-.465 7.072 1.173 8.34 4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975-7.788 1.146-12.782 6.786-12.782 13.327 0 8.8 8.244 11.332 14.43 13.181 6.509 1.944 8.401 2.637 8.401 5.023 0 2.016-1.196 3.895-4.374 4.735-6.32 1.664-14.586-.672-16.887-4.523-1.351-2.261-2.733-5.203-4.001-8.53-3.766-9.866-8.926-23.371-23.764-23.371-7.731 0-21.851 3.743-21.851 24.868 0 8.744 7.481 19.613 21.578 19.613 11.829 0 13.888-4.32 14.358-5.085L47.5 65.574c-.098.138-3.692 4.936-10.497 4.936-11.107 0-12.735-11.776-12.735-11.909 0-10.967 4.687-16.238 13.008-16.238 8.094 0 11.382 7.04 15.48 17.759 1.397 3.683 2.922 6.966 4.65 9.865 3.657 6.116 11.55 8.091 19.473 8.091 2.418 0 5.2.137 7.351-.432 7.093-1.878 10.905-6.178 10.905-12.224.002-9.204-8.283-11.378-14.648-13.281z"
+              fill="#fff"
+            />
+          </svg>
+        </a>
       </div>
+      <button
+        class="btn flex btn-small lg:ml-8 my-2 !border-gh-dark"
+      >
+        unfollow
+      </button>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;
diff --git a/components/Header/Header.test.tsx b/components/Header/Header.test.tsx
@@ -5,25 +5,26 @@ import { UserProvider } from '@auth0/nextjs-auth0';
 
 describe('Header', () => {
   it('hides Logout btn when user is logged out', () => {
-    const component = render(
+    const { findByText } = render(
       <UserProvider>
         <Header />
       </UserProvider>,
     );
 
-    expect(component.findByText('Logout')).toMatchObject({});
+    expect(findByText('Logout')).toMatchObject({});
   });
 
-  it('shows Logout btn when user is logged in', () => {
+  it('shows Logout btn when user is logged in', async () => {
     const component = render(
       <UserProvider user={{ user: 'john.doe' }}>
         <Header />
       </UserProvider>,
     );
 
-    const { container } = component;
+    const logoutBtn = await component.findByText('Logout');
 
-    expect(component.findByText('Logout')).toBeTruthy();
-    expect(container).toMatchSnapshot();
+    expect(component.findByRole('a')).toBeTruthy();
+    expect(logoutBtn.closest('a')).toHaveAttribute('href', '/api/auth/logout');
+    expect(component.container).toMatchSnapshot();
   });
 });
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -10,9 +10,9 @@ const Header: React.FunctionComponent = () => {
       <DarkMode />
 
       {user && (
-        <button className="btn btn-small lg:ml-8 mx-3 my-2" onClick={() => (window.location.href = '/api/auth/logout')}>
-          Logout
-        </button>
+        <a href="/api/auth/logout">
+          <button className="btn btn-small lg:ml-8 mx-3 my-2">Logout</button>
+        </a>
       )}
     </header>
   );

diff --git a/components/Header/__snapshots__/Header.test.tsx.snap b/components/Header/__snapshots__/Header.test.tsx.snap
@@ -32,11 +32,15 @@ exports[`Header shows Logout btn when user is logged in 1`] = `
         />
       </svg>
     </button>
-    <button
-      class="btn btn-small lg:ml-8 mx-3 my-2"
+    <a
+      href="/api/auth/logout"
     >
-      Logout
-    </button>
+      <button
+        class="btn btn-small lg:ml-8 mx-3 my-2"
+      >
+        Logout
+      </button>
+    </a>
   </header>
 </div>
 `;