Skip to content

Commit

Permalink
Banner.test.js: parameterize tests in describe.each loop and add co…
Browse files Browse the repository at this point in the history 
…verage for institution=nyu image class
  • Loading branch information
@da70
da70 committed Feb 21, 2023
1 parent c72d609 commit bda76ee
Show file tree
Hide file tree
Showing 2 changed files with 309 additions and 34 deletions.
73 changes: 39 additions & 34 deletions frontend/src/components/Banner/Banner.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
270 changes: 270 additions & 0 deletions frontend/src/components/Banner/__snapshots__/Banner.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down

0 comments on commit bda76ee

Please sign in to comment.