tests(docs): implement some basic playwright tests #525

.github/workflows/lapis2-docs.yml

@@ -5,46 +5,95 @@ on: [push]
 env:
   DOCKER_IMAGE_NAME: ghcr.io/genspectrum/lapis-v2-docs
 
+defaults:
+  run:
+    working-directory: ./lapis2-docs
+
 jobs:
+  checks:
+    name: Check format
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('lapis2-docs/**/package-lock.json') }}
+      - run: npm ci
+      - run: npm run check-format
+      - run: npm run check-types
+
   dockerImage:
-    name: Build Docker Image
+    name: Build Docker Image And Run E2E Tests
     runs-on: ubuntu-latest
     permissions:
       packages: write
     steps:
-      -
-        uses: actions/checkout@v4
-      -
-        name: Set up Docker Buildx
+      - uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-      -
-        name: Login to GitHub Container Registry
+
+      - name: Login to GitHub Container Registry
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      -
-        name: Docker metadata
+
+      - name: Docker metadata
         id: dockerMetadata
         uses: docker/metadata-action@v5
         with:
           images: ${{ env.DOCKER_IMAGE_NAME }}
           tags: |
             type=ref,event=branch,enable=${{ github.ref != 'refs/heads/main' }}
             type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
-      -
-        name: Build and push image
+
+      - name: Build and push image
         uses: docker/build-push-action@v5
         with:
           context: ./lapis2-docs
           push: true
           tags: ${{ steps.dockerMetadata.outputs.tags }}
-      -
-        name: Start Docker container and check that it responds
+
+      - name: Start Docker container and check that it responds
         run: |
-          docker compose -f lapis2-docs/test-docker-compose.yml up -d --wait
-          curl --fail --silent localhost:3000/docs/ | grep "Welcome to LAPIS" \
-            || (echo "Did not find expected text in website" && exit 1)
+          docker compose -f test-docker-compose.yml up -d --wait
         env:
           IMAGE: ${{ steps.dockerMetadata.outputs.tags }}
+
+      - name: Get Installed Playwright Version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['node_modules/@playwright/test'].version)")" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - name: Install only System Dependencies
+        run: npx playwright install-deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+
+      - name: Run E2E test
+        run: npm run e2e
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: playwright-report
+          path: lapis2-docs/playwright-report/
+          retention-days: 7

lapis2-docs/.gitignore

@@ -19,3 +19,7 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

lapis2-docs/.prettierrc

@@ -6,7 +6,6 @@
   "jsxSingleQuote": true,
   "singleQuote": true,
   "quoteProps": "consistent",
-  "proseWrap": "always",
   "plugins": ["prettier-plugin-astro"],
   "overrides": [
     {

lapis2-docs/astro.config.mjs

@@ -87,7 +87,7 @@ export default defineConfig({
                     label: 'Architecture and Dev Docs',
                     items: [
                         {
-                            label: 'Introduction',
+                            label: 'Introduction and Goals',
                             link: '/architecture-and-dev-docs/introduction',
                         },
                         {

lapis2-docs/package.json

@@ -10,7 +10,8 @@
         "astro": "astro",
         "check-format": "prettier --check \"**/*.{ts,tsx,json,astro,md,mdx,mjs,cjs}\"",
         "format": "prettier --write \"**/*.{ts,tsx,json,astro,md,mdx,mjs,cjs}\"",
-        "check-types": "tsc --noEmit && CONFIG_FILE=../siloLapisTests/testData/testDatabaseConfig.yaml astro check"
+        "check-types": "CONFIG_FILE=../siloLapisTests/testData/testDatabaseConfig.yaml astro sync && tsc --noEmit",
+        "e2e": "playwright test"
     },
     "dependencies": {
         "@astrojs/react": "^3.0.7",
@@ -32,6 +33,8 @@
     },
     "devDependencies": {
         "@astrojs/check": "^0.3.2",
+        "@playwright/test": "^1.40.1",
+        "@types/node": "^20.10.5",
         "@types/swagger-ui": "^3.52.4",
         "prettier": "^3.0.0",
         "prettier-plugin-astro": "^0.12.1",

lapis2-docs/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './tests',
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: 1,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: 'html',
+    use: {
+        trace: 'retain-on-failure',
+        screenshot: 'only-on-failure',
+    },
+
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+    ],
+});

lapis2-docs/src/content/docs/architecture-and-dev-docs/architecture-and-constraints.mdx

@@ -5,17 +5,17 @@ description: Overview of the architecture and constraints of the software.
 
 We identified the following constraints for our software:
 
-- Developed under an open-source licence. We chose the tooling such that a broad spectrum of developers can in principle
-work on the software.
-- The software is designed to be highly configurable so that it can be used for various organisms.
-Configuration files have to be passed to LAPIS and SILO at runtime that determine the nature of the organism such as:
-  - a reference genome
-  - which metadata is available on the genomic data
-- Input files for SILO are provided in a specific format:
-  - metadata and quality control
-  - sequence data (non-aligned nucleotide sequences, aligned nucleotide sequences, aligned AA sequences)
-  - a Pango lineage alias map (if available for the organism)
-- LAPIS is backed by a database that understands SILO queries.
-- The system is designed to have the best possible performance.
-This mostly targets SILO, but also in LAPIS,
-we have to keep in mind that we are dealing with potentially large data that we have to serve to the client.
+-   Developed under an open-source licence. We chose the tooling such that a broad spectrum of developers can in principle
+    work on the software.
+-   The software is designed to be highly configurable so that it can be used for various organisms.
+    Configuration files have to be passed to LAPIS and SILO at runtime that determine the nature of the organism such as:
+    -   a reference genome
+    -   which metadata is available on the genomic data
+-   Input files for SILO are provided in a specific format:
+    -   metadata and quality control
+    -   sequence data (non-aligned nucleotide sequences, aligned nucleotide sequences, aligned AA sequences)
+    -   a Pango lineage alias map (if available for the organism)
+-   LAPIS is backed by a database that understands SILO queries.
+-   The system is designed to have the best possible performance.
+    This mostly targets SILO, but also in LAPIS,
+    we have to keep in mind that we are dealing with potentially large data that we have to serve to the client.

lapis2-docs/src/content/docs/architecture-and-dev-docs/glossary.mdx

@@ -4,7 +4,7 @@ description: Explanation of terms used in the context of LAPIS.
 ---
 
 | Term     | Definition                                                                                                                                                                                                                                                       |
-|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | AA       | amino acid                                                                                                                                                                                                                                                       |
 | aligned  | a nucleotide sequence is aligned, if it is arranged such that it has many similarities to a given reference genome. The aligned sequence has the same length as the reference genome. Gaps are marked in the aligned sequence. Insertions are stored separately. |
 | Mutation | a divergence from the reference genome (see below).                                                                                                                                                                                                              |
@@ -28,8 +28,8 @@ The gene has to be provided for the AA mutation, since AAs only make sense withi
 
 **Example ORF_1a\:G1234S**. This translates to
 
-- in Gene: ORF_1a
-- AA mutation from "G" to "S" at position 1234
+-   in Gene: ORF_1a
+-   AA mutation from "G" to "S" at position 1234
 
 The origin AA symbol can be omitted, since it is clear from the reference genome.
 **Example: ORF_1a:1234S**
@@ -38,9 +38,9 @@ The origin AA symbol can be omitted, since it is clear from the reference genome
 
 **Example: C1234T**. This translates to
 
-- a nucleotide mutation from nucleotide "C"
-- at position 1234 in the genome
-- to nucleotide "T"
+-   a nucleotide mutation from nucleotide "C"
+-   at position 1234 in the genome
+-   to nucleotide "T"
 
 The origin nucleotide symbol can be omitted, since it is clear from the reference genome.
 **Example: 1234T**

lapis2-docs/src/content/docs/architecture-and-dev-docs/introduction.mdx

@@ -24,14 +24,14 @@ We refer to this special configuration as SILO-LAPIS.
 The following goals have been established for this system:
 
 | Priority |                                                                                                             |
-|----------|-------------------------------------------------------------------------------------------------------------|
+| -------- | ----------------------------------------------------------------------------------------------------------- |
 | 1        | Provide an API to query large sets of genomic sequence data in a very efficient way.                        |
 | 2        | Provide the infrastructure such that other researchers ("maintainers") can easily setup their own instance. |
 
 ## Requirements Overview
 
 | Requirement                             |                                                                                  |
-|-----------------------------------------|----------------------------------------------------------------------------------|
+| --------------------------------------- | -------------------------------------------------------------------------------- |
 | Create an instance for a given organism | Create an instance of the whole system by giving a configuration for a organism. |
 | Load data                               | Load sequence data that has to be provided in a defined format.                  |
 | Store data                              | Store data in compressed form.                                                   |
@@ -41,7 +41,7 @@ The following goals have been established for this system:
 ## Quality Goals
 
 | Quality Category       | Quality          | Description                                                                                                       |
-|------------------------|------------------|-------------------------------------------------------------------------------------------------------------------|
+| ---------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
 | Usability              | Ease of use      | Ease of use for the user to hand in queries.                                                                      |
 |                        | Ease of use      | Ease of use for maintainers to create a new instance for a new organism.                                          |
 |                        | Ease of learning | The queries should be as easy to write as possible. We provide material to assist in learning the query language. |
@@ -55,9 +55,9 @@ The following goals have been established for this system:
 ## Stakeholders
 
 | Role                                  | Expectations                                                                                    |
-|---------------------------------------|-------------------------------------------------------------------------------------------------|
+| ------------------------------------- | ----------------------------------------------------------------------------------------------- |
 | Database researcher                   | Can develop new genomic data engineering algorithms for LAPIS.                                  |
 | Developer                             | Can fix bugs and add new features to LAPIS.                                                     |
 | User (beginner level)                 | Can write simple queries to LAPIS by hand and get a fast result.                                |
 | User (advanced level/tool developers) | Can write advanced, possibly programmatically generated queries to LAPIS and get a fast result. |
-| Maintainer                            | Can host the software on their own servers for their own organism configuration.                |
+| Maintainer                            | Can host the software on their own servers for their own organism configuration.                |