Karma-js_to_html-preprocessor NPM

Karma JS to HTML PreProcessor

Karma plugin for @chooie/js_to_html at https://github.com/chooie/js_to_html.

Find it on NPM at https://www.npmjs.com/package/karma-js_to_html-preprocessor.

Why use this?

Suppose you:

Test your browser code with Karma
Use @chooie/js_to_html for server-side templating
Want to test your html (generated by the server) on the client

Then you can test at the (faster) integration level rather than the (slower) end-to-end level by using Karma with this plugin.

Install

npm install --save-dev karma-js_to_html-preprocessor

Integration

For a full example integration, see https://github.com/chooie/js_to_html.

Karma Config

https://github.com/chooie/js_to_html/blob/master/src/build/config/karma.conf.js

Snippet:

// list of files / patterns to load in the browser
files: [
  // Include all files except server
  "src/application/!(server)/**/!(*.page).js",
  {
    // Don't automatically request in iframe any non-js files - but make
    // them available to be served
    pattern: "src/application/client/content/**/!(!(*.page)*.js)",
    included: false
  }
],

// list of files to exclude
exclude: [],

// preprocessors
preprocessors: {
  // Include all files except server
  "src/application/!(server)/**/!(*.page).js": ["commonjs"],
  "src/application/client/content/**/*.page.js": ["js_to_html"]
},

Page file

https://github.com/chooie/js_to_html/blob/master/src/application/client/content/template_views/index.page.js

Snippet:

const head = require("./partials/head.js");
const util = require("../../../shared/util.js");

exports.page = function page(options) {
  return [
    "html",
    [
      "head",
      "<!-- smoke test marker: App home page -->",
      ["title", "Home - Automatopia NodeJS"],
      ...head.make()
    ],
    [
      "body",
      ["h1", { id: "header-text" }, "Hello, world!"],
      makeList(options.colors),
      ["script", { src: "bundle.js" }],
      [
        "script",
        util.stripMargin`
          |const client = require("./main.js");
          |console.log(client.isTrue());
          |`
      ]
    ]
  ];
};

function makeList(items) {
  return [
    "ul",
    ...items.map(function(item) {
      return ["li", item];
    })
  ];
}

Data File

You can provide options to a template by creating an equivalent karma_data.js file.

For example, if you have a file called index.page.js, the equivalent data file would need to be called index.page.karma_data.js.

https://github.com/chooie/js_to_html/blob/master/src/application/client/content/template_views/index.page.karma_data.js

Snippet:

module.exports = {
  colors: ["Red", "Green", "Blue"]
};

Development

View the available tasks to run

Run on your local machine

./tasks.sh

Run within Docker

./docker-tasks.sh

Quickstart

Install docker (I'm running 18.03.0-ce-mac60)
Start the Karma server
```
./docker-tasks.sh karma
```
Capture the browsers you want to test by visiting http://localhost:9876
Run all the checks
```
./docker-tasks.sh test:all
```
Start the application
```
./docker-tasks.sh run
```

Setup

Frontend testing requirements

In order to perform cross-browser testing professionally, we must test our application in real browsers. The testing infrastructure checks that the expected browsers are tested. You will need to install the necessary browsers and run the necessary emulators(or test loosely - see the error message).

I recommend that you test all browsers/platforms that you intend to serve as part of the automated testing.

With this in place, make sure to start the karma server and capture each of the browsers you would like to test by visiting http://localhost:9876 (may differ if you are in an emulator - read the docs for that environment).

Gotchas

When limiting the mocha tests that you want to run with .skip() or .only(), make sure to use the test:quick task first to get a passing suite (WITH NO LIMITS SPECIFIED YET). Then limit your tests and run test:quick again.

There is something weird going on with our jake test tasks, mocha, and/or karma that is stopping this from working properly (like with test:all).

Credits

Much of the inspiration and implementation is borrowed from James Shore (https://github.com/jamesshore). I highly recommend his webseries Let's Code Test Driven Javascript (http://www.letscodejavascript.com/).