diff --git a/__tests__/SyncLoader-tests.tsx b/__tests__/SyncLoader-tests.tsx
index 173ca88d..ec353120 100644
--- a/__tests__/SyncLoader-tests.tsx
+++ b/__tests__/SyncLoader-tests.tsx
@@ -1,38 +1,33 @@
import * as React from "react";
import { mount, ReactWrapper } from "enzyme";
-import { matchers } from '@emotion/jest';
+import { matchers } from "@emotion/jest";
expect.extend(matchers);
import SyncLoader from "../src/SyncLoader";
-import { LoaderSizeMarginProps } from "../src/interfaces";
import { sizeMarginDefaults } from "../src/helpers";
+import { commonSpecs, cssSpecs, lengthSpecs } from "./sharedSpecs";
describe("SyncLoader", () => {
- let loader: ReactWrapper;
- let props: LoaderSizeMarginProps;
const defaultSize = 15;
const defaultMargin = 2;
const defaultColor = "#000000";
const defaultUnit = "px";
- it("should match snapshot", () => {
- loader = mount();
- expect(loader).toMatchSnapshot();
- });
-
- it("should contain default props if no props are passed", () => {
- props = loader.props();
- expect(props).toEqual(sizeMarginDefaults(defaultSize));
- });
+ commonSpecs(SyncLoader, sizeMarginDefaults(defaultSize));
+ cssSpecs(SyncLoader);
it("should contain styles created using default props", () => {
+ const loader = mount();
for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).toHaveStyleRule("background-color", defaultColor);
expect(loader.find("span span").at(i)).toHaveStyleRule(
"height",
`${defaultSize}${defaultUnit}`
);
- expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+ expect(loader.find("span span").at(i)).toHaveStyleRule(
+ "width",
+ `${defaultSize}${defaultUnit}`
+ );
expect(loader.find("span span").at(i)).toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
@@ -40,14 +35,9 @@ describe("SyncLoader", () => {
}
});
- it("should render null if loading prop is set as false", () => {
- loader = mount();
- expect(loader.isEmptyRender()).toBe(true);
- });
-
it("should render the correct color based on prop", () => {
const color = "#e2e2e2";
- loader = mount();
+ const loader = mount();
for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule("background-color", defaultColor);
@@ -55,10 +45,7 @@ describe("SyncLoader", () => {
}
});
- it("should render the correct size based on props", () => {
- const size = 18;
- loader = mount();
-
+ const sizeExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
for (let i = 0; i < 3; i++) {
expect(loader.find("span span").at(i)).not.toHaveStyleRule(
"height",
@@ -69,120 +56,29 @@ describe("SyncLoader", () => {
`${defaultSize}${defaultUnit}`
);
- expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${size}${defaultUnit}`);
- expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${size}${defaultUnit}`);
+ expect(loader.find("span span").at(i)).toHaveStyleRule(
+ "height",
+ `${length}${unit || defaultUnit}`
+ );
+ expect(loader.find("span span").at(i)).toHaveStyleRule(
+ "width",
+ `${length}${unit || defaultUnit}`
+ );
}
- });
-
- describe("size props", () => {
- it("should render the size with px unit when size is a number", () => {
- const size = 18;
- loader = mount();
-
- for (let i = 0; i < 3; i++) {
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "height",
- `${defaultSize}${defaultUnit}`
- );
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "width",
- `${defaultSize}${defaultUnit}`
- );
-
- expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${size}${defaultUnit}`);
- expect(loader.find("span span").at(i)).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();
-
- for (let i = 0; i < 3; i++) {
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "height",
- `${defaultSize}${defaultUnit}`
- );
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "width",
- `${defaultSize}${defaultUnit}`
- );
-
- expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${size}`);
- expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${size}`);
- }
- });
+ };
+ lengthSpecs(SyncLoader, "size", sizeExpectStatements);
- 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();
-
- for (let i = 0; i < 3; i++) {
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "height",
- `${defaultSize}${defaultUnit}`
- );
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "width",
- `${defaultSize}${defaultUnit}`
- );
-
- expect(loader.find("span span").at(i)).toHaveStyleRule("height", `${length}${defaultUnit}`);
- expect(loader.find("span span").at(i)).toHaveStyleRule("width", `${length}${defaultUnit}`);
- }
- });
- });
-
- describe("margin props", () => {
- it("should render the margin with px unit when margin is a number", () => {
- const margin = 18;
- loader = mount();
-
- for (let i = 0; i < 3; i++) {
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "margin",
- `${defaultMargin}${defaultUnit}`
- );
- expect(loader.find("span span").at(i)).toHaveStyleRule("margin", `${margin}${defaultUnit}`);
- }
- });
-
- it("should render the margin as is when margin is a string with valid css unit", () => {
- const margin = "18px";
- loader = mount();
-
- for (let i = 0; i < 3; i++) {
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "margin",
- `${defaultMargin}${defaultUnit}`
- );
- expect(loader.find("span span").at(i)).toHaveStyleRule("margin", `${margin}`);
- }
- });
-
- it("should render the margin with default unit of px when the unit is incorrect", () => {
- const length = 18;
- const unit = "ad";
- const margin = `${length}${unit}`;
- loader = mount();
-
- for (let i = 0; i < 3; i++) {
- expect(loader.find("span span").at(i)).not.toHaveStyleRule(
- "margin",
- `${defaultMargin}${defaultUnit}`
- );
- expect(loader.find("span span").at(i)).toHaveStyleRule("margin", `${length}${defaultUnit}`);
- }
- });
- });
-
- it("should render the css override based on props", () => {
- loader = mount();
-
- expect(loader).toHaveStyleRule("position", "fixed");
- expect(loader).toHaveStyleRule("width", "100px");
- expect(loader).toHaveStyleRule("color", "blue");
- });
+ const marginExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
+ for (let i = 0; i < 3; i++) {
+ expect(loader.find("span span").at(i)).not.toHaveStyleRule(
+ "margin",
+ `${defaultMargin}${defaultUnit}`
+ );
+ expect(loader.find("span span").at(i)).toHaveStyleRule(
+ "margin",
+ `${length}${unit || defaultUnit}`
+ );
+ }
+ };
+ lengthSpecs(SyncLoader, "margin", marginExpectStatements);
});
diff --git a/__tests__/__snapshots__/SyncLoader-tests.tsx.snap b/__tests__/__snapshots__/SyncLoader-tests.tsx.snap
index 844b0fc2..da69d698 100644
--- a/__tests__/__snapshots__/SyncLoader-tests.tsx.snap
+++ b/__tests__/__snapshots__/SyncLoader-tests.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`SyncLoader should match snapshot 1`] = `
+exports[`SyncLoader common specs should match snapshot 1`] = `
@keyframes animation-0 {
33% {
-webkit-transform: translateY(10px);