import React from "react";
import { render, shallow } from "enzyme";
import { LayoutGrid, LayoutGridCell, LayoutGridContainer } from "./layout-grid";

describe("LayoutGrid", () => {
    it("renders correctly", () => {
        const layoutGrid = render(
            <LayoutGridContainer>
                <LayoutGrid>
                    <LayoutGridCell>
                        <p>Content</p>
                    </LayoutGridCell>
                    <LayoutGridCell>
                        <p>More content</p>
                    </LayoutGridCell>
                </LayoutGrid>
            </LayoutGridContainer>
        );
        expect(layoutGrid).toMatchSnapshot();
    });

    describe("when given a className", () => {
        it("appends it to the root element", () => {
            const component = shallow(<LayoutGrid className="extra-class">Text</LayoutGrid>);
            expect(component.prop("className").includes("extra-class")).toBe(true);
        });
    });

    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(<LayoutGrid unknownProp="some value">Text</LayoutGrid>);
            // @ts-ignore: toHaveProp exists from jest-enzyme, but TS isn't picking it up
            expect(component).toHaveProp({ unknownProp: "some value" });
        });
    });
});