Skip to content

Commit

Permalink
test: Refactor to use testids for cards and buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@DafyddLlyr
DafyddLlyr committed May 31, 2024
1 parent 26eaa84 commit 81bfcbb
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 70 deletions.
101 changes: 33 additions & 68 deletions editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ describe("Basic UI", () => {
describe("Building a list", () => {
it("does not display a default item if the schema has no required minimum", () => {
const mockWithMinZero = merge(cloneDeep(mockProps), { schema: { min: 0 } });
const { queryByRole, getByRole } = setup(
const { queryByRole, getByTestId } = setup(
<ListComponent {...mockWithMinZero} />,
);

Expand All @@ -135,9 +135,7 @@ describe("Building a list", () => {
expect(activeListHeading).toBeNull();

// Button is present allow additional items to be added
const addItemButton = getByRole("button", {
name: /Add a new animal type/,
});
const addItemButton = getByTestId("list-add-button");
expect(addItemButton).toBeInTheDocument();
expect(addItemButton).not.toBeDisabled();
});
Expand All @@ -161,26 +159,20 @@ describe("Building a list", () => {
});

test("Adding an item", async () => {
const { getAllByRole, getByRole, user } = setup(
const { getAllByTestId, getByTestId, user } = setup(
<ListComponent {...mockProps} />,
);

let cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
let cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(1);

await fillInResponse(user);

const addItemButton = getByRole("button", {
name: /Add a new animal type/,
});
const addItemButton = getByTestId("list-add-button");
await user.click(addItemButton);

// Item successfully added
cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(2);

// Old item is inactive
Expand All @@ -199,25 +191,21 @@ describe("Building a list", () => {

test("Editing an item", async () => {
// Setup three cards
const { getAllByRole, getByRole, user } = setup(
const { getAllByTestId, getByTestId, user } = setup(
<ListComponent {...mockProps} />,
);

await fillInResponse(user);

const addItemButton = getByRole("button", {
name: /Add a new animal type/,
});
const addItemButton = getByTestId("list-add-button");

await user.click(addItemButton);
await fillInResponse(user);

await user.click(addItemButton);
await fillInResponse(user);

let cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
const cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(3);

let [firstCard, secondCard, thirdCard] = cards;
Expand All @@ -244,10 +232,7 @@ describe("Building a list", () => {
});
await user.click(secondCardEditButton);

cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
[firstCard, secondCard, thirdCard] = cards;
[firstCard, secondCard, thirdCard] = getAllByTestId(/list-card/);

// Second card now editable
expect(
Expand All @@ -257,43 +242,39 @@ describe("Building a list", () => {

test("Removing an item when all cards are inactive", async () => {
// Setup three cards
const { getAllByRole, getByRole, user, getByLabelText, queryAllByRole } =
setup(<ListComponent {...mockProps} />);
const {
getByTestId,
getAllByTestId,
user,
getByLabelText,
queryAllByTestId,
} = setup(<ListComponent {...mockProps} />);

await fillInResponse(user);

const addItemButton = getByRole("button", {
name: /Add a new animal type/,
});
const addItemButton = getByTestId("list-add-button");

await user.click(addItemButton);
await fillInResponse(user);

await user.click(addItemButton);
await fillInResponse(user);

let cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
let cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(3);

let [firstCard, secondCard] = cards;
const thirdCard = cards[2];
let [firstCard, secondCard, thirdCard] = cards;

// Remove third card
const thirdCardRemoveButton = within(thirdCard!).getByRole("button", {
name: /Remove/,
});

await user.click(thirdCardRemoveButton);
cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(2);

[firstCard, secondCard] = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
[firstCard, secondCard, thirdCard] = getAllByTestId(/list-card/);

// Previous items remain inactive
expect(
Expand All @@ -308,14 +289,10 @@ describe("Building a list", () => {
name: /Remove/,
});
await user.click(secondCardRemoveButton);
cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(1);

[firstCard] = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
[firstCard] = getAllByTestId(/list-card/);

// Previous items remain inactive
expect(
Expand All @@ -327,9 +304,7 @@ describe("Building a list", () => {
name: /Remove/,
});
await user.click(firstCardRemoveButton);
cards = queryAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
cards = queryAllByTestId(/list-card/);
expect(cards).toHaveLength(0);

// Add item back
Expand All @@ -342,21 +317,17 @@ describe("Building a list", () => {

test("Removing an item when another card is active", async () => {
// Setup two cards
const { getAllByRole, getByRole, user } = setup(
const { getAllByTestId, getByTestId, user } = setup(
<ListComponent {...mockProps} />,
);

await fillInResponse(user);

const addItemButton = getByRole("button", {
name: /Add a new animal type/,
});
const addItemButton = getByTestId("list-add-button");

await user.click(addItemButton);

const [firstCard, secondCard] = getAllByRole("heading", { level: 2 }).map(
(el) => el.closest("div"),
);
const [firstCard, secondCard] = getAllByTestId(/list-card/);

// Second card is active
expect(
Expand All @@ -368,9 +339,7 @@ describe("Building a list", () => {
name: /Remove/,
});
await user.click(firstCardRemoveButton);
const cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
const cards = getAllByTestId(/list-card/);
expect(cards).toHaveLength(1);

// First card is active
Expand Down Expand Up @@ -398,12 +367,10 @@ describe("Form validation and error handling", () => {
describe("Payload generation", () => {
it("generates a valid payload on submission", async () => {
const handleSubmit = jest.fn();
const { getByRole, user } = setup(
const { getByTestId, user } = setup(
<ListComponent {...mockProps} handleSubmit={handleSubmit} />,
);
const addItemButton = getByRole("button", {
name: /Add a new animal type/,
});
const addItemButton = getByTestId("list-add-button");

await fillInResponse(user);

Expand All @@ -419,13 +386,11 @@ describe("Payload generation", () => {

describe("Navigating back", () => {
test("it pre-populates list correctly", async () => {
const { getAllByText, queryByLabelText, getAllByRole } = setup(
const { getAllByText, queryByLabelText, getAllByTestId } = setup(
<ListComponent {...mockProps} previouslySubmittedData={mockPayload} />,
);

const cards = getAllByRole("heading", { level: 2 }).map((el) =>
el.closest("div"),
);
const cards = getAllByTestId(/list-card/);

// Two cards
expect(cards).toHaveLength(2);
Expand Down
5 changes: 3 additions & 2 deletions editor.planx.uk/src/@planx/components/List/Public/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const ActiveListCard: React.FC<{
<ErrorWrapper
error={errors.unsavedItem ? "Please save in order to continue" : ""}
>
<ListCard>
<ListCard data-testid={`list-card-${index}`}>
<Typography component="h2" variant="h3">
{schema.type} {index + 1}
</Typography>
Expand Down Expand Up @@ -100,7 +100,7 @@ const InactiveListCard: React.FC<{
const { schema, formik, removeItem, editItem } = useListContext();

return (
<ListCard>
<ListCard data-testid={`list-card-${i}`}>
<Typography component="h2" variant="h3">
{schema.type} {i + 1}
</Typography>
Expand Down Expand Up @@ -179,6 +179,7 @@ const Root = () => {
color="secondary"
onClick={addNewItem}
sx={{ width: "100%" }}
data-testid="list-add-button"
>
+ Add a new {schema.type.toLowerCase()} type
</Button>
Expand Down

0 comments on commit 81bfcbb

Please sign in to comment.