root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-3357): stabilize mobile keyboard tests in ChatView

Browse Source 
Stabilizes mobile keyboard tests in ChatView by refining timing assertions and test setup, addressing FN-3357 regressions in the third and final step of the fix.

Fusion-Task-Id: FN-3357
This commit is contained in:
Fusion
2026-05-04 18:34:31 -07:00
committed by gsxdsm
parent 9deb19484f
commit 1fed8ff7bc
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/dashboard/app/components/__tests__/ChatView.test.tsx
View File

@@ -2397,6 +2397,7 @@ describe("ChatView mobile behavior", () => {
let savedOntouchstart: typeof window.ontouchstart; let savedOntouchstart: typeof window.ontouchstart;
beforeEach(() => { beforeEach(() => {
_resetInitialViewportHeight();
savedVisualViewport = window.visualViewport; savedVisualViewport = window.visualViewport;
savedInnerHeight = window.innerHeight; savedInnerHeight = window.innerHeight;
savedOntouchstart = window.ontouchstart; savedOntouchstart = window.ontouchstart;
@@ -2589,7 +2590,6 @@ describe("ChatView mobile behavior", () => {
it("mobile mode: sets and clears keyboard overlap CSS vars on chat thread", async () => { it("mobile mode: sets and clears keyboard overlap CSS vars on chat thread", async () => {
const restoreMatchMedia = mockMobileViewport(); const restoreMatchMedia = mockMobileViewport();
_resetInitialViewportHeight();
const { listeners, mockVV } = mockMobileVisualViewport({ const { listeners, mockVV } = mockMobileVisualViewport({
innerHeight: 844, innerHeight: 844,
vvHeight: 844, vvHeight: 844,
@@ -2610,7 +2610,12 @@ describe("ChatView mobile behavior", () => {
// Focus the chat textarea so the hook treats the active element as a // Focus the chat textarea so the hook treats the active element as a
// keyboard-focusable target. // keyboard-focusable target.
const textarea = screen.getByTestId("chat-input") as HTMLTextAreaElement; const textarea = screen.getByTestId("chat-input") as HTMLTextAreaElement;
textarea.focus(); await act(async () => {
textarea.focus();
});
act(() => {
document.dispatchEvent(new Event("focusin"));
});
Object.defineProperty(window, "innerHeight", { Object.defineProperty(window, "innerHeight", {
value: 560, value: 560,
@@ -2656,7 +2661,6 @@ describe("ChatView mobile behavior", () => {
it("mobile mode: applies --vv-height when keyboard opens with zero overlap (iOS last-resort signal)", async () => { it("mobile mode: applies --vv-height when keyboard opens with zero overlap (iOS last-resort signal)", async () => {
const restoreMatchMedia = mockMobileViewport(); const restoreMatchMedia = mockMobileViewport();
_resetInitialViewportHeight();
const { listeners, mockVV } = mockMobileVisualViewport({ const { listeners, mockVV } = mockMobileVisualViewport({
innerHeight: 800, innerHeight: 800,
vvHeight: 800, vvHeight: 800,
@@ -2678,7 +2682,12 @@ describe("ChatView mobile behavior", () => {
// keyboard-focusable target — this is what unlocks the iOS last-resort // keyboard-focusable target — this is what unlocks the iOS last-resort
// signal where viewport shrinks but offsetTop+height closes the gap. // signal where viewport shrinks but offsetTop+height closes the gap.
const textarea = screen.getByTestId("chat-input") as HTMLTextAreaElement; const textarea = screen.getByTestId("chat-input") as HTMLTextAreaElement;
textarea.focus(); await act(async () => {
textarea.focus();
});
act(() => {
document.dispatchEvent(new Event("focusin"));
});
// iOS scenario: vv.height shrinks by 16px, vv.offsetTop also = 16. // iOS scenario: vv.height shrinks by 16px, vv.offsetTop also = 16.
// Both chromeOverlap (innerHeight - offsetTop - height) and the gap // Both chromeOverlap (innerHeight - offsetTop - height) and the gap
@@ -2735,14 +2744,15 @@ describe("ChatView mobile behavior", () => {
configurable: true, configurable: true,
}); });
// Focus the chat input so the hook treats the viewport shrink as a keyboard-open event.
const chatInput = screen.getByTestId("chat-input");
chatInput.focus();
// Focus the chat textarea so the hook treats the active element as a // Focus the chat textarea so the hook treats the active element as a
// keyboard-focusable target. // keyboard-focusable target.
const textarea = screen.getByTestId("chat-input") as HTMLTextAreaElement; const textarea = screen.getByTestId("chat-input") as HTMLTextAreaElement;
textarea.focus(); await act(async () => {
textarea.focus();
});
act(() => {
document.dispatchEvent(new Event("focusin"));
});
Object.defineProperty(window, "innerHeight", { Object.defineProperty(window, "innerHeight", {
value: 560, value: 560,