👷 cypress end-to-end testing (#135)

.github/workflows/checks.yml

@@ -35,14 +35,22 @@ jobs:
           PR_TITLE: ${{ github.event.pull_request.title }}
         run: echo "$PR_TITLE" | npx commitlint
 
-  docker:
-    name: Docker build
+  e2e:
+    name: End-to-end tests
     runs-on: ubuntu-latest
     steps:
-      - uses: haliphax/narf/.github@main
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: Docker build
-        run: docker build -t narf .
+        run: docker build -t narf:latest .
+
+      - name: Cypress
+        run: |
+          mkdir db
+          docker run -d -p 3000:3000 -v $(pwd)/db:/app/db narf:latest
+          npm i cypress
+          npm run e2e
 
   eslint:
     runs-on: ubuntu-latest

Dockerfile

@@ -12,15 +12,14 @@ RUN apt-get update -qq && \
 	apt-get install -y --no-install-recommends \
 	build-essential=12.9 pkg-config=1.8.1-1 python-is-python3=3.11.2-1+deb12u1
 COPY package-lock.json package.json ./
-RUN npm ci --ignore-scripts --include=dev
+RUN npm ci --include=dev
 COPY . .
 RUN npm run build && npm prune --omit=dev
 
 FROM base
 COPY --from=build /app /app
-RUN mkdir -p /data
-VOLUME /data
+RUN mkdir -p /app/db
+VOLUME /app/db
 EXPOSE 3000
-ENV DATABASE_URL="file:///data/sqlite.db"
 ENV host="0.0.0.0"
 CMD [ "npm", "run", "start" ]

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+	e2e: {
+		supportFile: false,
+	},
+});

cypress/e2e/story.cy.ts

@@ -0,0 +1,33 @@
+describe("story spec", () => {
+	it("passes", () => {
+		cy.visit("http://localhost:3000", {})
+			.get("#title")
+			.should("be.visible")
+			.type("Test{enter}")
+			.location()
+			.should("match", /\/[%a-zA-Z0-9]+/)
+			.get('button[title="Vote 1"]')
+			.click()
+			.location()
+			.then((l) => {
+				localStorage.clear();
+				cy.visit(l.href)
+					.get('button[title="Vote 2"]')
+					.should("be.visible")
+					.click()
+					.get("span.y")
+					.should("be.visible")
+					.get("button")
+					.filter((_, e) => e.textContent.includes("Reveal"))
+					.first()
+					.click()
+					.get('dialog[open] button[value="OK"]')
+					.should("be.visible")
+					.click()
+					.get(".🥧")
+					.should("be.visible")
+					.find("> div")
+					.should("have.length", 2);
+			});
+	});
+});

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["es5", "dom"],
+		"types": ["cypress", "node"]
+	},
+	"include": ["**/*.ts"]
+}