Add e2e tests

.github/workflows/playwright.yml

@@ -0,0 +1,23 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn playwright test

.gitignore

@@ -3,4 +3,6 @@ mix-manifest.json
 npm-debug.log
 package-lock.json
 coverage
-yarn-error.log
+yarn-error.log
+test-results/
+playwright-report/

e2e/tests/controls.spec.ts

@@ -0,0 +1,203 @@
+import { test, Page } from '@playwright/test';
+import { baseUrl, selectors, assert, appLoaded } from '../util';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(baseUrl());
+  await appLoaded(page);
+  await assertDefaults(page);
+});
+
+test.describe('Controls', () => {
+  test('searchbox', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    await controls.searchbox.type('z');
+
+    await assert(page, {
+      heading: 'Meetings with ‘z’',
+      title: 'Meetings with ‘z’',
+      url: baseUrl({ query: { search: 'z' } }),
+    });
+
+    await controls.searchbox.press('Backspace');
+
+    await assertDefaults(page);
+  });
+
+  test('mode dropdown', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const menu = page.locator('.dropdown-menu.show');
+    const nearMeLink = menu.locator('text=Near Me');
+    const nearLocationLink = menu.locator('text=Near Location');
+
+    await controls.dropdowns.mode.click();
+    await nearMeLink.click();
+
+    await assert(page, {
+      url: baseUrl({ query: { mode: 'me' } }),
+    });
+
+    await controls.dropdowns.mode.click();
+    await nearLocationLink.click();
+
+    await controls.searchbox.type('z');
+    await controls.searchbox.press('Enter');
+
+    await assert(page, {
+      heading: 'Meetings near ‘z’',
+      title: 'Meetings near ‘z’',
+      url: baseUrl({ query: { search: 'z', mode: 'location' } }),
+    });
+
+    await controls.searchbox.press('Backspace');
+    await controls.searchbox.press('Enter');
+
+    await assert(page, {
+      heading: 'Meetings',
+      title: 'Meetings',
+      url: baseUrl({ query: { mode: 'location' } }),
+    });
+  });
+
+  test('region dropdown', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const menu = page.locator('.dropdown-menu.show');
+    const regionLink = menu.locator('text=Campbell');
+    const anywhereLink = menu.locator('text=Anywhere');
+
+    await controls.dropdowns.region.click();
+    await regionLink.click();
+
+    await assert(page, {
+      heading: 'Meetings in Campbell',
+      title: 'Meetings in Campbell',
+      url: baseUrl({ query: { region: 'campbell' } }),
+    });
+
+    await controls.dropdowns.region.click();
+    await anywhereLink.click();
+
+    await assertDefaults(page);
+  });
+
+  test('weekday dropdown', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const menu = page.locator('.dropdown-menu.show');
+    const weekdayLink = menu.locator('text=Sunday');
+    const anydayLink = menu.locator('text=Any Day');
+
+    await controls.dropdowns.weekday.click();
+    await weekdayLink.click();
+
+    await assert(page, {
+      heading: 'Sunday Meetings',
+      title: 'Sunday Meetings',
+      url: baseUrl({ query: { weekday: 0 } }),
+    });
+
+    await controls.dropdowns.weekday.click();
+    await anydayLink.click();
+
+    await assertDefaults(page);
+  });
+
+  test('time dropdown', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const menu = page.locator('.dropdown-menu.show');
+    const timeLink = menu.locator('text=Morning');
+    const anytimeLink = menu.locator('text=Any Time');
+
+    await controls.dropdowns.time.click();
+    await timeLink.click();
+
+    await assert(page, {
+      heading: 'Morning Meetings',
+      title: 'Morning Meetings',
+      url: baseUrl({ query: { time: 'morning' } }),
+    });
+
+    await controls.dropdowns.time.click();
+    await anytimeLink.click();
+
+    await assertDefaults(page);
+  });
+
+  test('type dropdown', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const menu = page.locator('.dropdown-menu.show');
+    const typeLink = menu.locator('text=Online');
+    const anytypeLink = menu.locator('text=Any Type');
+
+    await controls.dropdowns.type.click();
+    await typeLink.click();
+
+    await assert(page, {
+      heading: 'Online Meetings',
+      title: 'Online Meetings',
+      url: baseUrl({ query: { type: 'online' } }),
+    });
+
+    await controls.dropdowns.type.click();
+    await anytypeLink.click();
+
+    await assertDefaults(page);
+  });
+
+  test('view toggler', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const mapButton = controls.viewToggle.locator('button[aria-label=Map]');
+    await mapButton.click();
+
+    await assert(page, {
+      url: baseUrl({ query: { view: 'map' } }),
+    });
+  });
+
+  test('combining filters', async ({ page }) => {
+    const { controls } = selectors(page);
+
+    const menu = page.locator('.dropdown-menu.show');
+
+    await controls.searchbox.type('z');
+
+    await controls.dropdowns.region.click();
+    await menu.locator('text=Campbell').click();
+
+    await controls.dropdowns.weekday.click();
+    await menu.locator('text=Sunday').click();
+
+    await controls.dropdowns.time.click();
+    await menu.locator('text=Morning').click();
+
+    await controls.dropdowns.type.click();
+    await menu.locator('text=Online').click();
+
+    await assert(page, {
+      heading: 'Sunday Morning Online Meetings in Campbell with ‘z’',
+      title: 'Sunday Morning Online Meetings in Campbell with ‘z’',
+      url: baseUrl({
+        query: {
+          region: 'campbell',
+          weekday: 0,
+          time: 'morning',
+          type: 'online',
+          search: 'z',
+        },
+      }),
+    });
+  });
+});
+
+async function assertDefaults(page: Page) {
+  await assert(page, {
+    url: baseUrl(),
+    title: 'Meetings',
+    heading: 'Meetings',
+  });
+}

e2e/util/app-loaded.ts

@@ -0,0 +1,8 @@
+import { Page } from '@playwright/test';
+
+/**
+ * A very brittle way to determine if the app has rendered (for now).
+ */
+export async function appLoaded(page: Page) {
+  await page.waitForSelector('.tsml-ui:has(.container-fluid)');
+}

e2e/util/assert.ts

@@ -0,0 +1,28 @@
+import { expect, Page } from '@playwright/test';
+
+interface AssertParams {
+  /** URL of the page. */
+  url?: string;
+  /** Value of document.title. */
+  title?: string;
+  /** Value of the app's main header (h1). */
+  heading?: string;
+}
+
+/**
+ * Shorthand method for common assertions.
+ */
+export async function assert(page: Page, params: AssertParams) {
+  if (params.heading) {
+    const heading = page.locator('h1');
+    expect(await heading.textContent()).toStrictEqual(params.heading);
+  }
+
+  if (params.title) {
+    expect(await page.title()).toStrictEqual(params.title);
+  }
+
+  if (params.url) {
+    expect(page.url()).toStrictEqual(params.url);
+  }
+}

e2e/util/base-url.ts

@@ -0,0 +1,31 @@
+import { stringify } from 'qs';
+import config from '../../playwright.config';
+
+export type BaseUrlInput =
+  | string
+  | {
+      query?: Record<string, string | number>;
+      path?: string;
+    };
+
+/**
+ * Returns playwright's base url from the config and
+ * adds the ability to append paths and/or query params.
+ */
+export function baseUrl(input?: BaseUrlInput): string {
+  let url = config.use.baseURL;
+
+  if (typeof input === 'string') {
+    return (url += input);
+  }
+
+  if (input?.path) {
+    url += input.path;
+  }
+
+  if (input?.query) {
+    url += stringify(input.query, { addQueryPrefix: true });
+  }
+
+  return url;
+}

e2e/util/index.ts

@@ -0,0 +1,4 @@
+export { appLoaded } from './app-loaded';
+export { assert } from './assert';
+export { baseUrl, BaseUrlInput } from './base-url';
+export { selectors } from './selectors';

e2e/util/selectors.ts

@@ -0,0 +1,32 @@
+import { Page } from '@playwright/test';
+
+class Selectors {
+  public page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  public get controls() {
+    const root = this.page.locator('div.controls');
+
+    return {
+      searchbox: root.locator('input[type=search]'),
+      viewToggle: root.locator('div[role=group]:has(button[aria-label=List])'),
+      dropdowns: {
+        mode: root.locator('button#mode'),
+        region: root.locator('button#region'),
+        weekday: root.locator('button#weekday'),
+        time: root.locator('button#time'),
+        type: root.locator('button#type'),
+      },
+    };
+  }
+}
+
+/**
+ * Provides accessors for common page selectors.
+ */
+export function selectors(page: Page) {
+  return new Selectors(page);
+}

jest.config.js

@@ -5,5 +5,8 @@ module.exports = {
   collectCoverageFrom: [
     '<rootDir>/src/**/*.(j|t)s*',
     '!<rootDir>/src/(types|i18n)/*',
+    '!<rootDir>/**/__snapshots__/*',
+    '!<rootDir>/e2e/**/*',
   ],
+  testPathIgnorePatterns: ['e2e'],
 };

package.json

@@ -13,11 +13,15 @@
     "watch-poll": "mix watch -- --watch-options-poll=1000",
     "test": "jest",
     "test-watch": "jest --watch",
-    "test-coverage": "jest --coverage"
+    "test-coverage": "jest --coverage",
+    "test-e2e": "yarn playwright test",
+    "serve": "serve public",
+    "postinstall": "yarn playwright install"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.16.7",
+    "@playwright/test": "^1.19.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.4.0",
@@ -29,6 +33,7 @@
     "react-test-renderer": "^17.0.2",
     "sass": "^1.37.5",
     "sass-loader": "^12.1.0",
+    "serve": "^13.0.2",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5"
   },