Replace the test runner for JS tests

PhantomJS is not maintained anymore and the setup was broken. The new setup uses `@web/test-runner` to run the QUnit tests in an actual browser.
willdurand · Aug 8, 2024 · 16e849a · 16e849a
1 parent d31e3ca
commit 16e849a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 91 deletions.
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -15,8 +15,7 @@ env:
 jobs:
     test:
         name: PHP ${{ matrix.php-version }} + Symfony ${{ matrix.symfony-version }}
-        # TODO find a different setup for the JS testsuite as phantomjs is abandoned and is not available on newer runner images
-        runs-on: 'ubuntu-20.04'
+        runs-on: 'ubuntu-latest'
         continue-on-error: ${{ matrix.allowed-to-fail }}
 
         strategy:
@@ -44,7 +43,7 @@ jobs:
                     symfony-version: latest
         steps:
             - name: "Checkout code"
-              uses: actions/checkout@v2.3.3
+              uses: actions/checkout@v4.1.7
 
             - name: "Install PHP with extensions"
               uses: shivammathur/[email protected]
@@ -77,8 +76,23 @@ jobs:
             - name: "Run unit tests"
               run: vendor/bin/phpunit --coverage-text --verbose
 
-            - name: "Run phantomjs tests"
-              run: phantomjs Resources/js/run-qunit.js file://`pwd`/Resources/js/index.html
+    test_js:
+        name: JS tests
+        runs-on: ubuntu-latest
 
-            - name: "Run phantomjs tests ES5"
-              run: phantomjs Resources/js/run-qunit.js file://`pwd`/Resources/js/index-with-es5-shim.html
+        steps:
+            - name: "Checkout code"
+              uses: actions/[email protected]
+
+            - name: "Setup node"
+              uses: actions/[email protected]
+              with:
+                  node-version: 'lts/*'
+
+            - name: "Install dependencies"
+              run: npm install
+              working-directory: Resources
+
+            - name: "Run tests"
+              run: npm tests
+              working-directory: Resources
diff --git a/Resources/js/run-qunit.js b/Resources/js/run-qunit.js
diff --git a/Resources/js/translatorTest.js b/Resources/js/translatorTest.js
@@ -242,6 +242,8 @@ QUnit.test('retry on fallback when locale exist but not the domain', function(as
 QUnit.test('gets the current locale using the `lang` attribute on the `html` tag', function(assert) {
     assert.expect(1);
 
+    document.documentElement.lang = 'fr';
+
     assert.equal(Translator.locale, 'fr');
 });
 

diff --git a/Resources/package.json b/Resources/package.json
@@ -23,11 +23,14 @@
   ],
   "main": "js/translator.js",
   "devDependencies": {
+    "@web/test-runner": "^0.18.2",
     "intl-messageformat": "^10.5.14",
     "qunit": "^2.21.1",
-    "uglify-js": "^2.7.3"
+    "uglify-js": "^2.7.3",
+    "web-test-runner-qunit": "^2.0.0"
   },
   "scripts": {
-    "build": "uglifyjs js/translator.js --comments --compress --mangle --output=public/js/translator.min.js"
+    "build": "uglifyjs js/translator.js --comments --compress --mangle --output=public/js/translator.min.js",
+    "test": "wtr js/translatorTest.js"
   }
 }
diff --git a/Resources/web-test-runner.config.mjs b/Resources/web-test-runner.config.mjs
@@ -0,0 +1,23 @@
+export default {
+  nodeResolve: true,
+  // Our QUnit tests expect the translator to be loaded globally so we need to inject it in the runner HTML
+  testRunnerHtml: testFramework =>
+    `
+    <!DOCTYPE html>
+    <html lang="fr">
+      <head>
+          <meta charset="utf-8">
+          <title>JSTranslationBundle Unit Tests</title>
+          <script src="node_modules/intl-messageformat/intl-messageformat.iife.js"></script>
+          <script src="js/translator.js"></script>
+      </head>
+      <body>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>
+    `,
+  testFramework: {
+    path: './node_modules/web-test-runner-qunit/dist/autorun.js',
+    config: {}
+  }
+}