unit props deprecation: update proptypes and interfaces + bounceloade…

…r/barLoader/beatLoader (#136) * Update interfaces and proptypes size functions to remove sizeUnit * fix SizeFunction type * remove unit prop from proptypes and interfaces * update interface length types to number or string * remove sizeUnit from bounceloader * fix bounce loader test * update bar load tests * add css value function * fix bar loader * update bounce loader * update beat loader
davidhu2000 · Nov 12, 2019 · 3e27ca5 · 3e27ca5
1 parent 075d0f3
commit 3e27ca5
Show file tree

Hide file tree

Showing 17 changed files with 332 additions and 219 deletions.
diff --git a/__tests__/BarLoader-tests.tsx b/__tests__/BarLoader-tests.tsx
@@ -46,36 +46,69 @@ describe("BarLoader", () => {
     expect(loader.find("div div")).toHaveStyleRule("background-color", color);
   });
 
-  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("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 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 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 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 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 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}`);
+  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 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 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 css override based on props", () => {

diff --git a/__tests__/BeatLoader-tests.tsx b/__tests__/BeatLoader-tests.tsx
@@ -12,6 +12,7 @@ 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", () => {
@@ -43,28 +44,69 @@ describe("BeatLoader", () => {
     expect(loader.find("div div")).toHaveStyleRule("background-color", "#e2e2e2");
   });
 
-  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("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 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 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 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%");
+  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 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 css override based on props", () => {

diff --git a/__tests__/BounceLoader-tests.tsx b/__tests__/BounceLoader-tests.tsx
@@ -44,27 +44,50 @@ describe("BounceLoader", () => {
     expect(loader.find("div div")).toHaveStyleRule("background-color", color);
   });
 
-  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}`);
+  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}`);
 
-    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", `${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}`);
 
-  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}`);
+      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 css override based on props", () => {

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