Extract 7 sub-modules under components/note-list/: - PinnedCard.tsx, RelationshipGroupSection.tsx, TrashWarningBanner.tsx - NoteListHeader.tsx, NoteListViews.tsx - noteListHooks.ts, noteListUtils.ts NoteList.tsx reduced from 579 → 95 lines. No behavior changes. All 2152 unit tests pass, 80%+ coverage, lint + typecheck clean. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
||
|
||
test.describe('NoteList split refactor – no behavior changes', () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
await page.goto('/')
|
||
await page.waitForLoadState('networkidle')
|
||
})
|
||
|
||
test('note list container renders and shows notes', async ({ page }) => {
|
||
const container = page.locator('[data-testid="note-list-container"]')
|
||
await expect(container).toBeVisible()
|
||
|
||
// Notes should render inside the container
|
||
const noteItems = container.locator('.cursor-pointer')
|
||
await expect(noteItems.first()).toBeVisible({ timeout: 5000 })
|
||
const count = await noteItems.count()
|
||
expect(count).toBeGreaterThan(0)
|
||
})
|
||
|
||
test('header with title and action buttons renders', async ({ page }) => {
|
||
// The header area sits above the note-list-container: h3 title + action buttons
|
||
const header = page.locator('h3.truncate')
|
||
await expect(header).toBeVisible()
|
||
const title = await header.textContent()
|
||
expect(title && title.length > 0).toBe(true)
|
||
|
||
// Search button (magnifying glass) should be present
|
||
const searchBtn = page.locator('button[title="Search notes"]')
|
||
await expect(searchBtn).toBeVisible()
|
||
|
||
// Create note button should be present (when not in trash view)
|
||
const createBtn = page.locator('button[title="Create new note"]')
|
||
await expect(createBtn).toBeVisible()
|
||
})
|
||
|
||
test('search toggle shows and hides search input', async ({ page }) => {
|
||
const searchBtn = page.locator('button[title="Search notes"]')
|
||
await searchBtn.click()
|
||
|
||
const searchInput = page.locator('input[placeholder="Search notes..."]')
|
||
await expect(searchInput).toBeVisible()
|
||
|
||
// Toggle off
|
||
await searchBtn.click()
|
||
await expect(searchInput).not.toBeVisible()
|
||
})
|
||
|
||
test('clicking a note opens it in the editor', async ({ page }) => {
|
||
const container = page.locator('[data-testid="note-list-container"]')
|
||
await expect(container).toBeVisible()
|
||
|
||
const noteItems = container.locator('.cursor-pointer')
|
||
await expect(noteItems.first()).toBeVisible({ timeout: 5000 })
|
||
|
||
// Get the title of the first note
|
||
const noteTitle = await noteItems.first().locator('.font-medium, .font-semibold, .font-bold').first().textContent()
|
||
|
||
// Click the first note
|
||
await noteItems.first().click()
|
||
|
||
// After click, the editor area or tab bar should reflect the opened note
|
||
// Verify the note list container is still functional (no crash from refactor)
|
||
await expect(container).toBeVisible()
|
||
expect(noteTitle && noteTitle.length > 0).toBe(true)
|
||
})
|
||
})
|