feat(ST-1116): mobile auto-switch tabs + back button in BacklogSplitPane

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

__tests__/components/backlog/backlog-split-pane.test.tsx

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { useSelectionStore } from '@/stores/selection-store'
+import { BacklogSplitPane } from '@/components/backlog/backlog-split-pane'
+
+const PANES = [
+  <div key="a">PBI pane</div>,
+  <div key="b">Stories pane</div>,
+  <div key="c">Tasks pane</div>,
+]
+
+function renderPane() {
+  return render(
+    <BacklogSplitPane
+      panes={PANES}
+      defaultSplit={[33, 33, 34]}
+      cookieKey="test-backlog"
+      tabLabels={["PBI's", 'Stories', 'Taken']}
+    />
+  )
+}
+
+beforeEach(() => {
+  useSelectionStore.setState({ selectedPbiId: null, selectedStoryId: null })
+  // Force mobile viewport
+  Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
+  window.dispatchEvent(new Event('resize'))
+})
+
+describe('BacklogSplitPane auto-switch', () => {
+  it('starts on tab 0 with no selection', () => {
+    renderPane()
+    expect(screen.getByText('PBI pane')).toBeTruthy()
+    expect(screen.queryByText('Stories pane')).toBeNull()
+  })
+
+  it('auto-switches to tab 1 when PBI is selected', () => {
+    const { rerender } = renderPane()
+    useSelectionStore.setState({ selectedPbiId: 'pbi-1', selectedStoryId: null })
+    rerender(
+      <BacklogSplitPane
+        panes={PANES}
+        defaultSplit={[33, 33, 34]}
+        cookieKey="test-backlog"
+        tabLabels={["PBI's", 'Stories', 'Taken']}
+      />
+    )
+    expect(screen.getByText('Stories pane')).toBeTruthy()
+    expect(screen.queryByText('PBI pane')).toBeNull()
+  })
+
+  it('auto-switches to tab 2 when story is selected', () => {
+    const { rerender } = renderPane()
+    useSelectionStore.setState({ selectedPbiId: 'pbi-1', selectedStoryId: 'story-1' })
+    rerender(
+      <BacklogSplitPane
+        panes={PANES}
+        defaultSplit={[33, 33, 34]}
+        cookieKey="test-backlog"
+        tabLabels={["PBI's", 'Stories', 'Taken']}
+      />
+    )
+    expect(screen.getByText('Tasks pane')).toBeTruthy()
+    expect(screen.queryByText('PBI pane')).toBeNull()
+  })
+
+  it('switches to tab 1 on cascade-reset (story cleared when new PBI selected)', () => {
+    // Start with story selected (tab 2)
+    useSelectionStore.setState({ selectedPbiId: 'pbi-1', selectedStoryId: 'story-1' })
+    const { rerender } = renderPane()
+
+    // Cascade-reset: new PBI → story clears
+    useSelectionStore.setState({ selectedPbiId: 'pbi-2', selectedStoryId: null })
+    rerender(
+      <BacklogSplitPane
+        panes={PANES}
+        defaultSplit={[33, 33, 34]}
+        cookieKey="test-backlog"
+        tabLabels={["PBI's", 'Stories', 'Taken']}
+      />
+    )
+    expect(screen.getByText('Stories pane')).toBeTruthy()
+  })
+})