Refactor ClipLoader to use shared specs

__tests__/ClipLoader-tests.tsx

@@ -1,97 +1,39 @@
 import * as React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { matchers } from '@emotion/jest';
+import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
 import ClipLoader from "../src/ClipLoader";
-import { LoaderSizeProps } from "../src/interfaces";
 import { sizeDefaults } from "../src/helpers";
+import { commonSpecs, cssSpecs, lengthSpecs } from "./sharedSpecs";
 
 describe("ClipLoader", () => {
-  let loader: ReactWrapper<LoaderSizeProps, null, ClipLoader>;
-  let props: LoaderSizeProps;
   const defaultColor = "#000000";
   const defaultSize = 35;
   const defaultUnit = "px";
 
-  it("should match snapshot", () => {
-    loader = mount(<ClipLoader />);
-    expect(loader).toMatchSnapshot();
-  });
-
-  it("should contain default props if no props are passed", () => {
-    props = loader.props();
-    expect(props).toEqual(sizeDefaults(defaultSize));
-  });
+  commonSpecs(ClipLoader, sizeDefaults(defaultSize));
+  cssSpecs(ClipLoader);
 
   it("parent span should contain styles created using default props", () => {
+    const loader = mount(<ClipLoader />);
     expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
     expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
     expect(loader).toHaveStyleRule("border-color", defaultColor);
   });
 
-  it("should render null if loading prop is set as false", () => {
-    loader = mount(<ClipLoader loading={false} />);
-    expect(loader.isEmptyRender()).toBe(true);
-  });
-
   it("should render the correct color based on prop", () => {
     const color = "#e2e2e2";
-    loader = mount(<ClipLoader color={color} />);
+    const loader = mount(<ClipLoader color={color} />);
     expect(loader).not.toHaveStyleRule("border-color", defaultColor);
     expect(loader).toHaveStyleRule("border-color", color);
   });
 
-  it("should render the correct size based on props", () => {
-    const size = 18;
-    loader = mount(<ClipLoader size={size} />);
+  const sizeExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
     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}`);
-  });
-
-  describe("size props", () => {
-    it("should render the size with px unit when size is a number", () => {
-      const size = 18;
-      loader = mount(<ClipLoader 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}`);
-    });
-
-    it("should render the size as is when size is a string with valid css unit", () => {
-      const size = "18px";
-      loader = mount(<ClipLoader size={size} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${size}`);
-      expect(loader).toHaveStyleRule("width", `${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(<ClipLoader size={size} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`);
-    });
-  });
-
-  it("should render the css override based on props", () => {
-    loader = mount(
-      <ClipLoader css={"position: absolute; width: 100px; height: 200px; color: blue;"} />
-    );
-    expect(loader).not.toHaveStyleRule("position", "relative");
-    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");
-    expect(loader).toHaveStyleRule("color", "blue");
-  });
+    expect(loader).toHaveStyleRule("height", `${length}${unit || defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${length}${unit || defaultUnit}`);
+  };
+  lengthSpecs(ClipLoader, "size", sizeExpectStatements);
 });

__tests__/__snapshots__/ClipLoader-tests.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClipLoader should match snapshot 1`] = `
+exports[`ClipLoader common specs should match snapshot 1`] = `
 @keyframes animation-0 {
   0% {
     -webkit-transform: rotate(0deg) scale(1);