Skip to content

Commit

Permalink
Update hash/moon loader tests to use default variables (#85)
Browse files Browse the repository at this point in the history 
* update hashloader tests

* fix moonloader tests
  • Loading branch information
@davidhu2000
davidhu2000 authored Aug 7, 2019
1 parent fed3ac8 commit 7fb0b02
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 44 deletions.
100 changes: 81 additions & 19 deletions __tests__/HashLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import { sizeDefaults } from "../src/helpers";
describe("HashLoader", () => {
let loader: ReactWrapper;
let props: LoaderSizeProps;
let defaultColor: string = "#000000";
let defaultSize: number = 50;
let defaultUnit: string = "px";

it("should match snapshot", () => {
loader = mount(<HashLoader />);
Expand All @@ -18,17 +21,26 @@ describe("HashLoader", () => {

it("should contain default props if no props are passed", () => {
props = loader.props();
expect(props).toEqual(sizeDefaults(50));
expect(props).toEqual(sizeDefaults(defaultSize));
});

it("parent div should contain styles created using default props", () => {
expect(loader).toHaveStyleRule("height", "50px");
expect(loader).toHaveStyleRule("width", "50px");
it("should contain styles created using default props", () => {
expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);

for (let i: number = 0; i < 2; i++) {
expect(loader.find("div div").at(0)).toHaveStyleRule("height", "10px");
expect(loader.find("div div").at(0)).toHaveStyleRule("width", "10px");
expect(loader.find("div div").at(0)).toHaveStyleRule("border-radius", "5px");
expect(loader.find("div div").at(0)).toHaveStyleRule(
"height",
`${defaultSize / 5}${defaultUnit}`
);
expect(loader.find("div div").at(0)).toHaveStyleRule(
"width",
`${defaultSize / 5}${defaultUnit}`
);
expect(loader.find("div div").at(0)).toHaveStyleRule(
"border-radius",
`${defaultSize / 10}${defaultUnit}`
);
}
});

Expand All @@ -37,27 +49,77 @@ describe("HashLoader", () => {
expect(loader.isEmptyRender()).toBe(true);
});

it("renders the correct size for the parent div based on props", () => {
loader = mount(<HashLoader size={20} />);
expect(loader).not.toHaveStyleRule("height", "50px");
expect(loader).not.toHaveStyleRule("width", "50px");
expect(loader).toHaveStyleRule("height", "20px");
expect(loader).toHaveStyleRule("width", "20px");
it("should render the correct size based on props", () => {
let size: number = 20;

loader = mount(<HashLoader size={size} />);
expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("height", `${size}${defaultUnit}`);
expect(loader).toHaveStyleRule("width", `${size}${defaultUnit}`);

for (let i: number = 0; i < 2; i++) {
expect(loader.find("div div").at(i)).toHaveStyleRule("height", "4px");
expect(loader.find("div div").at(i)).toHaveStyleRule("width", "4px");
expect(loader.find("div div").at(i)).toHaveStyleRule("border-radius", "2px");
expect(loader.find("div div").at(i)).not.toHaveStyleRule(
"height",
`${defaultSize / 5}${defaultUnit}`
);
expect(loader.find("div div").at(i)).not.toHaveStyleRule(
"width",
`${defaultSize / 5}${defaultUnit}`
);
expect(loader.find("div div").at(i)).not.toHaveStyleRule(
"border-radius",
`${defaultSize / 10}${defaultUnit}`
);

expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${size / 5}${defaultUnit}`);
expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${size / 5}${defaultUnit}`);
expect(loader.find("div div").at(i)).toHaveStyleRule(
"border-radius",
`${size / 10}${defaultUnit}`
);
}
});

it("should render the correct sizeUnit based on props", () => {
let unit: string = "%";

loader = mount(<HashLoader sizeUnit={unit} />);
expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("height", `${defaultSize}${unit}`);
expect(loader).toHaveStyleRule("width", `${defaultSize}${unit}`);

for (let i: number = 0; i < 2; i++) {
expect(loader.find("div div").at(i)).not.toHaveStyleRule(
"height",
`${defaultSize / 5}${defaultUnit}`
);
expect(loader.find("div div").at(i)).not.toHaveStyleRule(
"width",
`${defaultSize / 5}${defaultUnit}`
);
expect(loader.find("div div").at(i)).not.toHaveStyleRule(
"border-radius",
`${defaultSize / 10}${defaultUnit}`
);

expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${defaultSize / 5}${unit}`);
expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize / 5}${unit}`);
expect(loader.find("div div").at(i)).toHaveStyleRule(
"border-radius",
`${defaultSize / 10}${unit}`
);
}
});

it("renders the css override based on props", () => {
it("should render the css override based on props", () => {
loader = mount(
<HashLoader css={"position: absolute; width: 100px; height: 200px; color: blue;"} />
);
expect(loader).not.toHaveStyleRule("position", "relative");
expect(loader).not.toHaveStyleRule("width", "50px");
expect(loader).not.toHaveStyleRule("height", "50px");
expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("position", "absolute");
expect(loader).toHaveStyleRule("width", "100px");
expect(loader).toHaveStyleRule("height", "200px");
Expand Down
73 changes: 48 additions & 25 deletions __tests__/MoonLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ import { sizeDefaults } from "../src/helpers";
describe("MoonLoader", () => {
let loader: ReactWrapper;
let props: LoaderSizeProps;
let defaultColor: string = "#000000";
let defaultSize: number = 60;
let defaultUnit: string = "px";
let defaultWrapperSize: number = defaultSize + (defaultSize / 7) * 2;

it("should match snapshot", () => {
loader = mount(<MoonLoader />);
Expand All @@ -18,51 +22,70 @@ describe("MoonLoader", () => {

it("should contain default props if no props are passed", () => {
props = loader.props();
expect(props).toEqual(sizeDefaults(60));
expect(props).toEqual(sizeDefaults(defaultSize));
});

it("should contain styles created using default props", () => {
let wrapperSize: number = 60 + (60 / 7) * 2;
let size: number = 60 / 7;
expect(loader).toHaveStyleRule("height", `${wrapperSize}px`);
expect(loader).toHaveStyleRule("width", `${wrapperSize}px`);
expect(loader.find("div div").at(0)).toHaveStyleRule("background-color", "#000000");
expect(loader.find("div div").at(0)).toHaveStyleRule("height", `${size}px`);
expect(loader.find("div div").at(0)).toHaveStyleRule("width", `${size}px`);
expect(loader.find("div div").at(1)).toHaveStyleRule("border", `${size}px solid #000000`);
expect(loader.find("div div").at(1)).toHaveStyleRule("height", `60px`);
expect(loader.find("div div").at(1)).toHaveStyleRule("width", `60px`);
expect(loader).toHaveStyleRule("height", `${defaultWrapperSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("width", `${defaultWrapperSize}${defaultUnit}`);
expect(loader.find("div div").at(0)).toHaveStyleRule("background-color", defaultColor);
expect(loader.find("div div").at(0)).toHaveStyleRule(
"height",
`${defaultSize / 7}${defaultUnit}`
);
expect(loader.find("div div").at(0)).toHaveStyleRule(
"width",
`${defaultSize / 7}${defaultUnit}`
);
expect(loader.find("div div").at(1)).toHaveStyleRule(
"border",
`${defaultSize / 7}${defaultUnit} solid ${defaultColor}`
);
expect(loader.find("div div").at(1)).toHaveStyleRule("height", `60${defaultUnit}`);
expect(loader.find("div div").at(1)).toHaveStyleRule("width", `60${defaultUnit}`);
});

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

it("renders the correct color based on prop", () => {
loader = mount(<MoonLoader color="#e2e2e2" />);
expect(loader.find("div div")).not.toHaveStyleRule("background-color", "#000000");
expect(loader.find("div div")).toHaveStyleRule("background-color", "#e2e2e2");
it("should render the correct color based on prop", () => {
let color: string = "#e2e2e2";
loader = mount(<MoonLoader color={color} />);
expect(loader.find("div div")).not.toHaveStyleRule("background-color", defaultColor);
expect(loader.find("div div")).toHaveStyleRule("background-color", color);
});

it("renders the correct size based on props", () => {
it("should render the correct size based on props", () => {
let size: number = 21;

loader = mount(<MoonLoader size={21} />);
let defaultSize: number = 60 + (60 / 7) * 2;
let size: number = 21 + (21 / 7) * 2;
expect(loader).not.toHaveStyleRule("height", `${defaultSize}px`);
expect(loader).not.toHaveStyleRule("width", `${defaultSize}px`);
expect(loader).toHaveStyleRule("height", `${size}px`);
expect(loader).toHaveStyleRule("width", `${size}px`);
let wrapperSize: number = 21 + (21 / 7) * 2;
expect(loader).not.toHaveStyleRule("height", `${defaultWrapperSize}${defaultUnit}`);
expect(loader).not.toHaveStyleRule("width", `${defaultWrapperSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("height", `${wrapperSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("width", `${wrapperSize}${defaultUnit}`);
});

it("should render the correct sizeUnit based on props", () => {
let unit: string = "%";

loader = mount(<MoonLoader sizeUnit={unit} />);
expect(loader).not.toHaveStyleRule("height", `${defaultWrapperSize}${defaultUnit}`);
expect(loader).not.toHaveStyleRule("width", `${defaultWrapperSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("height", `${defaultWrapperSize}${unit}`);
expect(loader).toHaveStyleRule("width", `${defaultWrapperSize}${unit}`);
});

it("renders the css override based on props", () => {
it("should render the css override based on props", () => {
loader = mount(
<MoonLoader css={"position: absolute; width: 100px; height: 200px; color: blue;"} />
);
let defaultSize: number = 60 + (60 / 7) * 2;
expect(loader).not.toHaveStyleRule("position", "relative");
expect(loader).not.toHaveStyleRule("width", `${defaultSize}px`);
expect(loader).not.toHaveStyleRule("height", `${defaultSize}px`);
expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("position", "absolute");
expect(loader).toHaveStyleRule("width", "100px");
expect(loader).toHaveStyleRule("height", "200px");
Expand Down

0 comments on commit 7fb0b02

Please sign in to comment.