146 lines
4.3 KiB
TypeScript
146 lines
4.3 KiB
TypeScript
import { afterEach, describe, expect, test, vi } from "vitest";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { within } from "@testing-library/react";
|
|
import {
|
|
cleanup,
|
|
renderWithProviders as render,
|
|
screen,
|
|
} from "../utils/test-utils";
|
|
import {
|
|
ProfilePageView,
|
|
type ProfilePageViewProps,
|
|
} from "../../app/(app)/profile/_components/ProfilePage.view";
|
|
import messages from "../../messages/en/index";
|
|
|
|
const copy = messages.pages.profile;
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
function viewProps(
|
|
overrides: Partial<ProfilePageViewProps> = {},
|
|
): ProfilePageViewProps {
|
|
return {
|
|
userEmail: "dani@example.com",
|
|
ruleCardSize: "M",
|
|
profileLgUp: true,
|
|
profileListSize: "l",
|
|
rules: [],
|
|
rulesError: false,
|
|
draft: null,
|
|
showDraftCard: false,
|
|
ruleDeleteOpen: false,
|
|
ruleDeleteBusy: false,
|
|
draftDeleteOpen: false,
|
|
draftDeleteBusy: false,
|
|
accountDeleteOpen: false,
|
|
accountDeleteBusy: false,
|
|
actionError: null,
|
|
profileSuccessMessage: null,
|
|
emailChangeOpen: false,
|
|
emailChangeValue: "",
|
|
onEmailChangeValueChange: vi.fn(),
|
|
emailChangeBusy: false,
|
|
emailChangeRequestSent: false,
|
|
emailChangeModalError: null,
|
|
onDismissEmailChangeModalError: vi.fn(),
|
|
onOpenEmailChange: vi.fn(),
|
|
onCloseEmailChange: vi.fn(),
|
|
onSubmitEmailChange: vi.fn(),
|
|
onSignOut: vi.fn(),
|
|
onDeleteRule: vi.fn(),
|
|
onCloseDeleteRule: vi.fn(),
|
|
onConfirmDeleteRule: vi.fn(),
|
|
onDuplicateRule: vi.fn(),
|
|
onContinueDraft: vi.fn(),
|
|
onDeleteDraft: vi.fn(),
|
|
onCloseDeleteDraft: vi.fn(),
|
|
onConfirmDeleteDraft: vi.fn(),
|
|
onOpenDeleteAccount: vi.fn(),
|
|
onCloseDeleteAccount: vi.fn(),
|
|
onConfirmDeleteAccount: vi.fn(),
|
|
onDismissProfileSuccess: vi.fn(),
|
|
onDismissActionError: vi.fn(),
|
|
onDismissRulesError: vi.fn(),
|
|
onStartNewCustomRule: vi.fn(),
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
describe("ProfilePageView", () => {
|
|
test("puts delete account in its own danger area", () => {
|
|
render(<ProfilePageView {...viewProps()} />);
|
|
|
|
const options = screen.getByRole("navigation", {
|
|
name: copy.yourOptionsHeading,
|
|
});
|
|
expect(
|
|
within(options).getByRole("button", { name: copy.optionCreateCustom }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
within(options).queryByRole("button", { name: copy.deleteAccount }),
|
|
).not.toBeInTheDocument();
|
|
expect(screen.queryByText(copy.deleteAccountIntro)).not.toBeInTheDocument();
|
|
|
|
const danger = screen.getByRole("region", { name: copy.deleteAccount });
|
|
expect(danger.className).toContain(
|
|
"border-[var(--color-border-default-negative-primary)]",
|
|
);
|
|
const deleteAccount = within(danger).getByRole("button", {
|
|
name: copy.deleteAccount,
|
|
});
|
|
const deleteTitle = within(deleteAccount).getByText(copy.deleteAccount);
|
|
expect(deleteTitle.className).toContain(
|
|
"!text-[var(--color-content-default-negative-primary)]",
|
|
);
|
|
expect(deleteAccount.firstElementChild?.className).not.toContain(
|
|
"negative-primary",
|
|
);
|
|
expect(deleteAccount.lastElementChild?.className).not.toContain(
|
|
"negative-primary",
|
|
);
|
|
});
|
|
|
|
test("asks for confirmation before deleting the account", async () => {
|
|
const user = userEvent.setup();
|
|
const onOpenDeleteAccount = vi.fn();
|
|
const onConfirmDeleteAccount = vi.fn();
|
|
const { rerender } = render(
|
|
<ProfilePageView {...viewProps({ onOpenDeleteAccount })} />,
|
|
);
|
|
|
|
await user.click(
|
|
screen.getByRole("button", { name: copy.deleteAccount }),
|
|
);
|
|
expect(onOpenDeleteAccount).toHaveBeenCalledTimes(1);
|
|
|
|
rerender(
|
|
<ProfilePageView
|
|
{...viewProps({
|
|
onOpenDeleteAccount,
|
|
onConfirmDeleteAccount,
|
|
accountDeleteOpen: true,
|
|
})}
|
|
/>,
|
|
);
|
|
|
|
const dialog = screen.getByRole("dialog", {
|
|
name: copy.deleteAccountModalTitle,
|
|
});
|
|
expect(dialog).toHaveTextContent(copy.deleteAccountModalBody);
|
|
const confirm = within(dialog).getByRole("button", {
|
|
name: copy.deleteAccountConfirm,
|
|
});
|
|
expect(confirm.className).toContain(
|
|
"border-[var(--color-border-default-negative-primary)]",
|
|
);
|
|
expect(confirm.className).not.toContain(
|
|
"bg-[var(--color-surface-inverse-primary)]",
|
|
);
|
|
|
|
await user.click(confirm);
|
|
expect(onConfirmDeleteAccount).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|