Skip to content

Commit

Permalink
replace div with span to fix #159 (#325)
Browse files Browse the repository at this point in the history 
* replace div with span to fix #159

* update demo site
  • Loading branch information
@davidhu2000
davidhu2000 authored Dec 27, 2020
1 parent 7736137 commit 500da60
Show file tree
Hide file tree
Showing 70 changed files with 659 additions and 659 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ jobs: # a collection of steps
command: yarn run lint
- run:
name: Jest tests
command: yarn run jest
command: yarn run jest --silent
- run:
name: Report coverage
command: yarn run coveralls
18 changes: 9 additions & 9 deletions __tests__/BarLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ describe("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.find("div div")).toHaveStyleRule("background-color", defaultColor);
expect(loader.find("div div")).toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`);
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", () => {
Expand All @@ -43,7 +43,7 @@ describe("BarLoader", () => {
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("div div")).toHaveStyleRule("background-color", color);
expect(loader.find("span span")).toHaveStyleRule("background-color", color);
});

describe("height prop", () => {
Expand All @@ -52,23 +52,23 @@ describe("BarLoader", () => {
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(
expect(loader.find("span span")).not.toHaveStyleRule(
"height",
`${defaultHeight}${defaultUnit}`
);
expect(loader.find("div div")).toHaveStyleRule("height", `${height}${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("div div")).not.toHaveStyleRule(
expect(loader.find("span span")).not.toHaveStyleRule(
"height",
`${defaultHeight}${defaultUnit}`
);
expect(loader.find("div div")).toHaveStyleRule("height", `${height}`);
expect(loader.find("span span")).toHaveStyleRule("height", `${height}`);
});

it("should render the height with default unit of px when the unit is incorrect", () => {
Expand All @@ -78,11 +78,11 @@ describe("BarLoader", () => {
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(
expect(loader.find("span span")).not.toHaveStyleRule(
"height",
`${defaultHeight}${defaultUnit}`
);
expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("height", `${length}${defaultUnit}`);
});
});

Expand Down
48 changes: 24 additions & 24 deletions __tests__/BeatLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ describe("BeatLoader", () => {

it("should contain styles created using default props", () => {
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", `${defaultMargin}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("background-color", defaultColor);
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", () => {
Expand All @@ -40,72 +40,72 @@ describe("BeatLoader", () => {

it("should render the correct color based on prop", () => {
loader = mount(<BeatLoader color="#e2e2e2" />);
expect(loader.find("div div")).not.toHaveStyleRule("background-color", defaultColor);
expect(loader.find("div div")).toHaveStyleRule("background-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("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}`);
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("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}`);
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("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}`);
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("div div")).not.toHaveStyleRule(
expect(loader.find("span span")).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("div div")).toHaveStyleRule("margin", `${margin}${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("div div")).not.toHaveStyleRule(
expect(loader.find("span span")).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("div div")).toHaveStyleRule("margin", `${margin}`);
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("div div")).not.toHaveStyleRule(
expect(loader.find("span span")).not.toHaveStyleRule(
"margin",
`${defaultMargin}${defaultUnit}`
);
expect(loader.find("div div")).toHaveStyleRule("margin", `${length}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("margin", `${length}${defaultUnit}`);
});
});

Expand Down
34 changes: 17 additions & 17 deletions __tests__/BounceLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ describe("BounceLoader", () => {
it("should contain styles created using default props", () => {
expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("background-color", defaultColor);
expect(loader.find("span span")).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("background-color", defaultColor);
});

it("should render null if loading prop is set as false", () => {
Expand All @@ -40,8 +40,8 @@ describe("BounceLoader", () => {
it("should render the correct color based on prop", () => {
const color = "#e2e2e2";
loader = mount(<BounceLoader color={color} />);
expect(loader.find("div div")).not.toHaveStyleRule("background-color", defaultColor);
expect(loader.find("div div")).toHaveStyleRule("background-color", color);
expect(loader.find("span span")).not.toHaveStyleRule("background-color", defaultColor);
expect(loader.find("span span")).toHaveStyleRule("background-color", color);
});

describe("size prop", () => {
Expand All @@ -50,27 +50,27 @@ describe("BounceLoader", () => {
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.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).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.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(<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.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).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}`);
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", () => {
Expand All @@ -80,13 +80,13 @@ describe("BounceLoader", () => {
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.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).not.toHaveStyleRule("width", `${defaultSize}${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}`);
expect(loader.find("span span")).toHaveStyleRule("height", `${length}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("width", `${length}${defaultUnit}`);
});
});

Expand Down
34 changes: 17 additions & 17 deletions __tests__/CircleLoader-tests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ describe("CircleLoader", () => {
it("should contain styles created using default props", () => {
expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("div div")).toHaveStyleRule("border", `1px solid ${defaultColor}`);
expect(loader.find("span span")).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("border", `1px solid ${defaultColor}`);
});

it("should render null if loading prop is set as false", () => {
Expand All @@ -40,8 +40,8 @@ describe("CircleLoader", () => {
it("should render the correct color based on prop", () => {
const color = "#e2e2e2";
loader = mount(<CircleLoader color={color} />);
expect(loader.find("div div")).not.toHaveStyleRule("border", `1px solid ${defaultColor}`);
expect(loader.find("div div")).toHaveStyleRule("border", `1px solid ${color}`);
expect(loader.find("span span")).not.toHaveStyleRule("border", `1px solid ${defaultColor}`);
expect(loader.find("span span")).toHaveStyleRule("border", `1px solid ${color}`);
});

describe("size prop", () => {
Expand All @@ -50,27 +50,27 @@ describe("CircleLoader", () => {
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.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).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.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(<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.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).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}`);
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", () => {
Expand All @@ -80,13 +80,13 @@ describe("CircleLoader", () => {
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.find("span span")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
expect(loader.find("span span")).not.toHaveStyleRule("width", `${defaultSize}${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}`);
expect(loader.find("span span")).toHaveStyleRule("height", `${length}${defaultUnit}`);
expect(loader.find("span span")).toHaveStyleRule("width", `${length}${defaultUnit}`);
});
});

Expand Down
Loading

0 comments on commit 500da60

Please sign in to comment.