test(frontend): harden UserMenu RTL mocks and local sign-out assertions
This commit is contained in:
@@ -1,4 +1,10 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import type {
|
||||
AnchorHTMLAttributes,
|
||||
ImgHTMLAttributes,
|
||||
PropsWithChildren,
|
||||
ReactNode,
|
||||
} from "react";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
@@ -7,9 +13,13 @@ import { UserMenu } from "./UserMenu";
|
||||
const useUserMock = vi.hoisted(() => vi.fn());
|
||||
const clearLocalAuthTokenMock = vi.hoisted(() => vi.fn());
|
||||
const isLocalAuthModeMock = vi.hoisted(() => vi.fn());
|
||||
type LinkProps = PropsWithChildren<{
|
||||
href: string | { pathname?: string };
|
||||
}> &
|
||||
Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
|
||||
|
||||
vi.mock("next/image", () => ({
|
||||
default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
|
||||
default: (props: ImgHTMLAttributes<HTMLImageElement>) => (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img {...props} alt={props.alt ?? ""} />
|
||||
),
|
||||
@@ -20,11 +30,7 @@ vi.mock("next/link", () => ({
|
||||
children,
|
||||
href,
|
||||
...rest
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
href?: string;
|
||||
[key: string]: unknown;
|
||||
}) => (
|
||||
}: LinkProps) => (
|
||||
<a href={typeof href === "string" ? href : "#"} {...rest}>
|
||||
{children}
|
||||
</a>
|
||||
@@ -33,7 +39,7 @@ vi.mock("next/link", () => ({
|
||||
|
||||
vi.mock("@/auth/clerk", () => ({
|
||||
useUser: useUserMock,
|
||||
SignOutButton: ({ children }: { children: React.ReactNode }) => children,
|
||||
SignOutButton: ({ children }: { children: ReactNode }) => children,
|
||||
}));
|
||||
|
||||
vi.mock("@/auth/localAuth", () => ({
|
||||
@@ -42,6 +48,12 @@ vi.mock("@/auth/localAuth", () => ({
|
||||
}));
|
||||
|
||||
describe("UserMenu", () => {
|
||||
beforeEach(() => {
|
||||
useUserMock.mockReset();
|
||||
clearLocalAuthTokenMock.mockReset();
|
||||
isLocalAuthModeMock.mockReset();
|
||||
});
|
||||
|
||||
it("renders and opens local-mode menu actions", async () => {
|
||||
const user = userEvent.setup();
|
||||
useUserMock.mockReturnValue({ user: null });
|
||||
@@ -51,8 +63,34 @@ describe("UserMenu", () => {
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /open user menu/i }));
|
||||
|
||||
expect(screen.getByRole("link", { name: /open boards/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("link", { name: /create board/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: /sign out/i })).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("link", { name: /open boards/i }),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("link", { name: /create board/i }),
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("button", { name: /sign out/i }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("clears local auth token and reloads on local sign out", async () => {
|
||||
const user = userEvent.setup();
|
||||
useUserMock.mockReturnValue({ user: null });
|
||||
isLocalAuthModeMock.mockReturnValue(true);
|
||||
const reloadSpy = vi.fn();
|
||||
vi.stubGlobal("location", {
|
||||
...window.location,
|
||||
reload: reloadSpy,
|
||||
} as Location);
|
||||
|
||||
render(<UserMenu />);
|
||||
|
||||
await user.click(screen.getByRole("button", { name: /open user menu/i }));
|
||||
await user.click(screen.getByRole("button", { name: /sign out/i }));
|
||||
|
||||
expect(clearLocalAuthTokenMock).toHaveBeenCalledTimes(1);
|
||||
expect(reloadSpy).toHaveBeenCalledTimes(1);
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user