import React from "react";
import { render, shallow } from "enzyme";
import { Grid, GridCell, GridContainer } from "./grid";

describe("Grid", () => {
    it("renders correctly", () => {
        const grid = render(
            <GridContainer>
                <Grid>
                    <GridCell>
                        <p>Content</p>
                    </GridCell>
                    <GridCell>
                        <p>More content</p>
                    </GridCell>
                </Grid>
            </GridContainer>
        );
        expect(grid).toMatchSnapshot();
    });

    describe("when given a className", () => {
        it("appends it to the root element", () => {
            const component = shallow(<Grid className="extra-class">Text</Grid>);
            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(<Grid unknownProp="some value">Text</Grid>);
            // @ts-ignore: toHaveProp exists from jest-enzyme, but TS isn't picking it up
            expect(component).toHaveProp({ unknownProp: "some value" });
        });
    });
});