chore: Modernize JS build, remove jQuery bundle (#492)

* chore: Modernize JS build, remove jQuery bundle

* chore: Add js tests

* Update action, fix linter

* Potential fix for code scanning alert no. 512: Uncontrolled data used in path expression

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 513: Uncontrolled data used in path expression

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Potential fix for code scanning alert no. 514: Uncontrolled data used in path expression

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Update npm packages

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

Author: fsbraun

.babelrc

@@ -1,8 +1,8 @@
 {
     "presets": [
-        ["env", {
+        ["@babel/preset-env", {
             "modules": false
         }]
     ],
-    "plugins": ["transform-runtime", "syntax-dynamic-import"]
+    "plugins": ["@babel/plugin-syntax-dynamic-import"]
 }

.eslintrc.js

@@ -0,0 +1,39 @@
+name: Frontend E2E Tests
+
+on:
+  push:
+    branches:
+      - main
+      - 'release/**'
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v5
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '24'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Install Playwright Chromium browser
+      run: npx playwright install --with-deps chromium
+
+    - name: Run linter
+      run: npx gulp lint
+
+    - name: Run E2E tests with coverage
+      run: |
+        npm run e2e
+        npm run e2e:coverage:report

.github/workflows/frontend.yml

@@ -16,3 +16,7 @@ htmlcov/
 !djangocms_versioning/static/djangocms_versioning/js/dist
 docs/_build/
 node_modules
+coverage-e2e/
+.nyc_output/
+playwright-report/
+test-results/

.gitignore

@@ -1 +1 @@
-16
+24

.nvmrc

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', {
+            targets: {
+                browsers: ['last 2 versions', '> 1%']
+            }
+        }]
+    ],
+    plugins: [
+        '@babel/plugin-syntax-dynamic-import'
+    ]
+};

babel.config.js

@@ -1,25 +1,29 @@
+const retryTime = 5000;
+const browserTime = 20;
+
 (function($) {
     if (!$) {
         return;
     }
 
     // Hide django messages after timeout occurs to prevent content overlap
-    $('document').ready(function(){
+    $('document').ready(function() {
         // Targeting first item returned (there's only ever one messagelist per template):
-        let messageList = document.getElementsByClassName("messagelist")[0];
-        if(messageList != undefined){
-          for(let item of messageList.children){
-            item.style.opacity = 1;
-            setTimeout(() => {
-              let fader = setInterval(() => {
-                item.style.opacity -= 0.05;
-                  if(item.style.opacity < 0) {
-                    item.style.display = "none";
-                    clearInterval(fader);
-                  }
-              }, 20);
-            }, 5000);
-          }
+        let messageList = document.getElementsByClassName('messagelist')[0];
+
+        if (messageList !== undefined) {
+            for (let item of messageList.children) {
+                item.style.opacity = 1;
+                setTimeout(() => {
+                    let fader = setInterval(() => {
+                        item.style.opacity -= 0.05;
+                        if (item.style.opacity < 0) {
+                            item.style.display = 'none';
+                            clearInterval(fader);
+                        }
+                    }, browserTime);
+                }, retryTime);
+            }
         }
     });
- })((typeof django !== 'undefined' && django.jQuery) || (typeof CMS !== 'undefined' && CMS.$) || false);
+})((typeof django !== 'undefined' && django.jQuery) || (typeof CMS !== 'undefined' && CMS.$) || false);