Cut over from phantomJS to Karma. (#432)

* Merge iD pull request #8764 into RapiD, replacing phantomjs with karma

* Further fixes to get unit tests working.

* Ditch the karma-remap-istanbul package, as it did not work in RapiD. Code coverage report seems unaffected.

* Fix import assertion error now that we're using node 16.

* Use import assertions syntax for importing JSON files
Requires node 16.14 and up going forward

Co-authored-by: Martin Raifer <martin@raifer.tech>
Co-authored-by: Bryan Housel <bhousel@gmail.com>

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [16.14]
 
     steps:
     - uses: actions/checkout@v2
@@ -22,4 +22,4 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - run: npm install
     - run: npm run all
-    - run: npm run test
+    - run: npm run test

.github/workflows/deploy.yml

@@ -16,10 +16,10 @@ jobs:
     - name: Checkout 📥
       uses: actions/checkout@v2
 
-    - name: Use Node.js 16.x ⚙️
+    - name: Use Node.js 16.14 ⚙️
       uses: actions/setup-node@v1
       with:
-        node-version: 16.x
+        node-version: 16.14
 
     - name: Install 🎯
       run: npm install
@@ -85,4 +85,4 @@ jobs:
 
     - name: Deployment complete! 🚀
       run: |
-        echo "Your build is here: https://mapwith.ai/rapid/${{ steps.vars.outputs.distdir }}/index.html"
+        echo "Your build is here: https://mapwith.ai/rapid/${{ steps.vars.outputs.distdir }}/index.html"

.gitignore

@@ -18,6 +18,8 @@ transifex.auth
 /dist/mapillary-js/
 /dist/pannellum-streetside/
 
+/coverage/
+
 # autogenerated symlinks
 land.html
 /img

.npmignore

@@ -12,3 +12,5 @@ transifex.auth
 
 /docs/
 /test/
+
+/coverage/

karma.conf.cjs

@@ -0,0 +1,107 @@
+// Karma configuration
+// Generated on Wed Sep 01 2021 16:45:06 GMT+0200 (Central European Summer Time)
+
+module.exports = function (config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    plugins: [
+      'karma-coverage',
+      'karma-mocha',
+      'karma-chrome-launcher'
+    ],
+
+    // frameworks to use
+    // available frameworks: https://www.npmjs.com/search?q=keywords:karma-adapter
+    frameworks: ['mocha'],
+
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'node_modules/chai/chai.js',
+      'node_modules/sinon/pkg/sinon.js',
+      'node_modules/sinon-chai/lib/sinon-chai.js',
+      'node_modules/happen/happen.js',
+      'node_modules/fetch-mock/es5/client-bundle.js',
+      { pattern: 'dist/iD.js', included: true },
+      { pattern: 'dist/iD.css', included: true },
+      { pattern: 'dist/**/*', included: false },
+      'test/spec/spec_helpers.js',
+      'test/spec/**/*.js'
+    ],
+
+
+    // list of files / patterns to exclude
+    exclude: [
+      '**/*.js.map'
+    ],
+
+    proxies: {
+      '/dist/': 'http://localhost:9876/base/dist/',
+      '/data/': 'http://localhost:9876/base/dist/data/',
+      '/img/': 'http://localhost:9876/base/dist/img/'
+    },
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://www.npmjs.com/search?q=keywords:karma-preprocessor
+    preprocessors: {
+      'dist/iD.js': ['coverage']
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://www.npmjs.com/search?q=keywords:karma-reporter
+    reporters: ['progress', 'coverage'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://www.npmjs.com/search?q=keywords:karma-launcher
+    browsers: [
+      'ChromeHeadless',
+    ],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser instances should be started simultaneously
+    concurrency: Infinity,
+
+    remapIstanbulReporter: {
+      remapOptions: {
+        exclude: [
+          'node_modules'
+        ]
+      }, //additional remap options
+      reportOptions: {
+        basePath: 'modules'
+      }, //additional report options
+      reports: {
+        lcovonly: 'coverage/lcof.info',
+        html: 'coverage'
+      }
+    }
+  });
+};

modules/services/index.js

@@ -26,7 +26,7 @@ export let services = {
   osmose: serviceOsmose,
   mapillary: serviceMapillary,
   nsi: serviceNsi,
-  openstreetcam: serviceOpenstreetcam,
+  kartaview: serviceOpenstreetcam,
   osm: serviceOsm,
   osmWikibase: serviceOsmWikibase,
   maprules: serviceMapRules,

package.json

@@ -34,13 +34,13 @@
     "dist:svg:mapillary:objects": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/mapillary-object-sprite.svg node_modules/mapillary_sprite_source/package_objects/*.svg",
     "dist:svg:temaki": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"temaki-%s\" --symbol-sprite dist/img/temaki-sprite.svg node_modules/@ideditor/temaki/icons/*.svg",
     "imagery": "node scripts/update_imagery.js",
-    "lint": "eslint scripts test/spec modules",
-    "lint:fix": "eslint scripts test/spec modules --fix",
+    "lint": "eslint test/spec modules",
+    "lint:fix": "eslint test/spec modules --fix",
     "start": "run-s build:legacy start:server",
     "quickstart": "run-s build:modern start:server",
     "start:server": "node scripts/server.js",
-    "test": "run-s lint build:css build:data build:legacy test:spec",
-    "test:spec": "phantomjs --web-security=no test/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html spec",
+    "test": "npm-run-all -s lint build test:spec",
+    "test:spec": "karma start karma.conf.cjs",
     "translations": "node scripts/update_locales.js"
   },
   "dependencies": {
@@ -86,7 +86,7 @@
     "autoprefixer": "^10.3.7",
     "babel-plugin-inline-json-import": "^0.3.2",
     "btoa": "^1.2.1",
-    "chai": "^4.1.0",
+    "chai": "^4.3.4",
     "cldr-core": "39.0.0",
     "cldr-localenames-full": "39.0.0",
     "chalk": "^5.0.0",
@@ -98,36 +98,41 @@
     "esbuild-visualizer": "^0.3.1",
     "eslint": "^8.1.0",
     "eslint-plugin-react": "^7.26.1",
+    "fetch-mock": "^9.11.0",
     "gaze": "^1.1.3",
     "glob": "^7.2.0",
-    "happen": "^0.3.1",
+    "happen": "^0.3.2",
     "js-yaml": "^4.0.0",
     "json-stringify-pretty-compact": "^3.0.0",
+    "karma": "^6.3.5",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.2.0",
+    "karma-mocha": "^2.0.1",
+    "karma-remap-istanbul": "^0.6.0",
     "mapillary_sprite_source": "^1.8.0",
     "mapillary-js": "4.0.0",
     "minimist": "^1.2.3",
-    "mocha": "^9.1.3",
+    "mocha": "^9.2.0",
     "name-suggestion-index": "~6.0",
     "node-fetch": "^3.0.0",
     "npm-run-all": "^4.0.0",
     "object-inspect": "1.11.0",
     "osm-community-index": "~5.1.3",
-    "phantomjs-prebuilt": "~2.1.16",
     "postcss": "^8.3.11",
     "postcss-selector-prepend": "^0.5.0",
     "shelljs": "^0.8.0",
     "shx": "^0.3.0",
-    "sinon": "^9.0.0",
-    "sinon-chai": "^3.6.0",
+    "sinon": "^11.1.2",
+    "sinon-chai": "^3.7.0",
     "smash": "0.0",
     "static-server": "^2.2.1",
     "svg-sprite": "1.5.3"
   },
   "type": "module",
   "engines": {
-    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+    "node": ">=16.14"
   },
   "browserslist": [
     "> 0.2%, last 6 major versions, Firefox ESR, IE 11, maintained node versions"
   ]
-}
+}

scripts/build_data.js

@@ -14,7 +14,7 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 
-import territoryInfo from 'cldr-core/supplemental/territoryInfo.json';
+import territoryInfo from 'cldr-core/supplemental/territoryInfo.json' assert {type: 'json'};
 
 fontawesome.library.add(fas, far, fab);
 

scripts/update_imagery.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 import fs from 'node:fs';
 import prettyStringify from 'json-stringify-pretty-compact';
-import imageryJSON from 'editor-layer-index/imagery.json';
+import imageryJSON from 'editor-layer-index/imagery.json' assert {type: 'json'};
+
 
 let sources = imageryJSON;
 if (fs.existsSync('./data/manual_imagery.json')) {

test/.eslintrc

@@ -9,7 +9,8 @@
         "happen": false,
         "iD": false,
         "sdk": false,
-        "sinon": false
+        "sinon": false,
+        "fetchMock": true
     },
     "rules": {
         "no-unused-expressions": "off"

test/spec/services/mapillary.js

@@ -1,6 +1,6 @@
 describe('iD.serviceMapillary', function() {
     var dimensions = [64, 64];
-    var context, server, mapillary;
+    var context, mapillary;
 
 
     before(function() {
@@ -20,14 +20,11 @@ describe('iD.serviceMapillary', function() {
             .translate([-116508, 0])  // 10,0
             .clipExtent([[0,0], dimensions]);
 
-        server = window.fakeFetch().create();
         mapillary = iD.services.mapillary;
         mapillary.reset();
     });
 
-    afterEach(function() {
-        server.restore();
-    });
+    afterEach(function() {});
 
 
     describe('#init', function() {