Revert "unit props deprecation: update proptypes and interfaces + bou…

…nceloader/barLoader/beatLoader (#136)" (#137) This reverts commit 3e27ca5.
davidhu2000 · Nov 12, 2019 · aa7008f · aa7008f
1 parent 3e27ca5
commit aa7008f
Show file tree

Hide file tree

Showing 17 changed files with 219 additions and 332 deletions.
diff --git a/__tests__/BarLoader-tests.tsx b/__tests__/BarLoader-tests.tsx
@@ -46,69 +46,36 @@ describe("BarLoader", () => {
     expect(loader.find("div div")).toHaveStyleRule("background-color", color);
   });
 
-  describe("height prop", () => {
-    it("should render the height with px unit when size is a number", () => {
-      let height: number = 10;
-      loader = mount(<BarLoader height={height} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${height}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule(
-        "height",
-        `${defaultHeight}${defaultUnit}`
-      );
-      expect(loader.find("div div")).toHaveStyleRule("height", `${height}${defaultUnit}`);
-    });
-
-    it("should render the height as is when height is a string with valid css unit", () => {
-      let height: string = "18%";
-      loader = mount(<BarLoader height={height} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${height}`);
-      expect(loader.find("div div")).not.toHaveStyleRule(
-        "height",
-        `${defaultHeight}${defaultUnit}`
-      );
-      expect(loader.find("div div")).toHaveStyleRule("height", `${height}`);
-    });
-
-    it("should render the height with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let height: string = `${length}${unit}`;
-      loader = mount(<BarLoader height={height} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule(
-        "height",
-        `${defaultHeight}${defaultUnit}`
-      );
-      expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`);
-    });
+  it("should render the correct height based on props", () => {
+    let height: number = 10;
+    loader = mount(<BarLoader height={height} />);
+    expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("height", `${height}${defaultUnit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("height", `${height}${defaultUnit}`);
   });
 
-  describe("width prop", () => {
-    it("should render the width with px unit when size is a number", () => {
-      let width: number = 10;
-      loader = mount(<BarLoader width={10} />);
-      expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${width}${defaultUnit}`);
-    });
+  it("should render the correct heightUnit basd on passed in props", () => {
+    let unit: string = "%";
+    loader = mount(<BarLoader heightUnit={unit} />);
+    expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("height", `${defaultHeight}${unit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("height", `${defaultHeight}${unit}`);
+  });
 
-    it("should render the height as is when height is a string with valid css unit", () => {
-      let width: string = "18%";
-      loader = mount(<BarLoader width={width} />);
-      expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${width}`);
-    });
+  it("should render the correct width based on props", () => {
+    let width: number = 10;
+    loader = mount(<BarLoader width={10} />);
+    expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${width}${defaultUnit}`);
+  });
 
-    it("should render the width with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let width: string = `${length}${unit}`;
-      loader = mount(<BarLoader width={width} />);
-      expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`);
-    });
+  it("should render the correct widthUnit basd on passed in props", () => {
+    let unit: string = "%";
+    loader = mount(<BarLoader widthUnit="%" />);
+    expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${defaultWidth}${unit}`);
   });
 
   it("should render the css override based on props", () => {

diff --git a/__tests__/BeatLoader-tests.tsx b/__tests__/BeatLoader-tests.tsx
@@ -12,7 +12,6 @@ describe("BeatLoader", () => {
   let props: LoaderSizeMarginProps;
   let defaultColor: string = "#000000";
   let defaultSize: number = 15;
-  let defaultMargin: number = 2;
   let defaultUnit: string = "px";
 
   it("should match snapshot", () => {
@@ -44,69 +43,28 @@ describe("BeatLoader", () => {
     expect(loader.find("div div")).toHaveStyleRule("background-color", "#e2e2e2");
   });
 
-  describe("size prop", () => {
-    it("should render the size with px unit when size is a number", () => {
-      let size: number = 18;
-      loader = mount(<BeatLoader size={18} />);
-      expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`);
-    });
-
-    it("should render the size as is when size is a string with valid css unit", () => {
-      let size: string = "18px";
-      loader = mount(<BeatLoader size={size} />);
-      expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("height", `${size}`);
-      expect(loader.find("div div")).toHaveStyleRule("width", `${size}`);
-    });
-
-    it("should render the size with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let size: string = `${length}${unit}`;
-      loader = mount(<BeatLoader size={size} />);
-      expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("width", `${length}${defaultUnit}`);
-    });
+  it("should render the correct size based on props", () => {
+    let size: number = 18;
+    loader = mount(<BeatLoader size={18} />);
+    expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`);
   });
 
-  describe("margin prop", () => {
-    it("should render the margin with px unit when margin is a number", () => {
-      let margin: number = 18;
-      loader = mount(<BeatLoader margin={18} />);
-      expect(loader.find("div div")).not.toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
-      expect(loader.find("div div")).toHaveStyleRule("margin", `${margin}${defaultUnit}`);
-    });
-
-    it("should render the margin as is when margin is a string with valid css unit", () => {
-      let margin: string = "18px";
-      loader = mount(<BeatLoader margin={margin} />);
-      expect(loader.find("div div")).not.toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
-      expect(loader.find("div div")).toHaveStyleRule("margin", `${margin}`);
-    });
+  it("should render the correct heightUnit basd on props", () => {
+    let unit: string = "%";
+    loader = mount(<BeatLoader sizeUnit="%" />);
+    expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${unit}`);
+    expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${unit}`);
+  });
 
-    it("should render the margin with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let margin: string = `${length}${unit}`;
-      loader = mount(<BeatLoader margin={margin} />);
-      expect(loader.find("div div")).not.toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
-      expect(loader.find("div div")).toHaveStyleRule("margin", `${length}${defaultUnit}`);
-    });
+  it("should render the correct margin props based on props", () => {
+    loader = mount(<BeatLoader margin="4%" />);
+    expect(loader.find("div div")).not.toHaveStyleRule("margin", "2px");
+    expect(loader.find("div div")).toHaveStyleRule("margin", "4%");
   });
 
   it("should render the css override based on props", () => {

diff --git a/__tests__/BounceLoader-tests.tsx b/__tests__/BounceLoader-tests.tsx
@@ -44,50 +44,27 @@ describe("BounceLoader", () => {
     expect(loader.find("div div")).toHaveStyleRule("background-color", color);
   });
 
-  describe("size prop", () => {
-    it("should render the size with px unit when size is a number", () => {
-      let size: number = 18;
-      loader = mount(<BounceLoader size={size} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+  it("should render the correct size based on props", () => {
+    let size: number = 18;
+    loader = mount(<BounceLoader size={size} />);
+    expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
 
-      expect(loader).toHaveStyleRule("height", `${size}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${size}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`);
-    });
-
-    it("should render the size as is when size is a string with valid css unit", () => {
-      let size: string = "18px";
-      loader = mount(<BounceLoader size={size} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-
-      expect(loader).toHaveStyleRule("height", `${size}`);
-      expect(loader).toHaveStyleRule("width", `${size}`);
-      expect(loader.find("div div")).toHaveStyleRule("height", `${size}`);
-      expect(loader.find("div div")).toHaveStyleRule("width", `${size}`);
-    });
-
-    it("should render the size with default unit of px when the unit is incorrect", () => {
-      let length: number = 18;
-      let unit: string = "ad";
-      let size: string = `${length}${unit}`;
-      loader = mount(<BounceLoader size={size} />);
-      expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("height", `${size}${defaultUnit}`);
+    expect(loader).toHaveStyleRule("width", `${size}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`);
+  });
 
-      expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`);
-      expect(loader.find("div div")).toHaveStyleRule("width", `${length}${defaultUnit}`);
-    });
+  it("should render the correct sizeUnit based on props", () => {
+    let unit: string = "%";
+    loader = mount(<BounceLoader sizeUnit={unit} />);
+    expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
+    expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${unit}`);
+    expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${unit}`);
   });
 
   it("should render the css override based on props", () => {

diff --git a/__tests__/__snapshots__/BarLoader-tests.tsx.snap b/__tests__/__snapshots__/BarLoader-tests.tsx.snap
@@ -76,10 +76,12 @@ exports[`BarLoader should match snapshot 1`] = `
 
 <Loader
   color="#000000"
-  css=""
+  css={Object {}}
   height={4}
+  heightUnit="px"
   loading={true}
   width={100}
+  widthUnit="px"
 >
   <div
     className="emotion-2"

diff --git a/__tests__/__snapshots__/BeatLoader-tests.tsx.snap b/__tests__/__snapshots__/BeatLoader-tests.tsx.snap
@@ -61,10 +61,11 @@ exports[`BeatLoader should match snapshot 1`] = `
 
 <Loader
   color="#000000"
-  css=""
+  css={Object {}}
   loading={true}
   margin="2px"
   size={15}
+  sizeUnit="px"
 >
   <div
     className="emotion-3"

diff --git a/__tests__/__snapshots__/BounceLoader-tests.tsx.snap b/__tests__/__snapshots__/BounceLoader-tests.tsx.snap
@@ -67,9 +67,10 @@ exports[`BounceLoader should match snapshot 1`] = `
 
 <Loader
   color="#000000"
-  css=""
+  css={Object {}}
   loading={true}
   size={60}
+  sizeUnit="px"
 >
   <div
     className="emotion-2"