optimizely-oui/module/js/components/Typography/typography.test.js

Optimizely's Component Library.

import React from "react";
import { render, shallow } from "enzyme";
import { Typography } from "./typography";
describe("Typography", function () {
  it("renders header1 correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "header1"
    }, "Header 1"));
    expect(component).toMatchSnapshot();
  });
  it("renders header2 correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "header2"
    }, "Header 2"));
    expect(component).toMatchSnapshot();
  });
  it("renders header3 correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "header3"
    }, "Header 3"));
    expect(component).toMatchSnapshot();
  });
  it("renders header4 correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "header4"
    }, "Header 4"));
    expect(component).toMatchSnapshot();
  });
  it("renders header5 correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "header5"
    }, "Header 5"));
    expect(component).toMatchSnapshot();
  });
  it("renders subhead correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "subhead"
    }, "Subhead"));
    expect(component).toMatchSnapshot();
  });
  it("renders body correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "body"
    }, "Body"));
    expect(component).toMatchSnapshot();
  });
  it("renders caption correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "caption"
    }, "Caption"));
    expect(component).toMatchSnapshot();
  });
  it("renders xs correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "xs"
    }, "xs"));
    expect(component).toMatchSnapshot();
  });
  it("renders xxs correctly", function () {
    var component = render(React.createElement(Typography, {
      type: "xxs"
    }, "xxs"));
    expect(component).toMatchSnapshot();
  });
  describe("when given a className", function () {
    it("appends it to the root element", function () {
      var component = shallow(React.createElement(Typography, {
        type: "body",
        className: "extra-class"
      }, "Body")); // @ts-ignore: toHaveProp exists from jest-enzyme, but TS isn't picking it up

      expect(component).toHaveProp({
        className: "axiom-typography--body extra-class"
      });
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the root element", function () {
      // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
      var component = shallow(React.createElement(Typography, {
        type: "body",
        unknownProp: "some value"
      }, "Body")); // @ts-ignore: toHaveProp exists from jest-enzyme, but TS isn't picking it up

      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});