chore: add test running dll in the browser (#197)

Author: SimenB

.eslintrc

@@ -3,9 +3,12 @@
   "extends": "simenb-base",
   "overrides": [
     {
-      "files": "test.js",
+      "files": ["test.js", "puppeteer.test.js"],
       "env": {
         "jest": true
+      },
+      "rules": {
+        "no-console": "off"
       }
     },
     {

.github/workflows/node.js.yml

@@ -72,6 +72,34 @@ jobs:
       - run: yarn
       - name: run tests
         run: yarn cover
+  test-browser:
+    name: Test DLL example with Puppeteer
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - uses: actions/setup-node@v2.1.4
+        with:
+          node-version: 14.x
+      - name: install puppeteer
+        run: |
+          yarn
+          yarn add --dev puppeteer
+          git checkout yarn.lock
+      - name: run examples
+        run: yarn example
+      - name: run tests
+        run: yarn jest
   lint:
     name: Run ESLint using Node.js LTS
     runs-on: ubuntu-latest
@@ -99,7 +127,7 @@ jobs:
       # prettier-ignore
       ${{ github.event_name == 'push' && github.event.ref == 'refs/heads/main' }}
     name: Release new version
-    needs: [lint, test-node, test-os]
+    needs: [lint, test-node, test-os, test-browser]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

package.json

@@ -20,8 +20,8 @@
     "lint": "eslint --cache .",
     "update-license": "licensor --width 72",
     "build-and-update-license": "npm run build && npm run update-license",
-    "prepublishOnly": "npm run build",
-    "pretest": "npm run lint",
+    "prepare": "npm run build",
+    "pretest": "npm run example",
     "test": "jest"
   },
   "repository": "SimenB/add-asset-html-webpack-plugin",
@@ -53,6 +53,7 @@
     "eslint": "^5.6.0",
     "eslint-config-simenb-base": "^15.0.1",
     "eslint_d": "^7.1.0",
+    "express": "^4.17.1",
     "html-webpack-plugin": "^4.0.0-0",
     "husky": "^1.0.1",
     "jest": "^24.0.0",
@@ -61,6 +62,7 @@
     "lint-staged": "^7.0.0",
     "prettier": "^1.8.2",
     "slash": "^2.0.0",
+    "stoppable": "^1.1.0",
     "webpack": "^4.0.0",
     "webpack-cli": "^3.1.0"
   },

puppeteer.test.js

@@ -0,0 +1,79 @@
+import path from 'path';
+import fs from 'fs';
+import { promisify } from 'util';
+import express from 'express';
+import stoppable from 'stoppable';
+
+let puppeteer;
+let browser;
+
+(() => {
+  try {
+    // eslint-disable-next-line global-require,import/no-unresolved
+    puppeteer = require('puppeteer');
+  } catch (error) {
+    if (error.code !== 'MODULE_NOT_FOUND') {
+      throw error;
+    }
+  }
+})();
+
+if (!puppeteer) {
+  test.only('Unable to load puppeteer, skipping tests', () => {
+    console.warn('Unable to load puppeteer, skipping tests');
+  });
+}
+
+beforeAll(async () => {
+  if (puppeteer) {
+    browser = await puppeteer.launch();
+  }
+});
+
+afterAll(async () => {
+  if (browser) {
+    await browser.close();
+  }
+});
+
+async function setApp(directory) {
+  if (!fs.existsSync(directory)) {
+    throw new Error(`${directory} does not exist -run \`yarn example\``);
+  }
+
+  const app = express();
+
+  app.use(express.static(directory));
+
+  return new Promise(resolve => {
+    const server = app.listen(0, () => {
+      stoppable(server, 0);
+
+      const stop = promisify(server.stop);
+
+      resolve({ port: server.address().port, stop });
+    });
+  });
+}
+
+test('load dll correctly', async () => {
+  const consoleFn = jest.fn();
+  const errorFn = jest.fn();
+  const server = await setApp(path.resolve(__dirname, './example/dll/dist'));
+
+  const page = await browser.newPage();
+
+  page.on('console', consoleObj => consoleFn(consoleObj.text()));
+  page.on('error', errorFn);
+  page.on('pageerror', errorFn);
+
+  await page.goto(`http://localhost:${server.port}`);
+
+  try {
+    expect(errorFn).not.toHaveBeenCalled();
+    expect(consoleFn).toHaveBeenCalledTimes(1);
+    expect(consoleFn).toHaveBeenCalledWith('hello some classes');
+  } finally {
+    await Promise.all([page.close(), server.stop()]);
+  }
+});