Testing (#80)

* add PacmanLoader tests * add propagate loader tests * fix test file name typo * add pulseloader tests * add RingLoader tests * add RiseLoader tests, fix missing transofrm key in keyframes * add rotateloader tests * add scale loader tests * add skew loader tests * add square loader tests * add sync loader tests * refactor pacman tests to use variables * refactor tests to use variables * refactor using variables * refactor pacman loader * fix propagateloader * fix test descriptions
davidhu2000 · Aug 5, 2019 · b041f98 · b041f98
1 parent d7e5738
commit b041f98
Show file tree

Hide file tree

Showing 21 changed files with 2,185 additions and 2 deletions.
diff --git a/__tests__/PacmanLoader-tests.tsx b/__tests__/PacmanLoader-tests.tsx
@@ -0,0 +1,96 @@
+import * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { matchers } from "jest-emotion";
+expect.extend(matchers);
+
+import PacmanLoader from "../src/PacmanLoader";
+import { LoaderSizeMarginProps } from "../src/interfaces";
+import { sizeMarginDefaults } from "../src/helpers";
+
+describe("PacmanLoader", () => {
+  let loader: ReactWrapper;
+  let props: LoaderSizeMarginProps;
+  let defaultSize: number = 25;
+  let defaultColor: string = "#000000";
+
+  it("should match snapshot", () => {
+    loader = mount(<PacmanLoader />);
+    expect(loader).toMatchSnapshot();
+  });
+
+  it("should contain default props if no props are passed", () => {
+    props = loader.props();
+    expect(props).toEqual(sizeMarginDefaults(defaultSize));
+  });
+
+  it("should contain styles created using default props", () => {
+    expect(loader).toHaveStyleRule("height", `${defaultSize}px`);
+    expect(loader).toHaveStyleRule("width", `${defaultSize}px`);
+
+    expect(loader.find("div div").at(0)).toHaveStyleRule("border-radius", `${defaultSize}px`);
+    expect(loader.find("div div").at(1)).toHaveStyleRule("border-radius", `${defaultSize}px`);
+
+    for (let i: number = 2; i < 6; i++) {
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${defaultSize / 3}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize / 3}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("margin", "2px");
+      expect(loader.find("div div").at(i)).toHaveStyleRule("top", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("left", `${defaultSize * 4}px`);
+    }
+  });
+
+  it("should render null if loading prop is set as false", () => {
+    loader = mount(<PacmanLoader loading={false} />);
+    expect(loader.isEmptyRender()).toBe(true);
+  });
+
+  it("should render the correct color based on prop", () => {
+    let color: string = "#e2e2e2";
+    loader = mount(<PacmanLoader color={color} />);
+    for (let i: number = 2; i < 6; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("background-color", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", color);
+    }
+  });
+
+  it("should render the correct size based on props", () => {
+    let size: number = 18;
+    loader = mount(<PacmanLoader size={size} />);
+    expect(loader).not.toHaveStyleRule("width", `${defaultSize}px`);
+    expect(loader).toHaveStyleRule("width", `${size}px`);
+
+    expect(loader.find("div div").at(0)).not.toHaveStyleRule(
+      "border-radius",
+      `${defaultSize / 3}px`
+    );
+    expect(loader.find("div div").at(0)).toHaveStyleRule("border-radius", `${size}px`);
+    expect(loader.find("div div").at(1)).not.toHaveStyleRule(
+      "border-radius",
+      `${defaultSize / 3}px`
+    );
+    expect(loader.find("div div").at(1)).toHaveStyleRule("border-radius", `${size}px`);
+
+    for (let i: number = 2; i < 6; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("height", `${defaultSize / 3}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("width", `${defaultSize / 3}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("top", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("left", `${defaultSize * 4}px`);
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${size / 3}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${size / 3}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("top", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("left", `${size * 4}px`);
+    }
+  });
+
+  it("should render the css override based on props", () => {
+    loader = mount(
+      <PacmanLoader css={"position: fixed; width: 100px; height: 200px; color: blue;"} />
+    );
+    expect(loader).not.toHaveStyleRule("position", "relative");
+    expect(loader).not.toHaveStyleRule("width", "25px");
+    expect(loader).toHaveStyleRule("position", "fixed");
+    expect(loader).toHaveStyleRule("width", "100px");
+  });
+});
diff --git a/__tests__/PropagateLoader-tests.tsx b/__tests__/PropagateLoader-tests.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { matchers } from "jest-emotion";
+expect.extend(matchers);
+
+import PropagateLoader from "../src/PropagateLoader";
+import { LoaderSizeProps } from "../src/interfaces";
+import { sizeDefaults } from "../src/helpers";
+
+describe("PropagateLoader", () => {
+  let loader: ReactWrapper;
+  let props: LoaderSizeProps;
+  let defaultSize: number = 15;
+  let defaultColor: string = "#000000";
+
+  it("should match snapshot", () => {
+    loader = mount(<PropagateLoader />);
+    expect(loader).toMatchSnapshot();
+  });
+
+  it("should contain default props if no props are passed", () => {
+    props = loader.props();
+    expect(props).toEqual(sizeDefaults(15));
+  });
+
+  it("should contain styles created using default props", () => {
+    for (let i: number = 0; i < 6; i++) {
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("font-size", `${defaultSize / 3}px`);
+    }
+  });
+
+  it("should render null if loading prop is set as false", () => {
+    loader = mount(<PropagateLoader loading={false} />);
+    expect(loader.isEmptyRender()).toBe(true);
+  });
+
+  it("should render the correct color based on props", () => {
+    let color: string = "#e2e2e2";
+    loader = mount(<PropagateLoader color={color} />);
+
+    for (let i: number = 0; i < 6; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("background", defaultColor);
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background", color);
+    }
+  });
+
+  it("should render the correct size based on props", () => {
+    let size: number = 21;
+    loader = mount(<PropagateLoader size={size} />);
+
+    for (let i: number = 0; i < 6; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("width", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("font-size", `${defaultSize / 3}px`);
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("font-size", `${size / 3}px`);
+    }
+  });
+
+  it("should render the css override based on props", () => {
+    loader = mount(
+      <PropagateLoader css={"position: absolute; width: 100px; height: 200px; color: blue;"} />
+    );
+    expect(loader).not.toHaveStyleRule("position", "relative");
+    expect(loader).toHaveStyleRule("position", "absolute");
+    expect(loader).toHaveStyleRule("width", "100px");
+    expect(loader).toHaveStyleRule("height", "200px");
+    expect(loader).toHaveStyleRule("color", "blue");
+  });
+});
diff --git a/__tests__/PulseLoader-test.tsx b/__tests__/PulseLoader-test.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { matchers } from "jest-emotion";
+expect.extend(matchers);
+
+import PulseLoader from "../src/PulseLoader";
+import { LoaderSizeMarginProps } from "../src/interfaces";
+import { sizeMarginDefaults } from "../src/helpers";
+
+describe("PulseLoader", () => {
+  let loader: ReactWrapper;
+  let props: LoaderSizeMarginProps;
+  let defaultSize: number = 15;
+  let defaultColor: string = "#000000";
+
+  it("should match snapshot", () => {
+    loader = mount(<PulseLoader />);
+    expect(loader).toMatchSnapshot();
+  });
+
+  it("should contain default props if no props are passed", () => {
+    props = loader.props();
+    expect(props).toEqual(sizeMarginDefaults(defaultSize));
+  });
+
+  it("should contain styles created using default props", () => {
+    for (let i: number = 0; i < 3; i++) {
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("margin", "2px");
+    }
+  });
+
+  it("should render null if loading prop is set as false", () => {
+    loader = mount(<PulseLoader loading={false} />);
+    expect(loader.isEmptyRender()).toBe(true);
+  });
+
+  it("should render the correct color based on prop", () => {
+    let color: string = "#e2e2e2";
+    loader = mount(<PulseLoader color={color} />);
+    for (let i: number = 0; i < 3; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("background-color", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", color);
+    }
+  });
+
+  it("should render the correct size based on props", () => {
+    let size: number = 18;
+    loader = mount(<PulseLoader size={18} />);
+
+    for (let i: number = 0; i < 3; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("width", `${defaultSize}px`);
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${size}px`);
+    }
+  });
+
+  it("should render the css override based on props", () => {
+    loader = mount(<PulseLoader css={"position: fixed; width: 100px; color: blue;"} />);
+    expect(loader).toHaveStyleRule("position", "fixed");
+    expect(loader).toHaveStyleRule("width", "100px");
+    expect(loader).toHaveStyleRule("color", "blue");
+  });
+});
diff --git a/__tests__/RingLoader-tests.tsx b/__tests__/RingLoader-tests.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { matchers } from "jest-emotion";
+expect.extend(matchers);
+
+import RingLoader from "../src/RingLoader";
+import { LoaderSizeProps } from "../src/interfaces";
+import { sizeDefaults } from "../src/helpers";
+
+describe("RingLoader", () => {
+  let loader: ReactWrapper;
+  let props: LoaderSizeProps;
+  let defaultSize: number = 60;
+  let defaultColor: string = "#000000";
+
+  it("should match snapshot", () => {
+    loader = mount(<RingLoader />);
+    expect(loader).toMatchSnapshot();
+  });
+
+  it("should contain default props if no props are passed", () => {
+    props = loader.props();
+    expect(props).toEqual(sizeDefaults(60));
+  });
+
+  it("should contain styles created using default props", () => {
+    expect(loader).toHaveStyleRule("height", `${defaultSize}px`);
+    expect(loader).toHaveStyleRule("width", `${defaultSize}px`);
+
+    for (let i: number = 0; i < 2; i++) {
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("border", `6px solid ${defaultColor}`);
+    }
+  });
+
+  it("should render null if loading prop is set as false", () => {
+    loader = mount(<RingLoader loading={false} />);
+    expect(loader.isEmptyRender()).toBe(true);
+  });
+
+  it("should render the correct color based on props", () => {
+    let color: string = "#e2e2e2";
+    loader = mount(<RingLoader color={color} />);
+
+    for (let i: number = 0; i < 2; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule(
+        "border",
+        `6px solid ${defaultColor}`
+      );
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("border", `6px solid ${color}`);
+    }
+  });
+
+  it("should render the correct size based on props", () => {
+    let size: number = 21;
+    loader = mount(<RingLoader size={size} />);
+
+    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`);
+
+    for (let i: number = 0; i < 2; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("width", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("border", "6px solid #000000");
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule(
+        "border",
+        `${size / 10}px solid #000000`
+      );
+    }
+  });
+
+  it("should render the css override based on props", () => {
+    loader = mount(<RingLoader css={"position: absolute; color: blue;"} />);
+
+    expect(loader).not.toHaveStyleRule("position", "relative");
+    expect(loader).toHaveStyleRule("position", "absolute");
+    expect(loader).toHaveStyleRule("color", "blue");
+  });
+});
diff --git a/__tests__/RiseLoader-tests.tsx b/__tests__/RiseLoader-tests.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+import { mount, ReactWrapper } from "enzyme";
+import { matchers } from "jest-emotion";
+expect.extend(matchers);
+
+import RiseLoader from "../src/RiseLoader";
+import { LoaderSizeMarginProps } from "../src/interfaces";
+import { sizeMarginDefaults } from "../src/helpers";
+
+describe("RiseLoader", () => {
+  let loader: ReactWrapper;
+  let props: LoaderSizeMarginProps;
+  let defaultSize: number = 15;
+  let defaultColor: string = "#000000";
+
+  it("should match snapshot", () => {
+    loader = mount(<RiseLoader />);
+    expect(loader).toMatchSnapshot();
+  });
+
+  it("should contain default props if no props are passed", () => {
+    props = loader.props();
+    expect(props).toEqual(sizeMarginDefaults(defaultSize));
+  });
+
+  it("should contain styles created using default props", () => {
+    for (let i: number = 0; i < 5; i++) {
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("margin", "2px");
+    }
+  });
+
+  it("should render null if loading prop is set as false", () => {
+    loader = mount(<RiseLoader loading={false} />);
+    expect(loader.isEmptyRender()).toBe(true);
+  });
+
+  it("should render the correct color based on prop", () => {
+    let color: string = "#e2e2e2";
+    loader = mount(<RiseLoader color={color} />);
+    for (let i: number = 0; i < 5; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("background-color", defaultColor);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", color);
+    }
+  });
+
+  it("should render the correct size based on props", () => {
+    let size: number = 18;
+    loader = mount(<RiseLoader size={size} />);
+
+    for (let i: number = 0; i < 5; i++) {
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("height", `${defaultSize}px`);
+      expect(loader.find("div div").at(i)).not.toHaveStyleRule("width", `${defaultSize}px`);
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("height", `${size}px`);
+      expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${size}px`);
+    }
+  });
+
+  it("should render the css override based on props", () => {
+    loader = mount(<RiseLoader css={"position: fixed; width: 100px; color: blue;"} />);
+    expect(loader).toHaveStyleRule("position", "fixed");
+    expect(loader).toHaveStyleRule("width", "100px");
+    expect(loader).toHaveStyleRule("color", "blue");
+  });
+});