fix moonloader tests

davidhu2000 · Aug 6, 2019 · bc0b845 · bc0b845
1 parent bc112fd
commit bc0b845
Showing 1 changed file with 48 additions and 25 deletions.
diff --git a/__tests__/MoonLoader-tests.tsx b/__tests__/MoonLoader-tests.tsx
@@ -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 />);
@@ -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");