feat: V2 ontime menu (#259)

server/playwright.config.ts

@@ -12,39 +12,23 @@ import { devices } from '@playwright/test';
  */
 const config: PlaywrightTestConfig = {
   testDir: './tests',
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: 60 * 1000,
   expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
     timeout: 5000
   },
-  /* Run tests in files in parallel */
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    screenshot: 'only-on-failure', // Capture screenshot after each test failure
+    screenshot: 'only-on-failure',
     viewport: { width: 1920, height: 1080 },
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
+    actionTimeout: 5000,
     baseURL: 'http://localhost:4001',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
 
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
@@ -55,7 +39,7 @@ const config: PlaywrightTestConfig = {
 
     {
       name: 'firefox',
-      testMatch: /.*.spec.ts/,
+      testMatch: /.*.spec.all.ts/,
       use: {
         ...devices['Desktop Firefox'],
       },
@@ -70,14 +54,13 @@ const config: PlaywrightTestConfig = {
     },
   ],
 
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   outputDir: 'test-results/',
 
-  /* Run your local dev server before starting the tests */
    webServer: {
      command: 'yarn start:server',
      timeout: 120 * 1000,
      port: 4001,
+     reuseExistingServer: !process.env.CI,
    },
 };
 

server/tests/features/message-control.spec.ts

@@ -8,11 +8,11 @@ test('test', async ({ context }) => {
 
   // stage timer message
   await editorPage.getByPlaceholder('Shown in stage timer').click();
-  await editorPage.getByPlaceholder('Shown in stage timer').fill('testing');
+  await editorPage.getByPlaceholder('Shown in stage timer').fill('testing stage');
   await editorPage.getByRole('button', { name: 'toggle timer screen message' }).click();
 
   await featurePage.goto('http://localhost:4001/timer');
-  await featurePage.getByText('testing').click();
+  await featurePage.getByText('testing stage').click();
 
   // public screen message
   await editorPage.getByPlaceholder('Shown in public screens').click();

server/tests/features/view-navigation.test.ts

@@ -0,0 +1,64 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('test view navigation feature', () => {
+  test('user flow through links', async ({ page }) => {
+    // default view is timer view
+    await page.goto('http://localhost:4001/');
+    await page.locator('data-test-id=timer-view');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Clock' }).click();
+    await page.locator('data-test-id=clock-view');
+    await expect(page).toHaveURL('http://localhost:4001/clock');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Minimal Timer' }).click();
+    await page.locator('data-test-id=minimal-timer');
+    await expect(page).toHaveURL('http://localhost:4001/minimal');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Backstage' }).click();
+    await page.locator('data-test-id=backstage-view');
+    await expect(page).toHaveURL('http://localhost:4001/backstage');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Public' }).click();
+    await page.locator('data-test-id=public-view');
+    await expect(page).toHaveURL('http://localhost:4001/public');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Lower Thirds' }).click();
+    await expect(page).toHaveURL('http://localhost:4001/lower');
+    const errorBoundary = await page.locator('data-test-id=error-container');
+    await expect(errorBoundary).toHaveCount(0);
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'PiP' }).click();
+    await page.locator('data-test-id=pip-view');
+    await expect(page).toHaveURL('http://localhost:4001/pip');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Studio Clock' }).click();
+    await page.locator('data-test-id=studio-view');
+    await expect(page).toHaveURL('http://localhost:4001/studio');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Countdown' }).click();
+    await page.locator('data-test-id=countdown-view');
+    await expect(page).toHaveURL('http://localhost:4001/countdown');
+
+    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await page.locator('data-test-id=navigation-menu');
+    await page.getByRole('link', { name: 'Timer' }).click();
+    await page.locator('data-test-id=timer-view');
+    await expect(page).toHaveURL('http://localhost:4001/timer');
+  });
+});

server/tests/smoke-tests.test.ts

@@ -39,40 +39,4 @@ test.describe('pages routes are available', () => {
       await page.getByTestId('panel-info').click();
     });
   });
-
-  test.describe('client routes', () => {
-    test('stage timer', async ({ page }) => {
-      await page.goto('http://localhost:4001/timer');
-      await page.getByTestId('timer-view').click();
-    });
-    test('clock', async ({ page }) => {
-      await page.goto('http://localhost:4001/clock');
-      await page.getByTestId('clock-view').click();
-    });
-    test('minimal timer', async ({ page }) => {
-      await page.goto('http://localhost:4001/minimal');
-      await page.getByTestId('minimal-timer').click();
-    });
-    test('backstage', async ({ page }) => {
-      await page.goto('http://localhost:4001/backstage');
-      await page.getByTestId('backstage-view').click();
-    });
-    test('public', async ({ page }) => {
-      await page.goto('http://localhost:4001/public');
-      await page.getByTestId('public-view').click();
-    });
-    test('pip', async ({ page }) => {
-      await page.goto('http://localhost:4001/pip');
-      await page.getByTestId('pip-view').click();
-    });
-    test('studio clock', async ({ page }) => {
-      await page.goto('http://localhost:4001/studio');
-      await page.getByTestId('studio-view').click();
-    });
-    test('lower', async ({ page }) => {
-      await page.goto('http://localhost:4001/lower');
-      const errorBoundary = await page.locator('data-test-id=error-container');
-      await expect(errorBoundary).toHaveCount(0);
-    });
-  });
 });