import React from "react";
import { render, shallow } from "enzyme";
import { Typography } from "./typography";

describe("Typography", () => {
    it("renders header1 correctly", () => {
        const component = render(<Typography type="header1">Header 1</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders header2 correctly", () => {
        const component = render(<Typography type="header2">Header 2</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders header3 correctly", () => {
        const component = render(<Typography type="header3">Header 3</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders header4 correctly", () => {
        const component = render(<Typography type="header4">Header 4</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders header5 correctly", () => {
        const component = render(<Typography type="header5">Header 5</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders subhead correctly", () => {
        const component = render(<Typography type="subhead">Subhead</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders body correctly", () => {
        const component = render(<Typography type="body">Body</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders caption correctly", () => {
        const component = render(<Typography type="caption">Caption</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders xs correctly", () => {
        const component = render(<Typography type="xs">xs</Typography>);
        expect(component).toMatchSnapshot();
    });
    it("renders xxs correctly", () => {
        const component = render(<Typography type="xxs">xxs</Typography>);
        expect(component).toMatchSnapshot();
    });

    describe("when given a className", () => {
        it("appends it to the root element", () => {
            const component = shallow(<Typography type="body" className="extra-class">Body</Typography>);
            // @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", () => {
        it("passes it to the root element", () => {
            // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
            const component = shallow(<Typography type="body" unknownProp="some value">Body</Typography>);
            // @ts-ignore: toHaveProp exists from jest-enzyme, but TS isn't picking it up
            expect(component).toHaveProp({ unknownProp: "some value" });
        });
    });
});