Clean up globals

- Import globals from various files instead of manually adding them to ensure they are availability in Jest and eslint configurations
- Add middleware to server configuration for serving virtual “_blank.html” file
- Add BLANK_URL
- Rename TEST_URL to TEST_HOST
- Removed ./test/fixtures/ directory (blank page now served via server.js middleware)
- Added page.goto(BLANK_URL) call to global Playwright beforeEach() setup

Author: jhildenbiddle

jest.config.js

@@ -1,15 +1,13 @@
 const path = require('path');
-const { TEST_URL, DOCS_URL, LIB_URL } = require('./test/config/server.js');
+const { globals: serverGlobals } = require('./test/config/server.js');
 
 const sharedConfig = {
   errorOnDeprecated: true,
   globals: {
+    ...serverGlobals, // BLANK_URL, DOCS_URL, LIB_URL, TEST_HOST
     DOCS_PATH: path.resolve(__dirname, 'docs'),
-    DOCS_URL,
     LIB_PATH: path.resolve(__dirname, 'lib'),
-    LIB_URL,
     SRC_PATH: path.resolve(__dirname, 'src'),
-    TEST_URL,
   },
   globalSetup: './test/config/jest.setup.js',
   globalTeardown: './test/config/jest.teardown.js',
@@ -21,22 +19,26 @@ const sharedConfig = {
 process.env.JEST_PLAYWRIGHT_CONFIG = './test/config/jest-playwright.config.js';
 
 module.exports = {
+  // Adding globals to config root for easier importing into .eslint.js, but
+  // as of Jest 26.4.2 these globals need to be added to each project config
+  // as well.
+  globals: sharedConfig.globals,
   projects: [
     // Unit Tests (Jest)
     {
       ...sharedConfig,
       displayName: 'unit',
       setupFilesAfterEnv: ['<rootDir>/test/config/jest.setup-tests.js'],
       testMatch: ['<rootDir>/test/unit/*.test.js'],
-      testURL: TEST_URL,
+      testURL: serverGlobals.BLANK_URL,
     },
     // Integration Tests (Jest)
     {
       ...sharedConfig,
       displayName: 'integration',
       setupFilesAfterEnv: ['<rootDir>/test/config/jest.setup-tests.js'],
       testMatch: ['<rootDir>/test/integration/*.test.js'],
-      testURL: TEST_URL,
+      testURL: serverGlobals.BLANK_URL,
     },
     // E2E Tests (Jest + Playwright)
     {

test/.eslintrc.js

@@ -1,15 +1,12 @@
+const jestConfig = require('../jest.config.js');
+
 module.exports = {
   env: {
     'jest/globals': true,
   },
   extends: ['plugin:jest/recommended', 'plugin:jest/style'],
   globals: {
-    TEST_URL: 'readonly',
-    DOCS_PATH: 'readonly',
-    DOCS_URL: 'readonly',
-    LIB_PATH: 'readonly',
-    LIB_URL: 'readonly',
-    SRC_PATH: 'readonly',
+    ...jestConfig.globals,
   },
   plugins: ['jest'],
 };

test/README.md

@@ -14,12 +14,18 @@
 
 ### Global Variables
 
-- `TEST_URL`: Test server base URL (http://localhost:3001 => `/test/fixtures/`)
-- `DOCS_PATH`: File system path to docsify's `/docs` directory
+#### File paths
+
+- `DOCS_PATH`: File path to docsify's `/docs` directory
+- `LIB_PATH`: File path to docsify's `/lib` directory
+- `SRC_PATH`: File path to docsify's `/src` directory
+
+#### URLs
+
+- `BLANK_URL`: Test server route to virtual `_blank.html` file
 - `DOCS_URL`: Test server route to docsify's `/docs` directory
-- `LIB_PATH`: File system path to docsify's `/lib` directory
 - `LIB_URL`: Test server route to docsify's `/lib` directory
-- `SRC_PATH`: File system path to docsify's `/src` directory
+- `TEST_HOST`: Test server host:port (`http://127.0.0.1:3001`)
 
 ### CLI commands
 
@@ -32,9 +38,6 @@ npm run test:e2e
 npm run test:integration
 npm run test:unit
 
-# Run example tests
-npm run test:examples
-
 # Run test file
 npm run test -- -i /path/to/file.test.js
 

test/config/jest-playwright.setup-tests.js

@@ -1,4 +1,4 @@
-/* global browserName */
+/* global browserName page */
 const { configureToMatchImageSnapshot } = require('jest-image-snapshot');
 
 // Lifecycle Hooks
@@ -42,4 +42,13 @@ beforeAll(async () => {
 
 beforeEach(async () => {
   await global.jestPlaywright.resetPage();
+
+  // Goto URL ()
+  // https://playwright.dev/#path=docs%2Fapi.md&q=pagegotourl-options
+  // NOTE: Tests typically begin by navigating to a page for testing. When
+  // this doesn't happen, Playwright operates on the "about:blank" page which
+  // will cause operations that require the window location to be a valid URL
+  // to fail (e.g. AJAX requests). To avoid these issues, this hook ensures
+  // that each tests begins by a blank HTML page.
+  await page.goto(BLANK_URL);
 });

test/config/server.js

@@ -11,6 +11,16 @@ const serverConfig = {
 function startServer(options = {}, cb = Function.prototype) {
   const defaults = {
     ...serverConfig,
+    middleware: [
+      {
+        route: '/_blank.html',
+        handle: function(req, res, next) {
+          res.setHeader('Content-Type', 'text/html');
+          res.end('');
+          next();
+        },
+      },
+    ],
     notify: false,
     open: false,
     rewriteRules: [
@@ -21,7 +31,7 @@ function startServer(options = {}, cb = Function.prototype) {
       },
     ],
     server: {
-      baseDir: path.resolve(__dirname, '../fixtures'),
+      baseDir: path.resolve(__dirname, '../'),
       routes: {
         '/docs': path.resolve(__dirname, '../../docs'),
         '/lib': path.resolve(__dirname, '../../lib'),
@@ -87,15 +97,19 @@ if (hasStartArg) {
 }
 
 module.exports = {
+  globals: {
+    get BLANK_URL() {
+      return `${this.TEST_HOST}/_blank.html`;
+    },
+    get DOCS_URL() {
+      return `${this.TEST_HOST}/docs`;
+    },
+    get LIB_URL() {
+      return `${this.TEST_HOST}/lib`;
+    },
+    TEST_HOST: `http://${serverConfig.host}:${serverConfig.port}`,
+  },
   start: startServer,
   startAsync: startServerAsync,
   stop: stopServer,
-  // Jest Globals
-  TEST_URL: `http://${serverConfig.host}:${serverConfig.port}`,
-  get DOCS_URL() {
-    return `${this.TEST_URL}/docs`;
-  },
-  get LIB_URL() {
-    return `${this.TEST_URL}/lib`;
-  },
 };

test/e2e/example.test.js

@@ -5,19 +5,6 @@ const docsifyInit = require('../helpers/docsify-init');
 // Suite
 // -----------------------------------------------------------------------------
 describe(`Example Tests`, function() {
-  // Setup & Teardown
-  // ---------------------------------------------------------------------------
-  beforeEach(async () => {
-    // Goto URL (fixtures/index.html)
-    // https://playwright.dev/#path=docs%2Fapi.md&q=pagegotourl-options
-    // NOTE: Tests typically begin by navigating to a page for testing. When
-    // this doesn't happen, Playwright operates on the "about:blank" page which
-    // will cause operations that require the window location to be a valid URL
-    // to fail (e.g. AJAX requests). To avoid these issues, this hook ensures
-    // that each tests begins by loading the default test server page.
-    await page.goto(TEST_URL);
-  });
-
   // Tests
   // ---------------------------------------------------------------------------
   test('dom manipulation', async () => {
@@ -105,7 +92,7 @@ describe(`Example Tests`, function() {
   test('manual docsify site using playwright methods', async () => {
     // Goto URL
     // https://playwright.dev/#path=docs%2Fapi.md&q=pagegotourl-options
-    await page.goto(TEST_URL);
+    await page.goto(BLANK_URL);
 
     // Set docsify configuration
     // https://playwright.dev/#path=docs%2Fapi.md&q=pageevaluatepagefunction-arg

test/fixtures/index.html

@@ -37,7 +37,7 @@ const isPlaywright = 'page' in global;
 async function docsifyInit(options = {}) {
   const defaults = {
     config: {
-      basePath: TEST_URL,
+      basePath: TEST_HOST,
       el: '#app',
     },
     html: `
@@ -62,7 +62,7 @@ async function docsifyInit(options = {}) {
     scriptURLs: [],
     style: '',
     styleURLs: [],
-    testURL: `${TEST_URL}/docsify-init.html`,
+    testURL: `${TEST_HOST}/docsify-init.html`,
     waitForSelector: '#main',
   };
   const settings = {
@@ -116,7 +116,7 @@ async function docsifyInit(options = {}) {
           .filter(([url, responseText]) => url && responseText)
           .map(([url, responseText]) => [
             // Convert relative to absolute URL
-            new URL(url, TEST_URL).href,
+            new URL(url, TEST_HOST).href,
             // Strip indentation from responseText
             stripIndent`${responseText}`,
           ])
@@ -128,11 +128,11 @@ async function docsifyInit(options = {}) {
     scriptURLs: []
       .concat(options.scriptURLs || '')
       .filter(url => url)
-      .map(url => new URL(url, TEST_URL).href),
+      .map(url => new URL(url, TEST_HOST).href),
     styleURLs: []
       .concat(options.styleURLs || '')
       .filter(url => url)
-      .map(url => new URL(url, TEST_URL).href),
+      .map(url => new URL(url, TEST_HOST).href),
   };
 
   // Routes

test/helpers/docsify-init.js

@@ -10,7 +10,7 @@ describe('Example Tests', function() {
   test('Docsify /docs/ site using docsifyInit()', async () => {
     await docsifyInit({
       config: {
-        basePath: `${TEST_URL}/docs`,
+        basePath: `${TEST_HOST}/docs`,
       },
       // _logHTML: true,
     });