// With JavaScript on, an app must look like TodoMVC's own template.
// The golden image is a screenshot of shared/reference.html, made with
// `npm run golden`. Only footer.info (it names the language) is masked.
import { test, expect } from '@playwright/test';
import path from 'node:path';
import { addDefaultTodos, toggle, todos } from './actions';

const shot = (page) => ({ mask: [page.locator('footer.info')], maxDiffPixelRatio: 0.02 });

test('matches the TodoMVC reference', async ({ page }, ti) => {
  test.skip(ti.project.name !== 'js-on', 'compared with JavaScript on');
  if (process.env.GOLDEN) {
    await page.goto('file://' + path.resolve(import.meta.dirname, '../../shared/reference.html'));
  } else {
    await page.goto('/');
    await addDefaultTodos(page, ti, ['Buy milk', 'Walk the dog', 'Write the report']);
    await toggle(page, ti, todos(page).nth(0));
    await page.locator('.new-todo').focus();
    await page.mouse.move(0, 0);
  }
  await expect(page).toHaveScreenshot('reference.png', shot(page));
});