Merge pull request #2481 from ractivejs/coverage

Add code coverage reporting
ractivejs · Apr 2, 2016 · e81ce5e · e81ce5e
2 parents b14d592 + 13334da
commit e81ce5e
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 82 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,7 +2,7 @@ sudo: false
 language: node_js
 node_js:
 - '0.10'
-script: set -e; mkdir -p build; npm run build; chmod u+x scripts/deploy-edge-to-cdn.sh; ./scripts/deploy-edge-to-cdn.sh
+script: set -e; mkdir -p build; npm run build; npm run coveralls; chmod u+x scripts/deploy-edge-to-cdn.sh; ./scripts/deploy-edge-to-cdn.sh
 env:
   global:
   - GH_REF: github.com/ractivejs/ractive.git

diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Ractive.js - Next-generation DOM manipulation
-
+ [![Build Status](https://img.shields.io/travis/ractivejs/ractive/dev.svg?style=flat-square)](https://travis-ci.org/ractivejs/ractive) [![Coverage Status](https://img.shields.io/coveralls/ractivejs/ractive/dev.svg?style=flat-square)](https://coveralls.io/github/ractivejs/ractive?branch=dev) [![npm version](https://img.shields.io/npm/v/ractive.svg?style=flat-square)](https://www.npmjs.com/package/ractive) [![npm downloads](https://img.shields.io/npm/dm/ractive.svg?style=flat-square)](https://www.npmjs.com/package/ractive)
 
 *Got questions? Tag Stack Overflow questions with [ractivejs](http://stackoverflow.com/questions/tagged/ractivejs) or contact [@RactiveJS](http://twitter.com/RactiveJS) on Twitter*
 

diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,69 @@
+// Karma configuration
+// Generated on Sat Apr 02 2016 15:10:31 GMT+0200 (Západoeurópsky čas (letný))
+
+module.exports = function (config) {
+	config.set({
+		// base path that will be used to resolve all patterns (eg. files, exclude)
+		basePath: 'tmp',
+
+		// frameworks to use
+		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+		frameworks: [ 'qunit' ],
+
+		// list of files / patterns to load in the browser
+		files: [
+			'ractive-legacy.js',
+			'test/qunit-html.js',
+			'test/simulant.js',
+			'test/karma-init.js',
+			'test/**/*js'
+		],
+
+		// list of files to exclude
+		exclude: [
+			'test/node-tests/**',
+			'test/utils/**',
+			'test/blanket.js',
+			'test/qunit.js',
+			'test/qunit-tap.js'
+		],
+
+		// preprocess matching files before serving them to the browser
+		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+		preprocessors: {
+			'*.js': [ 'coverage' ]
+		},
+
+		// test results reporter to use
+		// possible values: 'dots', 'progress'
+		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
+		reporters: [ 'progress', 'coverage' ],
+
+		// enable / disable colors in the output (reporters and logs)
+		colors: true,
+
+		// start these browsers
+		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+		browsers: [ 'PhantomJS' ],
+
+		// Continuous Integration mode
+		// if true, Karma captures browsers, runs the tests and exits
+		singleRun: true,
+
+		// client config
+		client: {
+			qunit: {
+				reorder: false,
+				testTimeout: 5000
+			}
+		},
+
+		// generate output for coveralls
+		coverageReporter: {
+			reporters: [
+				{ type: 'html', subdir: 'report-html' },
+				{ type: 'lcovonly', subdir: '.', file: 'lcov.info' }
+			]
+		}
+	});
+};
diff --git a/package.json b/package.json
@@ -69,10 +69,13 @@
     "fakebuild": "sh ./scripts/build.sh --fake",
     "promises-aplus-tests": "./scripts/promises-aplus-tests.js",
     "lint": "node node_modules/eslint/bin/eslint src/ --ext .js",
-    "lint-tests": "node node_modules/eslint/bin/eslint test/__nodetests test/__tests test/testdeps --ext .js"
+    "lint-tests": "node node_modules/eslint/bin/eslint test/__nodetests test/__tests test/testdeps --ext .js",
+    "coverage": "karma start",
+    "coveralls": "npm run coverage && cat ./tmp/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./tmp/coverage"
   },
   "github": "https://github.com/ractivejs/ractive",
   "devDependencies": {
+    "coveralls": "~2.11",
     "cheerio": "^0.18.0",
     "eslint": "^1.3.1",
     "gobble": "^0.10.1",
@@ -83,9 +86,15 @@
     "gobble-rollup-babel": "^0.4.0",
     "jshint": "^2.5.11",
     "junk": "^1.0.1",
+    "karma": "~0.13",
+    "karma-coverage": "~0.5",
+    "karma-phantomjs-launcher": "~1.0",
+    "karma-qunit": "~0.1",
     "mocha": "^2.1.0",
     "phantomjs": "^1.9.15",
+    "phantomjs-prebuilt": "~2.1",
     "promises-aplus-tests": "^2.1.0",
+    "qunitjs": "~1.23",
     "rollup": "^0.15.0",
     "sander": "^0.2.4",
     "sorcery": "^0.6.3",

diff --git a/test/__support/files/karma-init.js b/test/__support/files/karma-init.js
@@ -0,0 +1,7 @@
+window.fixture = document.createElement('div');
+window.fixture.id = 'fixture';
+document.body.appendChild(window.fixture);
+
+QUnit.testDone(function () {
+    window.fixture.innerHTML = '';
+});
diff --git a/test/browser-tests/getCSS.js b/test/browser-tests/getCSS.js
@@ -73,45 +73,47 @@ test( 'getCSS with multiple components definition', t => {
 
 } );
 
-test( 'getCSS with component definitions constructed from Ractive of different environments', t => {
-	t.expect( 5 );
+if (!window.__karma__) {
+	test('getCSS with component definitions constructed from Ractive of different environments', t => {
+		t.expect(5);
 
-	const done1 = t.async();
-	const done2 = t.async();
-	const done3 = t.async();
-	const done4 = t.async();
-	const done5 = t.async();
+		const done1 = t.async();
+		const done2 = t.async();
+		const done3 = t.async();
+		const done4 = t.async();
+		const done5 = t.async();
 
-	// Simulate two separate Ractive environments using iframes
-	Ractive.Promise.all( [ createIsolatedEnv(), createIsolatedEnv() ] ).then( envs => {
+		// Simulate two separate Ractive environments using iframes
+		Ractive.Promise.all([ createIsolatedEnv(), createIsolatedEnv() ]).then(envs => {
 
-		const ComponentA = createComponentDefinition( envs[ 0 ].Ractive );
-		const ComponentB = createComponentDefinition( envs[ 1 ].Ractive );
+			const ComponentA = createComponentDefinition(envs[ 0 ].Ractive);
+			const ComponentB = createComponentDefinition(envs[ 1 ].Ractive);
 
-		const cssIdA = ComponentA.prototype.cssId;
-		const cssIdB = ComponentB.prototype.cssId;
+			const cssIdA = ComponentA.prototype.cssId;
+			const cssIdB = ComponentB.prototype.cssId;
 
-		const cssA = envs[ 0 ].Ractive.getCSS();
-		const cssB = envs[ 1 ].Ractive.getCSS();
+			const cssA = envs[ 0 ].Ractive.getCSS();
+			const cssB = envs[ 1 ].Ractive.getCSS();
 
-		t.notEqual( cssIdA, cssIdB, `Two top-level components from different environments should not have the same ID` );
-		done1();
+			t.notEqual(cssIdA, cssIdB, `Two top-level components from different environments should not have the same ID`);
+			done1();
 
-		t.ok( !!~cssA.indexOf( `.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green` ), `.green selector for ${cssIdA} should exist on component definition A` );
-		done2();
+			t.ok(!!~cssA.indexOf(`.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green`), `.green selector for ${cssIdA} should exist on component definition A`);
+			done2();
 
-		t.ok( !~cssA.indexOf( `.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green` ), `.green selector for ${cssIdB} should NEVER exist on component definition A` );
-		done3();
+			t.ok(!~cssA.indexOf(`.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green`), `.green selector for ${cssIdB} should NEVER exist on component definition A`);
+			done3();
 
-		t.ok( !!~cssB.indexOf( `.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green` ), `.green selector for ${cssIdB} should exist on component definition B` );
-		done4();
+			t.ok(!!~cssB.indexOf(`.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green`), `.green selector for ${cssIdB} should exist on component definition B`);
+			done4();
 
-		t.ok( !~cssB.indexOf( `.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green` ), `.green selector for ${cssIdA} should NEVER exist on component definition B` );
-		done5();
+			t.ok(!~cssB.indexOf(`.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green`), `.green selector for ${cssIdA} should NEVER exist on component definition B`);
+			done5();
 
-		envs[ 0 ].env.remove();
-		envs[ 1 ].env.remove();
+			envs[ 0 ].env.remove();
+			envs[ 1 ].env.remove();
 
-	} );
+		});
 
-} );
+	});
+}
diff --git a/test/browser-tests/methods/toCSS.js b/test/browser-tests/methods/toCSS.js
@@ -133,57 +133,59 @@ test( 'toCSS with nested component instances', t => {
 
 } );
 
-test( 'toCSS with components constructed from Ractive of different environments', t => {
-	t.expect( 5 );
-
-	const done1 = t.async();
-	const done2 = t.async();
-	const done3 = t.async();
-	const done4 = t.async();
-	const done5 = t.async();
-
-	// Simulate two separate Ractive environments using iframes
-	Ractive.Promise.all( [ createIsolatedEnv(), createIsolatedEnv() ] ).then( envs => {
-
-		const ComponentA = createComponentDefinition( envs[ 0 ].Ractive );
-		const ComponentB = createComponentDefinition( envs[ 1 ].Ractive );
-
-		const cssIdA = ComponentA.prototype.cssId;
-		const cssIdB = ComponentB.prototype.cssId;
-
-		const instanceA = new ComponentA( {
-			el: envs[ 0 ].body
-		} );
-		const instanceB = new ComponentB( {
-			el: envs[ 1 ].body
+if (!window.__karma__) {
+	test( 'toCSS with components constructed from Ractive of different environments', t => {
+		t.expect( 5 );
+
+		const done1 = t.async();
+		const done2 = t.async();
+		const done3 = t.async();
+		const done4 = t.async();
+		const done5 = t.async();
+
+		// Simulate two separate Ractive environments using iframes
+		Ractive.Promise.all( [ createIsolatedEnv(), createIsolatedEnv() ] ).then( envs => {
+
+			const ComponentA = createComponentDefinition( envs[ 0 ].Ractive );
+			const ComponentB = createComponentDefinition( envs[ 1 ].Ractive );
+
+			const cssIdA = ComponentA.prototype.cssId;
+			const cssIdB = ComponentB.prototype.cssId;
+
+			const instanceA = new ComponentA( {
+				el: envs[ 0 ].body
+			} );
+			const instanceB = new ComponentB( {
+				el: envs[ 1 ].body
+			} );
+
+			const cssA = instanceA.toCSS();
+			const cssB = instanceB.toCSS();
+
+			t.notEqual( cssIdA, cssIdB, `Two top-level components from different environments should not have the same ID` );
+			done1();
+
+			t.ok( !!~cssA.indexOf( `.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green` ), `.green selector for ${cssIdA} should exist on instance A` );
+			done2();
+
+			t.ok( !~cssA.indexOf( `.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green` ), `.green selector for ${cssIdB} should NEVER exist on instance A` );
+			done3();
+
+			t.ok( !!~cssB.indexOf( `.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green` ), `.green selector for ${cssIdB} should exist on instance B` );
+			done4();
+
+			t.ok( !~cssB.indexOf( `.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green` ), `.green selector for ${cssIdA} should NEVER exist on instance B` );
+			done5();
+
+			instanceA.teardown();
+			instanceB.teardown();
+			envs[ 0 ].env.remove();
+			envs[ 1 ].env.remove();
+
 		} );
-
-		const cssA = instanceA.toCSS();
-		const cssB = instanceB.toCSS();
-
-		t.notEqual( cssIdA, cssIdB, `Two top-level components from different environments should not have the same ID` );
-		done1();
-
-		t.ok( !!~cssA.indexOf( `.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green` ), `.green selector for ${cssIdA} should exist on instance A` );
-		done2();
-
-		t.ok( !~cssA.indexOf( `.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green` ), `.green selector for ${cssIdB} should NEVER exist on instance A` );
-		done3();
-
-		t.ok( !!~cssB.indexOf( `.green[data-ractive-css~="{${cssIdB}}"], [data-ractive-css~="{${cssIdB}}"] .green` ), `.green selector for ${cssIdB} should exist on instance B` );
-		done4();
-
-		t.ok( !~cssB.indexOf( `.green[data-ractive-css~="{${cssIdA}}"], [data-ractive-css~="{${cssIdA}}"] .green` ), `.green selector for ${cssIdA} should NEVER exist on instance B` );
-		done5();
-
-		instanceA.teardown();
-		instanceB.teardown();
-		envs[ 0 ].env.remove();
-		envs[ 1 ].env.remove();
-
+
 	} );
-
-} );
+}
 
 test( 'toCSS with a Ractive instance', t => {
 

diff --git a/test/browser-tests/misc.js b/test/browser-tests/misc.js
@@ -627,7 +627,8 @@ test( 'Foo.extend(Bar), where both Foo and Bar are Ractive instances, returns on
 
 
 test( 'Regression test for #460', t => {
-	let items = [
+	let done = t.async(),
+		items = [
 		{ desc: 'foo' },
 		{ desc: 'bar' },
 		{ desc: 'baz' }
@@ -642,6 +643,7 @@ test( 'Regression test for #460', t => {
 	ractive.pop( 'items' ).then( () => {
 		ractive.push( 'items', { desc: 'baz' });
 		t.htmlEqual( fixture.innerHTML, '<p>foo:</p><p>bar:</p><p>baz:</p>' );
+		done();
 	});
 
 	t.htmlEqual( fixture.innerHTML, '<p>foo:</p><p>bar:</p>' );