1458e3e152
F3: add computeDictationAvailability assertions for the read-only ∩ pre-sync intersection (editable:false, inEditMode:true, showStatic:true) → read-only for both isDisconnected states, pinning that lack of edit permission takes precedence over the pre-sync reason (kills a mutant dropping `editable &&`). F4: switching native disabled → data-disabled made a disabled mic hoverable — good for the byline mic (shows the reason), but a consumer passing bare `disabled` without a reason (AI chat's isStreaming) got a misleading, actionable "Start dictation" tooltip on a click-rejecting control. Now: disabled + no reason → render the icon with NO Tooltip and a neutral aria-label; disabled + reason → reason tooltip; enabled → "Start dictation". Click guard/data-disabled preserved. F5: remove the dead "busy" DictationUnavailableReason (never produced) — union member, its resolver case (folded into default), and the vacuous test assert. vitest (dictation + editor-sync + dictation-group): 41 passed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
93 lines
3.6 KiB
TypeScript
93 lines
3.6 KiB
TypeScript
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { MantineProvider } from "@mantine/core";
|
|
|
|
// A disabled mic must explain WHY it is unavailable rather than silently saying
|
|
// "Start dictation". This renders MicButton in its idle+disabled state with a
|
|
// forwarded reason and asserts the accessible label resolves to that reason's
|
|
// text via the shared resolver (dictation-status.resolveUnavailableLabel).
|
|
|
|
// matchMedia (read by MantineProvider) is stubbed globally in vitest.setup.ts.
|
|
|
|
// Pass i18n keys through verbatim so we assert the exact resolved string.
|
|
vi.mock("react-i18next", () => ({
|
|
useTranslation: () => ({ t: (s: string) => s }),
|
|
}));
|
|
|
|
// Keep both controllers inert and idle so MicButton renders the idle branch.
|
|
const idleCtl = {
|
|
status: "idle" as const,
|
|
start: vi.fn(async () => {}),
|
|
stop: vi.fn(),
|
|
cancel: vi.fn(),
|
|
audioLevel: 0,
|
|
errorMessage: null,
|
|
};
|
|
vi.mock("@/features/dictation/hooks/use-dictation", () => ({
|
|
useDictation: () => idleCtl,
|
|
}));
|
|
vi.mock("@/features/dictation/hooks/use-streaming-dictation", () => ({
|
|
useStreamingDictation: () => idleCtl,
|
|
}));
|
|
|
|
import { MicButton } from "./mic-button";
|
|
|
|
function renderButton(props: React.ComponentProps<typeof MicButton>) {
|
|
render(
|
|
<MantineProvider>
|
|
<MicButton {...props} />
|
|
</MantineProvider>,
|
|
);
|
|
}
|
|
|
|
describe("MicButton — disabled reason label", () => {
|
|
// jsdom has no MediaRecorder / mediaDevices, so isDictationSupported() would
|
|
// report "unsupported" and mask the forwarded reason. Stub both so the button
|
|
// is considered supported and the availability reason is what surfaces.
|
|
beforeEach(() => {
|
|
(globalThis as unknown as { MediaRecorder: unknown }).MediaRecorder =
|
|
class {};
|
|
Object.defineProperty(navigator, "mediaDevices", {
|
|
configurable: true,
|
|
value: { getUserMedia: vi.fn() },
|
|
});
|
|
});
|
|
afterEach(() => {
|
|
delete (globalThis as unknown as { MediaRecorder?: unknown }).MediaRecorder;
|
|
});
|
|
|
|
it("shows the cause-specific reason instead of 'Start dictation' when disabled with a reason", () => {
|
|
renderButton({ onText: () => {}, disabled: true, unavailableReason: "offline" });
|
|
const expected =
|
|
"No connection to the collaboration server — dictation unavailable";
|
|
// The reason surfaces as the accessible label (and the tooltip text).
|
|
const button = screen.getByRole("button", { name: expected });
|
|
expect(button).toBeDefined();
|
|
// It is marked disabled the Mantine way (data-disabled), NOT the native
|
|
// `disabled` attribute — otherwise pointer-events:none would kill the tooltip.
|
|
expect(button.getAttribute("data-disabled")).toBe("true");
|
|
expect(button.hasAttribute("disabled")).toBe(false);
|
|
// And it no longer silently reads "Start dictation".
|
|
expect(screen.queryByRole("button", { name: "Start dictation" })).toBeNull();
|
|
});
|
|
|
|
it("reads 'Start dictation' when enabled with no reason", () => {
|
|
renderButton({ onText: () => {} });
|
|
expect(
|
|
screen.getByRole("button", { name: "Start dictation" }),
|
|
).toBeDefined();
|
|
});
|
|
|
|
it("does not advertise 'Start dictation' when disabled with no reason", () => {
|
|
// A consumer passing bare `disabled` (e.g. the AI chat's isStreaming) with no
|
|
// unavailableReason must not get a hoverable mic whose tooltip invites
|
|
// "Start dictation" on a click that is rejected.
|
|
renderButton({ onText: () => {}, disabled: true });
|
|
expect(
|
|
screen.queryByRole("button", { name: "Start dictation" }),
|
|
).toBeNull();
|
|
const button = screen.getByRole("button");
|
|
expect(button.getAttribute("data-disabled")).toBe("true");
|
|
});
|
|
});
|