From 0bad5f275f5a02e3e4fd3e845723c51a6bf0b351 Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Tue, 19 Jul 2022 11:57:39 +0200
Subject: [PATCH] testing

---
 .github/workflows/test.yaml           | 36 +++++++++++++++++++++++++++
 README.md                             |  4 ++-
 frontend/src/lib/ui/NoteResult.svelte |  1 +
 frontend/src/lib/ui/ShowNote.svelte   | 28 +++++++++++----------
 frontend/src/routes/note/[id].svelte  |  2 +-
 package.json                          |  6 ++++-
 playwright.config.ts                  | 18 ++++++++++++++
 pnpm-lock.yaml                        | 21 ++++++++++++++++
 test/text.ts                          | 36 +++++++++++++++++++++++++++
 9 files changed, 136 insertions(+), 16 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..340e0a2
--- /dev/null
+++ b/.github/workflows/test.yaml
@@ -0,0 +1,36 @@
+on:
+  push:
+
+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: npm test
+      # - name: Upload test results
+      #   if: always()
+      #   uses: actions/upload-artifact@v2
+      #   with:
+      #     name: playwright-report
+      #     path: playwright-report
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/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..65131b4 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,13 @@
     "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:*",
+    "ci:prepare": "run-p ci:prepare:*",
+    "ci:prepare:backend": "cd backend && cargo build",
+    "ci:prepare:front": "pnpm --prefix frontend install"
   },
   "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..6b76c3f
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,18 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  use: {
+    video: 'on-first-retry',
+    baseURL: 'http://localhost:1234',
+    actionTimeout: 3_000,
+  },
+  testDir: './test',
+  testMatch: /.*\.ts/,
+  webServer: {
+    command: 'pnpm run dev',
+    port: 1234,
+    reuseExistingServer: true,
+  },
+}
+
+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..0df21bd
--- /dev/null
+++ b/test/text.ts
@@ -0,0 +1,36 @@
+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(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)
+})