Replace the JS test runner (#367)

* Upgrade the JS testsuite to use QUnit 2 This uses npm to install the testsuite dependencies instead of vendoring them in the project to make the setup easier to maintain. This also removes the file loading the ES5-shim as all maintained browsers support ES5 natively anyway. * Modernize the UMD structure for the translator * 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 · Oct 21, 2024 · 4907baf · 4907baf
1 parent f6af94f
commit 4907baf
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 3,878 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/setup-php@2.7.0
@@ -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/checkout@v4.1.7
+
+            - name: "Setup node"
+              uses: actions/setup-node@v4.0.3
+              with:
+                  node-version: 'lts/*'
+
+            - name: "Install dependencies"
+              run: npm install
+              working-directory: Resources
+
+            - name: "Run tests"
+              run: npm test
+              working-directory: Resources
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 vendor/
 composer.lock
+package-lock.json
 .phpunit.result.cache
diff --git a/Resources/js/index-with-es5-shim.html b/Resources/js/index-with-es5-shim.html
diff --git a/Resources/js/index.html b/Resources/js/index.html
@@ -3,13 +3,11 @@
     <head>
         <meta charset="utf-8">
         <title>ExposeTranslationBundle Unit Tests</title>
-        <script src="libs/jquery-1.6.1.min.js"></script>
-        <script src="libs/qunit/qunit.js"></script>
-        <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Intl,Intl.~locale.fr,Intl.PluralRules.~locale.fr,Intl.PluralRules,Number.isFinite"></script>
-        <script src="https://unpkg.com/intl-messageformat@9.0.2/dist/umd/intl-messageformat.min.js"></script>
+        <script src="../node_modules/qunit/qunit/qunit.js"></script>
+        <script src="../node_modules/intl-messageformat/intl-messageformat.iife.js"></script>
         <script src="translator.js"></script>
         <script src="translatorTest.js"></script>
-        <link rel="stylesheet" href="./libs/qunit/qunit.css">
+        <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
     </head>
     <body>
         <div id="qunit"></div>