1import { expect, it } from "vite-plus/test";
2import { userEvent } from "vite-plus/test/browser";
3
4import { render } from "../../../test/render";
5import "../../index.css";
6
7import { MarkdownMath } from "./MarkdownMath";
8
9it("keeps keyboard scrolling available as a streamed equation outgrows its viewport", async () => {
10 const equation = (tex: string, width = 180) => (
11 <div style={{ width }}>
12 <button>Before equation</button>
13 <MarkdownMath tex={tex} display />
14 <button>After equation</button>
15 </div>
16 );
17 await using screen = await render(equation("x"));
18 await screen.getByRole("button", { name: "Before equation" }).click();
19 await userEvent.keyboard("{Tab}");
20 await expect.element(screen.getByRole("button", { name: "After equation" })).toHaveFocus();
21
22 await screen.rerender(equation("x_1 + x_2 + x_3 + x_4 + x_5 + x_6 + x_7 + x_8"));
23 const scroller = screen.getByLabelText("Scroll display equation");
24 await expect.element(scroller).toHaveAttribute("tabindex", "0");
25 await screen.getByRole("button", { name: "Before equation" }).click();
26 await userEvent.keyboard("{Tab}");
27 await expect.element(scroller).toHaveFocus();
28 await userEvent.keyboard("{ArrowRight}");
29 await expect.element(scroller).not.toHaveProperty("scrollLeft", 0);
30
31 await screen.rerender(equation("x_1 + x_2 + x_3 + x_4 + x_5 + x_6 + x_7 + x_8", 1000));
32 await expect.element(screen.getByLabelText("Scroll display equation")).not.toBeInTheDocument();
33 await screen.getByRole("button", { name: "Before equation" }).click();
34 await userEvent.keyboard("{Tab}");
35 await expect.element(screen.getByRole("button", { name: "After equation" })).toHaveFocus();
36});