import type { TestFsStructure } from '../../test-utils'
import { describe, expect, test } from 'vitest'
import { runInlineTests } from '../../test-utils'
import utilsContent from '../fixtures/expect-dom/utils?raw'
const testFilename = 'basic.test.ts'
async function runBrowserTests(structure: TestFsStructure) {
return runInlineTests({
...structure,
'vitest.config.js': `
import { instances, provider } from '../settings.ts'
export default {
test: {
browser: {
enabled: true,
screenshotFailures: true,
provider,
ui: false,
headless: true,
instances: instances.slice(0, 1), // logic not bound to browser instance
},
reporters: ['verbose'],
update: 'new',
},
}`,
})
}
function extractScreenshotPath(string: string): string | undefined {
return string.match(/- (vitest-test-.*?\.png)/)[1]
}
describe('failure screenshots', () => {
describe('`toMatchScreenshot`', () => {
test('usually does NOT produce a failure screenshot', async () => {
const { stderr } = await runBrowserTests({
[testFilename]: /* ts */ `
import { page } from 'vitest/browser'
import { test } from 'vitest'
import { render } from './utils'
test('screenshot-initial', async ({ expect }) => {
render('
Test
')
await expect(page.getByTestId('el')).toMatchScreenshot()
})
`,
'utils.ts': utilsContent,
})
expect(stderr).toContain('No existing reference screenshot found; a new one was created.')
expect(stderr).not.toContain('Failure screenshot:')
})
test('unstable screenshot fails produces a failure screenshot', async () => {
const { stderr } = await runBrowserTests({
[testFilename]: /* ts */ `
import { page } from 'vitest/browser'
import { test } from 'vitest'
import { render } from './utils'
test('screenshot-unstable', async ({ expect }) => {
render('Test
')
await expect(page.getByTestId('el')).toMatchScreenshot({ timeout: 1 })
})
`,
'utils.ts': utilsContent,
})
expect(stderr).toContain('Could not capture a stable screenshot within 1ms.')
expect(stderr).toContain('Failure screenshot:')
const screenshotPath = extractScreenshotPath(stderr)
expect(screenshotPath).toContain(
'.vitest/attachments/failure-screenshots/basic.test.ts/screenshot-unstable.png',
)
})
test('`expect.soft` produces a failure screenshot', async () => {
const { stderr } = await runBrowserTests({
[testFilename]: /* ts */ `
import { page } from 'vitest/browser'
import { test } from 'vitest'
import { render } from './utils'
test('screenshot-soft-then-fail', async ({ expect }) => {
render('Test
')
await expect.soft(page.getByTestId('el')).toMatchScreenshot()
expect(1).toBe(2)
})
`,
'utils.ts': utilsContent,
})
expect(stderr).toContain('No existing reference screenshot found; a new one was created.')
expect(stderr).toContain('expected 1 to be 2')
expect(stderr).toContain('Failure screenshot:')
const screenshotPath = extractScreenshotPath(stderr)
expect(screenshotPath).toContain(
'.vitest/attachments/failure-screenshots/basic.test.ts/screenshot-soft-then-fail.png',
)
})
})
})