Deprecated for Storybook

Storybook

Test User eXperience Harness

Build a stand-alone test harness with dynamic data to quickly prototype and isolate your HTML/CSS or examine your JSON document.

Table of contents

1. Installation steps to setup and configure
2. Recipe details
3. Register
4. Harness (array)
5. Template View Engines
6. Commands
7. JSON browser extentions
8. Roadmap

Installation steps to setup and configure

1. Set up your package.json npm init in your project folder
2. Install with npm:npm install tuxharness --save-dev
   • Mac/Unix copy file cp -nv "node_modules/tuxharness/tuxfile.js" "tuxfile.js"
   • Windows copy file copy "node_modules/tuxharness/tuxfile.js" "tuxfile.js"
   • More example recipes starter sample tuxharness recipe or full sample
3. Run the harness server
   • node ./node_modules/tuxharness/index.js
   • or add a script reference to your package.json like "harness": "node ./node_modules/tuxharness/index.js" then execute with npm run harness

Recipe details

Register

• port localhost server port number (default is 4000)
• static serve static assets (img, js, css, fonts...)
  • route is a virtual web path - served by express.js
  • directory is the physical path where the static assets are hosted
• view
  • engines array of template view engine name as defined in npm
  • path is the physical path to the views folder - relative from your project root

Harness (array)

• route is a virtual web path - served by express.js
• view is the physical path where the view is hosted - relative to your view folder
• data (object) - passed into the view for transformation
• data (string) - service call to request JSON data
• data (function(callback, util)) - callback argument will async call to gather data passed into the view for transformation
  • callback type string/JSON: print to browser
  • util type object
    • getIpsumText Lorum Ipsum generator
    • getJsonRoute type function(string route): wraps route name with localhost IP address with port and JSON path

Template View Engines

1. dust.js (sample in test folder)
   • npm install dustjs-linkedin --save
2. Jade (sample in test folder)
   • npm install jade --save
3. Many others supported by Consolidate.js
   1. install any additional engines in your project
   2. register your view engine in your project's JS file

Commands

• npm run harness Single run server to serve the test harness environment
• npm run dev Respawn-on-save server to serve the test harness environment
• npm run lint Lint JS files
• npm test Unit test and coverage

JSON browser extentions

• Firefox JSONView
• Chrome JSONView
• Safari safari-json-formatter

Roadmap

1. Allow remote recipes
   • Views and data too
2. Host demo