chore: automated screenshots (#667)

* chore: take screenshots on routes

* chore: update test data

* chore: update test

* chore: upgrade node in CI

.github/workflows/build_v2.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18.18.2
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
@@ -49,7 +49,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18.18.2
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
@@ -82,7 +82,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18.18.2
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2

.github/workflows/test_v2.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18.18.2
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
@@ -73,7 +73,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18.18.2
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2

.gitignore

@@ -27,6 +27,7 @@ ontime.code-workspace
 test-results
 playwright-report
 /playwright/.cache/
+automated-screenshots
 
 # production
 build/

apps/test-db/db.json

@@ -1,75 +1,15 @@
 {
   "rundown": [
     {
-      "type": "block",
+      "title": "Albania",
-      "id": "18797"
+      "subtitle": "Sekret",
-    },
+      "presenter": "Ronela Hajati",
-    {
+      "note": "SF1.01",
-      "title": "title 1",
-      "subtitle": "",
-      "presenter": "",
-      "note": "",
       "endAction": "none",
       "timerType": "count-down",
-      "timeStart": 60000,
+      "timeStart": 36000000,
-      "timeEnd": 120000,
+      "timeEnd": 37200000,
-      "duration": 60000,
+      "duration": 1200000,
-      "isPublic": false,
-      "skip": false,
-      "colour": "",
-      "user0": "",
-      "user1": "",
-      "user2": "",
-      "user3": "",
-      "user4": "",
-      "user5": "",
-      "user6": "",
-      "user7": "",
-      "user8": "",
-      "user9": "",
-      "type": "event",
-      "revision": 0,
-      "cue": "1",
-      "id": "aa42f"
-    },
-    {
-      "title": "title 2",
-      "subtitle": "",
-      "presenter": "",
-      "note": "",
-      "endAction": "none",
-      "timerType": "count-down",
-      "timeStart": 120000,
-      "timeEnd": 180000,
-      "duration": 60000,
-      "isPublic": false,
-      "skip": false,
-      "colour": "",
-      "user0": "",
-      "user1": "",
-      "user2": "",
-      "user3": "",
-      "user4": "",
-      "user5": "",
-      "user6": "",
-      "user7": "",
-      "user8": "",
-      "user9": "",
-      "type": "event",
-      "revision": 0,
-      "cue": "2",
-      "id": "d71bc"
-    },
-    {
-      "title": "title 3",
-      "subtitle": "",
-      "presenter": "",
-      "note": "",
-      "endAction": "none",
-      "timerType": "count-down",
-      "timeStart": 39600000,
-      "timeEnd": 720000,
-      "duration": 47520000,
       "isPublic": true,
       "skip": false,
       "colour": "",
@@ -85,21 +25,395 @@
       "user9": "",
       "type": "event",
       "revision": 0,
-      "cue": "3",
+      "id": "32d31",
-      "id": "da5b4"
+      "cue": "SF1.01"
+    },
+    {
+      "title": "Latvia",
+      "subtitle": "Eat Your Salad",
+      "presenter": "Citi Zeni",
+      "note": "SF1.02",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 37500000,
+      "timeEnd": 38700000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "21cd2",
+      "cue": "SF1.02"
+    },
+    {
+      "title": "Lithuania",
+      "subtitle": "Sentimentai",
+      "presenter": "Monika Liu",
+      "note": "SF1.03",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 39000000,
+      "timeEnd": 40200000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "0b371",
+      "cue": "SF1.03"
+    },
+    {
+      "title": "Switzerland",
+      "subtitle": "Boys Do Cry",
+      "presenter": "Marius Bear",
+      "note": "SF1.04",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 40500000,
+      "timeEnd": 41700000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "3cd28",
+      "cue": "SF1.04"
+    },
+    {
+      "title": "Slovenia",
+      "subtitle": "Disko",
+      "presenter": "LPS",
+      "note": "SF1.05",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 42000000,
+      "timeEnd": 43200000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "e457f",
+      "cue": "SF1.05"
+    },
+    {
+      "title": "Lunch break",
+      "type": "block",
+      "id": "01e85"
+    },
+    {
+      "title": "Ukraine",
+      "subtitle": "Stefania",
+      "presenter": "Kalush Orchestra",
+      "note": "SF1.06",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 47100000,
+      "timeEnd": 48300000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "1c420",
+      "cue": "SF1.06"
+    },
+    {
+      "title": "Bulgaria",
+      "subtitle": "Intention",
+      "presenter": "Intelligent Music Project",
+      "note": "SF1.07",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 48600000,
+      "timeEnd": 49800000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "b7737",
+      "cue": "SF1.07"
+    },
+    {
+      "title": "Netherlands",
+      "subtitle": "De Diepte",
+      "presenter": "S10",
+      "note": "SF1.08",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 50100000,
+      "timeEnd": 51300000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "d3a80",
+      "cue": "SF1.08"
+    },
+    {
+      "title": "Moldova",
+      "subtitle": "Trenuletul",
+      "presenter": "Zdob si Zdub",
+      "note": "SF1.09",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 51600000,
+      "timeEnd": 52800000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "8276c",
+      "cue": "SF1.09"
+    },
+    {
+      "title": "Portugal",
+      "subtitle": "Saudade Saudade",
+      "presenter": "Maro",
+      "note": "SF1.10",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 53100000,
+      "timeEnd": 54300000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "2340b",
+      "cue": "SF1.10"
+    },
+    {
+      "title": "Afternoon break",
+      "type": "block",
+      "id": "cb90b"
+    },
+    {
+      "title": "Croatia",
+      "subtitle": "Guilty Pleasure",
+      "presenter": "Mia Dimsic",
+      "note": "SF1.11",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 56100000,
+      "timeEnd": 57300000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "503c4",
+      "cue": "SF1.11"
+    },
+    {
+      "title": "Denmark",
+      "subtitle": "The Show",
+      "presenter": "Reddi",
+      "note": "SF1.12",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 57600000,
+      "timeEnd": 58800000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "5e965",
+      "cue": "SF1.12"
+    },
+    {
+      "title": "Austria",
+      "subtitle": "Halo",
+      "presenter": "LUM!X & Pia Maria",
+      "note": "SF1.13",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 59100000,
+      "timeEnd": 60300000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "bab4a",
+      "cue": "SF1.13"
+    },
+    {
+      "title": "Greece",
+      "subtitle": "Die Together",
+      "presenter": "Amanda Tenfjord",
+      "note": "SF1.14",
+      "endAction": "none",
+      "timerType": "count-down",
+      "timeStart": 60600000,
+      "timeEnd": 61800000,
+      "duration": 1200000,
+      "isPublic": true,
+      "skip": false,
+      "colour": "",
+      "user0": "",
+      "user1": "",
+      "user2": "",
+      "user3": "",
+      "user4": "",
+      "user5": "",
+      "user6": "",
+      "user7": "",
+      "user8": "",
+      "user9": "",
+      "type": "event",
+      "revision": 0,
+      "id": "d3eb1",
+      "cue": "SF1.14"
     }
   ],
   "project": {
-    "title": "All about Carlos demo event",
+    "title": "Eurovision Song Contest",
-    "description": "Demo event for Ontime",
+    "description": "Turin 2022",
     "publicUrl": "www.getontime.no",
-    "publicInfo": "WiFi: demoproject \nPassword: ontimeproject",
+    "publicInfo": "Rehearsal Schedule - Turin 2022",
-    "backstageUrl": "www.getontime.no",
+    "backstageUrl": "www.github.com/cpvalente/ontime",
-    "backstageInfo": "WiFi: demobackstage\nPassword: ontimeproject"
+    "backstageInfo": "Rehearsal Schedule - Turin 2022\nAll performers to wear full costumes for 1st rehearsal"
   },
   "settings": {
     "app": "ontime",
-    "version": "3.0.0-alpha",
+    "version": "2.0.0",
     "serverPort": 4001,
     "editorKey": null,
     "operatorKey": null,
@@ -138,14 +452,20 @@
     "portIn": 8888,
     "portOut": 9999,
     "targetIP": "127.0.0.1",
-    "enabledIn": false,
+    "enabledIn": true,
-    "enabledOut": false,
+    "enabledOut": true,
     "subscriptions": {
       "onLoad": [],
       "onStart": [],
       "onPause": [],
       "onStop": [],
-      "onUpdate": [],
+      "onUpdate": [
+        {
+          "id": "10eea",
+          "enabled": true,
+          "message": "/ontime/update/{{timer.current}}"
+        }
+      ],
       "onFinish": []
     }
   },

e2e/tests/000-smoke-tests.spec.ts

@@ -1,42 +1,106 @@
 import { expect, test } from '@playwright/test';
 
+// TODO: can we replace the clicks with something else?
 test.describe('pages routes are available', () => {
   test.use({ viewport: { width: 1920, height: 1080 } });
-  test.describe('backstage views', () => {
+  test.describe('main views', () => {
     test('editor', async ({ page }) => {
       await page.goto('http://localhost:4001/editor');
 
       await expect(page).toHaveTitle(/ontime/);
-      await expect(page.getByTestId('event-editor')).toBeVisible()
+      await expect(page.getByTestId('event-editor')).toBeVisible();
-      await expect(page.getByTestId('panel-rundown')).toBeVisible()
+      await expect(page.getByTestId('panel-rundown')).toBeVisible();
-      await expect(page.getByTestId('panel-timer-control')).toBeVisible()
+      await expect(page.getByTestId('panel-timer-control')).toBeVisible();
-      await expect(page.getByTestId('panel-messages-control')).toBeVisible()
+      await expect(page.getByTestId('panel-messages-control')).toBeVisible();
-      await expect(page.getByTestId('panel-info')).toBeVisible()
+      await expect(page.getByTestId('panel-info')).toBeVisible();
+      await page.screenshot({ path: 'automated-screenshots/editor.png' });
     });
+
     test('cuesheet', async ({ page }) => {
       await page.goto('http://localhost:4001/cuesheet');
 
       await expect(page).toHaveTitle(/ontime/);
       await page.getByTestId('cuesheet').click();
+      await page.screenshot({ path: 'automated-screenshots/cuesheet.png' });
+    });
+
+    test('operator', async ({ page }) => {
+      await page.goto('http://localhost:4001/operator');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/operator.png' });
+    });
+
+    test('timer', async ({ page }) => {
+      await page.goto('http://localhost:4001/timer');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/timer.png' });
+    });
+
+    test('clock', async ({ page }) => {
+      await page.goto('http://localhost:4001/timer');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/clock.png' });
+    });
+
+    test('minimal', async ({ page }) => {
+      await page.goto('http://localhost:4001/minimal');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/minimal.png' });
+    });
+
+    test('backstage', async ({ page }) => {
+      await page.goto('http://localhost:4001/backstage');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/backstage.png' });
+    });
+
+    test('public', async ({ page }) => {
+      await page.goto('http://localhost:4001/public');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/public.png' });
+    });
+
+    test('studio', async ({ page }) => {
+      await page.goto('http://localhost:4001/studio');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/studio.png' });
+    });
+
+    test('countdown', async ({ page }) => {
+      await page.goto('http://localhost:4001/countdown');
+
+      await expect(page).toHaveTitle(/ontime/);
+      await page.screenshot({ path: 'automated-screenshots/countdown.png' });
+
+      await page.getByRole('link', { name: '1. 10:00 → 10:20 | Albania' }).click();
+      await page.getByText('Albania').click();
+      await page.screenshot({ path: 'automated-screenshots/countdown-2.png' });
     });
   });
 
   test.describe('detached views', () => {
     test('rundown', async ({ page }) => {
       await page.goto('http://localhost:4001/rundown');
-      await expect(page.getByTestId('panel-rundown')).toBeVisible()
+      await expect(page.getByTestId('panel-rundown')).toBeVisible();
     });
     test('timer control', async ({ page }) => {
       await page.goto('http://localhost:4001/timercontrol');
-      await expect(page.getByTestId('panel-timer-control')).toBeVisible()
+      await expect(page.getByTestId('panel-timer-control')).toBeVisible();
     });
     test('message control', async ({ page }) => {
       await page.goto('http://localhost:4001/messagecontrol');
-      await expect(page.getByTestId('panel-messages-control')).toBeVisible()
+      await expect(page.getByTestId('panel-messages-control')).toBeVisible();
     });
     test('info', async ({ page }) => {
       await page.goto('http://localhost:4001/info');
-      await expect(page.getByTestId('panel-info')).toBeVisible()
+      await expect(page.getByTestId('panel-info')).toBeVisible();
     });
   });
 });

playwright.config.ts

@@ -8,7 +8,7 @@ const config: PlaywrightTestConfig = {
   testDir: './e2e/tests',
   timeout: 60 * 1000,
   expect: {
-    timeout: 5000
+    timeout: 5000,
   },
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
@@ -16,9 +16,9 @@ const config: PlaywrightTestConfig = {
   workers: 1,
   reporter: 'html',
   webServer: {
-    command: "turbo run dev:test",
+    command: 'turbo run dev:test',
     port: 4001,
-    reuseExistingServer: false,
+    reuseExistingServer: true,
     timeout: 60 * 1000,
   },
   use: {
@@ -30,8 +30,8 @@ const config: PlaywrightTestConfig = {
     ignoreHTTPSErrors: true,
     trace: 'on-first-retry',
     launchOptions: {
-      slowMo: process.env.CI ? undefined : 250
+      slowMo: process.env.CI ? undefined : 250,
-    }
+    },
   },
   projects: [
     {