Replace do-mock-ajax with xhr-mock

- Allows mocking all XMLHttpRequests instead of just those initiated via /src/core/fetch/ajax.js
- Allows JSDOM tests to use /lib/docsify.js instead of /src/core/index.js (same as Playwright tests)
- Allows JSDOM tests to use /docs site as test content

Author: jhildenbiddle

package-lock.json

@@ -103,7 +103,8 @@
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-uglify": "^6.0.4",
     "serve-handler": "^6.1.2",
-    "stylus": "^0.54.5"
+    "stylus": "^0.54.5",
+    "xhr-mock": "^2.5.1"
   },
   "keywords": [
     "doc",

package.json

@@ -1,12 +1,12 @@
 /* global jestPlaywright page */
+import mock, { proxy } from 'xhr-mock';
 import { waitForSelector } from './wait-for-selector';
-import doMockAjax from './do-mock-ajax.js';
 
 const axios = require('axios');
 const prettier = require('prettier');
 const stripIndent = require('common-tags/lib/stripIndent');
 
-const docsifyPATH = `${SRC_PATH}/core/index.js`; // JSDOM
+const docsifyPATH = `${LIB_PATH}/docsify.js`; // JSDOM
 const docsifyURL = `${LIB_URL}/docsify.js`; // Playwright
 const isJSDOM = 'window' in global;
 const isPlaywright = 'page' in global;
@@ -37,7 +37,7 @@ const isPlaywright = 'page' in global;
 async function docsifyInit(options = {}) {
   const defaults = {
     config: {
-      basePath: '/',
+      basePath: TEST_URL,
       el: '#app',
     },
     html: `
@@ -136,39 +136,52 @@ async function docsifyInit(options = {}) {
   };
 
   // Routes
+  const contentTypes = {
+    css: 'text/css',
+    html: 'text/html',
+    js: 'application/javascript',
+    json: 'application/json',
+    md: 'text/markdown',
+  };
+  const reFileExtentionFromURL = new RegExp(
+    '(?:.)(' + Object.keys(contentTypes).join('|') + ')(?:[?#].*)?$',
+    'i'
+  );
+
   if (isJSDOM) {
-    doMockAjax(settings.routes);
-  } else if (isPlaywright) {
-    const contentTypes = {
-      css: 'text/css',
-      html: 'text/html',
-      js: 'application/javascript',
-      json: 'application/json',
-      md: 'text/markdown',
-    };
-    const reFileExtentionFromURL = new RegExp(
-      '(?:.)(' + Object.keys(contentTypes).join('|') + ')(?:[?#].*)?$',
-      'i'
-    );
-
-    Object.entries(settings.routes).forEach(async ([urlGlob, response]) => {
-      if (typeof response === 'string') {
-        const urlFileExtension = (urlGlob.match(reFileExtentionFromURL) ||
-          [])[1];
-        const contentType = contentTypes[urlFileExtension];
-
-        response = {
-          status: 200,
-          body: response,
-        };
+    // Replace the global XMLHttpRequest object
+    mock.setup();
+  }
 
-        // Specifying contentType required for Webkit
-        if (contentType) {
-          response.contentType = contentType;
-        }
-      }
+  for (let [urlGlob, response] of Object.entries(settings.routes)) {
+    const fileExtension = (urlGlob.match(reFileExtentionFromURL) || [])[1];
+    const contentType = contentTypes[fileExtension];
+
+    if (typeof response === 'string') {
+      response = {
+        status: 200,
+        body: response,
+      };
+    }
+
+    // Specifying contentType required for Webkit
+    response.contentType = response.contentType || contentType || '';
+
+    if (isJSDOM) {
+      mock.get(urlGlob, (req, res) => {
+        return res
+          .status(response.status)
+          .body(settings.routes[urlGlob])
+          .header('Content-Type', contentType);
+      });
+    } else {
       await page.route(urlGlob, route => route.fulfill(response));
-    });
+    }
+  }
+
+  if (isJSDOM) {
+    // Proxy unhandled requests to real server(s)
+    mock.use(proxy);
   }
 
   // Set test URL / HTML
@@ -294,6 +307,11 @@ async function docsifyInit(options = {}) {
     }
   }
 
+  if (isJSDOM) {
+    // Restore the global XMLHttpRequest object
+    mock.teardown();
+  }
+
   return Promise.resolve();
 }
 

test/helpers/do-mock-ajax.js

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Docs Site coverpage renders and is unchanged 1`] = `
-"<section class=\\"cover show\\" style=\\"background: linear-gradient(to left bottom, hsl(127, 100%, 85%) 0%,hsl(127, 100%, 85%) 100%)\\"><div class=\\"mask\\"></div><div class=\\"cover-main\\"><p><img src=\\"/_media/icon.svg\\" data-origin=\\"_media/icon.svg\\" alt=\\"logo\\"></p><h1 id=\\"docsify-4114\\"><a href=\\"#/?id=docsify-4114\\" data-id=\\"docsify-4114\\" class=\\"anchor\\"><span>docsify <small>4.11.4</small></span></a></h1><blockquote>
+"<section class=\\"cover show\\" style=\\"background: linear-gradient(to left bottom, hsl(127, 100%, 85%) 0%,hsl(127, 100%, 85%) 100%)\\"><div class=\\"mask\\"></div><div class=\\"cover-main\\"><p><img src=\\"http://127.0.0.1:3001/_media/icon.svg\\" data-origin=\\"_media/icon.svg\\" alt=\\"logo\\"></p><h1 id=\\"docsify-4114\\"><a href=\\"#/?id=docsify-4114\\" data-id=\\"docsify-4114\\" class=\\"anchor\\"><span>docsify <small>4.11.4</small></span></a></h1><blockquote>
 <p>A magical documentation site generator.</p></blockquote>
 <ul><li>Simple and lightweight</li><li>No statically built html files</li><li>Multiple themes</li></ul><p><a href=\\"https://github.com/docsifyjs/docsify/\\" target=\\"_blank\\" rel=\\"noopener\\">GitHub</a>
 <a href=\\"#/?id=docsify\\">Getting Started</a></p></div></section>"

test/helpers/docsify-init.js

@@ -7,24 +7,22 @@ const docsifyInit = require('../helpers/docsify-init');
 describe('Example Tests', function() {
   // Tests
   // ---------------------------------------------------------------------------
-  // test('Docsify /docs/ site using docsifyInit()', async () => {
-  //   // Load custom docsify
-  //   // (See ./helpers/docsifyInit.js for details)
-  //   await docsifyInit({
-  //     config: {
-  //       basePath: `/docs`,
-  //     },
-  //     // _logHTML: true,
-  //   });
-
-  //   // Verify config options
-  //   expect(typeof window.$docsify).toEqual('object');
-
-  //   // Verify options.markdown content was rendered
-  //   expect(document.querySelector('#main').textContent).toContain(
-  //     'A magical documentation site generator'
-  //   );
-  // });
+  test('Docsify /docs/ site using docsifyInit()', async () => {
+    await docsifyInit({
+      config: {
+        basePath: `${TEST_URL}/docs`,
+      },
+      // _logHTML: true,
+    });
+
+    // Verify config options
+    expect(typeof window.$docsify).toEqual('object');
+
+    // Verify options.markdown content was rendered
+    expect(document.querySelector('#main').textContent).toContain(
+      'A magical documentation site generator'
+    );
+  });
 
   test('kitchen sink docsify site using docsifyInit()', async () => {
     const docsifyInitConfig = {