From 9bd1407ca658545c8817f619a05669b1d9ad4d14 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 5 May 2026 13:33:11 +0800
Subject: [PATCH] test(app/e2e): mobile sidebar open/close transition (Cluster
 G6) (#746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* test(app/e2e): sidebar query pause + mobile open/close transition (Cluster G6)

G6.1: assert fetch_workspaces_request stops being sent when desktop sidebar
is closed (CDP WebSocket frame counting, no store injection).

G6.2: assert mobile sidebar panel animates in/out at 390×844 viewport via
toBeInViewport on translateX-animated element.

Adds installWorkspaceFetchMonitor, expectWorkspaceListSubscribed,
closeSidebar, openMobileAgentSidebar, closeMobileAgentSidebar,
expectMobileAgentSidebarVisible, and expectMobileAgentSidebarHidden helpers.

* test(app/e2e): mobile sidebar open/close transition (Cluster G6)

G6.1 (query-pause perf invariant) reclassified as a unit-test follow-up
— counting internal RPC frames in E2E is banned per updated roadmap.

G6.2: asserts mobile sidebar panel animates in/out at 390×844 viewport
via toBeInViewport on the translateX-animated sidebar-sessions element.

Adds openMobileAgentSidebar, closeMobileAgentSidebar,
expectMobileAgentSidebarVisible, and expectMobileAgentSidebarHidden helpers.
---
 packages/app/e2e/helpers/sidebar.ts        | 18 ++++++++++++++++++
 packages/app/e2e/sidebar-workspace.spec.ts | 19 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/packages/app/e2e/helpers/sidebar.ts b/packages/app/e2e/helpers/sidebar.ts
index de839e770..eaea7c09b 100644
--- a/packages/app/e2e/helpers/sidebar.ts
+++ b/packages/app/e2e/helpers/sidebar.ts
@@ -19,3 +19,21 @@ export async function expectWorkspaceListed(page: Page, name: string): Promise<v
     page.locator('[data-testid^="sidebar-workspace-row-"]').filter({ hasText: name }).first(),
   ).toBeVisible({ timeout: 30_000 });
 }
+
+export async function openMobileAgentSidebar(page: Page): Promise<void> {
+  await page.getByTestId("menu-button").click();
+}
+
+// force=true: the overlay covers the button when the mobile sidebar is open.
+export async function closeMobileAgentSidebar(page: Page): Promise<void> {
+  await page.getByTestId("menu-button").click({ force: true });
+}
+
+// The mobile sidebar panel animates via translateX; toBeInViewport reflects the rendered position.
+export async function expectMobileAgentSidebarVisible(page: Page): Promise<void> {
+  await expect(page.getByTestId("sidebar-sessions")).toBeInViewport({ timeout: 5_000 });
+}
+
+export async function expectMobileAgentSidebarHidden(page: Page): Promise<void> {
+  await expect(page.getByTestId("sidebar-sessions")).not.toBeInViewport({ timeout: 5_000 });
+}
diff --git a/packages/app/e2e/sidebar-workspace.spec.ts b/packages/app/e2e/sidebar-workspace.spec.ts
index a4e2a2509..5abc44775 100644
--- a/packages/app/e2e/sidebar-workspace.spec.ts
+++ b/packages/app/e2e/sidebar-workspace.spec.ts
@@ -4,6 +4,12 @@ import { tmpdir } from "node:os";
 import path from "node:path";
 import { test, expect } from "./fixtures";
 import { gotoAppShell } from "./helpers/app";
+import {
+  closeMobileAgentSidebar,
+  expectMobileAgentSidebarHidden,
+  expectMobileAgentSidebarVisible,
+  openMobileAgentSidebar,
+} from "./helpers/sidebar";
 import { createTempGitRepo } from "./helpers/workspace";
 import { expectWorkspaceHeader } from "./helpers/workspace-ui";
 import { connectWorkspaceSetupClient } from "./helpers/workspace-setup";
@@ -180,3 +186,16 @@ test.describe("Sidebar workspace list", () => {
     }
   });
 });
+
+test.describe("Mobile sidebar panelState transition", () => {
+  test.use({ viewport: { width: 390, height: 844 } });
+
+  test("showMobileAgent open and close transition", async ({ page }) => {
+    await gotoAppShell(page);
+    await expectMobileAgentSidebarHidden(page);
+    await openMobileAgentSidebar(page);
+    await expectMobileAgentSidebarVisible(page);
+    await closeMobileAgentSidebar(page);
+    await expectMobileAgentSidebarHidden(page);
+  });
+});