João Salavisa
a6ab8deff6
* feat(github): mobile-friendly /github page with sidebar drawer On narrow viewports the preset sidebar consumed most of the screen and the list toolbar's fixed-width filters wrapped awkwardly. Hide the inline aside below md and add a hamburger button in the topbar that opens the same PresetsSidebar inside a right-side Sheet, mirroring the kanban mobile pattern. Reflow ListToolbar so title + count + refresh stack on top with the repo filter and custom-query input going full-width below. Selecting a preset in the drawer closes it. Includes a Pixel 5 Playwright spec covering the open → select → close flow. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * test(github): use data-testid for mobile toolbar title selector Replace brittle class-based locator (h2.text-sm.font-semibold) in the mobile page object with a stable data-testid on the heading so the spec doesn't silently break if Tailwind classes change. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(github): address mobile /github bot review feedback - Drop useCallback wrappers on onMobileSidebarSelect / onMobileSaveCurrent. `state` from useGitHubPageState() is a fresh object every render, so the [state] dep caused the callbacks to be re-created every pass anyway — the useCallback was deceptive. Use plain arrow functions and document. (Claude inline, Greptile P2) - Remove the sr-only <span> on the hamburger button. `aria-label` takes precedence over child sr-only text for screen readers, so the span was unreachable duplicate content. (Claude inline) - MobileGitHubPage.goto() now waits on the mobile menu button instead of the ambiguous "GitHub" breadcrumb text — deterministic and matches the mobile mount semantics. (CodeRabbit inline) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Kandev Agent <agent@kandev.dev> Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { test, expect } from "../../fixtures/test-base";
|
|
import { MobileGitHubPage } from "../../pages/mobile-github-page";
|
|
|
|
test.describe("Mobile /github sidebar", () => {
|
|
test("hamburger opens sheet and selecting a preset updates the toolbar", async ({
|
|
testPage,
|
|
apiClient,
|
|
}) => {
|
|
await apiClient.mockGitHubReset();
|
|
await apiClient.mockGitHubSetUser("test-user");
|
|
await apiClient.mockGitHubAddPRs([
|
|
{
|
|
number: 200,
|
|
title: "Mobile sidebar PR",
|
|
state: "open",
|
|
head_branch: "feat/mobile",
|
|
base_branch: "main",
|
|
author_login: "test-user",
|
|
repo_owner: "testorg",
|
|
repo_name: "testrepo",
|
|
},
|
|
]);
|
|
|
|
const page = new MobileGitHubPage(testPage);
|
|
await page.goto();
|
|
|
|
// On a mobile viewport the inline desktop sidebar is hidden and the
|
|
// hamburger menu button is visible.
|
|
await expect(page.mobileMenuButton).toBeVisible();
|
|
await expect(page.inlineSidebar).toBeHidden();
|
|
|
|
// Default selection is the first PR preset.
|
|
await expect(page.toolbarTitle).toContainText("Review requested");
|
|
|
|
// Sheet is closed initially.
|
|
await expect(page.mobileSidebar).toBeHidden();
|
|
|
|
// Open the drawer.
|
|
await page.mobileMenuButton.tap();
|
|
await expect(page.mobileSidebar).toBeVisible();
|
|
|
|
// Tap a different preset → the drawer closes and the toolbar title
|
|
// reflects the new selection.
|
|
await page.presetByLabel("Mentions").tap();
|
|
await expect(page.mobileSidebar).toBeHidden();
|
|
await expect(page.toolbarTitle).toContainText("Mentions");
|
|
});
|
|
});
|