Files
stablyai--orca/tests/e2e/workspace-back-forward-navigation.spec.ts
2026-07-13 13:05:33 +08:00

278 lines
11 KiB
TypeScript

/**
* E2E tests for the workspace Back / Forward titlebar buttons + their
* Cmd/Ctrl+Alt+Arrow shortcuts.
*
* Covers edge cases that unit tests cannot exercise:
* - Button DOM disabled/hidden states across view transitions.
* - De-dup: re-activating the current worktree does not grow history.
* - Forward-stack truncation after a mid-history activation.
* - Keyboard shortcuts fire the same back/forward path as clicks.
* - Shortcuts no-op in non-terminal views (buttons also hidden there).
*/
import { test, expect } from './helpers/orca-app'
import type { Page } from '@stablyai/playwright-test'
import {
waitForSessionReady,
waitForActiveWorktree,
getActiveWorktreeId,
getAllWorktreeIds,
ensureTerminalVisible
} from './helpers/store'
import { worktreeRow } from './worktree-row-locators'
/**
* Record a visit through the same two store calls that
* `activateAndRevealWorktree` makes for the history slice, without having to
* expose the activation helper on window. This mirrors production ordering:
* `setActiveWorktree` first, then `recordWorktreeVisit` (skipped by the real
* helper when `isNavigatingHistory` is true — not relevant for seeding).
*/
async function seedVisit(page: Page, worktreeId: string): Promise<void> {
await page.evaluate((id) => {
// Why: window.__store is typed minimally in runtime-types.ts. At runtime it
// is the full Zustand vanilla store (setState/getState/subscribe), so we
// widen to call the nav-history slice actions directly.
type StoreLike = {
getState: () => {
setActiveWorktree: (worktreeId: string) => void
recordWorktreeVisit: (worktreeId: string) => void
}
}
const store = window.__store as unknown as StoreLike
const state = store.getState()
state.setActiveWorktree(id)
state.recordWorktreeVisit(id)
}, worktreeId)
}
async function getNavHistorySnapshot(page: Page): Promise<{ history: string[]; index: number }> {
return page.evaluate(() => {
type StoreLike = {
getState: () => {
worktreeNavHistory: string[]
worktreeNavHistoryIndex: number
}
}
const store = window.__store as unknown as StoreLike
const state = store.getState()
return {
history: [...state.worktreeNavHistory],
index: state.worktreeNavHistoryIndex
}
})
}
async function resetNavHistory(page: Page): Promise<void> {
await page.evaluate(() => {
type StoreLike = {
setState: (partial: { worktreeNavHistory: string[]; worktreeNavHistoryIndex: number }) => void
}
const store = window.__store as unknown as StoreLike
store.setState({ worktreeNavHistory: [], worktreeNavHistoryIndex: -1 })
})
}
async function getBackButton(page: Page) {
return page.getByRole('button', { name: 'Go back' })
}
async function getForwardButton(page: Page) {
return page.getByRole('button', { name: 'Go forward' })
}
const isMac = process.platform === 'darwin'
const mod = isMac ? 'Meta' : 'Control'
test.describe('Workspace Back/Forward Navigation', () => {
test.beforeEach(async ({ orcaPage }) => {
await waitForSessionReady(orcaPage)
await waitForActiveWorktree(orcaPage)
await ensureTerminalVisible(orcaPage)
})
test('buttons are hidden outside the terminal view', async ({ orcaPage }) => {
await expect(await getBackButton(orcaPage)).toBeVisible()
await expect(await getForwardButton(orcaPage)).toBeVisible()
// Why: the Back/Forward pair is conditional on `activeView === 'terminal'`.
// Settings, Tasks, and Landing must not render the buttons at all (not just
// disable them) so the titlebar stays compact and the semantics unambiguous.
await orcaPage.evaluate(() => {
window.__store!.getState().openSettingsPage()
})
await expect(await getBackButton(orcaPage)).toHaveCount(0)
await expect(await getForwardButton(orcaPage)).toHaveCount(0)
await orcaPage.evaluate(() => {
window.__store!.getState().setActiveView('terminal')
})
await expect(await getBackButton(orcaPage)).toBeVisible()
})
test('both buttons disabled at cold start with a single history entry', async ({ orcaPage }) => {
// The test fixture already activated a worktree during setup, so one entry
// may or may not exist. Reset the slice to a known empty baseline, then
// record the current worktree as the single entry.
const activeId = await getActiveWorktreeId(orcaPage)
expect(activeId).not.toBeNull()
await resetNavHistory(orcaPage)
await seedVisit(orcaPage, activeId!)
const back = await getBackButton(orcaPage)
const forward = await getForwardButton(orcaPage)
await expect(back).toBeDisabled()
await expect(forward).toBeDisabled()
})
test('clicking Back and Forward walks the history stack', async ({ orcaPage }) => {
const worktreeIds = await getAllWorktreeIds(orcaPage)
test.skip(worktreeIds.length < 2, 'Need at least two worktrees to exercise back/forward')
const [primaryId, secondaryId] = worktreeIds
await resetNavHistory(orcaPage)
await seedVisit(orcaPage, primaryId)
await seedVisit(orcaPage, secondaryId)
const back = await getBackButton(orcaPage)
const forward = await getForwardButton(orcaPage)
await expect(back).toBeEnabled()
await expect(forward).toBeDisabled()
// Why: use the sidebar's option `aria-current` as the DOM signal for "this
// worktree is currently active". `aria-selected` is reserved for batch
// multi-select state, so a store-only `activeWorktreeId` check would miss
// render-layer regressions in the active row.
const primaryRow = worktreeRow(orcaPage, primaryId)
const secondaryRow = worktreeRow(orcaPage, secondaryId)
await back.click()
await expect
.poll(async () => getActiveWorktreeId(orcaPage), {
message: 'Back click did not activate the previous worktree'
})
.toBe(primaryId)
await expect(primaryRow).toHaveAttribute('aria-current', 'page')
await expect(secondaryRow).not.toHaveAttribute('aria-current', 'page')
await expect(back).toBeDisabled()
await expect(forward).toBeEnabled()
await forward.click()
await expect
.poll(async () => getActiveWorktreeId(orcaPage), {
message: 'Forward click did not re-activate the next worktree'
})
.toBe(secondaryId)
await expect(secondaryRow).toHaveAttribute('aria-current', 'page')
await expect(primaryRow).not.toHaveAttribute('aria-current', 'page')
await expect(forward).toBeDisabled()
})
test('re-activating the current worktree is a no-op (dedupe)', async ({ orcaPage }) => {
const activeId = await getActiveWorktreeId(orcaPage)
expect(activeId).not.toBeNull()
await resetNavHistory(orcaPage)
await seedVisit(orcaPage, activeId!)
await seedVisit(orcaPage, activeId!)
await seedVisit(orcaPage, activeId!)
const snapshot = await getNavHistorySnapshot(orcaPage)
expect(snapshot.history).toEqual([activeId])
expect(snapshot.index).toBe(0)
await expect(await getBackButton(orcaPage)).toBeDisabled()
})
test('new navigation after going back truncates the forward stack', async ({ orcaPage }) => {
const worktreeIds = await getAllWorktreeIds(orcaPage)
test.skip(worktreeIds.length < 2, 'Need at least two worktrees to exercise forward truncation')
const [primaryId, secondaryId] = worktreeIds
// Stack: primary -> secondary. Go back to primary, then "activate" primary
// again via a fresh visit (simulating a sidebar click on the same entry
// from mid-history). The current-entry dedupe should kick in, but if we
// instead activate secondary while sitting on primary mid-history, the
// forward entry pointing at secondary must be truncated.
await resetNavHistory(orcaPage)
await seedVisit(orcaPage, primaryId)
await seedVisit(orcaPage, secondaryId)
await (await getBackButton(orcaPage)).click()
await expect.poll(() => getActiveWorktreeId(orcaPage)).toBe(primaryId)
// Forward button is live — a forward entry exists.
await expect(await getForwardButton(orcaPage)).toBeEnabled()
// Fresh activation from mid-history. Using secondary again is the simplest
// way to prove truncation happened: after this call, the stack must be
// [primary, secondary] with index=1, so Forward is disabled even though
// there *was* a forward entry moments ago.
await seedVisit(orcaPage, secondaryId)
const snapshot = await getNavHistorySnapshot(orcaPage)
expect(snapshot.history).toEqual([primaryId, secondaryId])
expect(snapshot.index).toBe(1)
await expect(await getForwardButton(orcaPage)).toBeDisabled()
})
test(`${isMac ? 'Cmd' : 'Ctrl'}+Alt+Left/Right shortcuts walk history`, async ({ orcaPage }) => {
const worktreeIds = await getAllWorktreeIds(orcaPage)
test.skip(worktreeIds.length < 2, 'Need at least two worktrees to exercise shortcuts')
const [primaryId, secondaryId] = worktreeIds
await resetNavHistory(orcaPage)
await seedVisit(orcaPage, primaryId)
await seedVisit(orcaPage, secondaryId)
// Why: focus body so the window-level keydown capture handler runs without
// an `isEditableTarget` bail-out. The xterm helper textarea is explicitly
// treated as non-editable, but body is the simplest stable target in a
// hidden-window Electron run.
await orcaPage.evaluate(() => document.body.focus())
await orcaPage.keyboard.press(`${mod}+Alt+ArrowLeft`)
await expect
.poll(async () => getActiveWorktreeId(orcaPage), {
message: `${mod}+Alt+Left did not navigate back`
})
.toBe(primaryId)
await orcaPage.keyboard.press(`${mod}+Alt+ArrowRight`)
await expect
.poll(async () => getActiveWorktreeId(orcaPage), {
message: `${mod}+Alt+Right did not navigate forward`
})
.toBe(secondaryId)
})
test('shortcut is a no-op in settings view', async ({ orcaPage }) => {
const worktreeIds = await getAllWorktreeIds(orcaPage)
test.skip(worktreeIds.length < 2, 'Need at least two worktrees to exercise settings gating')
const [primaryId, secondaryId] = worktreeIds
await resetNavHistory(orcaPage)
await seedVisit(orcaPage, primaryId)
await seedVisit(orcaPage, secondaryId)
// Enter settings. The back shortcut must not change the active worktree,
// matching the view-guard in App.tsx and useIpcEvents.ts.
await orcaPage.evaluate(() => {
window.__store!.getState().openSettingsPage()
})
await expect
.poll(async () => orcaPage.evaluate(() => window.__store!.getState().activeView))
.toBe('settings')
const idBefore = await getActiveWorktreeId(orcaPage)
await orcaPage.evaluate(() => document.body.focus())
await orcaPage.keyboard.press(`${mod}+Alt+ArrowLeft`)
// Give any erroneous nav a beat to land, then assert the active worktree
// and the slice index both stayed put.
await orcaPage.waitForTimeout(150)
expect(await getActiveWorktreeId(orcaPage)).toBe(idBefore)
const snapshot = await getNavHistorySnapshot(orcaPage)
expect(snapshot.index).toBe(1)
})
})