215 lines
9.8 KiB
JavaScript
215 lines
9.8 KiB
JavaScript
import React from "react";
|
|
import { mount } from "enzyme";
|
|
import "jest-styled-components";
|
|
import Grid from ".";
|
|
|
|
describe("<Grid />", () => {
|
|
it("renders without error", () => {
|
|
const wrapper = mount(<Grid />);
|
|
|
|
expect(wrapper).toExist();
|
|
});
|
|
|
|
it("id, className, style is exists", () => {
|
|
const wrapper = mount(
|
|
<Grid id="testId" className="test" style={{ color: "red" }} />
|
|
);
|
|
|
|
expect(wrapper.prop("id")).toEqual("testId");
|
|
expect(wrapper.prop("className")).toEqual("test");
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
|
});
|
|
|
|
it("props transfer test", () => {
|
|
const wrapper = mount(
|
|
<Grid
|
|
alignContent="center"
|
|
alignItems="center"
|
|
alignSelf="center"
|
|
areasProp={[
|
|
{ name: "header", start: [0, 0], end: [2, 0] },
|
|
{ name: "navbar", start: [0, 1], end: [0, 1] },
|
|
{ name: "main", start: [1, 1], end: [1, 1] },
|
|
{ name: "sidebar", start: [2, 1], end: [2, 1] },
|
|
{ name: "footer", start: [0, 2], end: [2, 2] },
|
|
]}
|
|
columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
|
|
gridArea="grid"
|
|
gridColumnGap="10px"
|
|
gridGap="10px"
|
|
gridRowGap="10px"
|
|
heightProp="100vh"
|
|
justifyContent="center"
|
|
justifyItems="center"
|
|
justifySelf="center"
|
|
marginProp="10px"
|
|
paddingProp="10px"
|
|
rowsProp={["auto", "1fr", "auto"]}
|
|
tag="div"
|
|
widthProp="100vw"
|
|
/>
|
|
);
|
|
|
|
expect(wrapper.props().alignContent).toEqual("center");
|
|
expect(wrapper.props().alignItems).toEqual("center");
|
|
expect(wrapper.props().alignSelf).toEqual("center");
|
|
|
|
expect(Array.isArray(wrapper.props().areasProp)).toEqual(true);
|
|
expect(wrapper.props().areasProp.length).toEqual(5);
|
|
|
|
expect(wrapper.props().areasProp[0].name).toEqual("header");
|
|
expect(Array.isArray(wrapper.props().areasProp[0].start)).toEqual(true);
|
|
expect(wrapper.props().areasProp[0].start.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[0].start[0]).toEqual(0);
|
|
expect(wrapper.props().areasProp[0].start[1]).toEqual(0);
|
|
expect(Array.isArray(wrapper.props().areasProp[0].end)).toEqual(true);
|
|
expect(wrapper.props().areasProp[0].end.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[0].end[0]).toEqual(2);
|
|
expect(wrapper.props().areasProp[0].end[1]).toEqual(0);
|
|
|
|
expect(wrapper.props().areasProp[1].name).toEqual("navbar");
|
|
expect(Array.isArray(wrapper.props().areasProp[1].start)).toEqual(true);
|
|
expect(wrapper.props().areasProp[1].start.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[1].start[0]).toEqual(0);
|
|
expect(wrapper.props().areasProp[1].start[1]).toEqual(1);
|
|
expect(Array.isArray(wrapper.props().areasProp[1].end)).toEqual(true);
|
|
expect(wrapper.props().areasProp[1].end.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[1].end[0]).toEqual(0);
|
|
expect(wrapper.props().areasProp[1].end[1]).toEqual(1);
|
|
|
|
expect(wrapper.props().areasProp[2].name).toEqual("main");
|
|
expect(Array.isArray(wrapper.props().areasProp[2].start)).toEqual(true);
|
|
expect(wrapper.props().areasProp[2].start.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[2].start[0]).toEqual(1);
|
|
expect(wrapper.props().areasProp[2].start[1]).toEqual(1);
|
|
expect(Array.isArray(wrapper.props().areasProp[2].end)).toEqual(true);
|
|
expect(wrapper.props().areasProp[2].end.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[2].end[0]).toEqual(1);
|
|
expect(wrapper.props().areasProp[2].end[1]).toEqual(1);
|
|
|
|
expect(wrapper.props().areasProp[3].name).toEqual("sidebar");
|
|
expect(Array.isArray(wrapper.props().areasProp[3].start)).toEqual(true);
|
|
expect(wrapper.props().areasProp[3].start.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[3].start[0]).toEqual(2);
|
|
expect(wrapper.props().areasProp[3].start[1]).toEqual(1);
|
|
expect(Array.isArray(wrapper.props().areasProp[3].end)).toEqual(true);
|
|
expect(wrapper.props().areasProp[3].end.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[3].end[0]).toEqual(2);
|
|
expect(wrapper.props().areasProp[3].end[1]).toEqual(1);
|
|
|
|
expect(wrapper.props().areasProp[4].name).toEqual("footer");
|
|
expect(Array.isArray(wrapper.props().areasProp[4].start)).toEqual(true);
|
|
expect(wrapper.props().areasProp[4].start.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[4].start[0]).toEqual(0);
|
|
expect(wrapper.props().areasProp[4].start[1]).toEqual(2);
|
|
expect(Array.isArray(wrapper.props().areasProp[4].end)).toEqual(true);
|
|
expect(wrapper.props().areasProp[4].end.length).toEqual(2);
|
|
expect(wrapper.props().areasProp[4].end[0]).toEqual(2);
|
|
expect(wrapper.props().areasProp[4].end[1]).toEqual(2);
|
|
|
|
expect(Array.isArray(wrapper.props().columnsProp)).toEqual(true);
|
|
expect(wrapper.props().columnsProp.length).toEqual(3);
|
|
|
|
expect(wrapper.props().gridArea).toEqual("grid");
|
|
expect(wrapper.props().gridColumnGap).toEqual("10px");
|
|
expect(wrapper.props().gridGap).toEqual("10px");
|
|
expect(wrapper.props().gridRowGap).toEqual("10px");
|
|
expect(wrapper.props().heightProp).toEqual("100vh");
|
|
expect(wrapper.props().justifyContent).toEqual("center");
|
|
expect(wrapper.props().justifyItems).toEqual("center");
|
|
expect(wrapper.props().justifySelf).toEqual("center");
|
|
expect(wrapper.props().marginProp).toEqual("10px");
|
|
expect(wrapper.props().paddingProp).toEqual("10px");
|
|
|
|
expect(Array.isArray(wrapper.props().rowsProp)).toEqual(true);
|
|
expect(wrapper.props().rowsProp.length).toEqual(3);
|
|
expect(wrapper.props().rowsProp[0]).toEqual("auto");
|
|
expect(wrapper.props().rowsProp[1]).toEqual("1fr");
|
|
expect(wrapper.props().rowsProp[2]).toEqual("auto");
|
|
|
|
expect(wrapper.props().tag).toEqual("div");
|
|
expect(wrapper.props().widthProp).toEqual("100vw");
|
|
|
|
const wrapper2 = mount(<Grid columnsProp={{ count: 3, size: "100px" }} />);
|
|
expect(typeof wrapper.props().columnsProp).toEqual("object");
|
|
expect(wrapper2.props().columnsProp.count).toEqual(3);
|
|
expect(wrapper2.props().columnsProp.size).toEqual("100px");
|
|
|
|
const wrapper3 = mount(<Grid columnsProp="25%" />);
|
|
expect(typeof wrapper3.props().columnsProp).toEqual("string");
|
|
expect(wrapper3.props().columnsProp).toEqual("25%");
|
|
|
|
const wrapper4 = mount(<Grid rowsProp="50px" />);
|
|
expect(typeof wrapper4.props().rowsProp).toEqual("string");
|
|
expect(wrapper4.props().rowsProp).toEqual("50px");
|
|
|
|
const wrapper5 = mount(
|
|
<Grid
|
|
areasProp={[
|
|
["header", "header", "header"],
|
|
["navbar", "main", "sidebar"],
|
|
["footer", "footer", "footer"],
|
|
]}
|
|
/>
|
|
);
|
|
expect(Array.isArray(wrapper5.props().areasProp)).toEqual(true);
|
|
expect(wrapper5.props().areasProp.length).toEqual(3);
|
|
expect(Array.isArray(wrapper5.props().areasProp[0])).toEqual(true);
|
|
expect(wrapper5.props().areasProp[0].length).toEqual(3);
|
|
expect(wrapper5.props().areasProp[0][0]).toEqual("header");
|
|
expect(wrapper5.props().areasProp[0][1]).toEqual("header");
|
|
expect(wrapper5.props().areasProp[0][2]).toEqual("header");
|
|
expect(Array.isArray(wrapper5.props().areasProp[1])).toEqual(true);
|
|
expect(wrapper5.props().areasProp[1].length).toEqual(3);
|
|
expect(wrapper5.props().areasProp[1][0]).toEqual("navbar");
|
|
expect(wrapper5.props().areasProp[1][1]).toEqual("main");
|
|
expect(wrapper5.props().areasProp[1][2]).toEqual("sidebar");
|
|
expect(Array.isArray(wrapper5.props().areasProp[2])).toEqual(true);
|
|
expect(wrapper5.props().areasProp[2].length).toEqual(3);
|
|
expect(wrapper5.props().areasProp[2][0]).toEqual("footer");
|
|
expect(wrapper5.props().areasProp[2][1]).toEqual("footer");
|
|
expect(wrapper5.props().areasProp[2][2]).toEqual("footer");
|
|
});
|
|
|
|
//TODO: Uncomment after fix https://github.com/styled-components/jest-styled-components/issues/294
|
|
/* test('it applies styles', () => {
|
|
const tree = renderer.create(<Grid />).toJSON();
|
|
expect(tree).toHaveStyleRule('display', 'grid');
|
|
|
|
const tree1 = renderer.create(<Grid columnsProp={["200px", ["100px","1fr"], "auto"]} />).toJSON();
|
|
expect(tree1).toHaveStyleRule('grid-template-columns', '200px minmax(100px,1fr) auto');
|
|
|
|
const tree2 = renderer.create(<Grid columnsProp="25%" />).toJSON();
|
|
expect(tree2).toHaveStyleRule('grid-template-columns', 'repeat(auto-fill,25%)');
|
|
|
|
const tree3 = renderer.create(<Grid columnsProp={{ count: 3, size: "100px" }} />).toJSON();
|
|
expect(tree3).toHaveStyleRule('grid-template-columns', 'repeat(3,100px)');
|
|
|
|
const tree4 = renderer.create(<Grid columnsProp={{ count: 3, size: ["100px", "1fr"] }} />).toJSON();
|
|
expect(tree4).toHaveStyleRule('grid-template-columns', 'repeat(3,minmax(100px,1fr))');
|
|
|
|
const tree5 = renderer.create(<Grid rowsProp={["100px", ["100px","1fr"], "auto"]} />).toJSON();
|
|
expect(tree5).toHaveStyleRule('grid-template-rows', '100px minmax(100px,1fr) auto');
|
|
|
|
const tree6 = renderer.create(<Grid rowsProp="50px" />).toJSON();
|
|
expect(tree6).toHaveStyleRule('grid-auto-rows', '50px');
|
|
|
|
const tree7 = renderer.create(<Grid areasProp={[["header","header"],["navbar","main"]]} />).toJSON();
|
|
expect(tree7).toHaveStyleRule('grid-template-areas', '"header header" "navbar main"');
|
|
|
|
const tree8 = renderer.create(<Grid
|
|
rowsProp={["auto", "1fr", "auto"]}
|
|
columnsProp={[["100px","1fr"], "3fr", ["100px","1fr"]]}
|
|
areasProp={[
|
|
{ name: "header", start: [0, 0], end: [2, 0] },
|
|
{ name: "navbar", start: [0, 1], end: [0, 1] },
|
|
{ name: "main", start: [1, 1], end: [1, 1] },
|
|
{ name: "sidebar", start: [2, 1], end: [2, 1] },
|
|
{ name: "footer", start: [0, 2], end: [2, 2] }
|
|
]} />).toJSON();
|
|
expect(tree8).toHaveStyleRule('grid-template-areas', '"header header header" "navbar main sidebar" "footer footer footer"');
|
|
expect(tree8).toHaveStyleRule('grid-template-columns', 'minmax(100px,1fr) 3fr minmax(100px,1fr)');
|
|
expect(tree8).toHaveStyleRule('grid-template-rows', 'auto 1fr auto');
|
|
}); */
|
|
});
|