create css prop shared specs

__tests__/BarLoader-tests.tsx

@@ -4,9 +4,8 @@ import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
 import BarLoader from "../src/BarLoader";
-import { commonSpecs } from "./sharedSpecs/commonSpecs";
+import { commonSpecs, speedMultiplierSpecs } from "./sharedSpecs/";
 import { heightWidthDefaults } from "../src/helpers";
-import { speedMultiplierSpecs } from "./sharedSpecs/speedMultiplerSpecs";
 
 describe("BarLoader", () => {
   const defaultColor = "#000000";
@@ -115,12 +114,4 @@ describe("BarLoader", () => {
     );
   };
   speedMultiplierSpecs(BarLoader, speedMultiplierExpectStatements);
-
-  it("should render the css override based on props", () => {
-    const loader = mount(<BarLoader css={"position: absolute; overflow: scroll;"} />);
-    expect(loader).not.toHaveStyleRule("position", "relative");
-    expect(loader).toHaveStyleRule("position", "absolute");
-    expect(loader).not.toHaveStyleRule("overflow", "hidden");
-    expect(loader).toHaveStyleRule("overflow", "scroll");
-  });
 });

__tests__/BeatLoader-tests.tsx

@@ -5,7 +5,7 @@ expect.extend(matchers);
 
 import BeatLoader from "../src/BeatLoader";
 import { sizeMarginDefaults } from "../src/helpers";
-import { commonSpecs } from "./sharedSpecs/commonSpecs";
+import { commonSpecs, cssSpecs } from "./sharedSpecs";
 
 describe("BeatLoader", () => {
   const defaultColor = "#000000";
@@ -14,6 +14,7 @@ describe("BeatLoader", () => {
   const defaultUnit = "px";
 
   commonSpecs(BeatLoader, sizeMarginDefaults(defaultSize));
+  cssSpecs(BeatLoader);
 
   it("should contain styles created using default props", () => {
     const loader = mount(<BeatLoader />);
@@ -102,10 +103,4 @@ describe("BeatLoader", () => {
       expect(loader.find("span span")).toHaveStyleRule("margin", `${length}${defaultUnit}`);
     });
   });
-
-  it("should render the css override based on props", () => {
-    const loader = mount(<BeatLoader css={"position: absolute; overflow: scroll;"} />);
-    expect(loader).toHaveStyleRule("position", "absolute");
-    expect(loader).toHaveStyleRule("overflow", "scroll");
-  });
 });

__tests__/BounceLoader-tests.tsx

@@ -5,7 +5,7 @@ expect.extend(matchers);
 
 import BounceLoader from "../src/BounceLoader";
 import { sizeDefaults } from "../src/helpers";
-import { commonSpecs } from "./sharedSpecs/commonSpecs";
+import { commonSpecs } from "./sharedSpecs";
 
 describe("BounceLoader", () => {
   const defaultColor = "#000000";

__tests__/PulseLoader-test.tsx

@@ -5,8 +5,7 @@ expect.extend(matchers);
 
 import PulseLoader from "../src/PulseLoader";
 import { sizeMarginDefaults } from "../src/helpers";
-import { commonSpecs } from "./sharedSpecs/commonSpecs";
-import { speedMultiplierSpecs } from "./sharedSpecs/speedMultiplerSpecs";
+import { commonSpecs, speedMultiplierSpecs } from "./sharedSpecs";
 
 describe("PulseLoader", () => {
   const defaultSize = 15;

__tests__/__snapshots__/BarLoader-tests.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BarLoader should match snapshot 1`] = `
+exports[`BarLoader common specs should match snapshot 1`] = `
 @keyframes animation-0 {
   0% {
     left: -35%;

__tests__/__snapshots__/BeatLoader-tests.tsx.snap

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

__tests__/__snapshots__/BounceLoader-tests.tsx.snap

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

__tests__/__snapshots__/PulseLoader-test.tsx.snap

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

__tests__/sharedSpecs/commonSpecs.tsx

@@ -3,19 +3,23 @@ import { mount } from "enzyme";
 import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
-export function commonSpecs(Loader: typeof React.Component, defaultProps: unknown): void {
-  it("should match snapshot", () => {
-    const loader = mount(<Loader />);
-    expect(loader).toMatchSnapshot();
-  });
+function commonSpecs(Loader: typeof React.Component, defaultProps: unknown): void {
+  describe("common specs", () => {
+    it("should match snapshot", () => {
+      const loader = mount(<Loader />);
+      expect(loader).toMatchSnapshot();
+    });
 
-  it("should contain default props if no props are passed", () => {
-    const loader = mount(<Loader />);
-    expect(loader.props()).toEqual(defaultProps);
-  });
+    it("should contain default props if no props are passed", () => {
+      const loader = mount(<Loader />);
+      expect(loader.props()).toEqual(defaultProps);
+    });
 
-  it("should render null if loading prop is set as false", () => {
-    const loader = mount(<Loader loading={false} />);
-    expect(loader.isEmptyRender()).toBe(true);
+    it("should render null if loading prop is set as false", () => {
+      const loader = mount(<Loader loading={false} />);
+      expect(loader.isEmptyRender()).toBe(true);
+    });
   });
 }
+
+export default commonSpecs;

__tests__/sharedSpecs/cssSpecs.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { css } from "@emotion/react";
+import { mount } from "enzyme";
+
+function cssSpecs(Loader: typeof React.Component): void {
+  describe("css props", () => {
+    it("should apply the override if passed a string", () => {
+      const loader = mount(
+        <Loader css={"backface-visibility: hidden; box-decoration-break: slice;"} />
+      );
+      expect(loader).toHaveStyleRule("backface-visibility", "hidden");
+      expect(loader).toHaveStyleRule("box-decoration-break", "slice");
+    });
+
+    it("should apply the override if passed an object", () => {
+      const loader = mount(
+        <Loader css={{ backfaceVisibility: "hidden", boxDecorationBreak: "slice" }} />
+      );
+      expect(loader).toHaveStyleRule("backface-visibility", "hidden");
+      expect(loader).toHaveStyleRule("box-decoration-break", "slice");
+    });
+
+    it("should apply the override if passed an css template using emotion", () => {
+      const loader = mount(
+        <Loader
+          css={css`
+            backface-visibility: hidden;
+            box-decoration-break: slice;
+          `}
+        />
+      );
+      expect(loader).toHaveStyleRule("backface-visibility", "hidden");
+      expect(loader).toHaveStyleRule("box-decoration-break", "slice");
+    });
+  });
+}
+
+export default cssSpecs;

__tests__/sharedSpecs/index.ts

@@ -0,0 +1,3 @@
+export { default as commonSpecs } from "./commonSpecs";
+export { default as cssSpecs } from "./cssSpecs";
+export { default as speedMultiplierSpecs } from "./speedMultiplierSpecs";

__tests__/sharedSpecs/speedMultiplerSpecs.tsx → __tests__/sharedSpecs/speedMultiplierSpecs.tsx

@@ -5,10 +5,7 @@ expect.extend(matchers);
 
 type ExpectFunc = (loader: ReactWrapper, multiplier: number) => void;
 
-export function speedMultiplierSpecs(
-  Loader: typeof React.Component,
-  expectFunction: ExpectFunc
-): void {
+function speedMultiplierSpecs(Loader: typeof React.Component, expectFunction: ExpectFunc): void {
   describe("speedMultipler prop", () => {
     let loader = mount(<Loader />);
 
@@ -35,3 +32,5 @@ export function speedMultiplierSpecs(
     });
   });
 }
+
+export default speedMultiplierSpecs;