Merge pull request #152 from serveri/dev

e2e tests, code quality checks and fixes

Author: RemesTop

.actrc

@@ -0,0 +1,2 @@
+--container-architecture linux/amd64
+-P ubuntu-latest=ghcr.io/catthehacker/ubuntu:act-latest

.github/workflows/playwright.yml

@@ -0,0 +1,51 @@
+name: Playwright Tests (v3)
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.58.2-noble
+    env:
+      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+    defaults:
+      run:
+        working-directory: ./app
+    steps:
+    - uses: actions/checkout@v4
+    - name: Install pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: 9
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: pnpm
+        cache-dependency-path: app/pnpm-lock.yaml
+    - name: CI diagnostics
+      run: |
+        echo "ref=${GITHUB_REF}"
+        echo "sha=${GITHUB_SHA}"
+        node --version
+        pnpm --version
+    - name: Install dependencies
+      run: |
+        echo "workflow-revision=v3-container-cache"
+        pnpm install --frozen-lockfile
+        node -e "require.resolve('@oxc-parser/binding-linux-x64-gnu')"
+    - name: Run Playwright tests
+      run: pnpm test:e2e
+    - uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: playwright-debug-artifacts
+        path: |
+          app/playwright-report/
+          app/test-results/
+        if-no-files-found: ignore
+        retention-days: 7

README.md

@@ -68,6 +68,26 @@ requests to us.
 1. Navigate to build repositary and run `git pull`
 2. Reload docker with `docker compose -f docker-compose.prod.yml up -d --build`
 
+## Testing GitHub Actions locally (act)
+
+This repository includes `.actrc` to hard-code the local runner mapping so `act` does not ask interactive image-size questions.
+
+### Prerequisites
+
+1. Docker Desktop running
+2. `act` installed, for example:
+   - Windows: `winget install nektos.act`
+   - macOS: `brew install act`
+   - Linux: `brew install act` (via Homebrew on Linux) or see https://github.com/nektos/act#installation
+
+### Run the Playwright workflow locally
+
+From repository root:
+
+1. `act -l`
+2. `act workflow_dispatch -j test -v`
+
+
 ### Other
 
 - Go inside container - `docker exec -it {{name}} bash`

app/.gitignore

@@ -2,3 +2,4 @@ node_modules
 .nuxt
 .env
 test-results
+.husky

app/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd app && pnpm lint-staged

app/.stylelintrc

@@ -1,6 +1,12 @@
 {
    "extends": ["stylelint-config-recommended", "stylelint-config-standard"],
+   "overrides": [
+      {
+         "files": ["**/*.vue"],
+         "customSyntax": "postcss-html"
+      }
+   ],
    "rules": {
       "at-rule-no-unknown": null
    }
-}
+}

app/eslint.config.mjs

@@ -1,56 +1,42 @@
-import { defineConfig } from 'eslint/config';
-import security from 'eslint-plugin-security';
-import jsxA11Y from 'eslint-plugin-jsx-a11y';
-import prettier from 'eslint-plugin-prettier';
+import pluginVue from 'eslint-plugin-vue';
+import pluginSecurity from 'eslint-plugin-security';
+import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
+import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
 import js from '@eslint/js';
-import { FlatCompat } from '@eslint/eslintrc';
+import tsParser from '@typescript-eslint/parser';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-   baseDirectory: __dirname,
-   recommendedConfig: js.configs.recommended,
-   allConfig: js.configs.all,
-});
-
-export default defineConfig([
+export default [
+   js.configs.recommended,
+   ...pluginVue.configs['flat/recommended'],
+   pluginPrettierRecommended,
    {
-      // Extend Vue, jsx-a11y and Prettier configurations.
-      extends: compat.extends('plugin:vue/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended'),
-
       plugins: {
-         security,
-         'jsx-a11y': jsxA11Y,
-         prettier,
+         security: pluginSecurity,
+         'jsx-a11y': pluginJsxA11y,
       },
-
       languageOptions: {
          globals: {
             ...globals.browser,
             ...globals.node,
          },
          ecmaVersion: 2021,
-         sourceType: 'commonjs',
+         sourceType: 'module',
          parserOptions: {
-            project: './tsconfig.json',
-            parser: '@typescript-eslint/parser',
+            parser: tsParser,
             extraFileExtensions: ['.vue'],
          },
       },
-
       rules: {
          'vue/prop-name-casing': 'off',
          'vue/multi-word-component-names': 'off',
-         'prettier/prettier': 'error',
+         'security/detect-object-injection': 'off',
       },
    },
    {
       files: ['src/pages/**/*.vue', 'src/pages/*.vue', 'src/*.vue'],
       rules: {
-         'vue/multi-word-component-names': 0,
+         'vue/multi-word-component-names': 'off',
       },
    },
-]);
+];

app/package.json

@@ -6,6 +6,7 @@
       "start": "nuxt start",
       "generate": "nuxt generate",
       "preview": "nuxt preview",
+      "prepare": "cd ../ && husky app/.husky",
       "postinstall": "nuxt prepare",
       "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore .",
       "lint:style": "stylelint src/**/*.{css,scss,vue}",
@@ -17,57 +18,58 @@
       "test:e2e:ui": "playwright test --ui"
    },
    "dependencies": {
-      "@eslint/eslintrc": "^3.3.3",
-      "@eslint/js": "^9.39.2",
-      "@fortawesome/fontawesome-svg-core": "^7.1.0",
-      "@fortawesome/free-brands-svg-icons": "^7.1.0",
-      "@fortawesome/free-regular-svg-icons": "^7.1.0",
-      "@fortawesome/free-solid-svg-icons": "^7.1.0",
+      "@fortawesome/fontawesome-svg-core": "^7.2.0",
+      "@fortawesome/free-brands-svg-icons": "^7.2.0",
+      "@fortawesome/free-regular-svg-icons": "^7.2.0",
+      "@fortawesome/free-solid-svg-icons": "^7.2.0",
       "@fortawesome/vue-fontawesome": "^3.1.3",
       "@headlessui/vue": "^1.7.23",
       "@heroicons/vue": "^2.2.0",
-      "@nuxtjs/i18n": "^10.2.1",
-      "@playwright/test": "^1.58.1",
-      "@vueuse/core": "^14.2.0",
-      "globals": "^16.5.0",
-      "nuxt": "^4.3.0",
-      "nuxt-delay-hydration": "^1.3.8",
-      "tailwindcss": "^4.1.18",
-      "vue": "^3.5.27",
+      "@nuxtjs/i18n": "^10.2.3",
+      "@playwright/test": "^1.58.2",
+      "@vueuse/core": "^14.2.1",
+      "globals": "^17.3.0",
+      "nuxt": "^4.3.1",
+      "tailwindcss": "^4.2.0",
+      "vue": "^3.5.28",
       "vue-markdown-render": "^2.3.0",
       "vue-router": "^4.6.4"
    },
    "devDependencies": {
-      "@tailwindcss/postcss": "^4.1.18",
-      "@types/node": "^24.10.10",
-      "@typescript-eslint/eslint-plugin": "^8.54.0",
-      "@typescript-eslint/parser": "^8.54.0",
-      "@vue/eslint-config-prettier": "^10.2.0",
-      "@vue/eslint-config-typescript": "^14.6.0",
+      "@eslint/eslintrc": "^3.3.3",
+      "@eslint/js": "^9.39.2",
+      "@nuxt/types": "^2.18.1",
+      "@tailwindcss/postcss": "^4.2.0",
+      "@types/node": "^25.3.0",
+      "@typescript-eslint/eslint-plugin": "^8.56.0",
+      "@typescript-eslint/parser": "^8.56.0",
       "autoprefixer": "^10.4.24",
       "eslint": "^9.39.2",
       "eslint-plugin-jsx-a11y": "^6.10.2",
       "eslint-plugin-prettier": "^5.5.5",
-      "eslint-plugin-security": "^3.0.1",
-      "eslint-plugin-vue": "^10.7.0",
+      "eslint-plugin-security": "^4.0.0",
+      "eslint-plugin-vue": "^10.8.0",
       "husky": "^9.1.7",
       "lint-staged": "^16.2.7",
-      "npm-check-updates": "^19.3.2",
-      "playwright": "^1.58.1",
+      "npm-check-updates": "^19.4.1",
+      "playwright": "^1.58.2",
       "postcss": "^8.5.6",
+      "postcss-html": "^1.8.1",
       "prettier": "^3.8.1",
-      "stylelint": "^16.26.1",
-      "stylelint-config-recommended": "^17.0.0",
-      "stylelint-config-standard": "^39.0.1"
+      "stylelint": "^17.3.0",
+      "stylelint-config-recommended": "^18.0.0",
+      "stylelint-config-standard": "^40.0.0"
    },
-   "husky": {
-      "hooks": {
-         "pre-commit": "lint-staged"
-      }
+   "optionalDependencies": {
+      "@oxc-parser/binding-linux-x64-gnu": "0.114.0"
    },
    "lint-staged": {
-      "*.{ts,tsx}": "eslint --fix",
-      "*.{css,scss,vue}": "stylelint --fix",
-      "*": "prettier -w -u"
+      "*.{ts,tsx,js,jsx}": "eslint --fix",
+      "*.{css,scss}": "stylelint --fix",
+      "*.vue": [
+         "eslint --fix",
+         "stylelint --fix"
+      ],
+      "*.{json,md,html}": "prettier --write"
    }
 }

app/playwright.config.ts

@@ -1,16 +1,20 @@
 import { defineConfig } from '@playwright/test';
 import os from 'os';
 
+const isCI = !!process.env.CI;
+
 export default defineConfig({
   testDir: './tests',
   timeout: 30_000,
   retries: 0,
   use: {
     baseURL: process.env.BASE_URL || 'http://localhost:3000',
     trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
     headless: true,
   },
-  reporter: [['list']],
+  reporter: isCI ? [['list'], ['html', { outputFolder: 'playwright-report', open: 'never' }]] : [['list']],
   webServer: {
     command: 'npm run dev',
     url: 'http://localhost:3000',