1679 setup end to end tests

Servers/UI/OJS.Servers.Ui/ClientApp/.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 install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

Servers/UI/OJS.Servers.Ui/ClientApp/.gitignore

@@ -0,0 +1,8 @@
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.env.e2e

Servers/UI/OJS.Servers.Ui/ClientApp/.eslintrc.cjs → Servers/UI/OJS.Servers.Ui/ClientApp/eslint.config.js

@@ -1,52 +1,76 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+import reactPlugin from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+import promisePlugin from 'eslint-plugin-promise';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import reduxConfig from './src/redux/eslint.redux.config.js';
+import playwrightConfig from './tests/eslint.playwright.config.js';
 
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
+export default defineConfig([
+  tseslint.configs.recommendedTypeChecked,
+  reactPlugin.configs.flat.recommended,
+  importPlugin.flatConfigs.recommended,
+  reactHooks.configs['recommended-latest'],
+  promisePlugin.configs['flat/recommended'],
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+    settings: {
+      'import/resolver': {
+        typescript: {},
+      },
+      'react': {
+        version: 'detect',
+      },
     },
-    globals: { Promise: true },
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:react/recommended',
-        'airbnb',
-        'plugin:css-modules/recommended',
-        // 'stylelint',
-    ],
-    parser: '@typescript-eslint/parser',
-    parserOptions: {
-        project: './tsconfig.json',
-        ecmaFeatures: { jsx: true },
-        ecmaVersion: 2021,
-        sourceType: 'module',
+    languageOptions: {
+        globals: globals.browser,
+        parser: tseslint.parser,
+        parserOptions: {
+            ecmaFeatures: { jsx: true },
+            sourceType: 'module',
+            projectService: true,
+            tsconfigRootDir: import.meta.dirname,
+        },
     },
-    plugins: [
-        'react',
-        '@typescript-eslint',
-        'react-hooks',
-        'promise',
-        'babel',
-        'css-modules',
-        'simple-import-sort',
-    ],
-    settings: { 'import/resolver': { typescript: {} } },
-    ignorePatterns: [
-        '*.cjs',
-        'vite.config.js'
+    plugins: {
+        'js': js,
+        'jsx-a11y': jsxA11yPlugin,
+        'simple-import-sort': simpleImportSortPlugin,
+        '@typescript-eslint': tseslint.plugin,
+    },
+    extends: [
+        "js/recommended",
     ],
     rules: {
-        "jsx-a11y/click-events-have-key-events": "off",
-        "jsx-a11y/no-static-element-interactions": "off",
+        'no-unused-vars': 'off',
+        'no-undefined': 'off',
+        'no-use-before-define': 'off',
         'prefer-destructuring': 'off',
         'react/no-array-index-key': 'off',
-        'no-undefined': 'off',
         'react/react-in-jsx-scope': 'off',
 
         'node/no-missing-import': 0,
         'sort-imports': 0,
         'no-confusing-arrow': 0,
         'node/no-unsupported-features/es-syntax': 0,
+
+        '@typescript-eslint/no-unused-vars': 'error',
+        '@typescript-eslint/no-explicit-any': 'warn',
+        '@typescript-eslint/no-unsafe-assignment': 'warn',
+        '@typescript-eslint/no-unsafe-member-access': 'warn',
+        '@typescript-eslint/no-unsafe-call': 'warn',
+        '@typescript-eslint/no-unsafe-return': 'warn',
+        '@typescript-eslint/no-unsafe-function-type': 'warn',
+        '@typescript-eslint/no-unsafe-argument': 'warn',
+        '@typescript-eslint/only-throw-error': 'warn',
+        '@typescript-eslint/no-misused-promises': 'warn',
+        '@typescript-eslint/no-floating-promises': 'warn',
+        '@typescript-eslint/no-use-before-define': [ 'error' ],
         '@typescript-eslint/naming-convention': [
             'error',
             {
@@ -58,9 +82,8 @@ module.exports = {
                 },
             },
         ],
-        'no-use-before-define': 'off',
-        '@typescript-eslint/no-use-before-define': [ 'error' ],
-        '@typescript-eslint/no-explicit-any': 'warn',
+
+        'react/display-name': 'warn',
         'react/jsx-filename-extension': [ 'warn', { extensions: [ '.tsx' ] } ],
         'react/jsx-props-no-spreading': ['warn', { custom: 'ignore' }],
         'import/extensions': [
@@ -111,7 +134,7 @@ module.exports = {
         // make sure for-in loops have an if statement (off by default)
         'guard-for-in': 'error',
         // indent is 4 spaces
-        indent: [
+        'indent': [
             'error',
             4,
             {
@@ -138,7 +161,7 @@ module.exports = {
         // linebreak unix (LF) is better than Windows (CRLF)
         'linebreak-style': [ 'error', 'unix' ],
         // max 140 characters for code, and 100 for comments
-        'max-len': [ 'error', {
+        'max-len': [ 'warn', {
             tabWidth: 4,
             code: 140,
             comments: 100,
@@ -254,9 +277,6 @@ module.exports = {
         'no-unreachable': 'error',
         // disallow usage of expressions in statement position
         'no-unused-expressions': 'error',
-        // disallow declaration of variables that are not used in the code
-        'no-unused-vars': 'off',
-        '@typescript-eslint/no-unused-vars': 'error',
         // enforce consistent line breaks inside braces
         'object-curly-newline': [
             'error', {
@@ -289,17 +309,14 @@ module.exports = {
         'space-in-parens': [ 'error', 'never' ],
 
         /* import */
-        'import/first': 'error',
-        'import/prefer-default-export': 'error',
-        'import/exports-last': 'error',
-        'import/group-exports': 'error',
-        'import/no-unused-modules': [ 'error', {
-            unusedExports: true,
-            missingExports: true,
-        } ],
-        // "import/dynamic-import-chunkname": ["error"],
+        // 'import/first': 'error',
+        // 'import/prefer-default-export': 'error',
+        // 'import/no-unused-modules': ['error', {
+        //     unusedExports: true,
+        //     missingExports: true,
+        // }],
 
-        /* react rules */
+        // /* react rules */
         'react/jsx-indent': [ 'error', 4 ],
         // No sense in TypeScript context
         'react/prop-types': 'off',
@@ -322,13 +339,8 @@ module.exports = {
         'promise/prefer-await-to-then': 'error',
         'promise/prefer-await-to-callbacks': 'error',
 
-        /* babel */
-        'babel/semi': 'error',
-
         /* html elements */
-        'jsx-a11y/label-has-associated-control': [
-            'error',
-            { required: { some: [ 'nesting', 'id' ] } } ],
+        'jsx-a11y/label-has-associated-control': [ 'error', { required: { some: [ 'nesting', 'id' ] } } ],
         'jsx-a11y/label-has-for': [ 'error', { required: { some: [ 'nesting', 'id' ] } } ],
         'simple-import-sort/imports': [
             'error',
@@ -370,24 +382,8 @@ module.exports = {
             },
         ],
         '@typescript-eslint/explicit-module-boundary-types': 0,
-        '@typescript-eslint/member-delimiter-style': [
-            'error',
-            {
-                multiline: {
-                    delimiter: 'semi',
-                    requireLast: true,
-                },
-                singleline: {
-                    delimiter: 'semi',
-                    requireLast: false,
-                },
-            },
-        ],
     },
-    overrides: [
-        {
-            files: ['src/redux/features/**/*.ts'],
-            extends: ['./src/redux/.eslintrc.cjs'],
-        },
-    ],
-};
+  },
+  playwrightConfig,
+  reduxConfig,
+]);