0.11

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": ["@babel/preset-react", "@babel/preset-env"],
   "plugins": [
-    "emotion",
+    "@emotion",
     "@babel/plugin-transform-react-jsx",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-transform-typescript"

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
+  plugins: ["@typescript-eslint", "@emotion"],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.11.0-alpha.5
+
+- Implement `speedMultipler` prop to `PulseLoader`. This is done to test the API for a single loader before adding to the rest.
+
+## 0.11.0-alpha.4
+
+- Clean up `BarLoader` by marking the props using `Required` utility to avoid having to do `width || Loader.defaultProps.width`.
+
+## 0.11.0-alpha.3
+
+- Implement `speedMultipler` prop to `BarLoader`. This is done to test the API for a single loader before adding to the rest.
+
+## 0.11.0-alpha.2
+
+- Update readme usage section to use `@emotion` for `.babelrc` plugins
+
+## 0.11.0-alpha.1
+
+- updated emotion to v11. [PR #329](https://github.com/davidhu2000/react-spinners/pull/329)
+
 ## 0.10.6
 
 - **bugfix**: Fixed MoonLoader display issue [#342](https://github.com/davidhu2000/react-spinners/pull/342)

README.md

@@ -46,15 +46,15 @@ Each loader accepts a `loading` prop as a boolean. The loader will render `null`
 ```
 {
     "presets": ["@babel/preset-react", "@babel/preset-env"],
-    "plugins": ["emotion"]
+    "plugins": ["@emotion"]
 }
 ```
 
 ### Example
 
 ```js
 import { useState } from "react";
-import { css } from "@emotion/core";
+import { css } from "@emotion/react";
 import ClipLoader from "react-spinners/ClipLoader";
 
 // Can be a string as well. Need to ensure each key-value pair ends with ;
@@ -89,7 +89,7 @@ export default App;
 
 ```js
 import React from "react";
-import { css } from "@emotion/core";
+import { css } from "@emotion/react";
 import ClipLoader from "react-spinners/ClipLoader";
 
 // Can be a string as well. Need to ensure each key-value pair ends with ;

__tests__/BarLoader-tests.tsx

@@ -1,121 +1,70 @@
 import * as React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { matchers } from "jest-emotion";
+import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
 import BarLoader from "../src/BarLoader";
-import { LoaderHeightWidthProps } from "../src/interfaces";
+import { commonSpecs, cssSpecs, lengthSpecs, speedMultiplierSpecs } from "./sharedSpecs/";
 import { heightWidthDefaults } from "../src/helpers";
 
 describe("BarLoader", () => {
-  let loader: ReactWrapper<LoaderHeightWidthProps, null, BarLoader>;
-  let props: LoaderHeightWidthProps;
   const defaultColor = "#000000";
   const defaultHeight = 4;
   const defaultWidth = 100;
   const defaultUnit = "px";
+  const defaultSpeed = 2.1;
+  const defaultDelay = 1.15;
 
-  it("should match snapshot", () => {
-    loader = mount(<BarLoader />);
-    expect(loader).toMatchSnapshot();
-  });
-
-  it("should contain default props if no props are passed", () => {
-    props = loader.props();
-    expect(props).toEqual(heightWidthDefaults(defaultHeight, defaultWidth));
-  });
+  commonSpecs(BarLoader, heightWidthDefaults(defaultHeight, defaultWidth));
+  cssSpecs(BarLoader);
 
   it("should contain styles created using default props", () => {
+    const loader = mount(<BarLoader />);
     expect(loader).toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
     expect(loader).toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-    expect(loader).toHaveStyleRule("background-color", "rgba(0,0,0,0.2)");
+    expect(loader).toHaveStyleRule("background-color", "rgba(0, 0, 0, 0.2)");
     expect(loader.find("span span")).toHaveStyleRule("background-color", defaultColor);
     expect(loader.find("span span")).toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
   });
 
-  it("should render null if loading prop is set as false", () => {
-    loader = mount(<BarLoader loading={false} />);
-    expect(loader.isEmptyRender()).toBe(true);
-  });
-
   it("should render the correct color based on passed in prop", () => {
     const color = "#e2e2e2";
-    loader = mount(<BarLoader color={color} />);
-    expect(loader).not.toHaveStyleRule("background-color", "rgba(0,0,0,0.2)");
-    expect(loader).toHaveStyleRule("background-color", "rgba(226,226,226,0.2)");
+    const loader = mount(<BarLoader color={color} />);
+    expect(loader).not.toHaveStyleRule("background-color", "rgba(0, 0, 0, 0.2)");
+    expect(loader).toHaveStyleRule("background-color", "rgba(226, 226, 226, 0.2)");
     expect(loader.find("span span")).toHaveStyleRule("background-color", color);
   });
 
-  describe("height prop", () => {
-    it("should render the height with px unit when size is a number", () => {
-      const height = 10;
-      loader = mount(<BarLoader height={height} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${height}${defaultUnit}`);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "height",
-        `${defaultHeight}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("height", `${height}${defaultUnit}`);
-    });
-
-    it("should render the height as is when height is a string with valid css unit", () => {
-      const height = "18%";
-      loader = mount(<BarLoader height={height} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${height}`);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "height",
-        `${defaultHeight}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("height", `${height}`);
-    });
-
-    it("should render the height with default unit of px when the unit is incorrect", () => {
-      const length = 18;
-      const unit = "ad";
-      const height = `${length}${unit}`;
-      loader = mount(<BarLoader height={height} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "height",
-        `${defaultHeight}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("height", `${length}${defaultUnit}`);
-    });
-  });
-
-  describe("width prop", () => {
-    it("should render the width with px unit when size is a number", () => {
-      const width = 10;
-      loader = mount(<BarLoader width={10} />);
-      expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${width}${defaultUnit}`);
-    });
+  const heightExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
+    expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("height", `${length}${unit || defaultUnit}`);
+    expect(loader.find("span span")).not.toHaveStyleRule(
+      "height",
+      `${defaultHeight}${defaultUnit}`
+    );
+    expect(loader.find("span span")).toHaveStyleRule("height", `${length}${unit || defaultUnit}`);
+  };
+  lengthSpecs(BarLoader, "height", heightExpectStatements);
 
-    it("should render the height as is when height is a string with valid css unit", () => {
-      const width = "18%";
-      loader = mount(<BarLoader width={width} />);
-      expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${width}`);
-    });
+  const widthExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
+    expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${length}${unit || defaultUnit}`);
+  };
+  lengthSpecs(BarLoader, "width", widthExpectStatements);
 
-    it("should render the width with default unit of px when the unit is incorrect", () => {
-      const length = 18;
-      const unit = "ad";
-      const width = `${length}${unit}`;
-      loader = mount(<BarLoader width={width} />);
-      expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`);
-    });
-  });
-
-  it("should render the css override based on props", () => {
-    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");
-  });
+  const speedMultiplierExpectStatements = (loader: ReactWrapper, multiplier: number) => {
+    expect(loader.find("span span").at(0)).toHaveStyleRule(
+      "animation",
+      expect.stringContaining(`${defaultSpeed * multiplier}s`)
+    );
+    expect(loader.find("span span").at(1)).toHaveStyleRule(
+      "animation",
+      expect.stringContaining(`${defaultSpeed * multiplier}s`)
+    );
+    expect(loader.find("span span").at(1)).toHaveStyleRule(
+      "animation",
+      expect.stringContaining(`${defaultDelay * multiplier}s`)
+    );
+  };
+  speedMultiplierSpecs(BarLoader, speedMultiplierExpectStatements);
 });

__tests__/BeatLoader-tests.tsx

@@ -1,117 +1,49 @@
 import * as React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { matchers } from "jest-emotion";
+import { matchers } from "@emotion/jest";
 expect.extend(matchers);
 
 import BeatLoader from "../src/BeatLoader";
-import { LoaderSizeMarginProps } from "../src/interfaces";
 import { sizeMarginDefaults } from "../src/helpers";
+import { commonSpecs, cssSpecs, lengthSpecs } from "./sharedSpecs";
 
 describe("BeatLoader", () => {
-  let loader: ReactWrapper<LoaderSizeMarginProps, null, BeatLoader>;
-  let props: LoaderSizeMarginProps;
   const defaultColor = "#000000";
   const defaultSize = 15;
   const defaultMargin = 2;
   const defaultUnit = "px";
 
-  it("should match snapshot", () => {
-    loader = mount(<BeatLoader />);
-    expect(loader).toMatchSnapshot();
-  });
-
-  it("should contain default props if no props are passed", () => {
-    props = loader.props();
-    expect(props).toEqual(sizeMarginDefaults(defaultSize));
-  });
+  commonSpecs(BeatLoader, sizeMarginDefaults(defaultSize));
+  cssSpecs(BeatLoader);
 
   it("should contain styles created using default props", () => {
-    props = loader.props();
+    const loader = mount(<BeatLoader />);
     expect(loader.find("span span")).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
     expect(loader.find("span span")).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
     expect(loader.find("span span")).toHaveStyleRule("margin", `${defaultMargin}${defaultUnit}`);
     expect(loader.find("span span")).toHaveStyleRule("background-color", defaultColor);
   });
 
-  it("should render null if loading prop is set as false", () => {
-    loader = mount(<BeatLoader loading={false} />);
-    expect(loader.isEmptyRender()).toBe(true);
-  });
-
   it("should render the correct color based on prop", () => {
-    loader = mount(<BeatLoader color="#e2e2e2" />);
+    const loader = mount(<BeatLoader color="#e2e2e2" />);
     expect(loader.find("span span")).not.toHaveStyleRule("background-color", defaultColor);
     expect(loader.find("span span")).toHaveStyleRule("background-color", "#e2e2e2");
   });
 
-  describe("size prop", () => {
-    it("should render the size with px unit when size is a number", () => {
-      const size = 18;
-      loader = mount(<BeatLoader size={18} />);
-      expect(loader.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("span span")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("span span")).toHaveStyleRule("height", `${size}${defaultUnit}`);
-      expect(loader.find("span span")).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(<BeatLoader size={size} />);
-      expect(loader.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("span span")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("span span")).toHaveStyleRule("height", `${size}`);
-      expect(loader.find("span span")).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(<BeatLoader size={size} />);
-      expect(loader.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("span span")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("span span")).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader.find("span span")).toHaveStyleRule("width", `${length}${defaultUnit}`);
-    });
-  });
-
-  describe("margin prop", () => {
-    it("should render the margin with px unit when margin is a number", () => {
-      const margin = 18;
-      loader = mount(<BeatLoader margin={18} />);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
-      expect(loader.find("span span")).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(<BeatLoader margin={margin} />);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
-      expect(loader.find("span span")).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(<BeatLoader margin={margin} />);
-      expect(loader.find("span span")).not.toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
-      expect(loader.find("span span")).toHaveStyleRule("margin", `${length}${defaultUnit}`);
-    });
-  });
-
-  it("should render the css override based on props", () => {
-    loader = mount(<BeatLoader css={"position: absolute; overflow: scroll;"} />);
-    expect(loader).toHaveStyleRule("position", "absolute");
-    expect(loader).toHaveStyleRule("overflow", "scroll");
-  });
+  const sizeExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
+    expect(loader.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("span span")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("span span")).toHaveStyleRule("height", `${length}${unit || defaultUnit}`);
+    expect(loader.find("span span")).toHaveStyleRule("width", `${length}${unit || defaultUnit}`);
+  };
+  lengthSpecs(BeatLoader, "size", sizeExpectStatements);
+
+  const marginExpectStatements = (loader: ReactWrapper, length: number, unit?: string) => {
+    expect(loader.find("span span")).not.toHaveStyleRule(
+      "margin",
+      `${defaultMargin}${defaultUnit}`
+    );
+    expect(loader.find("span span")).toHaveStyleRule("margin", `${length}${unit || defaultUnit}`);
+  };
+  lengthSpecs(BeatLoader, "margin", marginExpectStatements);
 });