Merge pull request #53 from ubigu/chore/e2e-tests

Add e2e tests

.github/release-drafter.yml

@@ -0,0 +1,44 @@
+name-template: 'v$RESOLVED_VERSION'
+tag-template: 'v$RESOLVED_VERSION'
+categories:
+  - title: 'Features'
+    label: 'feature'
+  - title: 'Bug fixes'
+    label: 'fix'
+  - title: 'Infra changes'
+    label: 'infra'
+  - title: 'Maintenance'
+    label: 'chore'
+autolabeler:
+  - label: 'feature'
+    branch:
+      - '/feature\/.+/'
+  - label: 'fix'
+    branch:
+      - '/fix\/.+/'
+  - label: 'infra'
+    branch:
+      - '/infra\/.+/'
+  - label: 'chore'
+    branch:
+      - '/chore\/.+/'
+      - '/dependabot\/.+/'
+version-resolver:
+  major:
+    labels:
+      - 'major'
+  minor:
+    labels:
+      - 'minor'
+      - 'feature'
+  patch:
+    labels:
+      - 'patch'
+      - 'fix'
+      - 'chore'
+      - 'infra'
+  default: patch
+template: |
+  ## Changes
+
+  $CHANGES

.github/workflows/production.yml → .github/workflows/ci.yml

@@ -1,21 +1,24 @@
-name: Production deployment
+name: Application deployment to test and production
 
 on:
   push:
+    # On push to main branch deploy to test
     branches: [main]
-  workflow_dispatch:
+  release:
+    # On release deploy to production
+    types: [released]
 
 env:
-  IMAGE_NAME: ${{ secrets.ACR_REGISTRY_ADDRESS }}/vuorovaikutusalusta
+  IMAGE_NAME_TEST: ${{ secrets.ACR_REGISTRY_ADDRESS }}/vuorovaikutusalusta-test
+  IMAGE_NAME_PROD: ${{ secrets.ACR_REGISTRY_ADDRESS }}/vuorovaikutusalusta
 
 jobs:
   deploy:
-    name: Deploy to production
+    name: Deploy to test or production
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
         uses: actions/checkout@v4
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
       - name: Login to registry
@@ -28,6 +31,6 @@ jobs:
         uses: docker/build-push-action@v5
         with:
           push: true
-          cache-from: type=registry,ref=${{ env.IMAGE_NAME }}:latest
+          cache-from: type=registry,ref=${{ github.event_name == 'release' && env.IMAGE_NAME_PROD || env.IMAGE_NAME_TEST }}:latest
           cache-to: type=inline
-          tags: ${{ env.IMAGE_NAME }}:latest
+          tags: ${{ github.event_name == 'release' && env.IMAGE_NAME_PROD || env.IMAGE_NAME_TEST }}:latest

.github/workflows/pr-test.yml

@@ -1,5 +1,5 @@
 ##
-# Runs builds on GitHub pull requests to test that they should be working fine.
+# Runs builds and e2e tests
 ##
 name: Test builds
 on:
@@ -33,3 +33,39 @@ jobs:
         run: npm ci
       - name: Build
         run: npm run build
+  test-e2e:
+    name: Test E2E
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: e2e
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: ./e2e/package-lock.json
+      - run: npm i
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "version=$(npm ls @playwright/test --json | jq --raw-output '.dependencies["@playwright/test"].version')" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+      # Install Playwright dependencies unless found from the cache
+      - name: Install Playwright's dependencies
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+      # Start up the stack & wait for all services to be healthy
+      - run: CI=1 docker compose up -d --wait
+        timeout-minutes: 10
+      # Output container logs if any of the previous steps failed
+      - run: docker compose logs
+        if: failure()
+      # Execute the E2E tests
+      - run: npm test

.github/workflows/release-draft.yml

@@ -0,0 +1,26 @@
+name: Release draft
+
+on:
+  # Update release draft on pushes to the main branch
+  push:
+    branches: [main]
+  # Run on PRs only for autolabeler
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+permissions:
+  contents: read
+
+jobs:
+  update-draft:
+    name: Update draft
+    permissions:
+      contents: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: release-drafter/release-drafter@v6
+        with:
+          commitish: main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -56,14 +56,21 @@ RUN apk update && apk add \
   ca-certificates \
   ttf-freefont
 
+# Add non-root user with explicit UID and GID 
+RUN addgroup --system --gid 1001 appUser && \
+  adduser --system --uid 1001 appGroup
+
 WORKDIR ${APPDIR}
 
-COPY --from=server-build ${APPDIR}/server ./
-COPY --from=client-build ${APPDIR}/client/dist ./static/
+COPY --chown=appUser:appGroup --from=server-build ${APPDIR}/server ./
+COPY --chown=appUser:appGroup --from=client-build ${APPDIR}/client/dist ./static/
 
 ENV TZ=Europe/Helsinki
 
 # Define Chromium path, as it was not installed in the previous phase
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
 
+# Don't run the app as root
+USER appUser
+
 CMD npm start

README.md

@@ -1,4 +1,4 @@
-# Vuorovaikutusalusta
+# Kartalla
 
 ## Ohjelmiston taustaa
 
@@ -17,7 +17,7 @@ Kuva 1: ohjelmiston arkkitehtuuri ajoympäristössään
 
 - Käynnistä Docker -ekosysteemi projektin juuresssa komennoilla `docker-compose build && docker-compose up -d`. Esiehto: lokaalisti tulee olla asennettuna [Docker -konttien hallintajärjestelmä](https://www.docker.com/products/docker-desktop)).
 - Luo ympäristömuuttujille tiedosto polkuun `/server/.env` ja täytä se tarvittavilla muuttujilla ohjeen `/server/.template.env` mukaan.
-- Toteuta uudet toiminnallisuudet omaan Git -haaraansa, esim. `feature/new-feature-name`. Valmistuessaan yhdistä tämä haara `develop` -haaraan, josta sovellusta ajetaan testiympäristössä. Kun on aika tehdä tuotantopäivitys, vie `develop` -haaran muutokset `master` -haaraan, josta sovellusta ajetaan tuotantoympäristössä.
+- Toteuta uudet toiminnallisuudet omaan Git -haaraansa, esim. `feature/new-feature-name`. Valmistuessaan yhdistä tämä haara `develop` -haaraan, josta sovellusta ajetaan testiympäristössä. Kun on aika tehdä tuotantopäivitys, vie `develop` -haaran muutokset `main` -haaraan, josta sovellusta ajetaan tuotantoympäristössä.
 
 <br>
 
@@ -29,6 +29,16 @@ Serveri ja tietokanta juttelevat keskenään yhteydellä, joka on määritetty y
 
 Lokaalissa kehityksessä React käyttöliittymä ohjaa rajapintapyynnöt automaattisesti omaan porttiinsa. Toisin sanoen, mikäli käyttöliittymästä (portti 8080) tehdään HTTP pyyntö serverille (portti 3000), tätä ei tarvitse erikseen määrittää, vaan käyttöliittymä osaa ohjata liikenteen suoraan omasta portistaan serverin porttiin (8080 -> 3000).
 
-Sovelluskehitys noudattaa perinteistä [Gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow#:~:text=The%20overall%20flow%20of%20Gitflow,branch%20is%20created%20from%20main&text=When%20a%20feature%20is%20complete%20it%20is%20merged%20into%20the,branch%20is%20created%20from%20main) -mallia, jossa uudet toiminnallisuudet toteutetaan omaan Git -haaraansa, esim. `feature/new-feature-name`. Valmistuessaan tämä haara yhdistetään `develop` -haaraan. Kun `develop` -haaraan kohdistuu muutoksia Githubissa, automaattinen integraatio käynnistyy, joka julkistaa haaraan viedyn uuden lähdekoodin Azureen testiympäristöön. Kun tulee aika tehdä tuotantopäivitys, yhdistetään `develop` -haaran muutokset `master` -haaraan. Githubissa `master` -haaran muutokset käynnistävät automaattisen integraation, joka julkistaa lähdekoodin Azuren DevOps -palveluun. Täältä lähdekoodi taas julkistetaan automaattisesti Azureen tuotantoympäristöön.
+Sovelluskehitys noudattaa perinteistä [Gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow#:~:text=The%20overall%20flow%20of%20Gitflow,branch%20is%20created%20from%20main&text=When%20a%20feature%20is%20complete%20it%20is%20merged%20into%20the,branch%20is%20created%20from%20main) -mallia, jossa uudet toiminnallisuudet toteutetaan omaan Git -haaraansa, esim. `feature/new-feature-name`. Valmistuessaan tämä haara yhdistetään `main` -haaraan. Kun `main` -haaraan kohdistuu muutoksia Githubissa, automaattinen integraatio käynnistyy, joka julkistaa haaraan viedyn uuden lähdekoodin Azureen testiympäristöön. `main`-haaraan yhdistäminen täydentää automaattisesti `release`-luonnoksen, jonka julkaisun yhteydessä `main` haaran sisältö viedään automaattisen integraation kautta Azuren tuotantoympäristöön.
 
-## TODO
+## E2E-testaus
+
+E2E testit ajetaan automaattisesti jokaisen pull requestin yhteydessä.
+
+E2E-testiympäristö on toteutettu vastaavalla tavalla, kuin paikallinen kehitysympäristö sillä erolla, että E2E-testiympäristö käynnistetään `e2e`-kansiosta käsin. Testit ajetaan `Playwright`-kirjastoa käyttäen. Tietokannan sisältö tallennetaan erilliseen `db-data`-volumeen, joten E2E-testien ajaminen ei vaikuta kehitystietokannan sisältöön.
+
+Testiympäristön käynnistämisen jälkeen seuraavat komennot ovat käytettävissä `./e2e`-polusta:
+
+- `npm run codegen`: Avaa selainnäkymän, josta käsin pystyy luomaan testikomentoja interaktiivisesti
+- `npm run test-ui`: Ajaa testit selainnäkymässä
+- `npm test`: Ajaa testit headless-tilassa näyttäen vain tulosteen komentorivillä

client/src/components/admin/QuestionOptions.tsx

@@ -124,7 +124,7 @@ export default function QuestionOptions({
           disabled={disabled}
           aria-label="add-question-option"
           size="small"
-          sx={{boxShadow: 'none'}}
+          sx={{ boxShadow: 'none' }}
           onClick={() => {
             onChange([...options, { text: initializeLocalizedObject('') }]);
           }}
@@ -139,6 +139,7 @@ export default function QuestionOptions({
             <DraggableIcon style={{ fontSize: '14' }} />
             <div className={classes.textInput}>
               <TextField
+                data-testid={`radio-input-option-${index}`}
                 multiline
                 inputRef={inputRefs[index]}
                 style={{ width: '100%' }}

client/src/components/admin/SurveyList.tsx

@@ -125,7 +125,10 @@ export default function SurveyList() {
       {surveysLoading ? (
         <Skeleton variant="rectangular" width="100%" height={300} />
       ) : (
-        <>
+        <ul
+          style={{ listStyle: 'none', padding: '0' }}
+          data-testid="survey-admin-list"
+        >
           {surveys
             .filter((s) =>
               filterTags.length
@@ -137,7 +140,7 @@ export default function SurveyList() {
             .map((survey) => (
               <SurveyListItem key={survey.id} survey={survey} />
             ))}
-        </>
+        </ul>
       )}
     </div>
   );

client/src/components/admin/SurveyListItem.tsx

@@ -92,7 +92,7 @@ export default function SurveyListItem(props: Props) {
   }, [survey.name]);
 
   return (
-    <>
+    <li style={{ marginBottom: '20px' }}>
       <Card
         className={clsx(
           loading && classes.loading,
@@ -322,6 +322,6 @@ export default function SurveyListItem(props: Props) {
           setLoading(false);
         }}
       />
-    </>
+    </li>
   );
 }

e2e/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

e2e/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/