test: add more e2e specs. (#179)

.github/workflows/e2e.yml

@@ -2,6 +2,12 @@ name: E2E Tests
 
 on:
  workflow_dispatch:
+ inputs:
+ testPath:
+ description: 'Files to test.'
+ required: true
+ default: 'tests'
+ type: string
 
 jobs:
  test:
@@ -34,7 +40,7 @@ jobs:
  - name: Install Playwright
  run: npx playwright install --with-deps
  - name: Run Tests
- run: npm test
+ run: npm test -- ${{ inputs.testPath }}
  env:
  CI: true
  SERVER_NAME: localhost
@@ -52,3 +58,10 @@ jobs:
  BM_POSTGRES_DB: ${{ secrets.BM_POSTGRES_DB }}
  SSO_GOOG_CLIENT_ID: ${{ secrets.SSO_GOOG_CLIENT_ID }}
  SSO_GOOG_CLIENT_SECRET: ${{ secrets.SSO_GOOG_CLIENT_SECRET }}
+ - name: Upload Test Results
+ uses: actions/upload-artifact@v3
+ if: always()
+ with:
+ name: playwright-report
+ path: test-results
+ retention-days: 15

Dockerfile

@@ -53,5 +53,11 @@ COPY packages/web/templates/core/upstreams.conf.template /etc/nginx/templates/co
 COPY packages/web/nginx.dev.conf /etc/nginx/nginx.conf
 EXPOSE 80 443
 
+FROM builder AS playwright
+RUN apt-get update
+RUN apt-get install -y vim
+RUN npx playwright install
+RUN npx playwright install-deps
+
 FROM adminer:4.8.1 as adminer
 EXPOSE 8080

compose.override.yaml

@@ -46,6 +46,30 @@ services:
  - dev
  - -w
  - ui
+ playwright:
+ depends_on:
+ - api
+ build:
+ context: .
+ target: playwright
+ container_name: playwright
+ volumes:
+ - ./packages/ui:/app/packages/ui
+ - ./packages/common/dist:/app/packages/common/dist
+ - ./packages/components/dist:/app/packages/components/dist
+ - ./tests:/app/tests
+ - ./playwright.config.ts:/app/playwright.config.ts
+ - ./.env:/app/.env # used to inject VITE_ env vars
+ ports:
+ - '5173:5173'
+ environment:
+ API_HOST: ${API_HOST}
+ command:
+ - npm
+ - run
+ - dev
+ - -w
+ - ui
  storybook:
  build:
  context: .

copilot/api/addons/bm-cluster.yml

@@ -23,11 +23,11 @@ Mappings:
  bmclusterEnvScalingConfigurationMap:
  test:
  'DBMinCapacity': 2 # AllowedValues: [2, 4, 8, 16, 32, 64, 192, 384]
- 'DBMaxCapacity': 4 # AllowedValues: [2, 4, 8, 16, 32, 64, 192, 384]
+ 'DBMaxCapacity': 2 # AllowedValues: [2, 4, 8, 16, 32, 64, 192, 384]
 
  All:
  'DBMinCapacity': 2 # AllowedValues: [2, 4, 8, 16, 32, 64, 192, 384]
- 'DBMaxCapacity': 4 # AllowedValues: [2, 4, 8, 16, 32, 64, 192, 384]
+ 'DBMaxCapacity': 2 # AllowedValues: [2, 4, 8, 16, 32, 64, 192, 384]
 
 Resources:
  bmclusterDBSubnetGroup:

package.json

@@ -20,7 +20,8 @@
  "clean:all": "npm run clean --workspaces --include-workspace-root",
  "cycles": "npm run cycles --workspaces",
  "prettier": "prettier . -w",
- "lint": "npm run lint --workspaces",
+ "lint": "npm run lint:tests && npm run lint --workspaces",
+ "lint:tests": "eslint . tests --ext .ts,.tsx --max-warnings 0",
  "build:deps": "npm run build -w @busmap/components && npm run build -w @busmap/common",
  "test": "playwright test --reporter=list"
  },

playwright.config.ts

@@ -1,11 +1,5 @@
 import { defineConfig, devices } from '@playwright/test'
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
-
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -16,69 +10,66 @@ export default defineConfig({
  /* 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,
+ retries: process.env.CI ? 1 : 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: 'list',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
  /* Base URL to use in actions like `await page.goto('/')`. */
- baseURL: 'https://localhost',
+ baseURL: process.env.TEST_BASE_URL ?? 'https://localhost',
 
  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
  trace: 'on-first-retry'
  },
 
  /* Configure projects for major browsers */
- projects: process.env.CI
- ? [
- /**
- * Ubuntu and mkcert issues with Chrome / Firefox
- * @see https://github.com/FiloSottile/mkcert/issues/447
- *
- * Other option is to use macos GitHub action runner and
- * install docker, etc. Could also, use `ignoreHTTPSErrors`
- * from playwright in the test specs to cover more browsers.
- */
- {
- name: 'webkit',
- use: { ...devices['Desktop Safari'] }
- },
-
- /* Test against mobile viewports. */
- {
- name: 'Mobile Safari',
- use: { ...devices['iPhone 12'] }
- }
- ]
- : [
- {
- name: 'chromium',
- use: { ...devices['Desktop Chrome'] }
- },
- {
- name: 'webkit',
- use: { ...devices['Desktop Safari'] }
- },
+ projects: [
+ /**
+ * Ubuntu and mkcert issues with Chrome / Firefox
+ * @see https://github.com/FiloSottile/mkcert/issues/447
+ *
+ * Other option is to use macos GitHub action runner and
+ * install docker, etc. Could also, use `ignoreHTTPSErrors`
+ * from playwright in the test specs to cover more browsers.
+ */
+ {
+ name: 'webkit',
+ use: { ...devices['Desktop Safari'] }
+ },
+ {
+ name: 'chromium',
+ use: {
+ ...devices['Desktop Chrome'],
+ ignoreHTTPSErrors: Boolean(process.env.CI)
+ }
+ },
 
- /* Test against mobile viewports. */
- {
- name: 'Mobile Chrome',
- use: { ...devices['Pixel 5'] }
- },
- {
- name: 'Mobile Safari',
- use: { ...devices['iPhone 12'] }
- }
- ],
+ /* Test against mobile viewports. */
+ {
+ name: 'Mobile Chrome',
+ use: {
+ ...devices['Pixel 5'],
+ ignoreHTTPSErrors: Boolean(process.env.CI)
+ }
+ },
+ {
+ name: 'Mobile Safari',
+ use: { ...devices['iPhone 12'] }
+ }
+ ],
 
  /* Run your local dev server before starting the tests */
- webServer: {
- command: 'docker compose -f compose.yaml up --attach-dependencies stage',
- ignoreHTTPSErrors: true,
- url: 'https://localhost/healthcheck',
- reuseExistingServer: !process.env.CI,
- timeout: 60_000 * 7
- }
+ webServer: process.env.TEST_BASE_URL
+ ? undefined
+ : {
+ command: process.env.CI
+ ? 'docker compose -f compose.yaml up --attach-dependencies stage'
+ : 'docker compose up --attach-dependencies dev',
+ ignoreHTTPSErrors: true,
+ url: 'https://localhost/healthcheck',
+ reuseExistingServer: !process.env.CI,
+ timeout: 60_000 * 7
+ }
 })

tests/geolocation/deny.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ context }) => {
+ await context.clearPermissions()
+})
+
+test('Deny geolocation use selector to find stop.', async ({ page }) => {
+ await page.goto('/')
+ await expect(
+ page.getByText('Location permission denied. Check your OS or browser settings.')
+ ).toBeVisible()
+ await page.getByRole('listitem', { name: 'Selector' }).getByRole('button').click()
+ await expect(page.getByRole('heading', { name: 'Bus Selector' })).toBeVisible()
+ await page.getByText('Agency').click()
+ await page.getByPlaceholder('Agencies ... (64)').fill('toronto')
+ await page.getByRole('option', { name: 'Toronto Transit Commission' }).click()
+ await page.getByText('Stop', { exact: true }).click()
+ await page.getByRole('option', { name: 'Bathurst St At Neptune Dr' }).click()
+ await expect(page.getByRole('heading', { name: 'Next Arrivals' })).toBeVisible()
+})

tests/geolocation/omnitrans.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test.use({
+ geolocation: {
+ latitude: 34.10865,
+ longitude: -117.325531
+ },
+ permissions: ['geolocation']
+})
+
+test('test', async ({ page, context }) => {
+ await context.grantPermissions(['geolocation'])
+ // Navigate to the homepage and select the Nearby stops tab, check for OmniTrans
+ await page.goto('/')
+ await page.getByRole('listitem', { name: 'Nearby' }).getByRole('button').click()
+ await expect(page.getByRole('heading', { name: 'Nearby Stops' })).toBeVisible()
+ await expect(page.getByRole('heading', { name: 'Omnitrans' })).toBeVisible({
+ timeout: 10_000
+ })
+
+ // Check that route headings are visible
+ await expect(page.getByRole('heading', { level: 4 }).first()).toBeVisible()
+
+ // Get the stop title link and save the innerText
+ const link = page.getByRole('heading', { level: 5 }).first().getByRole('link')
+ const linkText = await link.innerText()
+
+ // Click the stop link and check that predictions are rendered with users distance from stop
+ await link.click()
+ await expect(page.getByRole('heading', { name: 'Next Arrivals' })).toBeVisible({
+ timeout: 7_000
+ })
+ await expect(page.getByText(/You are .+ miles away/)).toBeVisible()
+
+ // Close the flyout menu and check the map for user and stop markers
+ await page.locator('button').filter({ hasText: 'Close' }).click()
+ await page.getByRole('button', { name: 'Marker' }).click()
+ await expect(page.locator('.leaflet-marker-icon').first()).toBeVisible()
+ await expect(page.locator('#map').getByText(linkText)).toBeVisible()
+})

tests/geolocation/ttc.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test.use({
+ geolocation: {
+ latitude: 43.69786,
+ longitude: -79.39712
+ },
+ permissions: ['geolocation']
+})
+
+test('Nearby stops for Toronto Transit Commission.', async ({ page }) => {
+ await page.goto('/')
+ await page.getByRole('listitem', { name: 'Nearby' }).getByRole('button').click()
+ await expect(page.getByRole('heading', { name: 'Nearby Stops' })).toBeVisible()
+ await expect(page.getByText('Monitoring your location.')).toBeVisible()
+ await expect(page.getByRole('heading', { name: 'Toronto TTC' })).toBeVisible({
+ timeout: 10_000
+ })
+
+ // Check that route headings are visible
+ await expect(page.getByRole('heading', { level: 4 }).first()).toBeVisible()
+
+ // Get the stop title link and save the innerText
+ const link = page.getByRole('heading', { level: 5 }).first().getByRole('link')
+ const linkText = await link.innerText()
+
+ // Click the stop link and check that predictions are rendered with users distance from stop
+ await link.click()
+ await expect(page.getByRole('heading', { name: 'Next Departures' })).toBeVisible({
+ timeout: 7_000
+ })
+ await expect(page.getByText(/You are .+ miles away/)).toBeVisible()
+
+ // Close the flyout menu and check the map for user and stop markers
+ await page.locator('button').filter({ hasText: 'Close' }).click()
+ await page.getByRole('button', { name: 'Marker' }).click()
+ await expect(page.locator('.leaflet-marker-icon').first()).toBeVisible()
+ await expect(page.locator('#map').getByText(linkText)).toBeVisible()
+})

tests/selector/agencyStop.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('Select an agency and stop to see arrivals.', async ({ page }) => {
+ await page.goto('/')
+ await page.getByRole('listitem', { name: 'Selector' }).getByRole('button').click()
+ await expect(page.getByRole('heading', { name: 'Bus Selector' })).toBeVisible()
+ await page.getByText('Agency').click()
+ await page.getByRole('option', { name: 'Toronto Transit Commission' }).click()
+ await page.getByText('Stop', { exact: true }).click()
+ await page.getByRole('option', { name: 'Bathurst St At Neptune Dr' }).click()
+ await expect(page.getByRole('heading', { name: 'Next Arrivals' })).toBeVisible()
+ await page.locator('button').filter({ hasText: 'Close' }).click()
+ await page.getByRole('button', { name: 'Marker' }).click()
+ await page.locator('#map').getByText('Bathurst St At Neptune Dr').click()
+})