fix(chat): calibrate Facebook IAB keyboard fallback
This commit is contained in:
@@ -84,27 +84,36 @@ describe("resolveChatKeyboardInset", () => {
|
||||
|
||||
describe("resolveChatKeyboardFallbackInset", () => {
|
||||
it.each([
|
||||
[{ layoutWidth: 320, layoutHeight: 568 }, 256],
|
||||
[{ layoutWidth: 360, layoutHeight: 640 }, 285],
|
||||
[{ layoutWidth: 390, layoutHeight: 844 }, 316],
|
||||
[{ layoutWidth: 430, layoutHeight: 932 }, 347],
|
||||
[{ layoutWidth: 320, layoutHeight: 568 }, 260],
|
||||
[{ layoutWidth: 360, layoutHeight: 640 }, 291],
|
||||
[{ layoutWidth: 390, layoutHeight: 844 }, 344],
|
||||
[{ layoutWidth: 430, layoutHeight: 932 }, 356],
|
||||
])("fits common viewport %o", (viewport, expectedInset) => {
|
||||
expect(resolveChatKeyboardFallbackInset(viewport)).toBe(expectedInset);
|
||||
});
|
||||
|
||||
it("covers the reported 392 by 760 Facebook viewport", () => {
|
||||
expect(
|
||||
resolveChatKeyboardFallbackInset({
|
||||
layoutWidth: 392,
|
||||
layoutHeight: 760,
|
||||
}),
|
||||
).toBe(343);
|
||||
});
|
||||
|
||||
it("stays stable across tall viewports with the same width", () => {
|
||||
expect(
|
||||
resolveChatKeyboardFallbackInset({
|
||||
layoutWidth: 390,
|
||||
layoutHeight: 760,
|
||||
}),
|
||||
).toBe(316);
|
||||
).toBe(343);
|
||||
expect(
|
||||
resolveChatKeyboardFallbackInset({
|
||||
layoutWidth: 390,
|
||||
layoutHeight: 900,
|
||||
}),
|
||||
).toBe(316);
|
||||
).toBe(344);
|
||||
});
|
||||
|
||||
it("keeps the keyboard estimate within its bounds", () => {
|
||||
|
||||
@@ -104,7 +104,7 @@ describe("useChatKeyboardAvoidance", () => {
|
||||
expect(getBottomInset(container)).toBe("");
|
||||
|
||||
act(() => vi.advanceTimersByTime(1));
|
||||
expect(getBottomInset(container)).toBe("316px");
|
||||
expect(getBottomInset(container)).toBe("344px");
|
||||
expect(intervalSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@@ -188,7 +188,7 @@ describe("useChatKeyboardAvoidance", () => {
|
||||
renderHarness(root, false);
|
||||
renderHarness(root, true);
|
||||
act(() => vi.advanceTimersByTime(150));
|
||||
expect(getBottomInset(container)).toBe("316px");
|
||||
expect(getBottomInset(container)).toBe("344px");
|
||||
|
||||
visualViewport.height = 500;
|
||||
act(() => {
|
||||
@@ -203,7 +203,7 @@ describe("useChatKeyboardAvoidance", () => {
|
||||
renderHarness(root, false);
|
||||
renderHarness(root, true);
|
||||
act(() => vi.advanceTimersByTime(150));
|
||||
expect(getBottomInset(container)).toBe("316px");
|
||||
expect(getBottomInset(container)).toBe("344px");
|
||||
|
||||
renderHarness(root, false);
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export const CHAT_KEYBOARD_VISIBLE_THRESHOLD_PX = 80;
|
||||
export const CHAT_KEYBOARD_ZOOM_THRESHOLD = 1.05;
|
||||
export const CHAT_KEYBOARD_TARGET_GAP_PX = 16;
|
||||
export const CHAT_KEYBOARD_FALLBACK_WIDTH_RATIO = 0.77;
|
||||
export const CHAT_KEYBOARD_FALLBACK_HEIGHT_RATIO = 0.42;
|
||||
export const CHAT_KEYBOARD_FALLBACK_WIDTH_RATIO = 0.84;
|
||||
export const CHAT_KEYBOARD_FALLBACK_HEIGHT_RATIO = 0.43;
|
||||
export const CHAT_KEYBOARD_FALLBACK_MIN_PX = 240;
|
||||
export const CHAT_KEYBOARD_FALLBACK_MAX_PX = 340;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user