Testing (#41)

* testing

* try playwrigth

* testing

* add pr support

* not on each commit

.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

.gitignore

@@ -9,3 +9,6 @@ node_modules
 /build
 /functions
 .env
+
+General
+test-results

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>

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"

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>

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 data-testid="result">
-	<div class="note">
+	{#if note.meta.type === 'text'}
-		{@html contentWithLinks(note.contents)}
+		<div class="note">
-	</div>
+			{@html contentWithLinks(note.contents)}
-	<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={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
-	<Button on:click={download}>{$t('show.download_all')}</Button>
+	{:else}
-{/if}
+		{#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 {

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">

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"
   }

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

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'}

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)
+})