-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7009 from Sage/FE-6636
refactor(tile): convert tests to RTL
- Loading branch information
Showing
9 changed files
with
330 additions
and
556 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
174 changes: 47 additions & 127 deletions
174
src/components/tile/tile-content/tile-content.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,143 +1,63 @@ | ||
| import React from "react"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import { PaddingProps } from "styled-system"; | ||
| import TileContent from "./tile-content.component"; | ||
| import { | ||
| testStyledSystemHeightRTL, | ||
| testStyledSystemSpacingRTL, | ||
| testStyledSystemWidthRTL, | ||
| } from "../../../__spec_helper__/__internal__/test-utils"; | ||
| import TileContext from "../__internal__/tile.context"; | ||
|
|
||
| describe("TileContent", () => { | ||
| testStyledSystemSpacingRTL( | ||
| (props) => ( | ||
| <TileContent data-role="tile-content" {...props}> | ||
| Test | ||
| </TileContent> | ||
| ), | ||
| () => screen.getByTestId("tile-content") | ||
| ); | ||
| testStyledSystemWidthRTL( | ||
| (props) => ( | ||
| <TileContent data-role="tile-content" {...props}> | ||
| Test | ||
| </TileContent> | ||
| ), | ||
| () => screen.getByTestId("tile-content") | ||
| ); | ||
| testStyledSystemHeightRTL( | ||
| (props) => ( | ||
| <TileContent data-role="tile-content" {...props}> | ||
| Test | ||
| </TileContent> | ||
| ), | ||
| () => screen.getByTestId("tile-content") | ||
| ); | ||
|
|
||
| it("does not render when no children are passed", () => { | ||
| render(<TileContent data-role="tile-content" />); | ||
|
|
||
| expect(screen.queryByTestId("tile-content")).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("does not render when falsy children are passed", () => { | ||
| render(<TileContent data-role="tile-content">{null}</TileContent>); | ||
|
|
||
| expect(screen.queryByTestId("tile-content")).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("renders when children are passed", () => { | ||
| render(<TileContent>Tile Content</TileContent>); | ||
|
|
||
| expect(screen.getByText("Tile Content")).toBeVisible(); | ||
| }); | ||
|
|
||
| it.each([ | ||
| [{}, "var(--spacing300)", undefined], | ||
| [{ p: 2 }, "var(--spacing200)", undefined], | ||
| [{ pl: 2, p: 1 }, "var(--spacing200)", "var(--spacing100)"], | ||
| [{ pr: 2, p: 1 }, "var(--spacing100)", "var(--spacing200)"], | ||
| [{ px: 2, p: 1 }, "var(--spacing200)", undefined], | ||
| ] as [PaddingProps, string, string | undefined][])( | ||
| "applies the expected padding values when %s passed and in horizontal orientation", | ||
| (paddingPropsFromTile, leftValue, rightValue) => { | ||
| render( | ||
| <> | ||
| <TileContext.Provider | ||
| value={{ isHorizontal: true, paddingPropsFromTile }} | ||
| > | ||
| <TileContent>Tile Content 1</TileContent> | ||
| <TileContent>Tile Content 2</TileContent> | ||
| <TileContent>Tile Content 3</TileContent> | ||
| </TileContext.Provider> | ||
| </> | ||
| ); | ||
|
|
||
| expect(screen.getByText("Tile Content 1")).toHaveStyle({ | ||
| "padding-left": "0px", | ||
| "padding-right": rightValue || leftValue, | ||
| }); | ||
|
|
||
| expect(screen.getByText("Tile Content 2")).toHaveStyle({ | ||
| "padding-left": leftValue, | ||
| "padding-right": rightValue || leftValue, | ||
| }); | ||
| testStyledSystemSpacingRTL( | ||
| (props) => ( | ||
| <TileContent data-role="tile-content" {...props}> | ||
| Test | ||
| </TileContent> | ||
| ), | ||
| () => screen.getByTestId("tile-content") | ||
| ); | ||
| testStyledSystemWidthRTL( | ||
| (props) => ( | ||
| <TileContent data-role="tile-content" {...props}> | ||
| Test | ||
| </TileContent> | ||
| ), | ||
| () => screen.getByTestId("tile-content") | ||
| ); | ||
| testStyledSystemHeightRTL( | ||
| (props) => ( | ||
| <TileContent data-role="tile-content" {...props}> | ||
| Test | ||
| </TileContent> | ||
| ), | ||
| () => screen.getByTestId("tile-content") | ||
| ); | ||
|
|
||
| test("does not render when no children are passed", () => { | ||
| render(<TileContent data-role="tile-content" />); | ||
|
|
||
| expect(screen.queryByTestId("tile-content")).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| expect(screen.getByText("Tile Content 3")).toHaveStyle({ | ||
| "padding-left": leftValue, | ||
| "padding-right": "0px", | ||
| }); | ||
| } | ||
| ); | ||
| test("does not render when falsy children are passed", () => { | ||
| render(<TileContent data-role="tile-content">{null}</TileContent>); | ||
|
|
||
| it.each([ | ||
| [{}, "var(--spacing300)", undefined], | ||
| [{ p: 2 }, "var(--spacing200)", undefined], | ||
| [{ pt: 2, p: 1 }, "var(--spacing200)", "var(--spacing100)"], | ||
| [{ pb: 2, p: 1 }, "var(--spacing100)", "var(--spacing200)"], | ||
| [{ py: 2, p: 1 }, "var(--spacing200)", undefined], | ||
| ] as [PaddingProps, string, string | undefined][])( | ||
| "applies the expected padding values when %s passed and in vertical orientation", | ||
| (paddingPropsFromTile, topValue, bottomValue) => { | ||
| render( | ||
| <> | ||
| <TileContext.Provider | ||
| value={{ isHorizontal: false, paddingPropsFromTile }} | ||
| > | ||
| <TileContent>Tile Content 1</TileContent> | ||
| <TileContent>Tile Content 2</TileContent> | ||
| <TileContent>Tile Content 3</TileContent> | ||
| </TileContext.Provider> | ||
| </> | ||
| ); | ||
| expect(screen.queryByTestId("tile-content")).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| expect(screen.getByText("Tile Content 1")).toHaveStyle({ | ||
| "padding-top": "0px", | ||
| "padding-bottom": bottomValue || topValue, | ||
| }); | ||
| test("renders when children are passed", () => { | ||
| render(<TileContent>Tile Content</TileContent>); | ||
|
|
||
| expect(screen.getByText("Tile Content 2")).toHaveStyle({ | ||
| "padding-top": topValue, | ||
| "padding-bottom": bottomValue || topValue, | ||
| }); | ||
| expect(screen.getByText("Tile Content")).toBeVisible(); | ||
| }); | ||
|
|
||
| expect(screen.getByText("Tile Content 3")).toHaveStyle({ | ||
| "padding-top": topValue, | ||
| "padding-bottom": "0px", | ||
| }); | ||
| } | ||
| test("has proper data attributes applied", () => { | ||
| render( | ||
| <TileContent data-element="foo" data-role="bar"> | ||
| Tile Content | ||
| </TileContent> | ||
| ); | ||
|
|
||
| it("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"); | ||
| }); | ||
| 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"); | ||
| }); |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.