generator-testdrivedemo

generator-testdrivedemo

This generator is used to assure the a common style guide for the TestDrive demos.

Installation

First of all, you will need node on your computer. Go to http://nodejs.org/ and install the version for your OS. Make sure that the option to add to PATH is selected!

Once this is done, from a prompt type the following:

npm install -g eslint
npm install -g jscs
npm install -g csslint
npm install -g yo
npm install -g http-server
npm install -g generator-testdrivedemo

You will also need a code editor. Something like Visual Studio, Brackets, Sublime, Atom, WebStorm or even notepad if you want.

• If you use Visual Studio it will be wise to install VS WebEssentials (http://vswebessentials.com/) and the EditorConfig extension (https://visualstudiogallery.msdn.microsoft.com/c8bccfe2-650c-4b42-bc5c-845e21f96328) so you don’t have to worry about some of the formatting options.
• You will also need a Git client (or the command line at least)

Using the generator

Make a fork of the TestDrive demos project and clone it into your computer. Then create now a folder where your new demo is going to be and from a command prompt in that folder, type the following:

yo testdrivedemo

A wizard will start asking you a series of questions to prepare your demo:

• Name: The name of your demo. 2-3 words
• Category: The category that best fits your demo. In case of doubt use Misc
• Title: A short phrase for your demo. This is used for SEO purposes in the final website
• Keywords: Some keywords about your demo so they can be easily discoverable
• Author: Your user name(s) on GitHub
• Description: A small description of your demo that will be used in the website.
• Template: How much scaffolding do you need? You have 3 options: ** Minimal: This will just create the bare minimum. An HTML file with your answers inserted and the right folder structure. This is great for full screen demos ** Basic: If you need some default styles and some example on how to use them this is your option ** Complex: Like the basic but with more examples of the CSS and jQuery bundled

Once you've answered all the questions it will create the right folder structure to be integrated into the demo repository.

Verifying your code follows the style guide

The yeoman generator will also add a few files required by eslint, jscs and csslint. Before submitting any pull request make sure that you pass clean eslint and jscs (csslint not that much, it doesn't have as many rules as we want or isn't as flexible).

To verify it works just type the following from a command prompt in the root of your demo folder:

eslint .\scripts\myjsfile.js
jscs .\scripts\myjsfile.js

You should not get any warning and if you do you should fix it. There are in some cases when a rule has to be broken (e.g. parsing an external JSON file that uses underscores in the name of the files). If that rule has to be broken you can dissable the warning the following way:

/* eslint-disable nameOfTheRule */
mycodehere
/* eslint-enable nameOfTheRule */

/* jscs:disable nameOfTheRule */
mycodehere
/* jscs:enable nameOfTheRule */

To know more about each rule I recommend you to visit the documentation of each project: ESLint, JSCS