From 0b39c0702d879e1ce35799ee2c7617870761225b Mon Sep 17 00:00:00 2001 From: David Hu Date: Sun, 21 Feb 2021 21:01:58 -0800 Subject: [PATCH] Refactor to use shared spec: SyncLoader --- __tests__/SyncLoader-tests.tsx | 172 ++++-------------- .../__snapshots__/SyncLoader-tests.tsx.snap | 2 +- 2 files changed, 35 insertions(+), 139 deletions(-) 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);