Skip to content

Commit

Permalink
Cleans up docs and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviawongnyc
oliviawongnyc committed Dec 5, 2024
1 parent e29688c commit 2ad0f66
Show file tree
Hide file tree
Showing 10 changed files with 484 additions and 1,807 deletions.
505 changes: 58 additions & 447 deletions src/components/Template/Template.mdx
View file

Large diffs are not rendered by default.

625 changes: 343 additions & 282 deletions src/components/Template/Template.stories.tsx
View file

Large diffs are not rendered by default.

308 changes: 28 additions & 280 deletions src/components/Template/Template.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,239 +1,60 @@
import { render, screen } from "@testing-library/react";
import { axe } from "jest-axe";
import * as React from "react";
import renderer from "react-test-renderer";

import {
Template,
TemplateAboveHeader,
TemplateHeader,
TemplateBreakout,
TemplateContent,
TemplateContentTop,
TemplateContentPrimary,
TemplateContentSidebar,
TemplateFooter,
TemplateAppContainer,
TemplateTop,
TemplateMain,
TemplateSidebar,
TemplateBottom,
} from "./Template";
import Placeholder from "../Placeholder/Placeholder";

const aboveHeader = <Placeholder variant="short">Above Header</Placeholder>;
const header = <Placeholder variant="short">NYPL Header</Placeholder>;
const breakout = (
<>
<Placeholder variant="short">Breadcrumbs</Placeholder>
<Placeholder variant="short">Hero</Placeholder>
</>
);
const breakout = <Placeholder variant="short">Breakout</Placeholder>;
const sidebar = "left";
const contentTop = <Placeholder>Content Top</Placeholder>;
const contentSidebar = <Placeholder>Left Sidebar</Placeholder>;
const contentPrimary = (
const contentMain = (
<>
<Placeholder>Main Content</Placeholder>
<Placeholder variant="short">More Content</Placeholder>
</>
);
const footer = <Placeholder variant="short">Footer</Placeholder>;

describe("TemplateAppContainer accessibility", () => {
it("passes axe accessibility test", async () => {
const { container } = render(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
/>
);
expect(await axe(container)).toHaveNoViolations();
});
});
const contentBottom = <Placeholder variant="short">Content Bottom</Placeholder>;

const templateChildren = (
<Template sidebar={sidebar}>
<TemplateBreakout>{breakout}</TemplateBreakout>
<TemplateTop>{contentTop}</TemplateTop>
<TemplateSidebar>{contentSidebar}</TemplateSidebar>
<TemplateMain>{contentMain}</TemplateMain>
<TemplateBottom>{contentBottom}</TemplateBottom>
</Template>
);

describe("Template components accessibility", () => {
it("passes axe accessibility test", async () => {
const { container } = render(
<Template>
<TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
<TemplateHeader>
{header}
<TemplateBreakout>{breakout}</TemplateBreakout>
</TemplateHeader>
<TemplateContent sidebar={sidebar}>
<TemplateContentTop>{contentTop}</TemplateContentTop>
<TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
<TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
</TemplateContent>
<TemplateFooter>{footer}</TemplateFooter>
</Template>
);
const { container } = render(<>{templateChildren}</>);
expect(await axe(container)).toHaveNoViolations();
});
});

describe("TemplateAppContainer component", () => {
it("renders each section", () => {
render(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
/>
);
expect(screen.getByText("Above Header")).toBeInTheDocument();
expect(screen.getByText("NYPL Header")).toBeInTheDocument();
expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
expect(screen.getByText("Hero")).toBeInTheDocument();
expect(screen.getByText("Content Top")).toBeInTheDocument();
expect(screen.getByText("Left Sidebar")).toBeInTheDocument();
expect(screen.getByText("Main Content")).toBeInTheDocument();
expect(screen.getByText("More Content")).toBeInTheDocument();
expect(screen.getByText("Footer")).toBeInTheDocument();
});

it("renders a #mainContent id in the `main` DOM element", () => {
const { container } = render(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
id="template-id"
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
/>
);
expect(container.querySelector("#mainContent")).toBeInTheDocument();
expect(container.querySelector("#template-id")).toBeInTheDocument();
expect(screen.getByRole("main")).toHaveAttribute("id", "mainContent");
});

it("renders only one header in a custom header component", () => {
const customHeader = <header>Custom header</header>;
render(
<TemplateAppContainer
header={customHeader}
renderHeaderElement={false}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
/>
);

// The `<header>` HTML element has the same meaning as `role="banner"`.
expect(screen.getAllByRole("banner")).toHaveLength(1);
});

it("consoles a warning when a header element was passed without setting `renderHeaderElement` to false", () => {
const warn = jest.spyOn(console, "warn");
const customHeader = <header>Custom header</header>;
render(
<TemplateAppContainer
header={customHeader}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
/>
);
expect(warn).toHaveBeenCalledWith(
"NYPL Reservoir TemplateHeader: An HTML `header` element was passed " +
"in. Set `renderHeaderElement` to `false` to avoid nested HTML " +
"`header` elements."
);
});

it("renders only one footer in a custom footer component", () => {
const customFooter = <footer>Custom Footer</footer>;
render(
<TemplateAppContainer
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={customFooter}
renderFooterElement={false}
/>
);

expect(screen.getAllByRole("contentinfo")).toHaveLength(1);
});

it("consoles a warning when a footer element was passed without setting `renderFooterElement` to false", () => {
const warn = jest.spyOn(console, "warn");
const customFooter = <footer>Custom Footer</footer>;
render(
<TemplateAppContainer
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={customFooter}
/>
);
expect(warn).toHaveBeenCalledWith(
"NYPL Reservoir TemplateFooter: An HTML `footer` element was passed " +
"in. Set `renderFooterElement` to `false` to avoid nested HTML " +
"`footer` elements."
);
});
});

describe("Template components", () => {
it("renders each section", () => {
render(
<Template>
<TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
<TemplateHeader>
{header}
<TemplateBreakout>{breakout}</TemplateBreakout>
</TemplateHeader>
<TemplateContent sidebar={sidebar}>
<TemplateContentTop>{contentTop}</TemplateContentTop>
<TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
<TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
</TemplateContent>
<TemplateFooter>{footer}</TemplateFooter>
</Template>
);
render(<>{templateChildren}</>);

expect(screen.getByText("Above Header")).toBeInTheDocument();
expect(screen.getByText("NYPL Header")).toBeInTheDocument();
expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
expect(screen.getByText("Hero")).toBeInTheDocument();
expect(screen.getByText("Breakout")).toBeInTheDocument();
expect(screen.getByText("Content Top")).toBeInTheDocument();
expect(screen.getByText("Left Sidebar")).toBeInTheDocument();
expect(screen.getByText("Main Content")).toBeInTheDocument();
expect(screen.getByText("More Content")).toBeInTheDocument();
expect(screen.getByText("Footer")).toBeInTheDocument();
expect(screen.getByText("Content Bottom")).toBeInTheDocument();
});

it("renders a #mainContent id in the TemplateContent component", () => {
const { container } = render(
<TemplateContent>
<TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
</TemplateContent>
);
const { container } = render(<>{templateChildren}</>);

expect(container.querySelector("#mainContent")).toBeInTheDocument();
expect(screen.getByRole("main")).toHaveAttribute("id", "mainContent");
Expand All @@ -242,89 +63,16 @@ describe("Template components", () => {
it("renders the UI snapshot correctly", () => {
const templateComponents = renderer
.create(
<Template>
<TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
<TemplateHeader>
{header}
<TemplateBreakout>{breakout}</TemplateBreakout>
</TemplateHeader>
<TemplateContent sidebar={sidebar}>
<TemplateContentTop>{contentTop}</TemplateContentTop>
<TemplateContentSidebar>{contentSidebar}</TemplateContentSidebar>
<TemplateContentPrimary>{contentPrimary}</TemplateContentPrimary>
</TemplateContent>
<TemplateFooter>{footer}</TemplateFooter>
<Template sidebar={sidebar}>
<TemplateBreakout>{breakout}</TemplateBreakout>
<TemplateTop>{contentTop}</TemplateTop>
<TemplateSidebar>{contentSidebar}</TemplateSidebar>
<TemplateMain>{contentMain}</TemplateMain>
<TemplateBottom>{contentBottom}</TemplateBottom>
</Template>
)
.toJSON();
const singleComponent = renderer
.create(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
/>
)
.toJSON();
const withChakraProps = renderer
.create(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
p="20px"
color="ui.error.primary"
/>
)
.toJSON();
const withOtherProps = renderer
.create(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
data-testid="props"
/>
)
.toJSON();

expect(templateComponents).toMatchSnapshot();
expect(singleComponent).toMatchSnapshot();
expect(withChakraProps).toMatchSnapshot();
expect(withOtherProps).toMatchSnapshot();
});

it("passes a ref to the div wrapper element", () => {
const ref = React.createRef<HTMLDivElement>();
const { container } = render(
<TemplateAppContainer
aboveHeader={aboveHeader}
header={header}
breakout={breakout}
sidebar={sidebar}
contentTop={contentTop}
contentSidebar={contentSidebar}
contentPrimary={contentPrimary}
footer={footer}
ref={ref}
/>
);

expect(container.querySelectorAll("div")[0]).toBe(ref.current);
});
});
Loading

0 comments on commit 2ad0f66

Please sign in to comment.