Skip to content

Commit

Permalink
feat(tile): review changes - to be flattened
Browse files Browse the repository at this point in the history
  • Loading branch information
@nineteen88
nineteen88 committed Oct 15, 2024
1 parent eb590b6 commit 3b839f5
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 156 deletions.
121 changes: 0 additions & 121 deletions src/__spec_helper__/__internal__/test-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,123 +338,6 @@ const testStyledSystemMargin = (
);
};

const testStyledSystemPadding = (
component: (spacingProps?: PaddingProps) => JSX.Element,
defaults?: PaddingProps,
styleContainer?: (wrapper: ReactWrapper) => ReactWrapper,
assertOpts?: jest.Options
) => {
describe("default props", () => {
let wrapper: ReactWrapper;
let StyleElement: ReactWrapper;

beforeAll(() => {
wrapper = mount(component({ ...defaults }));
StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
});

it("should set the correct paddings", () => {
let padding;
let paddingLeft;
let paddingRight;
let paddingTop;
let paddingBottom;

if (defaults) {
padding = getDefaultValue(defaults.p);
paddingLeft = getDefaultValue(defaults.pl || defaults.px);
paddingRight = getDefaultValue(defaults.pr || defaults.px);
paddingTop = getDefaultValue(defaults.pt || defaults.py);
paddingBottom = getDefaultValue(defaults.pb || defaults.py);

assertStyleMatch(
{
padding,
paddingLeft,
paddingRight,
paddingTop,
paddingBottom,
},
StyleElement,
assertOpts
);
} else {
expect(StyleElement).not.toHaveStyleRule("paddingLeft");
expect(StyleElement).not.toHaveStyleRule("paddingRight");
expect(StyleElement).not.toHaveStyleRule("paddingTop");
expect(StyleElement).not.toHaveStyleRule("paddingBottom");
expect(StyleElement).not.toHaveStyleRule("padding");
}
});
});

describe.each(paddingProps)(
'when a custom spacing is specified using the "%s" styled system props',
(styledSystemProp, propName) => {
it(`then that ${propName} should have been set correctly`, () => {
const props = { [styledSystemProp]: 2 };
const wrapper = mount(component({ ...props }));

assertStyleMatch(
{ [propName]: "var(--spacing200)" },
styleContainer ? styleContainer(wrapper) : wrapper,
assertOpts
);
});
}
);
};

const testStyledSystemSpacing = (
component: (spacingProps?: MarginProps | PaddingProps) => JSX.Element,
defaults?: MarginProps | PaddingProps,
styleContainer?: (wrapper: ReactWrapper) => ReactWrapper,
assertOpts?: jest.Options
) => {
testStyledSystemMargin(
component,
defaults as MarginProps,
styleContainer,
assertOpts
);
testStyledSystemPadding(
component,
defaults as PaddingProps,
styleContainer,
assertOpts
);
};

const testStyledSystemWidth = (
component: (widthProperties?: { width: string }) => JSX.Element,
styleContainer?: (wrapper: ReactWrapper) => ReactWrapper
) => {
describe("when a width prop is specified using styled system props", () => {
it("then width should have been set correctly", () => {
const [styledSystemProp, propName, value] = widthProps;
const props = { [styledSystemProp]: value };
const wrapper = mount(component({ ...props }));
const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
expect(StyleElement).toHaveStyleRule(propName, value);
});
});
};

const testStyledSystemHeight = (
component: (heightProperties?: { height: string }) => JSX.Element,
styleContainer?: (wrapper: ReactWrapper) => ReactWrapper
) => {
describe("when a height prop is specified using styled system props", () => {
it("then height should have been set correctly", () => {
const [styledSystemProp, propName, value] = heightProps;
const props = { [styledSystemProp]: value };
const wrapper = mount(component({ ...props }));
const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
expect(StyleElement).toHaveStyleRule(propName, value);
});
});
};

const testStyledSystemGrid = (
component: (gridProperties?: GridProps) => JSX.Element,
elementQuery: () => HTMLElement
Expand Down Expand Up @@ -795,12 +678,8 @@ export {
click,
simulate,
mockMatchMedia,
testStyledSystemSpacing,
testStyledSystemMargin,
testStyledSystemPadding,
testStyledSystemColor,
testStyledSystemWidth,
testStyledSystemHeight,
testStyledSystemLayout,
testStyledSystemFlexBox,
testStyledSystemGrid,
Expand Down
12 changes: 12 additions & 0 deletions src/components/tile/tile-content/tile-content.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,15 @@ test("renders when children are passed", () => {

expect(screen.getByText("Tile Content")).toBeVisible();
});

test("has proper data attributes applied", () => {
render(
<TileContent data-element="foo" data-role="bar">
Tile Content
</TileContent>
);
const element = screen.getByText("Tile Content");
expect(element).toHaveAttribute("data-component", "tile-content");
expect(element).toHaveAttribute("data-element", "foo");
expect(element).toHaveAttribute("data-role", "bar");
});
7 changes: 5 additions & 2 deletions src/components/tile/tile-footer/tile-footer.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import TileFooter, { TileFooterProps } from ".";
import { testStyledSystemPadding } from "../../../__spec_helper__/__internal__/test-utils";
import { testStyledSystemPaddingRTL } from "../../../__spec_helper__/__internal__/test-utils";

testStyledSystemPadding((props) => <TileFooter {...props} />);
testStyledSystemPaddingRTL(
(props) => <TileFooter data-role="footer" {...props} />,
() => screen.getByTestId("footer")
);

test.each<[TileFooterProps["variant"], string, string]>([
["default", "var(--colorsUtilityMajor100)", "var(--colorsUtilityMajor100)"],
Expand Down
16 changes: 10 additions & 6 deletions src/components/tile/tile-header/tile-header.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import TileHeader, { TileHeaderProps } from ".";
import { testStyledSystemPadding } from "../../../__spec_helper__/__internal__/test-utils";
import { testStyledSystemPaddingRTL } from "../../../__spec_helper__/__internal__/test-utils";

testStyledSystemPadding((props) => <TileHeader {...props} />);
testStyledSystemPaddingRTL(
(props) => <TileHeader data-role="header" {...props} />,
() => screen.getByTestId("header")
);

test.each<[TileHeaderProps["variant"], string, string]>([
["default", "var(--colorsUtilityMajor100)", "var(--colorsUtilityMajor100)"],
Expand All @@ -21,10 +24,11 @@ test.each<[TileHeaderProps["variant"], string, string]>([

const tileHeaderElement = screen.getByTestId("tile-header");

expect(tileHeaderElement).toHaveStyle({
background,
borderBottom: `1px solid ${borderBottomColor}`,
});
expect(tileHeaderElement).toHaveStyleRule("background", background);
expect(tileHeaderElement).toHaveStyleRule(
"border-bottom",
`1px solid ${borderBottomColor}`
);
}
);

Expand Down
62 changes: 35 additions & 27 deletions src/components/tile/tile.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,31 @@ import { render, screen } from "@testing-library/react";
import { Tile, TileContent } from ".";
import { TileProps } from "./tile.component";
import {
testStyledSystemSpacing,
testStyledSystemWidth,
testStyledSystemHeight,
testStyledSystemSpacingRTL,
testStyledSystemWidthRTL,
testStyledSystemHeightRTL,
} from "../../__spec_helper__/__internal__/test-utils";
import { TILE_HIGHLIGHT_VARIANTS } from "./tile.config";

testStyledSystemSpacing((props) => <Tile {...props}>Test</Tile>, { p: 3 });
testStyledSystemSpacingRTL(
(props) => <Tile data-role="tile" {...props} />,
() => screen.getByTestId("tile"),
{ p: 3 }
);

testStyledSystemWidth((props) => <Tile {...props}>Test</Tile>);
testStyledSystemWidthRTL(
(props) => (
<Tile data-role="tile" {...props}>
Test
</Tile>
),
() => screen.getByTestId("tile")
);

testStyledSystemHeight((props) => <Tile {...props} />);
testStyledSystemHeightRTL(
(props) => <Tile data-role="tile" {...props} />,
() => screen.getByTestId("tile")
);

test("renders only one TileContent when a child element returns null", () => {
const children = [
Expand Down Expand Up @@ -109,15 +123,23 @@ test('renders with expected background and border styles when variant is "grey"'

const tileElement = screen.getByTestId("tile");

expect(tileElement).toHaveStyle({
backgroundColor: "var(--colorsUtilityMajor025)",
border: "var(--borderWidth100) solid var(--colorsUtilityMajor200)",
});
expect(tileElement).toHaveStyleRule(
"background-color",
"var(--colorsUtilityMajor025)"
);
expect(tileElement).toHaveStyleRule(
"border",
"var(--borderWidth100) solid var(--colorsUtilityMajor200)"
);
});

test.each<TileProps["roundness"]>(["default", "large", "small"])(
test.each([
["default", "var(--borderRadius100)"],
["large", "var(--borderRadius200)"],
["small", "var(--borderRadius050)"],
] as const)(
"renders with the expected border radius when roundness is %s",
(roundness) => {
(roundness, expectedBorderRadius) => {
render(
<Tile roundness={roundness} data-role="tile">
<TileContent>Child 1</TileContent>
Expand All @@ -126,21 +148,7 @@ test.each<TileProps["roundness"]>(["default", "large", "small"])(
);

const tileElement = screen.getByTestId("tile");
let expectedBorderRadius: string;

switch (roundness) {
case "small":
expectedBorderRadius = "var(--borderRadius050)";
break;
case "large":
expectedBorderRadius = "var(--borderRadius200)";
break;
default:
expectedBorderRadius = "var(--borderRadius100)";
break;
}

expect(tileElement).toHaveStyle(`border-radius: ${expectedBorderRadius}`);
expect(tileElement).toHaveStyleRule("border-radius", expectedBorderRadius);
}
);

Expand Down

0 comments on commit 3b839f5

Please sign in to comment.