Add Jest Unit Testing compatibility

Fixes: #16405

Co-Authored-by: William Desportes <williamdes@wdes.fr>
Signed-off-by: William Desportes <williamdes@wdes.fr>
Signed-off-by: Saksham Gupta <shucon01@gmail.com>

.github/workflows/tests.yml

@@ -191,3 +191,26 @@ jobs:
               # This one is allowed to fail, but we hope it will not
               continue-on-error: true
               run: composer run phpunit --  --exclude-group selenium --order-by=random --stop-on-failure
+
+    test-js:
+        runs-on: ubuntu-latest
+        if: "!contains(github.event.head_commit.message, '[ci skip]')"
+        steps:
+            - uses: actions/checkout@v2
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: 12
+            - name: Get yarn cache directory path
+              id: yarn-cache-dir-path
+              run: echo "::set-output name=dir::$(yarn cache dir)"
+            - name: yarn cache
+              uses: actions/cache@v2
+              with:
+                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-yarn-
+            - name: Install modules
+              run: yarn install --non-interactive
+            - name: Run tests
+              run: yarn test

jest.config.js

@@ -0,0 +1,25 @@
+/* eslint-env node */
+
+module.exports = {
+    coverageDirectory: '<rootDir>/build/javascript/',
+    collectCoverageFrom: ['<rootDir>/js/src/**/*.js'],
+    projects: [
+        {
+            verbose: true,
+            setupFiles: ['<rootDir>/test/jest/test-env.js'],
+            coveragePathIgnorePatterns: [
+                '<rootDir>/node_modules/',
+                '<rootDir>/js/vendor/',
+            ],
+            displayName: 'phpMyAdmin',
+            testMatch: ['<rootDir>/test/javascript/**/*.js'],
+            transform: {
+                '^.+\\.js$': '<rootDir>/test/jest/file-transformer.js'
+            },
+            moduleNameMapper: {
+                '^phpmyadmin/(.*)$': '<rootDir>/js/src/$1',
+                '^@vendor/(.*)$': '<rootDir>/js/vendor/$1',
+            },
+        }
+    ]
+};

js/src/ajax.js

@@ -6,6 +6,8 @@
 /**
  * This object handles ajax requests for pages. It also
  * handles the reloading of the main menu and scripts.
+ *
+ * @test-module AJAX
  */
 var AJAX = {
     /**

js/src/common.js

@@ -8,6 +8,8 @@ $(function () {
  *
  * The content for this is normally loaded from Header.php or
  * Response.php and executed by ajax.js
+ *
+ * @test-module CommonParams
  */
 var CommonParams = (function () {
     /**

js/src/sql.js

@@ -4,6 +4,7 @@
  * @requires    jQuery
  * @requires    js/functions.js
  *
+ * @test-module Sql
  */
 
 /* global Stickyfill */

package.json

@@ -41,9 +41,11 @@
     "zxcvbn": "4.4.2"
   },
   "devDependencies": {
+    "babel-jest": "^26.5.2",
     "eslint": "^7.16.0",
     "eslint-plugin-compat": "^3.9.0",
     "eslint-plugin-no-jquery": "^2.5.0",
+    "jest": "^26.5.3",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-config-standard": "^20.0.0",
@@ -58,7 +60,8 @@
     "build": "yarn run css-compile --style=compressed && yarn run js-compile",
     "css-compile": "sass themes/pmahomme/scss:themes/pmahomme/css themes/original/scss:themes/original/css themes/metro/scss:themes/metro/css themes/bootstrap/scss:themes/bootstrap/css",
     "css-lint": "stylelint --syntax scss \"themes/**/scss/*.scss\"",
-    "js-lint": "eslint js/src",
-    "js-compile": "babel js/src -d js/dist"
+    "js-lint": "eslint js/src test/javascript test/jest jest.config.js",
+    "js-compile": "babel js/src -d js/dist",
+    "test": "jest"
   }
 }

scripts/create-release.sh

@@ -358,7 +358,7 @@ for kit in $KITS ; do
         # Testsuite
         rm -rf test/
         rm phpunit.xml.* build.xml
-        rm -f .editorconfig .browserslistrc .eslintignore .jshintrc .eslintrc.json .stylelintrc.json psalm.xml psalm-baseline.xml phpstan.neon.dist phpstan-baseline.neon phpcs.xml.dist
+        rm -f .editorconfig .browserslistrc .eslintignore .jshintrc .eslintrc.json .stylelintrc.json psalm.xml psalm-baseline.xml phpstan.neon.dist phpstan-baseline.neon phpcs.xml.dist jest.config.js
         # Gettext po files
         rm -rf po/
         # Documentation source code

test/javascript/sql.test.js

@@ -0,0 +1,14 @@
+/* eslint-env node, jest */
+
+var Sql = require('phpmyadmin/sql');
+
+describe('SQL', () => {
+    test('test URL encode', () => {
+        const urlDecoded = Sql.urlDecode('phpmyadmin+the+web+%C3%BB%C3%AF');
+        expect(urlDecoded).toEqual('phpmyadmin the web ûï');
+    });
+    test('test URL decode', () => {
+        const urlEncoded = Sql.urlEncode('phpmyadmin the web ûï');
+        expect(urlEncoded).toEqual('phpmyadmin+the+web+%C3%BB%C3%AF');
+    });
+});

test/jest/file-transformer.js

@@ -0,0 +1,17 @@
+/* eslint-env node */
+
+module.exports = {
+    process (sourceContents, filename) {
+        // The file is a source file and can contain @test-module annotations
+        if (filename.indexOf('js/src') !== -1) {
+            if (sourceContents.includes('@test-module')) {
+                // Annotation detected, add some code to the source file
+                const moduleName = sourceContents.match(/@test-module (.*)/)[1];
+                // eslint-disable-next-line no-param-reassign
+                sourceContents += '\r\nmodule.exports = ' + moduleName + ';\r\n';
+            }
+            return sourceContents;
+        }
+        return sourceContents;
+    },
+};

test/jest/test-env.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+
+const $ = require('jquery');
+global.$ = $;
+global.jQuery = $;
+global.CommonParams = require('phpmyadmin/common');
+global.AJAX = require('phpmyadmin/ajax');
+global.Functions = require('phpmyadmin/functions');
+global.Stickyfill = require('@vendor/stickyfill.min');