71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { beforeAll, describe, expect, it, vi } from "vitest";
|
|
import { EditorProvider, useEditorContext } from "@/components/MemoEditor/state";
|
|
import InsertMenu from "@/components/MemoEditor/Toolbar/InsertMenu";
|
|
|
|
// useTranslate returns the i18n key directly (no i18next backend in tests).
|
|
vi.mock("@/utils/i18n", () => ({ useTranslate: () => (key: string) => key }));
|
|
// The link/location dialogs drag in maps + heavy deps; they're closed here.
|
|
vi.mock("@/components/MemoMetadata", () => ({ LinkMemoDialog: () => null, LocationDialog: () => null }));
|
|
// useLinkMemo → useCurrentUser → useAuth would need an AuthProvider; stub the user.
|
|
vi.mock("@/hooks/useCurrentUser", () => ({ default: () => ({ name: "users/test" }) }));
|
|
|
|
// Radix DropdownMenu reaches for layout/pointer APIs jsdom doesn't implement.
|
|
beforeAll(() => {
|
|
Element.prototype.scrollIntoView = vi.fn();
|
|
Element.prototype.hasPointerCapture = vi.fn(() => false);
|
|
Element.prototype.setPointerCapture = vi.fn();
|
|
Element.prototype.releasePointerCapture = vi.fn();
|
|
});
|
|
|
|
function ModeProbe() {
|
|
const { state } = useEditorContext();
|
|
return <span data-testid="mode">{state.ui.editorMode}</span>;
|
|
}
|
|
|
|
function renderInsertMenu() {
|
|
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
render(
|
|
<QueryClientProvider client={client}>
|
|
<EditorProvider>
|
|
<InsertMenu onLocationChange={() => {}} />
|
|
<ModeProbe />
|
|
</EditorProvider>
|
|
</QueryClientProvider>,
|
|
);
|
|
}
|
|
|
|
// Opens the "+" dropdown, then its "More" submenu, and returns the
|
|
// "WYSIWYG Editor" checkbox item.
|
|
function openWysiwygCheckbox() {
|
|
// Open the dropdown (keyboard open is the most reliable path in jsdom).
|
|
fireEvent.keyDown(screen.getByRole("button"), { key: "Enter" });
|
|
// Open the "More" submenu (controlled open state toggles on trigger click).
|
|
fireEvent.click(screen.getByText("common.more"));
|
|
return screen.getByText("editor.wysiwyg-editor");
|
|
}
|
|
|
|
describe("InsertMenu editor-mode toggle", () => {
|
|
it("unchecking the WYSIWYG item switches to raw and persists the preference", () => {
|
|
localStorage.clear();
|
|
renderInsertMenu();
|
|
expect(screen.getByTestId("mode").textContent).toBe("wysiwyg");
|
|
|
|
fireEvent.click(openWysiwygCheckbox());
|
|
|
|
expect(screen.getByTestId("mode").textContent).toBe("raw");
|
|
expect(localStorage.getItem("memos-editor-mode")).toBe("raw");
|
|
});
|
|
|
|
it("checking the WYSIWYG item switches back to rich text from raw mode", () => {
|
|
localStorage.setItem("memos-editor-mode", "raw");
|
|
renderInsertMenu();
|
|
expect(screen.getByTestId("mode").textContent).toBe("raw");
|
|
|
|
fireEvent.click(openWysiwygCheckbox());
|
|
|
|
expect(screen.getByTestId("mode").textContent).toBe("wysiwyg");
|
|
expect(localStorage.getItem("memos-editor-mode")).toBe("wysiwyg");
|
|
});
|
|
});
|