Skip to content

Commit

Permalink
Refactor to use shared spec: SyncLoader
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidhu2000
davidhu2000 committed Feb 22, 2021
1 parent d2580eb commit 0b39c07
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 139 deletions.
172 changes: 34 additions & 138 deletions __tests__/SyncLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,51 @@
import * as React from "react";
import { mount, ReactWrapper } from "enzyme";
import { matchers } from '@emotion/jest';
import { matchers } from "@emotion/jest";
expect.extend(matchers);

import SyncLoader from "../src/SyncLoader";
import { LoaderSizeMarginProps } from "../src/interfaces";
import { sizeMarginDefaults } from "../src/helpers";
import { commonSpecs, cssSpecs, lengthSpecs } from "./sharedSpecs";

describe("SyncLoader", () => {
let loader: ReactWrapper;
let props: LoaderSizeMarginProps;
const defaultSize = 15;
const defaultMargin = 2;
const defaultColor = "#000000";
const defaultUnit = "px";

it("should match snapshot", () => {
loader = mount(<SyncLoader />);
expect(loader).toMatchSnapshot();
});

it("should contain default props if no props are passed", () => {
props = loader.props();
expect(props).toEqual(sizeMarginDefaults(defaultSize));
});
commonSpecs(SyncLoader, sizeMarginDefaults(defaultSize));
cssSpecs(SyncLoader);

it("should contain styles created using default props", () => {
const loader = mount(<SyncLoader />);
for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).toHaveStyleRule("background-color", defaultColor);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"height",
`${defaultSize}${defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"width",
`${defaultSize}${defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
}
});

it("should render null if loading prop is set as false", () => {
loader = mount(<SyncLoader loading={false} />);
expect(loader.isEmptyRender()).toBe(true);
});

it("should render the correct color based on prop", () => {
const color = "#e2e2e2";
loader = mount(<SyncLoader color={color} />);
const loader = mount(<SyncLoader color={color} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule("background-color", defaultColor);
expect(loader.find("span span").at(i)).toHaveStyleRule("background-color", color);
}
});

it("should render the correct size based on props", () => {
const size = 18;
loader = mount(<SyncLoader size={size} />);

const sizeExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"height",
Expand All @@ -69,120 +56,29 @@ describe("SyncLoader", () => {
`${defaultSize}${defaultUnit}`
);

expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${size}${defaultUnit}`);
expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${size}${defaultUnit}`);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"height",
`${length}${unit || defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"width",
`${length}${unit || defaultUnit}`
);
}
});

describe("size props", () => {
it("should render the size with px unit when size is a number", () => {
const size = 18;
loader = mount(<SyncLoader size={size} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"height",
`${defaultSize}${defaultUnit}`
);
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"width",
`${defaultSize}${defaultUnit}`
);

expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${size}${defaultUnit}`);
expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${size}${defaultUnit}`);
}
});

it("should render the size as is when size is a string with valid css unit", () => {
const size = "18px";
loader = mount(<SyncLoader size={size} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"height",
`${defaultSize}${defaultUnit}`
);
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"width",
`${defaultSize}${defaultUnit}`
);

expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${size}`);
expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${size}`);
}
});
};
lengthSpecs(SyncLoader, "size", sizeExpectStatements);

it("should render the size with default unit of px when the unit is incorrect", () => {
const length = 18;
const unit = "ad";
const size = `${length}${unit}`;
loader = mount(<SyncLoader size={size} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"height",
`${defaultSize}${defaultUnit}`
);
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"width",
`${defaultSize}${defaultUnit}`
);

expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${length}${defaultUnit}`);
expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${length}${defaultUnit}`);
}
});
});

describe("margin props", () => {
it("should render the margin with px unit when margin is a number", () => {
const margin = 18;
loader = mount(<SyncLoader margin={margin} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule("margin", `${margin}${defaultUnit}`);
}
});

it("should render the margin as is when margin is a string with valid css unit", () => {
const margin = "18px";
loader = mount(<SyncLoader margin={margin} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule("margin", `${margin}`);
}
});

it("should render the margin with default unit of px when the unit is incorrect", () => {
const length = 18;
const unit = "ad";
const margin = `${length}${unit}`;
loader = mount(<SyncLoader margin={margin} />);

for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule("margin", `${length}${defaultUnit}`);
}
});
});

it("should render the css override based on props", () => {
loader = mount(<SyncLoader css={"position: fixed; width: 100px; color: blue;"} />);

expect(loader).toHaveStyleRule("position", "fixed");
expect(loader).toHaveStyleRule("width", "100px");
expect(loader).toHaveStyleRule("color", "blue");
});
const marginExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"margin",
`${length}${unit || defaultUnit}`
);
}
};
lengthSpecs(SyncLoader, "margin", marginExpectStatements);
});
2 changes: 1 addition & 1 deletion __tests__/__snapshots__/SyncLoader-tests.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SyncLoader should match snapshot 1`] = `
exports[`SyncLoader common specs should match snapshot 1`] = `
@keyframes animation-0 {
33% {
-webkit-transform: translateY(10px);
Expand Down

0 comments on commit 0b39c07

Please sign in to comment.