| 1 | // With JavaScript on, an app must look like TodoMVC's own template. |
| 2 | // The golden image is a screenshot of shared/reference.html, made with |
| 3 | // `npm run golden`. Only footer.info (it names the language) is masked. |
| 4 | import { test, expect } from '@playwright/test'; |
| 5 | import path from 'node:path'; |
| 6 | import { addDefaultTodos, toggle, todos } from './actions'; |
| 7 | |
| 8 | const shot = (page) => ({ mask: [page.locator('footer.info')], maxDiffPixelRatio: 0.02 }); |
| 9 | |
| 10 | test('matches the TodoMVC reference', async ({ page }, ti) => { |
| 11 | test.skip(ti.project.name !== 'js-on', 'compared with JavaScript on'); |
| 12 | if (process.env.GOLDEN) { |
| 13 | await page.goto('file://' + path.resolve(import.meta.dirname, '../../shared/reference.html')); |
| 14 | } else { |
| 15 | await page.goto('/'); |
| 16 | await addDefaultTodos(page, ti, ['Buy milk', 'Walk the dog', 'Write the report']); |
| 17 | await toggle(page, ti, todos(page).nth(0)); |
| 18 | await page.locator('.new-todo').focus(); |
| 19 | await page.mouse.move(0, 0); |
| 20 | } |
| 21 | await expect(page).toHaveScreenshot('reference.png', shot(page)); |
| 22 | }); |
| 23 | |
amadan