From 6ffc314513bda5e36313393bdc223bf1e10ba9ed Mon Sep 17 00:00:00 2001 From: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Date: Mon, 25 Dec 2023 19:41:45 +0100 Subject: [PATCH] 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 | 6 +- .github/workflows/test_v2.yml | 4 +- .gitignore | 1 + apps/test-db/db.json | 476 +++++++++++++++++++++++++----- e2e/tests/000-smoke-tests.spec.ts | 84 +++++- playwright.config.ts | 10 +- 6 files changed, 483 insertions(+), 98 deletions(-) diff --git a/.github/workflows/build_v2.yml b/.github/workflows/build_v2.yml index 8beae6bc8..9b7baed55 100644 --- a/.github/workflows/build_v2.yml +++ b/.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 diff --git a/.github/workflows/test_v2.yml b/.github/workflows/test_v2.yml index ac849f32d..b591ef5f6 100644 --- a/.github/workflows/test_v2.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index 07063a3a5..e59ee987c 100644 --- a/.gitignore +++ b/.gitignore @@ -27,6 +27,7 @@ ontime.code-workspace test-results playwright-report /playwright/.cache/ +automated-screenshots # production build/ diff --git a/apps/test-db/db.json b/apps/test-db/db.json index bae5fcbf3..6bbc1d0ea 100644 --- a/apps/test-db/db.json +++ b/apps/test-db/db.json @@ -1,75 +1,15 @@ { "rundown": [ { - "type": "block", - "id": "18797" - }, - { - "title": "title 1", - "subtitle": "", - "presenter": "", - "note": "", + "title": "Albania", + "subtitle": "Sekret", + "presenter": "Ronela Hajati", + "note": "SF1.01", "endAction": "none", "timerType": "count-down", - "timeStart": 60000, - "timeEnd": 120000, - "duration": 60000, - "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, + "timeStart": 36000000, + "timeEnd": 37200000, + "duration": 1200000, "isPublic": true, "skip": false, "colour": "", @@ -85,21 +25,395 @@ "user9": "", "type": "event", "revision": 0, - "cue": "3", - "id": "da5b4" + "id": "32d31", + "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", - "description": "Demo event for Ontime", + "title": "Eurovision Song Contest", + "description": "Turin 2022", "publicUrl": "www.getontime.no", - "publicInfo": "WiFi: demoproject \nPassword: ontimeproject", - "backstageUrl": "www.getontime.no", - "backstageInfo": "WiFi: demobackstage\nPassword: ontimeproject" + "publicInfo": "Rehearsal Schedule - Turin 2022", + "backstageUrl": "www.github.com/cpvalente/ontime", + "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, - "enabledOut": false, + "enabledIn": true, + "enabledOut": true, "subscriptions": { "onLoad": [], "onStart": [], "onPause": [], "onStop": [], - "onUpdate": [], + "onUpdate": [ + { + "id": "10eea", + "enabled": true, + "message": "/ontime/update/{{timer.current}}" + } + ], "onFinish": [] } }, diff --git a/e2e/tests/000-smoke-tests.spec.ts b/e2e/tests/000-smoke-tests.spec.ts index abeeeb07b..3901cf8af 100644 --- a/e2e/tests/000-smoke-tests.spec.ts +++ b/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('panel-rundown')).toBeVisible() - await expect(page.getByTestId('panel-timer-control')).toBeVisible() - await expect(page.getByTestId('panel-messages-control')).toBeVisible() - await expect(page.getByTestId('panel-info')).toBeVisible() + await expect(page.getByTestId('event-editor')).toBeVisible(); + await expect(page.getByTestId('panel-rundown')).toBeVisible(); + await expect(page.getByTestId('panel-timer-control')).toBeVisible(); + await expect(page.getByTestId('panel-messages-control')).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(); }); }); }); diff --git a/playwright.config.ts b/playwright.config.ts index bb29eb601..547c7ca32 100644 --- a/playwright.config.ts +++ b/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: [ {