create subnet test with playwright

.github/workflows/lintBuildTest.yml

@@ -2,14 +2,12 @@ name: CI
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
   pull_request:
 
 jobs:
   ci:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v2
 

.github/workflows/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -36,3 +36,5 @@
 # System Files
 .DS_Store
 Thumbs.db
+test-results/
+playwright-report/

app/e2e/VpcPage.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:4001')
+  const pageTitle = await page.textContent('header h1 span:last-child')
+  expect(pageTitle).toEqual('Projects')
+})
+
+test.describe('VpcPage', () => {
+  test('can create subnet', async ({ page }) => {
+    // could goto page directly but clicking through is more realistic
+    await page.click('table :text("mock-project")')
+    await page.click('a:has-text("Networking")')
+    await page.click('a:has-text("mock-vpc")')
+
+    // only one row in table, the default mock-subnet
+    let rows = await page.locator('tbody >> tr')
+    await expect(rows).toHaveCount(1)
+    await expect(rows.nth(0).locator('text="mock-subnet"')).toBeVisible()
+
+    // open modal, fill out form, submit
+    await page.click('text=New subnet')
+    await page.fill('text=IPv4 block', '1.1.1.2/24')
+    await page.fill('input[name=name]', 'mock-subnet-2')
+    await page.click('button:has-text("Create subnet")')
+
+    rows = await page.locator('tbody >> tr')
+    await expect(rows).toHaveCount(2)
+
+    await expect(rows.nth(0).locator('text="mock-subnet"')).toBeVisible()
+    await expect(rows.nth(0).locator('text="1.1.1.1/24"')).toBeVisible()
+
+    await expect(rows.nth(1).locator('text="mock-subnet-2"')).toBeVisible()
+    await expect(rows.nth(1).locator('text="1.1.1.2/24"')).toBeVisible()
+  })
+})

app/pages/project/networking/VpcPage/VpcPage.spec.ts

@@ -10,43 +10,6 @@ import {
 import { defaultFirewallRules } from '@oxide/api-mocks'
 
 describe('VpcPage', () => {
-  describe('subnet', () => {
-    it('create works', async () => {
-      renderAppAt('/orgs/maze-war/projects/mock-project/vpcs/mock-vpc')
-      screen.getByText('Subnets')
-
-      // wait for subnet to show up in the table
-      await screen.findByText('mock-subnet')
-      // the one we'll be adding is not there
-      expect(screen.queryByRole('cell', { name: 'mock-subnet-2' })).toBeNull()
-
-      // modal is not already open
-      expect(screen.queryByTestId('create-vpc-subnet-modal')).toBeNull()
-
-      // click button to open modal
-      clickByRole('button', 'New subnet')
-
-      // modal is open
-      screen.getByRole('dialog', { name: 'Create subnet' })
-
-      typeByRole('textbox', 'IPv4 block', '1.1.1.2/24')
-
-      typeByRole('textbox', 'Name', 'mock-subnet-2')
-
-      // submit the form
-      clickByRole('button', 'Create subnet')
-
-      // wait for modal to close
-      await waitForElementToBeRemoved(() =>
-        screen.queryByTestId('create-vpc-subnet-modal')
-      )
-
-      // table refetches and now includes second subnet
-      await screen.findByText('mock-subnet')
-      await screen.findByText('mock-subnet-2')
-    }, 10000) // otherwise it flakes in CI
-  })
-
   describe('firewall rule', () => {
     it('create works', async () => {
       renderAppAt('/orgs/maze-war/projects/mock-project/vpcs/mock-vpc')

package.json

@@ -66,6 +66,7 @@
     "@figma-export/cli": "^3.5.0",
     "@figma-export/output-components-as-svgr": "^3.4.0",
     "@figma-export/transform-svg-with-svgo": "^3.5.0",
+    "@playwright/test": "^1.19.1",
     "@storybook/addon-docs": "^6.4.12",
     "@storybook/addon-essentials": "^6.4.12",
     "@storybook/addon-links": "^6.4.12",
@@ -127,7 +128,7 @@
     "typescript": "4.6.1-rc",
     "url-loader": "^4.1.1",
     "vite": "^2.8.0",
-    "vitest": "^0.3.5",
+    "vitest": "^0.3.6",
     "webpack": "^5.40.0",
     "whatwg-fetch": "^3.6.2"
   },

playwright.config.ts

@@ -0,0 +1,70 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './app/e2e',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* 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,
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* 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('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* 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',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+  ],
+
+  // use different port so it doesn't conflict with local dev server
+  webServer: {
+    command: 'yarn start:msw --port 4001',
+    port: 4001,
+  },
+}
+
+export default config

vite.config.ts

@@ -1,5 +1,3 @@
-/// <reference types="vitest" />
-
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
@@ -63,5 +61,13 @@ export default defineConfig(({ mode }) => ({
     global: true,
     environment: 'jsdom',
     setupFiles: ['app/test/setup.ts'],
+    exclude: [
+      'app/e2e/**',
+      // defaults (workaround for bug when I try to import these from vitest)
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/cypress/**',
+      '**/.{idea,git,cache,output,temp}/**',
+    ],
   },
 }))