@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

package/src/components/Card/Card.test.tsx

@@ -1,388 +0,0 @@
-import * as React from "react";
-import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-import renderer from "react-test-renderer";
-
-import Button from "../Button/Button";
-import Card, { CardHeading, CardContent, CardActions } from "./Card";
-import Icon from "../Icons/Icon";
-import Image from "../Image/Image";
-import Link from "../Link/Link";
-
-describe("Card Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <Card
-        id="cardID"
-        imageProps={{
-          alt: "Alt text",
-          src: "https://placeimg.com/400/200/arch",
-        }}
-      >
-        <CardHeading level="three" id="heading1">
-          The Card Heading
-        </CardHeading>
-        <CardContent>middle column content</CardContent>
-        <CardActions>
-          <Button onClick={() => {}} id="button1" type="submit">
-            Example CTA
-          </Button>
-        </CardActions>
-      </Card>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it("passes axe accessibility test for the full-click feature", async () => {
-    const { container } = render(
-      <Card
-        id="cardID"
-        imageProps={{
-          alt: "Alt text",
-          src: "https://placeimg.com/400/200/arch",
-        }}
-        mainActionLink="http://nypl.org"
-      >
-        <CardHeading level="three" id="heading1">
-          The Card Heading
-        </CardHeading>
-        <CardContent>middle column content</CardContent>
-        <CardActions>
-          <Button onClick={() => {}} id="button1" type="submit">
-            Example CTA
-          </Button>
-        </CardActions>
-      </Card>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("Card", () => {
-  const regularCard = (
-    <Card
-      id="regularCard"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/400/200/arch",
-      }}
-    >
-      <CardHeading level="three" id="heading1">
-        The Card Heading
-      </CardHeading>
-      <CardContent>middle column content</CardContent>
-      <CardActions>
-        <Button onClick={() => {}} id="button1" type="submit">
-          Example CTA
-        </Button>
-      </CardActions>
-    </Card>
-  );
-  const cardWithExtendedStyles = (
-    <Card
-      className="edition-card"
-      id="cardWithExtendedStyles"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/300/400/arch",
-      }}
-    >
-      <CardHeading id="editioncardheading1" level="two">
-        The Card Heading
-      </CardHeading>
-      <CardContent>
-        <div>Published in New York by Random House</div>
-        <div>Written in English</div>
-        <div>
-          License: Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
-          International
-        </div>
-      </CardContent>
-      <CardActions>
-        <Link id="link-online" href="online" type="button">
-          Read Online
-        </Link>
-        <Link id="link-icon" href="#url" type="action">
-          <Icon
-            align="left"
-            iconRotation="rotate0"
-            id="icon-cardWithExtendedStyles"
-            name="download"
-          />
-          Download
-        </Link>
-      </CardActions>
-    </Card>
-  );
-  const cardWithNoCTAs = (
-    <Card
-      className="edition-card"
-      id="cardWithNoCTAs"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/300/400/arch",
-      }}
-    >
-      <CardHeading id="editioncardheading1" level="two">
-        The Card Heading
-      </CardHeading>
-      <CardContent>
-        <p>Published in New York by Random House</p>
-        <p>Written in English</p>
-        <p>Under Creative Commons License</p>
-      </CardContent>
-    </Card>
-  );
-  const cardWithNoContent = (
-    <Card
-      className="edition-card"
-      id="cardWithNoContent"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/300/400/arch",
-      }}
-    >
-      <CardHeading id="editioncardheading1" level="two" url="#edition-link">
-        The Card Heading
-      </CardHeading>
-      <CardActions>
-        <Link id="link-online" href="online" type="button">
-          Read Online
-        </Link>
-        <Link id="link-icon" href="#url" type="action">
-          <Icon
-            align="left"
-            iconRotation="rotate0"
-            id="icon-cardWithNoContent"
-            name="download"
-          />
-          Download
-        </Link>
-      </CardActions>
-    </Card>
-  );
-  const cardWithNoImage = (
-    <Card id="cardWithNoImage" className="edition-card">
-      <CardHeading id="editioncardheading1" level="two" url="#edition-link">
-        The Card Heading
-      </CardHeading>
-      <CardContent>middle column content</CardContent>
-      <CardActions>
-        <Link id="link-online" href="online" type="button">
-          Read Online
-        </Link>
-        <Link id="link-icon" href="#url" type="action">
-          <Icon
-            align="left"
-            iconRotation="rotate0"
-            id="icon-cardWithNoImage"
-            name="download"
-          />
-          Download
-        </Link>
-      </CardActions>
-    </Card>
-  );
-  const cardFullClick = () => (
-    <Card
-      id="fullclick"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/400/200/arch",
-      }}
-      mainActionLink="http://nypl.org"
-    >
-      <CardHeading level="three" id="heading1">
-        The Card Heading
-      </CardHeading>
-      <CardContent>middle column content</CardContent>
-      <CardActions>
-        <Button id="button1" onClick={() => {}} type="submit">
-          Example CTA
-        </Button>
-      </CardActions>
-    </Card>
-  );
-  const cardImageComponentAndRatio = () => (
-    <Card
-      id="fullclick"
-      imageProps={{
-        aspectRatio: "threeByTwo",
-        component: <Image alt="" src="https://placeimg.com/400/200/arch" />,
-      }}
-    >
-      <CardHeading level="three" id="heading1">
-        The Card Heading
-      </CardHeading>
-      <CardContent>middle column content</CardContent>
-    </Card>
-  );
-  const cardWithRightActions = () => (
-    <Card
-      id="cardID"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/400/200/arch",
-      }}
-      isAlignedRightActions
-    >
-      <CardHeading level="three" id="heading1">
-        The Card Heading
-      </CardHeading>
-      <CardContent>middle column content</CardContent>
-      <CardActions>
-        <Button onClick={() => {}} id="button1" type="submit">
-          Example CTA
-        </Button>
-      </CardActions>
-      <CardActions>
-        <Button onClick={() => {}} id="button2" type="submit">
-          Example CTA
-        </Button>
-      </CardActions>
-    </Card>
-  );
-  const cardWithChakraProps = (
-    <Card
-      id="chakraProps"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/400/200/arch",
-      }}
-      p="s"
-      color="ui.error.primary"
-    >
-      <CardHeading level="three" id="heading1" color="ui.error.secondary">
-        The Card Heading
-      </CardHeading>
-      <CardContent p="20px">middle column content</CardContent>
-      <CardActions m="20px">
-        <Button onClick={() => {}} id="button1" type="submit">
-          Example CTA
-        </Button>
-      </CardActions>
-    </Card>
-  );
-  const cardWithOtherProps = (
-    <Card
-      id="otherProps"
-      imageProps={{
-        alt: "Alt text",
-        src: "https://placeimg.com/400/200/arch",
-      }}
-      data-testid="card-testid"
-    >
-      <CardHeading level="three" id="heading1" color="ui.error.secondary">
-        The Card Heading
-      </CardHeading>
-      <CardContent data-testid="cardcontent-testid">
-        middle column content
-      </CardContent>
-      <CardActions data-testid="cardaction-testid">
-        <Button onClick={() => {}} id="button1" type="submit">
-          Example CTA
-        </Button>
-      </CardActions>
-    </Card>
-  );
-  let container;
-
-  it("renders a Card with a header, image, content, and CTAs", () => {
-    const utils = render(regularCard);
-    container = utils.container;
-
-    expect(container.querySelector("h3")).toBeInTheDocument();
-    expect(screen.getByText("The Card Heading")).toBeInTheDocument();
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(screen.getByText("middle column content")).toBeInTheDocument();
-    expect(screen.getByText("Example CTA")).toBeInTheDocument();
-  });
-
-  it("renders a Card with variable data", () => {
-    const utils = render(cardWithExtendedStyles);
-    container = utils.container;
-
-    expect(container.querySelector("h2")).toBeInTheDocument();
-    expect(screen.getByText("The Card Heading")).toBeInTheDocument();
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(
-      screen.getByText(/Published in New York by Random House/i)
-    ).toBeInTheDocument();
-    expect(screen.getByText(/Read Online/i)).toBeInTheDocument();
-    expect(screen.getAllByRole("link")).toHaveLength(2);
-  });
-
-  it("Generates a card without a CTA block if one isn't provided", () => {
-    render(cardWithNoCTAs);
-
-    expect(screen.getByText("The Card Heading")).toBeInTheDocument();
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(
-      screen.getByText(/Published in New York by Random House/i)
-    ).toBeInTheDocument();
-    expect(screen.queryByText(/Read Online/i)).not.toBeInTheDocument();
-    expect(screen.queryAllByRole("link")).toHaveLength(0);
-  });
-
-  it("Generates a card without a content block if one isn't provided", () => {
-    render(cardWithNoContent);
-
-    expect(screen.getByText("The Card Heading")).toBeInTheDocument();
-    expect(screen.getByRole("img")).toBeInTheDocument();
-    expect(
-      screen.queryByText(/Published in New York by Random House/i)
-    ).not.toBeInTheDocument();
-    expect(screen.getByText(/Read Online/i)).toBeInTheDocument();
-    expect(screen.getAllByRole("link")).toHaveLength(3);
-  });
-
-  it("Generates a card without an image block if no image is provided", () => {
-    render(cardWithNoImage);
-
-    expect(screen.getByText("The Card Heading")).toBeInTheDocument();
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
-    expect(screen.getByText("middle column content")).toBeInTheDocument();
-    expect(screen.getByText(/Read Online/i)).toBeInTheDocument();
-  });
-
-  it("Generates a card without an image block if no image is provided", () => {
-    render(cardFullClick());
-
-    expect(screen.getAllByRole("link")[0]).toHaveAttribute(
-      "href",
-      "http://nypl.org"
-    );
-  });
-
-  it("Logs a warning when both `imageProps.component` and `imageProps.aspectRatio` are passed", () => {
-    const warn = jest.spyOn(console, "warn");
-    render(cardImageComponentAndRatio());
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL Reservoir Card: Both the `imageProps.component` and `imageProps.aspectRatio` " +
-        "props were set but `imageProps.aspectRatio` will be ignored in favor " +
-        "of the aspect ratio on `imageProps.component` prop."
-    );
-  });
-
-  it("Renders the UI snapshot correctly", () => {
-    const regular = renderer.create(regularCard).toJSON();
-    const withExtendedStyles = renderer.create(cardWithExtendedStyles).toJSON();
-    const withNoCTAs = renderer.create(cardWithNoCTAs).toJSON();
-    const withNoContent = renderer.create(cardWithNoContent).toJSON();
-    const withNoImage = renderer.create(cardWithNoImage).toJSON();
-    const withFullClick = renderer.create(cardFullClick()).toJSON();
-    const withRightActions = renderer.create(cardWithRightActions()).toJSON();
-    const withChakraProps = renderer.create(cardWithChakraProps).toJSON();
-    const withOtherProps = renderer.create(cardWithOtherProps).toJSON();
-
-    expect(regular).toMatchSnapshot();
-    expect(withExtendedStyles).toMatchSnapshot();
-    expect(withNoCTAs).toMatchSnapshot();
-    expect(withNoContent).toMatchSnapshot();
-    expect(withNoImage).toMatchSnapshot();
-    expect(withFullClick).toMatchSnapshot();
-    expect(withRightActions).toMatchSnapshot();
-    expect(withChakraProps).toMatchSnapshot();
-    expect(withOtherProps).toMatchSnapshot();
-  });
-});