From bda76eeb8f5ea2b94b2607f1f4837c73c6fe4368 Mon Sep 17 00:00:00 2001
From: David <da70@nyu.edu>
Date: Tue, 21 Feb 2023 13:06:30 -0500
Subject: [PATCH] Banner.test.js: parameterize tests in `describe.each` loop
 and add coverage for institution=nyu image class

---
 frontend/src/components/Banner/Banner.test.js |  73 ++---
 .../Banner/__snapshots__/Banner.test.js.snap  | 270 ++++++++++++++++++
 2 files changed, 309 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/Banner/Banner.test.js b/frontend/src/components/Banner/Banner.test.js
index 0f7e6ef9..07022790 100644
--- a/frontend/src/components/Banner/Banner.test.js
+++ b/frontend/src/components/Banner/Banner.test.js
@@ -2,44 +2,49 @@ import { render, screen, waitFor } from '@testing-library/react';
 
 import Banner from './Banner';
 
-test('renders the Banner component', () => {
-  render(<Banner />);
-});
+import { bannerInstitutionInfo } from '../../aux/institutionConstants';
 
-test('renders the NYU Libraries logo', async () => {
-  render(<Banner />);
-  const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i));
-  expect(linkElement).toBeInTheDocument();
-});
+const institutionNamesUpperCase = Object.keys(bannerInstitutionInfo).map(institutionName => institutionName.toUpperCase());
 
-test('renders correctly', () => {
-  const { asFragment } = render(<Banner />);
-  expect(asFragment()).toMatchSnapshot();
-});
+describe.each(institutionNamesUpperCase)(
+  'Institution name: %s', (institutionNameUpperCase) => {
+    beforeEach( () => {
+      window.history.pushState({}, null, `/?institution=${institutionNameUpperCase}`);
+    });
 
-test('renders the correct NYUAD logo and link based on institution query parameter', async () => {
-  window.history.pushState({}, null, '/?institution=NYUAD');
-  render(<Banner />);
-  const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i).closest('a'));
-  expect(linkElement).toHaveAttribute('href', 'https://nyuad.nyu.edu/en/library.html');
-  const imgElement = linkElement.querySelector('img');
-  expect(imgElement).toHaveAttribute('src', `/images/abudhabi-logo-color.svg`);
-});
+    test(`renders ${institutionNameUpperCase} page correctly`, () => {
+      const { asFragment } = render(<Banner />);
+      expect(asFragment()).toMatchSnapshot();
+    });
 
-test('renders the correct NYUSH logo and link based on institution query parameter', async () => {
-  window.history.pushState({}, null, '/?institution=NYUSH');
-  render(<Banner />);
-  const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i).closest('a'));
-  expect(linkElement).toHaveAttribute('href', 'https://shanghai.nyu.edu/academics/library');
-  const imgElement = linkElement.querySelector('img');
-  expect(imgElement).toHaveAttribute('src', `/images/shanghai-logo-color.svg`);
-});
+    test(`renders the correct ${institutionNameUpperCase} logo and link based on institution query parameter`, async () => {
+      render(<Banner />);
+      const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i).closest('a'));
+      const { logo, link } = bannerInstitutionInfo[institutionNameUpperCase.toLowerCase()]
+      expect(linkElement).toHaveAttribute('href', link);
+      const imgElement = linkElement.querySelector('img');
+      expect(imgElement).toHaveAttribute('src', logo);
+    });
+
+    test(`sets the background of the logo correctly for ${institutionNameUpperCase}`, async () => {
+      render(<Banner />, {
+                           route: `?institution=${institutionNameUpperCase}`,
+                         });
+      const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i));
+      const { imgClass } = bannerInstitutionInfo[institutionNameUpperCase.toLowerCase()]
+      expect(linkElement).toHaveClass(imgClass);
+    });
+  }
+)
+
+describe('No `institution` parameter in query string', () => {
+  test('renders the Banner component', () => {
+    render(<Banner />);
+  });
 
-test('changes the background of the logo correctly when institution is NYUSH or NYUAD', async () => {
-  const institution = 'NYUAD';
-  render(<Banner />, {
-    route: `?institution=${institution}`,
+  test('renders the NYU Libraries logo', async () => {
+    render(<Banner />);
+    const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i));
+    expect(linkElement).toBeInTheDocument();
   });
-  const linkElement = await waitFor(() => screen.getByAltText(/NYU Libraries logo/i));
-  expect(linkElement).toHaveClass('image white-bg');
 });
diff --git a/frontend/src/components/Banner/__snapshots__/Banner.test.js.snap b/frontend/src/components/Banner/__snapshots__/Banner.test.js.snap
index cff9673c..41e27596 100644
--- a/frontend/src/components/Banner/__snapshots__/Banner.test.js.snap
+++ b/frontend/src/components/Banner/__snapshots__/Banner.test.js.snap
@@ -1,5 +1,275 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Institution name: NYU renders NYU page correctly 1`] = `
+<DocumentFragment>
+  <nav
+    class="color-nav navbar navbar-expand-lg navbar-light"
+  >
+    <div
+      class="container"
+    >
+      <button
+        aria-controls="basic-navbar-nav"
+        aria-label="Toggle navigation"
+        class="navbar-toggler collapsed"
+        type="button"
+      >
+        <span
+          class="navbar-toggler-icon"
+        />
+      </button>
+      <div
+        class="navbar-collapse collapse"
+        id="basic-navbar-nav"
+      >
+        <div
+          class="me-auto navbar-nav"
+        >
+          <a
+            class="nav-link"
+            data-rr-ui-event-key="http://library.nyu.edu"
+            href="http://library.nyu.edu"
+          >
+            <img
+              alt="NYU Libraries logo"
+              class="image"
+              height="60"
+              src="https://cdn.library.nyu.edu/images/nyulibraries-logo.svg"
+              width="220"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
+exports[`Institution name: NYU renders correctly 1`] = `
+<DocumentFragment>
+  <nav
+    class="color-nav navbar navbar-expand-lg navbar-light"
+  >
+    <div
+      class="container"
+    >
+      <button
+        aria-controls="basic-navbar-nav"
+        aria-label="Toggle navigation"
+        class="navbar-toggler collapsed"
+        type="button"
+      >
+        <span
+          class="navbar-toggler-icon"
+        />
+      </button>
+      <div
+        class="navbar-collapse collapse"
+        id="basic-navbar-nav"
+      >
+        <div
+          class="me-auto navbar-nav"
+        >
+          <a
+            class="nav-link"
+            data-rr-ui-event-key="https://nyuad.nyu.edu/en/library.html"
+            href="https://nyuad.nyu.edu/en/library.html"
+          >
+            <img
+              alt="NYU Libraries logo"
+              class="image white-bg"
+              height="60"
+              src="/images/abudhabi-logo-color.svg"
+              width="220"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
+exports[`Institution name: NYUAD renders NYUAD page correctly 1`] = `
+<DocumentFragment>
+  <nav
+    class="color-nav navbar navbar-expand-lg navbar-light"
+  >
+    <div
+      class="container"
+    >
+      <button
+        aria-controls="basic-navbar-nav"
+        aria-label="Toggle navigation"
+        class="navbar-toggler collapsed"
+        type="button"
+      >
+        <span
+          class="navbar-toggler-icon"
+        />
+      </button>
+      <div
+        class="navbar-collapse collapse"
+        id="basic-navbar-nav"
+      >
+        <div
+          class="me-auto navbar-nav"
+        >
+          <a
+            class="nav-link"
+            data-rr-ui-event-key="https://nyuad.nyu.edu/en/library.html"
+            href="https://nyuad.nyu.edu/en/library.html"
+          >
+            <img
+              alt="NYU Libraries logo"
+              class="image white-bg"
+              height="60"
+              src="/images/abudhabi-logo-color.svg"
+              width="220"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
+exports[`Institution name: NYUAD renders correctly 1`] = `
+<DocumentFragment>
+  <nav
+    class="color-nav navbar navbar-expand-lg navbar-light"
+  >
+    <div
+      class="container"
+    >
+      <button
+        aria-controls="basic-navbar-nav"
+        aria-label="Toggle navigation"
+        class="navbar-toggler collapsed"
+        type="button"
+      >
+        <span
+          class="navbar-toggler-icon"
+        />
+      </button>
+      <div
+        class="navbar-collapse collapse"
+        id="basic-navbar-nav"
+      >
+        <div
+          class="me-auto navbar-nav"
+        >
+          <a
+            class="nav-link"
+            data-rr-ui-event-key="https://nyuad.nyu.edu/en/library.html"
+            href="https://nyuad.nyu.edu/en/library.html"
+          >
+            <img
+              alt="NYU Libraries logo"
+              class="image white-bg"
+              height="60"
+              src="/images/abudhabi-logo-color.svg"
+              width="220"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
+exports[`Institution name: NYUSH renders NYUSH page correctly 1`] = `
+<DocumentFragment>
+  <nav
+    class="color-nav navbar navbar-expand-lg navbar-light"
+  >
+    <div
+      class="container"
+    >
+      <button
+        aria-controls="basic-navbar-nav"
+        aria-label="Toggle navigation"
+        class="navbar-toggler collapsed"
+        type="button"
+      >
+        <span
+          class="navbar-toggler-icon"
+        />
+      </button>
+      <div
+        class="navbar-collapse collapse"
+        id="basic-navbar-nav"
+      >
+        <div
+          class="me-auto navbar-nav"
+        >
+          <a
+            class="nav-link"
+            data-rr-ui-event-key="https://shanghai.nyu.edu/academics/library"
+            href="https://shanghai.nyu.edu/academics/library"
+          >
+            <img
+              alt="NYU Libraries logo"
+              class="image white-bg"
+              height="60"
+              src="/images/shanghai-logo-color.svg"
+              width="220"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
+exports[`Institution name: NYUSH renders correctly 1`] = `
+<DocumentFragment>
+  <nav
+    class="color-nav navbar navbar-expand-lg navbar-light"
+  >
+    <div
+      class="container"
+    >
+      <button
+        aria-controls="basic-navbar-nav"
+        aria-label="Toggle navigation"
+        class="navbar-toggler collapsed"
+        type="button"
+      >
+        <span
+          class="navbar-toggler-icon"
+        />
+      </button>
+      <div
+        class="navbar-collapse collapse"
+        id="basic-navbar-nav"
+      >
+        <div
+          class="me-auto navbar-nav"
+        >
+          <a
+            class="nav-link"
+            data-rr-ui-event-key="https://nyuad.nyu.edu/en/library.html"
+            href="https://nyuad.nyu.edu/en/library.html"
+          >
+            <img
+              alt="NYU Libraries logo"
+              class="image white-bg"
+              height="60"
+              src="/images/abudhabi-logo-color.svg"
+              width="220"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;
+
 exports[`renders correctly 1`] = `
 <DocumentFragment>
   <nav