// Screenshots of every page of the web interface, in light and dark, on a
// desktop and a phone; and the social cards the pages name, which are the
// same in any browser, so are taken once, as the `card` project.
//
//   just shots          what moved since main, in pictures to look at
//   just shots-check    the same, failing on a page moved but not named
//
// Nothing is kept: compare.mjs shoots the pages as main draws them, into
// target/shots/before, then as this checkout draws them, compared pixel
// for pixel, in the same browser in the same run. The cards are drawn by
// knotless-serve, not the browser, and only from a world: `just
// shots-cards` takes them into target/shots/cards to look at. A full page
// can take a while to come out the same twice, as when Linux's are taken
// under emulation, so a screenshot has 30 seconds.

import { defineConfig, devices } from '@playwright/test'
import { join } from 'node:path'
import { base, root } from './world.mjs'

const desktop = { viewport: { width: 1280, height: 800 }, deviceScaleFactor: 1 }
const phone = {
  ...devices['iPhone 13'],
  browserName: 'chromium',
  defaultBrowserType: 'chromium',
  deviceScaleFactor: 2,
}

export default defineConfig({
  testDir: '.',
  testMatch: 'views.spec.mjs',
  globalSetup: './setup.mjs',
  outputDir: '../../target/shots/results',
  snapshotPathTemplate: join(root, 'target/shots/before/{arg}-{projectName}{ext}'),
  fullyParallel: true,
  // compare.mjs reads which pages moved from the report.
  reporter: [['list'], ['json', { outputFile: join(root, 'target/shots/report.json') }]],
  expect: {
    timeout: 30_000,
    toHaveScreenshot: {
      maxDiffPixels: 0,
      threshold: 0,
      animations: 'disabled',
      caret: 'hide',
      scale: 'device',
    },
    toMatchSnapshot: { maxDiffPixels: 0, threshold: 0 },
  },
  // Not UTC, which the server puts times in until it knows better: the
  // pages show them in the viewer's zone, and the pictures show that they do.
  //
  // Without partial raster: Chromium otherwise paints a change into the
  // part of a tile it touches, over what the tile already held, and a
  // rounded border at a fractional position, cut there, comes out a shade
  // apart at its corner (a pixel or four, at 1x). Whether a change lands
  // on a tile already painted is a matter of timing, so such a page
  // came out the same about 39 times in 40. Painting each changed tile
  // whole, its pixels follow from the page alone.
  use: {
    baseURL: base,
    locale: 'en-US',
    timezoneId: 'America/New_York',
    launchOptions: { args: ['--disable-partial-raster'] },
  },
  projects: [
    { name: 'desktop-light', use: { ...desktop, colorScheme: 'light' } },
    { name: 'desktop-dark', use: { ...desktop, colorScheme: 'dark' } },
    { name: 'phone-light', use: { ...phone, colorScheme: 'light' } },
    { name: 'phone-dark', use: { ...phone, colorScheme: 'dark' } },
    {
      name: 'card',
      testMatch: 'cards.spec.mjs',
      snapshotPathTemplate: join(root, 'target/shots/cards/{arg}{ext}'),
    },
  ],
})