Skip to content

Commit

Permalink
unit props deprecation: update proptypes and interfaces + all loaders (…
Browse files Browse the repository at this point in the history 
…#138)

* Revert "Revert "unit props deprecation: update proptypes and interfaces + bounceloader/barLoader/beatLoader (#136)" (#137)"

This reverts commit aa7008f.

* undo

* undo hash change

* Update index.html

* Update index.html

* change margin default to 2 from 2px

* fix circle loader

* update climibing box loader

* update

* update cilploader

* update dot loader

* update fade loader

* update grid loadre

* update hashloader

* update moonloader

* update pacman loader

* update propagate loader

* update pulseloader

* update ring loader

* update rise loader

* update rotate loader

* update scaleloader

* update skewloader

* update square loader

* update sync loader

* fix tests
  • Loading branch information
@davidhu2000
davidhu2000 committed Nov 24, 2019
1 parent b882ee4 commit 1b4c73c
Show file tree
Hide file tree
Showing 69 changed files with 2,003 additions and 868 deletions.
87 changes: 60 additions & 27 deletions __tests__/BarLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { LoaderHeightWidthProps } from "../src/interfaces";
import { heightWidthDefaults } from "../src/helpers";

describe("BarLoader", () => {
let loader: ReactWrapper;
let loader: ReactWrapper<LoaderHeightWidthProps, null, BarLoader>;
let props: LoaderHeightWidthProps;
let defaultColor: string = "#000000";
let defaultHeight: number = 4;
Expand Down Expand Up @@ -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", () => {
Expand Down
84 changes: 63 additions & 21 deletions __tests__/BeatLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import { LoaderSizeMarginProps } from "../src/interfaces";
import { sizeMarginDefaults } from "../src/helpers";

describe("BeatLoader", () => {
let loader: ReactWrapper;
let loader: ReactWrapper<LoaderSizeMarginProps, null, BeatLoader>;
let props: LoaderSizeMarginProps;
let defaultColor: string = "#000000";
let defaultSize: number = 15;
let defaultMargin: number = 2;
let defaultUnit: string = "px";

it("should match snapshot", () => {
Expand All @@ -28,7 +29,7 @@ describe("BeatLoader", () => {
props = loader.props();
expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("margin", "2px");
expect(loader.find("div div")).toHaveStyleRule("margin", `${defaultMargin}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("background-color", defaultColor);
});

Expand All @@ -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", () => {
Expand Down
63 changes: 43 additions & 20 deletions __tests__/BounceLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { LoaderSizeProps } from "../src/interfaces";
import { sizeDefaults } from "../src/helpers";

describe("BounceLoader", () => {
let loader: ReactWrapper;
let loader: ReactWrapper<LoaderSizeProps, null, BounceLoader>;
let props: LoaderSizeProps;
let defaultColor: string = "#000000";
let defaultSize: number = 60;
Expand Down Expand Up @@ -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", () => {
Expand Down
62 changes: 42 additions & 20 deletions __tests__/CircleLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { LoaderSizeProps } from "../src/interfaces";
import { sizeDefaults } from "../src/helpers";

describe("CircleLoader", () => {
let loader: ReactWrapper;
let loader: ReactWrapper<LoaderSizeProps, null, CircleLoader>;
let props: LoaderSizeProps;
let defaultColor: string = "#000000";
let defaultSize: number = 50;
Expand Down Expand Up @@ -44,28 +44,50 @@ describe("CircleLoader", () => {
expect(loader.find("div div")).toHaveStyleRule("border", `1px solid ${color}`);
});

it("should render the correct size for the parent div based on props", () => {
let size: number = 18;
loader = mount(<CircleLoader size={size} />);
describe("size prop", () => {
it("should render the size with px unit when size is a number", () => {
let size: number = 18;
loader = mount(<CircleLoader 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).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(<CircleLoader 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(<CircleLoader 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 heightUnit based on props", () => {
let unit: string = "%";
loader = mount(<CircleLoader 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", () => {
Expand Down
Loading

0 comments on commit 1b4c73c

Please sign in to comment.