Refactor to use shared spec: SquareLoader

__tests__/SquareLoader-tests.tsx

@@ -1,101 +1,40 @@
 import * as React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { matchers } from '@emotion/jest';
+import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
 import SquareLoader from "../src/SquareLoader";
-import { LoaderSizeProps } from "../src/interfaces";
 import { sizeDefaults } from "../src/helpers";
+import { commonSpecs, cssSpecs, lengthSpecs } from "./sharedSpecs";
 
 describe("SquareLoader", () => {
-  let loader: ReactWrapper;
-  let props: LoaderSizeProps;
   const defaultSize = 50;
   const defaultColor = "#000000";
   const defaultUnit = "px";
 
-  it("should match snapshot", () => {
-    loader = mount(<SquareLoader />);
-    expect(loader).toMatchSnapshot();
-  });
-
-  it("should contain default props if no props are passed", () => {
-    props = loader.props();
-    expect(props).toEqual(sizeDefaults(defaultSize));
-  });
+  commonSpecs(SquareLoader, sizeDefaults(defaultSize));
+  cssSpecs(SquareLoader);
 
   it("should contain styles created using default props", () => {
+    const loader = mount(<SquareLoader />);
     expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
     expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
     expect(loader).toHaveStyleRule("background-color", defaultColor);
   });
 
-  it("should render null if loading prop is set as false", () => {
-    loader = mount(<SquareLoader loading={false} />);
-    expect(loader.isEmptyRender()).toBe(true);
-  });
-
   it("should render the correct color based on props", () => {
     const color = "#e2e2e2";
-    loader = mount(<SquareLoader color={color} />);
+    const loader = mount(<SquareLoader color={color} />);
     expect(loader).not.toHaveStyleRule("background-color", defaultColor);
     expect(loader).toHaveStyleRule("background-color", color);
   });
 
-  it("should render the correct size based on props", () => {
-    const size = 21;
-    loader = mount(<SquareLoader 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(<SquareLoader 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(<SquareLoader 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(<SquareLoader 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(<SquareLoader css={"position: absolute; color: blue; display: block"} />);
-
-    expect(loader).not.toHaveStyleRule("display", "inline-block");
-    expect(loader).toHaveStyleRule("display", "block");
-    expect(loader).toHaveStyleRule("position", "absolute");
-    expect(loader).toHaveStyleRule("color", "blue");
-  });
+    expect(loader).toHaveStyleRule("height", `${length}${unit || defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${length}${unit || defaultUnit}`);
+  };
+  lengthSpecs(SquareLoader, "size", sizeExpectStatements);
 });

__tests__/__snapshots__/SquareLoader-tests.tsx.snap

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