102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import { expect, test } from '../fixtures'
|
|
|
|
test('selects articles and keeps the reader focused on their content', async ({
|
|
page,
|
|
}) => {
|
|
await page.goto('/inbox')
|
|
await page.waitForLoadState('networkidle')
|
|
const rows = page.locator('.inbox-article-row')
|
|
await expect(rows).toHaveCount(9)
|
|
const articleTitle = 'Context for an agent can be brief'
|
|
await rows.filter({ hasText: articleTitle }).click()
|
|
const reader = page.getByRole('article', { name: articleTitle, exact: true })
|
|
await expect(reader).toBeVisible()
|
|
await expect(
|
|
reader.getByRole('heading', { name: articleTitle, exact: true }),
|
|
).toBeVisible()
|
|
await expect(
|
|
reader.getByText(
|
|
'Start with a one-sentence goal, then add the constraints that must hold.',
|
|
{ exact: false },
|
|
),
|
|
).toBeVisible()
|
|
await expect(page.getByText('FOR YOU', { exact: true })).toHaveCount(0)
|
|
await expect(page.getByText('Mock', { exact: true })).toHaveCount(0)
|
|
await expect(page.getByText('Why this article', { exact: true })).toHaveCount(
|
|
0,
|
|
)
|
|
await expect(
|
|
page.getByRole('button', { name: /For you|Read later|Unread only/ }),
|
|
).toHaveCount(0)
|
|
const back = page.getByRole('button', { name: 'Back to articles' })
|
|
if (await back.isVisible()) await back.click()
|
|
await rows
|
|
.filter({ hasText: 'Three columns create a rhythm for reading' })
|
|
.click()
|
|
await expect(
|
|
page.getByRole('article', {
|
|
name: 'Three columns create a rhythm for reading',
|
|
exact: true,
|
|
}),
|
|
).toBeVisible()
|
|
})
|
|
|
|
test('recovers from empty search and shares navigation with Twitter Lite', async ({
|
|
page,
|
|
a11y,
|
|
}) => {
|
|
await page.goto('/inbox')
|
|
await page.waitForLoadState('networkidle')
|
|
const rows = page.locator('.inbox-article-row')
|
|
await page
|
|
.getByRole('textbox', { name: 'Search articles' })
|
|
.fill('nonexistent-query-xyz')
|
|
await expect(rows).toHaveCount(0)
|
|
await expect(
|
|
page.getByText('No articles found', { exact: true }),
|
|
).toBeVisible()
|
|
await page.getByRole('button', { name: 'Clear search' }).click()
|
|
await expect(rows).toHaveCount(9)
|
|
expect((await a11y().analyze()).violations).toEqual([])
|
|
await expect(
|
|
page.getByRole('button', { name: 'Edit interests', exact: true }),
|
|
).toHaveCount(0)
|
|
await page.getByRole('link', { name: 'Twitter Lite', exact: true }).click()
|
|
await expect(page).toHaveURL(/\/deck$/)
|
|
await page.getByRole('link', { name: 'Reader', exact: true }).click()
|
|
await expect(page).toHaveURL(/\/inbox$/)
|
|
await expect(rows).toHaveCount(9)
|
|
})
|
|
|
|
test('keeps article navigation readable without horizontal overflow', async ({
|
|
page,
|
|
a11y,
|
|
}, testInfo) => {
|
|
await page.goto('/inbox')
|
|
await page.waitForLoadState('networkidle')
|
|
for (const width of [320, 375, 414, 768]) {
|
|
await page.setViewportSize({ width, height: 850 })
|
|
await expect(
|
|
page.getByRole('textbox', { name: 'Search articles' }),
|
|
).toBeVisible()
|
|
expect(
|
|
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
).toBe(width)
|
|
await page.locator('.inbox-article-row').first().click()
|
|
const reader = page.getByRole('article', {
|
|
name: 'Thinking in the browser: a new workflow with AI agents',
|
|
exact: true,
|
|
})
|
|
await expect(reader).toBeVisible()
|
|
expect(
|
|
await page.evaluate(() => document.documentElement.scrollWidth),
|
|
).toBe(width)
|
|
await page.screenshot({
|
|
path: testInfo.outputPath(`inbox-reader-${width}.png`),
|
|
})
|
|
if (width === 320) expect((await a11y().analyze()).violations).toEqual([])
|
|
const back = page.getByRole('button', { name: 'Back to articles' })
|
|
if (await back.isVisible()) await back.click()
|
|
}
|
|
})
|