Refactor ClimbingBoxLoader to use shared specs

davidhu2000 · Feb 21, 2021 · 5e98482 · 5e98482
1 parent dbd5a46
commit 5e98482
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 70 deletions.
diff --git a/__tests__/ClimbingBoxLoader-tests.tsx b/__tests__/ClimbingBoxLoader-tests.tsx
@@ -1,34 +1,23 @@
 import * as React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { matchers } from '@emotion/jest';
+import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
 import ClimbingBoxLoader from "../src/ClimbingBoxLoader";
-import { LoaderSizeProps } from "../src/interfaces";
 import { sizeDefaults } from "../src/helpers";
+import { commonSpecs, cssSpecs, lengthSpecs } from "./sharedSpecs";
 
 describe("ClimbingBoxLoader", () => {
-  let loader: ReactWrapper<LoaderSizeProps, null, ClimbingBoxLoader>;
-  let props: LoaderSizeProps;
   const defaultColor = "#000000";
   const defaultSize = 15;
   const defaultUnit = "px";
 
-  it("should match snapshot", () => {
-    loader = mount(<ClimbingBoxLoader />);
-    expect(loader).toMatchSnapshot();
-  });
-
-  it("should contain default props if no props are passed", () => {
-    props = loader.props();
-    expect(props).toEqual(sizeDefaults(defaultSize));
-  });
+  commonSpecs(ClimbingBoxLoader, sizeDefaults(defaultSize));
+  cssSpecs(ClimbingBoxLoader);
 
-  it("parent span should contain styles created using default props", () => {
+  it("should contain styles created using default props", () => {
+    const loader = mount(<ClimbingBoxLoader />);
     expect(loader.find("span span")).toHaveStyleRule("font-size", `${defaultSize}${defaultUnit}`);
-  });
-
-  it("children span should contain styles created using default props", () => {
     expect(loader.find("span span span").at(0)).toHaveStyleRule(
       "border",
       `0.25em solid ${defaultColor}`
@@ -39,14 +28,9 @@ describe("ClimbingBoxLoader", () => {
     );
   });
 
-  it("should render null if loading prop is set as false", () => {
-    loader = mount(<ClimbingBoxLoader loading={false} />);
-    expect(loader.isEmptyRender()).toBe(true);
-  });
-
   it("should render the correct color based on prop", () => {
     const color = "#e2e2e2";
-    loader = mount(<ClimbingBoxLoader color={color} />);
+    const loader = mount(<ClimbingBoxLoader color={color} />);
 
     expect(loader.find("span span span").at(0)).not.toHaveStyleRule(
       "border",
@@ -64,50 +48,15 @@ describe("ClimbingBoxLoader", () => {
     );
   });
 
-  describe("size props", () => {
-    it("should render the size with px unit when size is a number", () => {
-      const size = 18;
-      loader = mount(<ClimbingBoxLoader size={size} />);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "font-size",
-        `${defaultSize}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("font-size", `${size}${defaultUnit}`);
-    });
-
-    it("should render the size as is when size is a string with valid css unit", () => {
-      const size = "18px";
-      loader = mount(<ClimbingBoxLoader size={size} />);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "font-size",
-        `${defaultSize}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("font-size", `${size}`);
-    });
-
-    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(<ClimbingBoxLoader size={size} />);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "font-size",
-        `${defaultSize}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("font-size", `${length}${defaultUnit}`);
-    });
-  });
-
-  it("should render the css override based on props", () => {
-    loader = mount(
-      <ClimbingBoxLoader css={"position: absolute; width: 100px; height: 200px; color: blue;"} />
+  const sizeExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
+    expect(loader.find("span span")).not.toHaveStyleRule(
+      "font-size",
+      `${defaultSize}${defaultUnit}`
     );
-    expect(loader).not.toHaveStyleRule("position", "relative");
-    expect(loader).not.toHaveStyleRule("width", "7.1em");
-    expect(loader).not.toHaveStyleRule("height", "7.1em");
-    expect(loader).toHaveStyleRule("position", "absolute");
-    expect(loader).toHaveStyleRule("width", "100px");
-    expect(loader).toHaveStyleRule("height", "200px");
-    expect(loader).toHaveStyleRule("color", "blue");
-  });
+    expect(loader.find("span span")).toHaveStyleRule(
+      "font-size",
+      `${length}${unit || defaultUnit}`
+    );
+  };
+  lengthSpecs(ClimbingBoxLoader, "size", sizeExpectStatements);
 });
diff --git a/__tests__/__snapshots__/ClimbingBoxLoader-tests.tsx.snap b/__tests__/__snapshots__/ClimbingBoxLoader-tests.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClimbingBoxLoader should match snapshot 1`] = `
+exports[`ClimbingBoxLoader common specs should match snapshot 1`] = `
 @keyframes animation-0 {
   0% {
     -webkit-transform: translate(0, -1em) rotate(-45deg);

diff --git a/__tests__/sharedSpecs/lengthSpecs.tsx b/__tests__/sharedSpecs/lengthSpecs.tsx
@@ -12,7 +12,7 @@ function lengthSpecs(
 ): void {
   const length = 18;
 
-  describe(`${property} prop`, () => {
+  describe(`${property} props`, () => {
     it(`should render the ${property} with px unit when size is a number`, () => {
       const props = { [property]: length };
       const loader = mount(<Loader {...props} />);