Merge pull request #106 from google/add/qunit-tests

Improve Qunit tests

.travis.yml

@@ -60,7 +60,10 @@ script:
     fi
   - |
     if [[ "$JS" == "1" ]]; then
-      travis_retry npm run travis:test || exit 1
+      npm run build || exit 1 # Build for tests.
+      npx gulp qunit || exit 1 # QUnit tests
+      npm run test || exit 1 # Bundle size test
+      travis_retry npm run travis:visualtest || exit 1 # Visual regression tests
     else
       gulp phpunit || exit 1
     fi

gulpfile.babel.js

@@ -17,10 +17,10 @@
  */
 
 import gulp from 'gulp';
-import qunit from 'node-qunit-phantomjs';
 import requireDir from 'require-dir';
 import runSequence from 'run-sequence';
 import livereload from 'gulp-livereload';
+import { execSync } from 'child_process';
 var phpunit = require( 'gulp-phpunit' );
 
 requireDir( './gulp-tasks' );
@@ -89,7 +89,7 @@ gulp.task( 'default', () => {
 } );
 
 gulp.task( 'qunit', function() {
-	qunit( './tests/qunit/index.html' );
+	execSync( 'node-qunit-phantomjs ./tests/qunit/index.html', { stdio: [ 0, 1, 2 ] } );
 } );
 
 gulp.task( 'phpunit', function() {

package.json

@@ -20,9 +20,6 @@
     "test:visualtest": "npm run build && start-server-and-test storybook http-get://localhost:9001 backstopjs",
     "test:visualapprove": "backstop approve --config=backstop.js",
     "test:analyze": "webpack -p --mode=production --env.analyze=true --json --progress --profile > /tmp/stats.json && cp ./dist/assets/js/*.js /tmp && webpack-bundle-analyzer /tmp/stats.json",
-    "travis:test": "npm run build && npm run travis:qunit && npm run travis:phpunit && npm run travis:visualtest",
-    "travis:qunit": "gulp qunit",
-    "travis:phpunit": "gulp phpunit",
     "travis:visualtest": "start-server-and-test storybook http-get://localhost:9001 travis:backstopjs",
     "storybook": "start-storybook -s ./dist -p 9001 -c .storybook",
     "backstopjs": "backstop test --config=backstop.js --docker",

tests/qunit/utils.js → tests/qunit/assets/js/util/index.js

@@ -21,7 +21,7 @@ googlesitekit.modules = {
 /**
  * Test showErrorNotification.
  */
-QUnit.test( 'showErrorNotification', function ( assert ) {
+QUnit.test( 'showErrorNotification!', function ( assert ) {
 	testFunctions.showErrorNotification();
 	var value = wp.hooks.applyFilters( 'googlesitekit.ErrorNotification', [] );
 	assert.equal( value.toString().replace( /(\r\n|\n|\r)/gm, '' ), 'function (r) {return React.createElement(e,a()({},r,t,{OriginalComponent:n}));}' );
@@ -261,7 +261,7 @@ var gtag = function( type, name, sendto, category, label, value ) {
 	};
 };
 
-var sendAnalyticsTrackingEventExpected = '{"type":"event","name":"name","sendto":{"event_category":"category","event_label":"label","event_value":"value"}}';
+var sendAnalyticsTrackingEventExpected = '{"type":"event","name":"name","sendto":{"event_category":"category","event_label":"label","event_value":"value","dimension1":"","dimension2":"true"}}';
 QUnit.test( 'sendAnalyticsTrackingEvent', function ( assert ) {
 	window.googlesitekit.admin.trackingOptin = true;
 	const value = JSON.stringify( testFunctions.sendAnalyticsTrackingEvent( 'category', 'name', 'label', 'value' ) );

tests/qunit/index.html

@@ -9,11 +9,22 @@
 	<script src='https://unpkg.com/[email protected]/lodash'></script>
 	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en,Intl.~locale.de"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
+	<script src='../../dist/assets/vendor/lodash.js'></script>
 	<script>
 		window.wp = {};
 		wp.hooks  = {};
 		window.lodash = _;
+		window.googlesitekit = {
+			initialized: true,
+			setup: {
+				isFirstAdmin: true
+			}
+		};
+		var lodash = _.noConflict();
 	</script>
+	<script src='../../dist/assets/vendor/react.development.js'></script>
+	<script src='../../dist/assets/vendor/react-dom.development.js'></script>
+	<script src='../../dist/assets/js/externals/element.js'></script>
 	<script src='../../dist/assets/js/externals/i18n.js'></script>
 	<script src='../../dist/assets/js/externals/url.js'></script>
 	<script src='../../dist/assets/js/externals/hooks.js'></script>
@@ -25,10 +36,8 @@
 	<div id="qunit-fixture"></div>
 	<script src="https://code.jquery.com/qunit/qunit-2.7.0.js"></script>
 
-
-
 	<!-- Include the test scripts -->
-	<script src='utils.js'></script>
+	<script src='assets/js/util/index.js'></script>
 </body>
 
 </html>