test: add e2e tests for timezone feature (#23)

* test: add e2e tests for timezone feature

* test(e2e): trim playwright config

* docs: add note about tests

* test: no default timeout

* ci: fix artifact name

Author: coderbyheart

.github/workflows/test-and-release.yaml

@@ -39,10 +39,22 @@ jobs:
           PUBLIC_VERSION: ${{ github.sha }}
         run: npm run build
 
+      - name: Install playwright
+        run: npx playwright install
+
+      - name: Start server
+        run: npx node-static build > server.log 2>&1 &
+
+      - name: Wait for server to be up
+        run: until nc -w 10 127.0.0.1 8080; do sleep 1; done
+
+      - name: Run end-to-end tests
+        run: npm run test:e2e
+
       - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: ${GITHUB_REPOSITORY}-${{ github.sha }}
+          name: ${{ env.GITHUB_REPOSITORY }}-${{ github.sha }}
           path: build
 
       - name: Semantic release

.gitignore

@@ -5,3 +5,6 @@
 node_modules/
 npm-debug.log
 build/
+test-results/
+playwright-report/
+e2e-tests-out

README.md

@@ -20,6 +20,16 @@ conferences!
 
     npm start
 
+### Run the tests
+
+Unit tests can be run using
+
+    npm test
+
+End-to-end tests can be run using
+
+    npm run test-e2e
+
 ## Architecture decision records (ADRs)
 
 see [./adr](./adr).

e2e-tests/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-restricted-imports": "off"
+  }
+}

e2e-tests/example.spec.ts

@@ -0,0 +1,70 @@
+import { BrowserContext, chromium, expect, test } from '@playwright/test'
+import path from 'path'
+import sinon from 'sinon'
+
+test.describe('Adding an item', () => {
+	let context: BrowserContext
+	test.beforeAll(async () => {
+		const browser = await chromium.launch() // Or 'firefox' or 'webkit'.
+		context = await browser.newContext({
+			locale: 'no-NO',
+			timezoneId: 'Europe/Berlin',
+		})
+		// See https://github.com/microsoft/playwright/issues/6347#issuecomment-965887758
+		await context.addInitScript({
+			path: path.join(process.cwd(), 'node_modules/sinon/pkg/sinon.js'),
+		})
+		// Auto-enable sinon right away
+		// and enforce our "current" date
+		await context.addInitScript(() => {
+			const clock = sinon.useFakeTimers()
+			clock.setSystemTime(new Date('2022-03-11T12:00:00Z'))
+			;(window as any).__clock = clock
+		})
+	})
+
+	test('should allow me to add todo items', async () => {
+		const page = await context.newPage()
+		await page.goto('http://localhost:8080/')
+
+		// Create a new entry
+		await page.locator('button[name="edit-schedule"]').click()
+		await page.locator('input[name="conference-day"]').fill('2022-03-12')
+		await page
+			.locator('select[name="conference-timezone"]')
+			.selectOption('Asia/Tokyo')
+		await page.locator('input[name="session-hour"]').fill('9')
+		await page.locator('input[name="session-minute"]').fill('45')
+
+		const sessionName = 'Breakfast for Champions'
+		const sessionNameInput = page.locator('input[name="session-name"]')
+		await sessionNameInput.fill(sessionName)
+		await sessionNameInput.press('Enter')
+
+		await page.locator('button[name="save-schedule"]').click()
+
+		// Table should have the new entry
+		await expect(page.locator('table tbody')).toContainText(sessionName)
+
+		// Find the row of the new entry
+		const tr = page
+			.locator(`table tbody td:has-text("${sessionName}")`) // td
+			.locator(`xpath=ancestor::tr`)
+		const conferenceTime = tr.locator('td:first-child')
+		await expect(conferenceTime).toContainText('09:45')
+
+		// Time Zone difference between Berlin and Tokyo on 2022-03-12 is 8 hours
+
+		const localTime = tr.locator('td:nth-child(2)')
+		await expect(localTime).toContainText('01:45')
+	})
+
+	test('should display the users time zone', async () => {
+		const page = await context.newPage()
+		await page.goto('http://localhost:8080/')
+
+		await expect(
+			page.locator('table thead th:nth-child(2) small'),
+		).toContainText('Berlin')
+	})
+})

e2e-tests/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "sourceMap": true,
+    "outDir": "../e2e-tests-out",
+    "esModuleInterop": true,
+    "baseUrl": "../src",
+    "strict": true
+  },
+  "include": ["../playwright.config.ts", "../e2e-tests"]
+}