Update fetch-mock

(closes #1615)

I've been putting this off for a while..

fetch-mock now distributed as a module,
  which means it doesn't work well in a browser
   (without an import map for the things it needs),
  which means it needs to be bundled by esbuild
  which means it needs to live in `main_dev.js`
  so that it can be setup in `spec_helpers.js

Also the API changed, so the places in the tests that use fetch-mock
to setup routes and inspect calls needed to be changed too.

karma.conf.cjs

@@ -19,7 +19,6 @@ module.exports = function (config) {
     files: [
       'node_modules/sinon/pkg/sinon.js',
       'node_modules/happen/happen.js',
-      'node_modules/fetch-mock/es5/client-bundle.js',
       { pattern: 'dist/rapid.js', included: true },
       { pattern: 'dist/rapid.css', included: true },
       { pattern: 'dist/**/*', included: false },

modules/main_dev.js

@@ -22,6 +22,8 @@ window.Rapid.isDebug = true;
 
 // For dev build, we'll bundle additional things
 // that are useful for testing or debugging.
+import fetchMock from 'fetch-mock';
+window.fetchMock = fetchMock;
 
 // Include rapid-sdk as a single `sdk` namespace.
 // (This works because we know there are no name conflicts)

package.json

@@ -120,7 +120,7 @@
     "esbuild": "^0.24.0",
     "esbuild-visualizer": "^0.6.0",
     "eslint": "^9.17.0",
-    "fetch-mock": "^9.11.0",
+    "fetch-mock": "^12.2.0",
     "gaze": "^1.1.3",
     "glob": "^10.4.5",
     "globals": "^15.13.0",

test/browser/core/AssetSystem.test.js

@@ -128,7 +128,7 @@ describe('AssetSystem', () => {
     });
 
     it('returns a promise to fetch data if we do not already have the data', () => {
-      fetchMock.mock('/data/intro_graph.min.json', {
+      fetchMock.route(/\/data\/intro_graph\.min\.json/i, {
         body: JSON.stringify({ value: 'success' }),
         status: 200,
         headers: { 'Content-Type': 'application/json' }
@@ -140,7 +140,7 @@ describe('AssetSystem', () => {
         .then(data => {
           expect(data).to.be.an('object');
           expect(data.value).to.eql('success');
-          fetchMock.resetHistory();
+          fetchMock.removeRoutes().clearHistory();
         });
     });
 

test/browser/services/KartaviewService.test.js

@@ -22,11 +22,15 @@ describe('KartaviewService', () => {
 
 
   beforeEach(() => {
-    fetchMock.reset();
+    fetchMock.removeRoutes().clearHistory();
     _kartaview = new Rapid.KartaviewService(new MockContext());
     return _kartaview.initAsync();
   });
 
+  afterEach(() => {
+    fetchMock.removeRoutes().clearHistory();
+  });
+
 
   describe('#initAsync', () => {
     it('initializes cache', () => {
@@ -84,14 +88,14 @@ describe('KartaviewService', () => {
         totalFilteredItems: ['3']
       };
 
-      fetchMock.mock(new RegExp('/nearby-photos/'), {
+      fetchMock.route(/nearby-photos/, {
         body: JSON.stringify(nearbyResponse),
         status: 200,
         headers: { 'Content-Type': 'application/json' }
       });
 
       _kartaview.on('loadedData', () => {
-        expect(fetchMock.calls().length).to.eql(1);  // after /photo/?sequenceId=100
+        expect(fetchMock.callHistory.calls().length).to.eql(1);  // after /photo/?sequenceId=100
         done();
       });
 
@@ -133,7 +137,7 @@ describe('KartaviewService', () => {
         totalFilteredItems: ['3']
       };
 
-      fetchMock.mock(new RegExp('/nearby-photos/'), {
+      fetchMock.route(/nearby-photos/, {
         body: JSON.stringify(nearbyResponse),
         status: 200,
         headers: { 'Content-Type': 'application/json' }
@@ -147,7 +151,7 @@ describe('KartaviewService', () => {
 
       window.setTimeout(() => {
         expect(spy.notCalled).to.be.ok;
-        expect(fetchMock.calls().length).to.eql(0);   // no tile requests of any kind
+        expect(fetchMock.callHistory.calls().length).to.eql(0);   // no tile requests of any kind
         done();
       }, 20);
     });