Skip to content

test(ui): drop presence-only and implementation-coupled test assertions #7065

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
luizhf42 wants to merge 1 commit into from
Open

test(ui): drop presence-only and implementation-coupled test assertions #7065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 24 additions & 65 deletions ui/apps/console/src/components/announcements/__tests__/AnnouncementModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,82 +56,41 @@ beforeEach(() => {
});

describe("AnnouncementModal", () => {
describe("when open=false", () => {
it("renders nothing", () => {
renderModal({ open: false });
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});
it("renders nothing when open=false", () => {
renderModal({ open: false });
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
});

describe("when open=true", () => {
it("renders the dialog element", () => {
renderModal();
expect(screen.getByRole("dialog")).toBeInTheDocument();
});

it("shows the announcement title", () => {
renderModal({
announcement: makeAnnouncement({ title: "Big Announcement" }),
});
expect(screen.getByText("Big Announcement")).toBeInTheDocument();
});

it("shows the formatted announcement date", () => {
renderModal({
announcement: makeAnnouncement({ date: "2024-06-15T12:00:00Z" }),
});
expect(screen.getByText("Jun 15, 2024")).toBeInTheDocument();
});

it("renders the close button with correct aria-label", () => {
renderModal();
expect(
screen.getByRole("button", { name: /close announcement/i }),
).toBeInTheDocument();
});

it("renders the 'Got it' button", () => {
renderModal();
expect(
screen.getByRole("button", { name: /got it/i }),
).toBeInTheDocument();
it("shows the formatted announcement date", () => {
renderModal({
announcement: makeAnnouncement({ date: "2024-06-15T12:00:00Z" }),
});
expect(screen.getByText("Jun 15, 2024")).toBeInTheDocument();
});

describe("accessibility", () => {
it("dialog is labelled by the title element", () => {
renderModal({
announcement: makeAnnouncement({ title: "My Announcement" }),
});
const dialog = screen.getByRole("dialog");
const labelledById = dialog.getAttribute("aria-labelledby");
expect(labelledById).toBeTruthy();

const titleEl = document.getElementById(labelledById!);
expect(titleEl).not.toBeNull();
expect(titleEl!.textContent).toBe("My Announcement");
it("labels the dialog with the announcement title", () => {
renderModal({
announcement: makeAnnouncement({ title: "My Announcement" }),
});
const labelledById = screen
.getByRole("dialog")
.getAttribute("aria-labelledby");
expect(labelledById).toBeTruthy();

const titleEl = document.getElementById(labelledById!);
expect(titleEl).not.toBeNull();
expect(titleEl!.textContent).toBe("My Announcement");
});

describe("close interactions", () => {
it("calls onClose when the close button is clicked", async () => {
it.each([/close announcement/i, /got it/i])(
"calls onClose when the %s button is clicked",
async (name) => {
const user = userEvent.setup();
const { onClose } = renderModal();

await user.click(
screen.getByRole("button", { name: /close announcement/i }),
);
await user.click(screen.getByRole("button", { name }));

expect(onClose).toHaveBeenCalledOnce();
});

it("calls onClose when 'Got it' is clicked", async () => {
const user = userEvent.setup();
const { onClose } = renderModal();

await user.click(screen.getByRole("button", { name: /got it/i }));

expect(onClose).toHaveBeenCalledOnce();
});
});
},
);
});
113 changes: 16 additions & 97 deletions ui/apps/console/src/components/billing/__tests__/BillingDialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,39 +97,20 @@ async function goToStep3(user: ReturnType<typeof userEvent.setup>) {

describe("BillingDialog", () => {
describe("Step 1 — Overview", () => {
it("renders BillingLetter on step 1", () => {
renderDialog();
expect(screen.getByTestId("billing-letter")).toBeInTheDocument();
});

it("shows a 'Next' button on step 1", () => {
renderDialog();
expect(screen.getByRole("button", { name: /next/i })).toBeInTheDocument();
});

it("clicking 'Next' advances to step 2 (BillingPayment)", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep2(user);
expect(screen.getByTestId("billing-payment")).toBeInTheDocument();
});

it("announces step 1 in the sr-only live region", () => {
renderDialog();
expect(screen.getByRole("status")).toHaveTextContent(
/step 1 of 4.*overview/i,
);
});
});

describe("Step 2 — Payment method", () => {
it("renders BillingPayment on step 2", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep2(user);

expect(screen.getByTestId("billing-payment")).toBeInTheDocument();
});
});

describe("Step 2 — Payment method", () => {
it("'Next' button is disabled until onHasDefault fires", async () => {
const user = userEvent.setup();
renderDialog();
Expand Down Expand Up @@ -159,37 +140,23 @@ describe("BillingDialog", () => {
it("clicking 'Next' after onHasDefault advances to step 3 (BillingCheckout)", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep3(user);
expect(screen.getByTestId("billing-checkout")).toBeInTheDocument();
});

it("announces step 2 in the sr-only live region", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep2(user);
expect(screen.getByRole("status")).toHaveTextContent(
/step 2 of 4.*payment method/i,
);
});
});

describe("Step 3 — Review", () => {
it("renders BillingCheckout on step 3", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep3(user);
expect(screen.getByTestId("billing-checkout")).toBeInTheDocument();
});
await user.click(screen.getByTestId("trigger-has-default"));
await user.click(screen.getByRole("button", { name: /^next$/i }));

it("has a 'Confirm subscription' button on step 3", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep3(user);
expect(
screen.getByRole("button", { name: /confirm subscription/i }),
).toBeInTheDocument();
expect(screen.getByTestId("billing-checkout")).toBeInTheDocument();
expect(screen.getByRole("status")).toHaveTextContent(
/step 3 of 4.*review/i,
);
});
});

describe("Step 3 — Review", () => {
it("advances to step 4 after subscription is active", async () => {
const user = userEvent.setup();
renderDialog();
Expand Down Expand Up @@ -310,15 +277,6 @@ describe("BillingDialog", () => {
).toBeDisabled(),
);
});

it("announces step 3 in the sr-only live region", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep3(user);
expect(screen.getByRole("status")).toHaveTextContent(
/step 3 of 4.*review/i,
);
});
});

describe("Step 4 — Success", () => {
Expand All @@ -332,29 +290,18 @@ describe("BillingDialog", () => {
);
}

it("renders BillingSuccessful on step 4", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep4(user);
expect(screen.getByTestId("billing-successful")).toBeInTheDocument();
});

it("clicking 'Done' calls onSuccess and onClose", async () => {
const user = userEvent.setup();
const { onClose, onSuccess } = renderDialog();
await goToStep4(user);
await user.click(screen.getByRole("button", { name: /done/i }));
expect(onSuccess).toHaveBeenCalledOnce();
expect(onClose).toHaveBeenCalledOnce();
});

it("announces step 4 in the sr-only live region", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep4(user);
expect(screen.getByRole("status")).toHaveTextContent(
/step 4 of 4.*success/i,
);

await user.click(screen.getByRole("button", { name: /done/i }));

expect(onSuccess).toHaveBeenCalledOnce();
expect(onClose).toHaveBeenCalledOnce();
});
});

Expand Down Expand Up @@ -402,33 +349,5 @@ describe("BillingDialog", () => {
await user.click(screen.getByRole("button", { name: /^close$/i }));
expect(onClose).toHaveBeenCalledOnce();
});

it("clicking the X (aria-label 'Close wizard') calls onClose on step 1", async () => {
const user = userEvent.setup();
const { onClose } = renderDialog();
await user.click(screen.getByRole("button", { name: /close wizard/i }));
expect(onClose).toHaveBeenCalledOnce();
});

it("close buttons are present on step 2", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep2(user);
expect(
screen.getByRole("button", { name: /close wizard/i }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: /^close$/i }),
).toBeInTheDocument();
});

it("close buttons are present on step 3", async () => {
const user = userEvent.setup();
renderDialog();
await goToStep3(user);
expect(
screen.getByRole("button", { name: /close wizard/i }),
).toBeInTheDocument();
});
});
});
Loading
Loading