Fixes #25 - Support passing a custom Marko test page. (#26)

ctdio · Sep 18, 2017 · 954e6a4 · 954e6a4
1 parent b2647e8
commit 954e6a4
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -70,6 +70,8 @@ Options:
 
           --version -v Show the version number of mocha-puppeteer [string]
 
+     --testPagePath -P Path to a custom Marko test page [string]
+
         --pattern -p * Pattern to run tests. Either a single file or glob pattern. [string]
 
          --reporter -r The mocha test reporter to use. (Defaults to "spec") [string]
@@ -90,11 +92,13 @@ Options:
 
      --handleSIGINT -S Close chrome process on Ctrl-C. Defaults to true. [boolean]
 
-          --timeout -t Maximum time in milliseconds to wait for the Chrome instance to start. Defaults to 30000 (30 seconds). Pass 0 to disable timeout. [number]
+ --puppeteerTimeout -t Maximum time in milliseconds to wait for the Chrome instance to start. Defaults to 30000 (30 seconds). Pass 0 to disable timeout. [number]
 
            --dumpio -d Whether to pipe browser process stdout and stderr into process.stdout and process.stderr. Defaults to false. [boolean]
 
       --userDataDir -D Path to a User Data Directory. [string]
+
+--puppeteerPageTimeout Maximum time in milliseconds to wait for the page to load [number]
 ```
 
 > NOTE: To use `args` [Chromium flags](https://peter.sh/experiments/chromium-command-line-switches/), do not supply the prefixed double dash.
@@ -144,6 +148,31 @@ Note: Values provided in the `mochaOptions` field will be overridden by cli argu
 For example, `mocha-puppeteer test/test.js --reporter dot` will override the `reporter` option in the
 above config.
 
+## Advanced Usage
+
+If you need to customize the page that is sent to the browser with your Mocha
+test code, you can do so, by specifiying a `--testPagePath` CLI option.
+`mocha-puppeteer` uses [Marko.js](https://github.com/marko-js/marko) for
+templating and [Lasso](https://github.com/lasso-js/lasso) to bundle browser
+dependencies. Provide a path to a Marko template similar to the following:
+
+**/my-proj/test-page.marko**
+
+```marko
+lasso-page [
+  dependencies=input.dependencies
+  lasso=input.lasso
+]
+
+<!DOCTYPE html>
+html
+  head
+    lasso-head
+  body
+    div id='mocha'
+    lasso-body
+```
+
 ## Contributing
 
 If you find a bug or have an idea about how to improve the module, please create an issue. If you have a fix

diff --git a/cli.js b/cli.js
@@ -1,9 +1,20 @@
+require('marko/node-require').install()
+
 const argly = require('argly')
+const resolveFrom = require('resolve-from')
 const mochaPuppeteer = require('./index')
 const _loadConfig = require('./src/utils/loadConfig')
 
 const mochaPuppeteerPkgVersion = require('./package.json').version
 
+function _resolveTestPage (testPagePath) {
+  try {
+    return require(resolveFrom(process.cwd(), testPagePath))
+  } catch (err) {
+    throw new Error(`Invalid "testPagePath" provided: "${testPagePath}"`)
+  }
+}
+
 const parser = argly
   .createParser({
     '--help -h': {
@@ -14,6 +25,10 @@ const parser = argly
       type: 'string',
       description: 'Show the version number of mocha-puppeteer'
     },
+    '--testPagePath -P': {
+      type: 'string',
+      description: 'Path to a custom Marko test page'
+    },
     '--pattern -p *': {
       type: 'string[]',
       description: 'Pattern to run tests. Either a single file or glob pattern.'
@@ -107,7 +122,8 @@ module.exports = async function runCli () {
     puppeteerTimeout,
     dumpio,
     userDataDir,
-    puppeteerPageTimeout
+    puppeteerPageTimeout,
+    testPagePath
   } = parser.parse()
 
   // Gracefully exit if either the "help" or "version" arguments are supplied
@@ -141,10 +157,13 @@ module.exports = async function runCli () {
     useColors !== undefined && (mochaOptions.useColors = useColors)
     ui !== undefined && (mochaOptions.ui = ui)
 
+    const testPage = testPagePath ? _resolveTestPage(testPagePath) : undefined
+
     const options = Object.assign({
       mochaOptions,
       lassoConfig,
       lassoDependencies,
+      testPage,
       puppeteerLaunchOptions: {
         ignoreHTTPSErrors,
         headless,

diff --git a/src/Server.js b/src/Server.js
@@ -13,19 +13,21 @@ const TestPage = marko.load(require('./pages/test-page'))
 const { Server: WebSocketServer } = require('ws')
 
 class Server extends EventEmitter {
-  constructor ({ outputDir, pageLasso, dependencies }) {
+  constructor ({ outputDir, pageLasso, dependencies, testPage }) {
     super()
 
     const app = this._app = new Koa()
     const router = new Router({
       middleware: [ bodyParser() ]
     })
 
+    testPage = (testPage && marko.load(testPage)) || TestPage
+
     router.get('/', async (ctx) => {
       this.emit('start')
       ctx.type = 'html'
 
-      ctx.body = TestPage.stream({
+      ctx.body = testPage.stream({
         lasso: pageLasso,
         dependencies
       })

diff --git a/src/TestRunner.js b/src/TestRunner.js
@@ -46,6 +46,7 @@ class TestRunner extends EventEmitter {
       lassoDependencies,
       puppeteerLaunchOptions,
       puppeteerPageOptions,
+      testPage,
 
       // test options
       _instrumentCode,
@@ -80,7 +81,8 @@ class TestRunner extends EventEmitter {
     const server = this._server = new Server({
       outputDir,
       pageLasso,
-      dependencies
+      dependencies,
+      testPage
     })
 
     server.on('console', console.log)

diff --git a/test/integration/mocha/fixtures/test-page/index.marko b/test/integration/mocha/fixtures/test-page/index.marko
@@ -0,0 +1,19 @@
+lasso-page dependencies=input.dependencies lasso=input.lasso
+
+<!DOCTYPE html>
+html lang="en"
+    head
+        meta charset="UTF-8"
+        title -- Marko Components Tests
+        lasso-head
+    body
+
+        div id="test"
+        div id="mocha"
+        div id="testsTarget"
+
+        lasso-body
+
+        init-components immediate
+
+        lasso-slot name="mocha-run"
diff --git a/test/integration/mocha/mocha-test.js b/test/integration/mocha/mocha-test.js
@@ -55,3 +55,17 @@ test('#runTests should reject if error occurs during test', async (t) => {
     t.pass(err)
   }
 })
+
+test('#runTests should allow using a custom Marko template', async (t) => {
+  try {
+    await runTests({
+      testFiles: [ require.resolve('./fixtures/passing-test.js') ],
+      testPage: require('./fixtures/test-page'),
+      _instrumentCode: false,
+      _randomizeOutputDir: true
+    })
+    t.pass()
+  } catch (err) {
+    t.fail(err)
+  }
+})
diff --git a/test/unit/cli-test.js b/test/unit/cli-test.js
@@ -1,3 +1,4 @@
+const path = require('path')
 const test = require('ava')
 
 const sinon = require('sinon')
@@ -318,3 +319,43 @@ test('should prefix Chromium args with double dashes', async (t) => {
 
   await runCli()
 })
+
+test('should allow passing valid Marko template path', async (t) => {
+  t.plan(1)
+  const { sandbox } = t.context
+  const loadConfigSpy = sandbox.stub()
+
+  const runCli = _prepareArgumentParser({
+    sandbox,
+    parseOutput: {
+      pattern: TEST_PATTERN,
+      testPagePath: path.resolve(__dirname, '../../src/pages/test-page/index.marko')
+    },
+    loadConfigFunc: loadConfigSpy,
+    runTestsFunc (options) {
+      t.deepEqual(options.testPage, require('~/src/pages/test-page/index.marko'))
+    }
+  })
+
+  await runCli()
+})
+
+test('should throw error if invalid test page path provided', async (t) => {
+  const { sandbox } = t.context
+
+  const loadConfigSpy = sandbox.stub()
+  const runTestsSpy = sandbox.stub()
+
+  const runCli = _prepareArgumentParser({
+    sandbox,
+    parseOutput: {
+      pattern: TEST_PATTERN,
+      testPagePath: 'INVALID_PATH'
+    },
+    loadConfigFunc: loadConfigSpy,
+    runTestsFunc: runTestsSpy
+  })
+
+  const err = await t.throws(runCli())
+  t.is(err.message, 'Invalid "testPagePath" provided: "INVALID_PATH"')
+})