Add functional QWord ribbon tabs

2026-06-02 08:25:50 +03:00
parent 24fbae8a01
commit 06c6a99e6d
3 changed files with 216 additions and 8 deletions
@@ -1,9 +1,13 @@
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 import { vi } from "vitest";
 import type { WordDocument } from "../../types";
 import { QWord, qwordCurrentPageFromViewport } from "./QWord";

+afterEach(() => {
+  cleanup();
+});
+
 describe("qwordCurrentPageFromViewport", () => {
  it("вычисляет текущую страницу по положению листа в области просмотра", () => {
    expect(qwordCurrentPageFromViewport({ stageTop: 34, paperTop: 227, pageHeight: 1123, pageCount: 3, zoom: 1 })).toBe(1);
@@ -18,6 +22,86 @@ describe("qwordCurrentPageFromViewport", () => {
 });

 describe("QWord", () => {
+  it("переключает вкладки ленты и показывает команды выбранной вкладки", () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+
+    globalThis.ResizeObserver = class {
+      observe() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+    window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    }) as typeof window.requestAnimationFrame;
+
+    const document: WordDocument = {
+      id: "word-ribbon-tabs-test",
+      title: "Лента.docx",
+      updatedAt: "2026-06-02T00:00:00.000Z",
+      html: "<p>Текст</p>"
+    };
+
+    try {
+      render(<QWord document={document} onChange={vi.fn()} />);
+
+      expect(screen.getByRole("tab", { name: "Главная" })).toHaveAttribute("aria-selected", "true");
+      expect(screen.getByRole("region", { name: "Шрифт" })).toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole("tab", { name: "Вставка" }));
+
+      expect(screen.getByRole("tab", { name: "Вставка" })).toHaveAttribute("aria-selected", "true");
+      expect(screen.getByRole("region", { name: "Вставка" })).toBeInTheDocument();
+      expect(screen.queryByRole("region", { name: "Шрифт" })).not.toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole("tab", { name: "Файл" }));
+
+      expect(screen.getByRole("tab", { name: "Файл" })).toHaveAttribute("aria-selected", "true");
+      expect(screen.getByRole("region", { name: "Файл" })).toBeInTheDocument();
+      expect(screen.queryByRole("region", { name: "Вставка" })).not.toBeInTheDocument();
+    } finally {
+      globalThis.ResizeObserver = originalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+    }
+  });
+
+  it("переключает режим просмотра документа на вкладке Вид", () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+
+    globalThis.ResizeObserver = class {
+      observe() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+    window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    }) as typeof window.requestAnimationFrame;
+
+    const document: WordDocument = {
+      id: "word-view-mode-test",
+      title: "Вид.docx",
+      updatedAt: "2026-06-02T00:00:00.000Z",
+      html: "<p>Текст</p>"
+    };
+
+    try {
+      render(<QWord document={document} onChange={vi.fn()} />);
+      const stage = screen.getByLabelText("Редактор QWord");
+
+      expect(stage).toHaveClass("qword-view-print");
+
+      fireEvent.click(screen.getByRole("tab", { name: "Вид" }));
+      fireEvent.click(screen.getByRole("button", { name: "Веб-документ" }));
+
+      expect(stage).toHaveClass("qword-view-web");
+      expect(screen.getByRole("button", { name: "Веб-документ" })).toHaveAttribute("aria-pressed", "true");
+    } finally {
+      globalThis.ResizeObserver = originalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+    }
+  });
+
  it("обновляет текущую страницу в статусе при прокрутке документа", async () => {
    const originalResizeObserver = globalThis.ResizeObserver;
    const originalRequestAnimationFrame = window.requestAnimationFrame;