From 786878a3e4ae2b2ff1f56a21c4f1c93de30506f7 Mon Sep 17 00:00:00 2001
From: Nicco <hi@nicco.io>
Date: Tue, 19 Jul 2022 14:12:51 +0200
Subject: [PATCH] Testing (#41)

* testing

* try playwrigth

* testing

* add pr support

* not on each commit
---
 .github/workflows/test.yaml           | 36 ++++++++++++++++++++++++++
 .gitignore                            |  3 +++
 README.md                             |  4 ++-
 frontend/package.json                 |  2 +-
 frontend/src/lib/ui/NoteResult.svelte |  1 +
 frontend/src/lib/ui/ShowNote.svelte   | 28 ++++++++++----------
 frontend/src/routes/note/[id].svelte  |  2 +-
 package.json                          | 11 +++++++-
 playwright.config.ts                  | 25 ++++++++++++++++++
 pnpm-lock.yaml                        | 21 +++++++++++++++
 test/text.ts                          | 37 +++++++++++++++++++++++++++
 11 files changed, 153 insertions(+), 17 deletions(-)
 create mode 100644 .github/workflows/test.yaml
 create mode 100644 playwright.config.ts
 create mode 100644 test/text.ts

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
new file mode 100644
index 0000000..6e44ad1
--- /dev/null
+++ b/.github/workflows/test.yaml
@@ -0,0 +1,36 @@
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    services:
+      redis:
+        image: redis:7-alpine
+        ports:
+          - 6379:6379
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: 1.61
+      - name: Prepare
+        run: |
+          pnpm install
+          pnpm run ci:prepare
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Run your tests
+        run: pnpm run test
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v2
+        with:
+          name: playwright-report
+          path: playwright-report
diff --git a/.gitignore b/.gitignore
index 3f28053..f3198e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,6 @@ node_modules
 /build
 /functions
 .env
+
+General
+test-results
diff --git a/README.md b/README.md
index 6771579..5175cc5 100644
--- a/README.md
+++ b/README.md
@@ -167,4 +167,6 @@ You can see the app under [localhost:1234](http://localhost:1234).
 
 ###### Attributions
 
-Icons made by <a href="https://www.freepik.com" title="Freepik">freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+- Text for tests [Nietzsche Ipsum](https://nietzsche-ipsum.com/)
+- Loading animation by [Nikhil Krishnan](https://codepen.io/nikhil8krishnan/pen/rVoXJa)
+- Icons made by <a href="https://www.freepik.com" title="Freepik">freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
diff --git a/frontend/package.json b/frontend/package.json
index 381d2bb..7ff4842 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
-		"preview": "svelte-kit preview",
+		"preview": "vite preview --port 3000",
 		"check": "svelte-check --tsconfig tsconfig.json",
 		"licenses": "license-checker --summary > licenses.csv",
 		"locale:download": "node scripts/locale.js"
diff --git a/frontend/src/lib/ui/NoteResult.svelte b/frontend/src/lib/ui/NoteResult.svelte
index b1d1b41..2569052 100644
--- a/frontend/src/lib/ui/NoteResult.svelte
+++ b/frontend/src/lib/ui/NoteResult.svelte
@@ -24,6 +24,7 @@
 	label={$t('common.share_link')}
 	value="{window.location.origin}/note/{result.id}#{result.password}"
 	copy
+	data-testid="share-link"
 />
 <br />
 <p>
diff --git a/frontend/src/lib/ui/ShowNote.svelte b/frontend/src/lib/ui/ShowNote.svelte
index 96793b6..ad96153 100644
--- a/frontend/src/lib/ui/ShowNote.svelte
+++ b/frontend/src/lib/ui/ShowNote.svelte
@@ -44,20 +44,22 @@
 </script>
 
 <p class="error-text">{@html $t('show.warning_will_not_see_again')}</p>
-{#if note.meta.type === 'text'}
-	<div class="note">
-		{@html contentWithLinks(note.contents)}
-	</div>
-	<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
-{:else}
-	{#each files as file}
-		<div class="note file">
-			<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
-			<small> {file.type} － {prettyBytes(file.size)}</small>
+<div data-testid="result">
+	{#if note.meta.type === 'text'}
+		<div class="note">
+			{@html contentWithLinks(note.contents)}
 		</div>
-	{/each}
-	<Button on:click={download}>{$t('show.download_all')}</Button>
-{/if}
+		<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
+	{:else}
+		{#each files as file}
+			<div class="note file">
+				<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
+				<small> {file.type} － {prettyBytes(file.size)}</small>
+			</div>
+		{/each}
+		<Button on:click={download}>{$t('show.download_all')}</Button>
+	{/if}
+</div>
 
 <style>
 	.note {
diff --git a/frontend/src/routes/note/[id].svelte b/frontend/src/routes/note/[id].svelte
index 85426eb..9d81331 100644
--- a/frontend/src/routes/note/[id].svelte
+++ b/frontend/src/routes/note/[id].svelte
@@ -86,7 +86,7 @@
 		<form on:submit|preventDefault={show}>
 			<fieldset>
 				<p>{$t('show.explanation')}</p>
-				<Button type="submit">{$t('show.show_note')}</Button>
+				<Button data-testid="show-note-button" type="submit">{$t('show.show_note')}</Button>
 				{#if error}
 					<br />
 					<p class="error-text">
diff --git a/package.json b/package.json
index e5b6072..bd95ebf 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,18 @@
     "dev:backend": "cd backend && cargo watch -x 'run --bin cryptgeon'",
     "dev:front": "pnpm --prefix frontend run dev",
     "dev:proxy": "node proxy.mjs",
-    "dev": "run-p dev:*"
+    "dev": "run-p dev:*",
+    "test": "playwright test",
+    "ci:server": "run-p ci:server:*",
+    "ci:server:backend": "cd backend && cargo run",
+    "ci:server:front": "pnpm --prefix frontend run preview",
+    "ci:server:proxy": "node proxy.mjs",
+    "ci:prepare": "run-p ci:prepare:*",
+    "ci:prepare:backend": "cd backend && cargo build",
+    "ci:prepare:front": "pnpm --prefix frontend install && pnpm --prefix frontend run build"
   },
   "devDependencies": {
+    "@playwright/test": "^1.23.4",
     "http-proxy": "^1.18.1",
     "npm-run-all": "^4.1.5"
   }
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..d38c80c
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,25 @@
+import { devices, type PlaywrightTestConfig } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  use: {
+    video: 'retain-on-failure',
+    baseURL: 'http://localhost:1234',
+    // actionTimeout: 10_000,
+  },
+  outputDir: './test-results',
+  testDir: './test',
+  testMatch: /.*\.ts/,
+  webServer: {
+    command: 'pnpm run ci:server',
+    port: 1234,
+    reuseExistingServer: true,
+    timeout: 20_000,
+  },
+  projects: [
+    { name: 'Chrome', use: { ...devices['Desktop Chrome'] } },
+    { name: 'Firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'Safari', use: { ...devices['Desktop Safari'] } },
+  ],
+}
+
+export default config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7983602..f5d95da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,15 +1,30 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@playwright/test': ^1.23.4
   http-proxy: ^1.18.1
   npm-run-all: ^4.1.5
 
 devDependencies:
+  '@playwright/test': 1.23.4
   http-proxy: 1.18.1
   npm-run-all: 4.1.5
 
 packages:
 
+  /@playwright/test/1.23.4:
+    resolution: {integrity: sha512-iIsoMJDS/lyuhw82FtcV/B3PXikgVD3hNe5hyvOpRM0uRr1OIpN3LgPeRbBjhzBWmyf6RgRg5fqK5sVcpA03yA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@types/node': 18.0.6
+      playwright-core: 1.23.4
+    dev: true
+
+  /@types/node/18.0.6:
+    resolution: {integrity: sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==}
+    dev: true
+
   /ansi-styles/3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -430,6 +445,12 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /playwright-core/1.23.4:
+    resolution: {integrity: sha512-h5V2yw7d8xIwotjyNrkLF13nV9RiiZLHdXeHo+nVJIYGVlZ8U2qV0pMxNJKNTvfQVT0N8/A4CW6/4EW2cOcTiA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /read-pkg/3.0.0:
     resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
     engines: {node: '>=4'}
diff --git a/test/text.ts b/test/text.ts
new file mode 100644
index 0000000..98dc197
--- /dev/null
+++ b/test/text.ts
@@ -0,0 +1,37 @@
+import { expect, test, type Page } from '@playwright/test'
+
+async function createNote(page: Page, text: string): Promise<string> {
+  await page.goto('/')
+  await page.locator('textarea').click()
+  await page.locator('textarea').fill(text)
+  await page.locator('button:has-text("create")').click()
+
+  await page.locator('[data-testid="share-link"]').click()
+  const shareLink = await page.locator('[data-testid="share-link"]').inputValue()
+  return shareLink
+}
+
+async function checkLinkForText(page: Page, link: string, text: string) {
+  await page.goto(link)
+  await page.locator('[data-testid="show-note-button"]').click()
+  expect(await page.locator('[data-testid="result"] >> .note').innerText()).toBe(text)
+}
+
+async function checkLinkDoesNotExist(page: Page, link: string) {
+  await page.goto('/') // Required due to firefox: https://github.com/microsoft/playwright/issues/15781
+  await page.goto(link)
+  await expect(page.locator('main')).toContainText('note was not found or was already deleted')
+}
+
+test('simple', async ({ page }) => {
+  const text = `Endless prejudice endless play derive joy eternal-return selfish burying. Of decieve play pinnacle faith disgust. Spirit reason salvation burying strong of joy ascetic selfish against merciful sea truth. Ubermensch moral prejudice derive chaos mountains ubermensch justice philosophy justice ultimate joy ultimate transvaluation. Virtues convictions war ascetic eternal-return spirit. Ubermensch transvaluation noble revaluation sexuality intentions salvation endless decrepit hope noble fearful. Justice ideal ultimate snare god joy evil sexuality insofar gains oneself ideal.`
+  const shareLink = await createNote(page, text)
+  await checkLinkForText(page, shareLink, text)
+})
+
+test('only shown once', async ({ page }) => {
+  const text = `Christian victorious reason suicide dead. Right ultimate gains god hope truth burying selfish society joy. Ultimate.`
+  const shareLink = await createNote(page, text)
+  await checkLinkForText(page, shareLink, text)
+  await checkLinkDoesNotExist(page, shareLink)
+})