Bug 1242905 - Use ngreact-test-utils for ngreact tests

Introduces the ngreact-test-utils npm package to supply reusable
compile() and simulate() functions for testing ngreact components. This
requires browserify, which is now applied to tests in
tests/ui/unit/react only.

package.json

@@ -25,17 +25,23 @@
     "load-grunt-tasks": "3.5.2"
   },
   "devDependencies": {
+    "browserify": "^13.1.1",
     "eslint": "3.8.0",
     "grunt-eslint": "19.0.0",
     "grunt-html-angular-validate": "0.5.8",
     "jasmine-core": "2.5.2",
     "karma": "1.3.0",
+    "karma-browserify": "^5.1.0",
     "karma-coverage": "1.1.1",
     "karma-firefox-launcher": "1.0.0",
     "karma-jasmine": "1.0.2",
     "karma-junit-reporter": "1.0.0",
     "karma-ng-scenario": "0.1.0",
-    "minimist": "1.2.0"
+    "minimist": "1.2.0",
+    "ngreact-test-utils": "^1.0.3",
+    "react": "^15.3.1",
+    "react-dom": "^15.4.1",
+    "watchify": "^3.8.0"
   },
   "scripts": {
     "test": "karma start tests/ui/config/karma.conf.js --single-run --browsers Firefox"

tests/ui/config/karma.conf.js

@@ -6,7 +6,7 @@
 
 module.exports = function (config) {
     config.set({
-        frameworks: ['jasmine'],
+        frameworks: ['jasmine', 'browserify'],
 
         basePath: '../../../',
 
@@ -57,7 +57,12 @@ module.exports = function (config) {
 
         reporters: ['progress', 'coverage'],
         preprocessors: {
-            'ui/js/**/*.js': ['coverage']
+            'ui/js/**/*.js': ['coverage'],
+            'tests/ui/unit/react/**/*.js': ['browserify']
+        },
+
+        browserify: {
+          debug: true
         }
     });
 };

tests/ui/unit/react/revisionSpec.js

@@ -1,14 +1,15 @@
 'use strict';
+var compile = require('ngreact-test-utils').compile;
 
 describe('Revision list react component', () => {
     var $filter;
-    var compile, mockData;
+    var mockData;
-    beforeEach(module('treeherder'));
+    beforeEach(angular.mock.module('treeherder'));
-    beforeEach(module('react'));
+    beforeEach(angular.mock.module('react'));
     beforeEach(inject((_$filter_) => {
         $filter = _$filter_;
     }));
-    beforeEach(inject(() => {
+    beforeEach(() => {
         var resultset = {
             "id": 151371,
             "revision_hash": "0056da58e1efd70711c8f98336eaf866f1aa8936",
@@ -61,28 +62,17 @@ describe('Revision list react component', () => {
             resultset,
             repo
         };
-    }));
+    });
-
-    beforeEach(inject(($rootScope, $timeout, $compile) => {
-        compile = function(el, scope) {
-            var $scope = $rootScope.$new();
-            $scope = _.extend($scope, scope);
-            var compiledEl = $compile(el)($scope);
-            $timeout.flush();
-            $scope.$digest();
-            return compiledEl;
-        };
-    }));
 
     it('renders the correct number of revisions in a list', () => {
         var component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        var revisionItems = component[0].querySelectorAll('li');
+        var revisionItems = component.el[0].querySelectorAll('li');
         expect(revisionItems.length).toEqual(mockData['resultset']['revision_count']);
     });
 
     it('renders the linked revision hashes', () => {
         var component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        var links = component[0].querySelectorAll('.revision-holder a');
+        var links = component.el[0].querySelectorAll('.revision-holder a');
         expect(links.length).toEqual(mockData['resultset']['revision_count']);
         Array.prototype.forEach.call(links, (link, i) => {
             expect(link.href).toEqual(mockData.repo.getRevisionHref());
@@ -92,7 +82,7 @@ describe('Revision list react component', () => {
 
     it('renders the contributors\' initials', () => {
         var component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        var initials = component[0].querySelectorAll('.label.label-initials');
+        var initials = component.el[0].querySelectorAll('.label.label-initials');
         expect(initials.length).toEqual(mockData.resultset.revision_count);
         Array.prototype.forEach.call(initials, (initial, i) => {
             var revisionData = mockData.resultset.revisions[i];
@@ -112,7 +102,7 @@ describe('Revision list react component', () => {
         mockData.resultset.revision_count = 21;
 
         var component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        var revisionItems = component[0].querySelectorAll('li');
+        var revisionItems = component.el[0].querySelectorAll('li');
         expect(revisionItems.length).toEqual(mockData.resultset.revisions.length + 1);
 
         var lastItem = revisionItems[revisionItems.length - 1];
@@ -125,7 +115,7 @@ describe('Revision list react component', () => {
         var linkifiedCommentText = $filter('linkifyBugs')(escapedComment);
 
         var component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        var commentEm = component[0].querySelector('.revision-comment em');
+        var commentEm = component.el[0].querySelector('.revision-comment em');
         expect(commentEm.innerHTML).toEqual(linkifiedCommentText);
 
     });
@@ -135,12 +125,12 @@ describe('Revision list react component', () => {
         mockData.resultset.revisions[0].comments = "Backed out changeset a6e2d96c1274 (bug 1322565) for eslint failure";
 
         component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        firstRevision = component[0].querySelector('li .revision');
+        firstRevision = component.el[0].querySelector('li .revision');
         expect(firstRevision.getAttribute('data-tags').indexOf('backout')).not.toEqual(-1);
 
         mockData.resultset.revisions[0].comments = "Back out changeset a6e2d96c1274 (bug 1322565) for eslint failure";
         component = compile('<revisions repo="repo" resultset="resultset" />', mockData);
-        firstRevision = component[0].querySelector('li .revision');
+        firstRevision = component.el[0].querySelector('li .revision');
         expect(firstRevision.getAttribute('data-tags').indexOf('backout')).not.toEqual(-1);
     });