Skip to content

Instantly share code, notes, and snippets.

@gillesruppert

gillesruppert/README.md

Last active December 11, 2015 11:38
Show Gist options
  • Save gillesruppert/4594666 to your computer and use it in GitHub Desktop.
Save gillesruppert/4594666 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

{COMPONENT_NAME}

component description and usage

Images supporting the documentation or more extensive documentation should go into the docs folder.

Working example should go into the example folder.

Tests go into the test folder. Should just consist of main.test.js. If you need more, your component might be too big!

package.json contains the development dependencies, such as testacular and expect.js. Usually, npm install runs bower install on postinstall.

component.json contains all the client-side dependencies to make the code work. N.B: sinon.js is part of the bower dependencies as the npm version does not work in the browser!

main.js - component JavaScript code style.css - component.css. Should be the least amount of CSS to make the component show on screen. Preferably no pre-processor should be used. template.html - template for the component testacular.conf.js - configuration for the testacular test runner. Should only need amendment if the code structure is different from the blueprint

Raw
component.json
{
"name": "{COMPONENT_NAME}",
"version": "0.0.0",
"main": [
// all the component files go here. There should not be more than
// 1 file for each type. Remove this comment when done!
"./main.js",
"./style.css",
"./template.html"
],
"dependencies": {
// client-side component dependencies. Look at bower for details! i.e:
// "jquery": "~1.8.3",
// "underscore": "~1.4.3",
// "backbone": "~0.9.9",
// "requirejs": "~2.1.2",
// "sinon.js": "*"
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>{COMPONENT_NAME} example</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" charset="utf-8">
// configuration for requirejs, i.e.
require = {
baseUrl: '../',
// paths: {
// jquery: './components/jquery/jquery',
// underscore: './components/underscore/underscore',
// backbone: './components/backbone/backbone'
// },
// shim: {
// jquery: {
// exports: 'jQuery'
// },
// underscore: {
// exports: '_'
// },
// backbone: {
// deps: ['jquery', 'underscore'],
// exports: 'Backbone'
// }
// }
}
</script>
<script src="../components/requirejs/require.js"></script>
<style>
/* styles that are example specific */
.clear-button-container {
width: 300px;
height: 25px;
}
</style>
</head>
<body>
<h1>Example page for ClearInput</h1>
<p>To view this page in a browser, open the file in a browser (make sure the browser can do XHR requests on the file system) or set up a server pointing to the root project and go to http://localhost:PORT_NUMBER/example/</p>
<!-- html necessary for the example goes below this -->
<script>
require(['./main'], function (COMPONENT_NAME) {
// show basic usage of the component
});
</script>
</body>
</html>
Raw
main.js
/*global define */
define(function (require) {
"use strict";
// code and return goes here
});
Raw
main.test.js
/*jslint browser: true, nomen: true */
/*globals _, async, sinon, define, beforeEach, before, after, afterEach, mocha, dump, window: false, $: false, require: false, Backbone: false, describe, it, expect, window*/
mocha.setup({ ignoreLeaks: true });
require.config({
baseUrl: '/base',
paths: {
// configure paths for the component dependencies, i.e.
// jquery: './components/jquery/jquery',
// underscore: './components/underscore/underscore',
// backbone: './components/backbone/backbone'
},
shim: {
// configure shims for the non AMD dependencies, i.e.
// jquery: {
// exports: 'jQuery'
// },
// underscore: {
// exports: '_'
// },
// backbone: {
// deps: ['jquery', 'underscore'],
// exports: 'Backbone'
// }
}
});
require([ 'main' ], function ({{COMPONENT_NAME}}) {
"use strict";
describe('{COMPONENT_NAME}', function () {
// all the tests go here
});
// start the test runner (last thing!);
window.__testacular__.start();
});
Raw
package.json
{
"name": "{COMPONENT_NAME}",
"version": "0.0.0",
"description": "{COMPONENT_DESCRIPTION}",
"main": "main.js",
"directories": {
"test": "test"
},
"scripts": {
"postinstall": "bower install",
"test": "./node_modules/.bin/testacular start --single-run --browsers PhantomJS"
},
"repository": {
"type": "git",
"url": "{GIT_URL}"
},
"keywords": [ ],
"author": "",
"license": "BSD",
"readmeFilename": "README.md",
"devDependencies": {
"testacular": "~0.5.8",
"expect.js": "~0.2.0"
},
"private": true
}
Raw
style.css
/*
component css
Should only include the most basic layout styles for the component,
preferably in plain CSS, so that the preprocessor doesn't matter
*/
Raw
template.html
<!-- html template -->
Raw
testacular.conf.js
// Testacular configuration
// Generated on Mon Jan 21 2013 15:39:08 GMT+0100 (CET)
// base path, that will be used to resolve files and exclude
basePath = '.';
// list of files / patterns to load in the browser
files = [
MOCHA,
MOCHA_ADAPTER,
REQUIRE,
REQUIRE_ADAPTER,
'./node_modules/expect.js/expect.js',
'./components/sinon.js/sinon.js',
'./test/main.test.js',
{ pattern: './components/**/*.js', included: false, watched: false },
{ pattern: './main.js', included: false }
];
// list of files to exclude
exclude = [
];
// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];
// web server port
port = 8080;
// cli runner port
runnerPort = 9100;
// enable / disable colors in the output (reporters and logs)
colors = true;
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = [];
// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment