|
| 1 | +import type { TestFsStructure } from '../../test-utils' |
| 2 | +import { describe, expect, test } from 'vitest' |
| 3 | +import { runInlineTests } from '../../test-utils' |
| 4 | +import utilsContent from '../fixtures/expect-dom/utils?raw' |
| 5 | +import { instances, provider } from '../settings' |
| 6 | + |
| 7 | +const testFilename = 'basic.test.ts' |
| 8 | + |
| 9 | +async function runBrowserTests( |
| 10 | + structure: TestFsStructure, |
| 11 | +) { |
| 12 | + return runInlineTests({ |
| 13 | + ...structure, |
| 14 | + 'vitest.config.js': ` |
| 15 | + import { ${provider.name} } from '@vitest/browser-${provider.name}' |
| 16 | + export default { |
| 17 | + test: { |
| 18 | + browser: { |
| 19 | + enabled: true, |
| 20 | + screenshotFailures: true, |
| 21 | + provider: ${provider.name}(), |
| 22 | + ui: false, |
| 23 | + headless: true, |
| 24 | + instances: ${JSON.stringify(instances.slice(0, 1) /* logic not bound to browser instance */)}, |
| 25 | + }, |
| 26 | + reporters: ['verbose'], |
| 27 | + update: 'new', |
| 28 | + }, |
| 29 | + }`, |
| 30 | + }) |
| 31 | +} |
| 32 | + |
| 33 | +describe('failure screenshots', () => { |
| 34 | + describe('`toMatchScreenshot`', () => { |
| 35 | + test('usually does NOT produce a failure screenshot', async () => { |
| 36 | + const { stderr } = await runBrowserTests( |
| 37 | + { |
| 38 | + [testFilename]: /* ts */` |
| 39 | + import { page } from 'vitest/browser' |
| 40 | + import { test } from 'vitest' |
| 41 | + import { render } from './utils' |
| 42 | +
|
| 43 | + test('screenshot-initial', async ({ expect }) => { |
| 44 | + render('<div data-testid="el">Test</div>') |
| 45 | + await expect(page.getByTestId('el')).toMatchScreenshot() |
| 46 | + }) |
| 47 | + `, |
| 48 | + 'utils.ts': utilsContent, |
| 49 | + }, |
| 50 | + ) |
| 51 | + |
| 52 | + expect(stderr).toContain('No existing reference screenshot found; a new one was created.') |
| 53 | + expect(stderr).not.toContain('Failure screenshot:') |
| 54 | + }) |
| 55 | + |
| 56 | + test('unstable screenshot fails produces a failure screenshot', async () => { |
| 57 | + const { stderr } = await runBrowserTests( |
| 58 | + { |
| 59 | + [testFilename]: /* ts */` |
| 60 | + import { page } from 'vitest/browser' |
| 61 | + import { test } from 'vitest' |
| 62 | + import { render } from './utils' |
| 63 | +
|
| 64 | + test('screenshot-unstable', async ({ expect }) => { |
| 65 | + render('<div data-testid="el">Test</div>') |
| 66 | + await expect(page.getByTestId('el')).toMatchScreenshot({ timeout: 1 }) |
| 67 | + }) |
| 68 | + `, |
| 69 | + 'utils.ts': utilsContent, |
| 70 | + }, |
| 71 | + ) |
| 72 | + |
| 73 | + expect(stderr).toContain('Could not capture a stable screenshot within 1ms.') |
| 74 | + expect(stderr).toContain('Failure screenshot:') |
| 75 | + }) |
| 76 | + |
| 77 | + test('`expect.soft` produces a failure screenshot', async () => { |
| 78 | + const { stderr } = await runBrowserTests( |
| 79 | + { |
| 80 | + [testFilename]: /* ts */` |
| 81 | + import { page } from 'vitest/browser' |
| 82 | + import { test } from 'vitest' |
| 83 | + import { render } from './utils' |
| 84 | +
|
| 85 | + test('screenshot-soft-then-fail', async ({ expect }) => { |
| 86 | + render('<div data-testid="el">Test</div>') |
| 87 | + await expect.soft(page.getByTestId('el')).toMatchScreenshot() |
| 88 | + expect(1).toBe(2) |
| 89 | + }) |
| 90 | + `, |
| 91 | + 'utils.ts': utilsContent, |
| 92 | + }, |
| 93 | + ) |
| 94 | + |
| 95 | + expect(stderr).toContain('No existing reference screenshot found; a new one was created.') |
| 96 | + expect(stderr).toContain('expected 1 to be 2') |
| 97 | + expect(stderr).toContain('Failure screenshot:') |
| 98 | + }) |
| 99 | + }) |
| 100 | +}) |
0 commit comments