Merge pull request #2268 from coreos-inc/frontend-testing-framework

Front-end testing framework

.dockerignore

@@ -16,5 +16,7 @@ run-local.sh
 .tox
 htmlcov
 .coverage
+coverage
 .cache
+.npm-debug.log
 test/__pycache__

.gitignore

@@ -17,6 +17,8 @@ GIT_HEAD
 .python-version
 .pylintrc
 .coverage
+coverage
 htmlcov
 .tox
 .cache
+.npm-debug.log

Dockerfile

@@ -94,6 +94,10 @@ ADD static/js/directives/components static/dist/components
 RUN npm install -g webpack
 RUN webpack
 
+# Run front-end tests
+ADD karma.conf.js karma.conf.js
+RUN npm test
+
 # Install Grunt
 RUN npm install -g grunt-cli
 

endpoints/common.py

@@ -136,7 +136,7 @@ def random_string():
 def list_files(path, extension):
   import os
   def matches(f):
-    return os.path.splitext(f)[1] == '.' + extension
+    return os.path.splitext(f)[1] == '.' + extension and f.split(os.path.extsep)[1] != 'spec'
 
   def join_path(dp, f):
     # Remove the static/ prefix. It is added in the template.

karma.conf.js

@@ -0,0 +1,60 @@
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+    files: [
+      // CDN resources
+      'node_modules/jquery/dist/jquery.js',
+      'node_modules/angular/angular.js',
+      'node_modules/angular-animate/angular-animate.js',
+      'node_modules/angular-cookies/angular-cookies.js',
+      'node_modules/angular-mocks/angular-mocks.js',
+      'node_modules/angular-route/angular-route.js',
+      'node_modules/angular-sanitize/angular-sanitize.js',
+      'node_modules/moment/moment.js',
+      'node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
+      'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js',
+      'node_modules/bootbox/bootbox.js',
+      'node_modules/underscore/underscore.js',
+      'node_modules/restangular/dist/restangular.js',
+      'node_modules/d3/d3.js',
+      'node_modules/raven-js/dist/raven.js',
+      'node_modules/cal-heatmap/cal-heatmap.js',
+
+      // static/lib resources
+      'static/lib/**/*.js',
+
+      // Application resources
+      'static/js/**/*.js',
+
+      // Tests
+      'static/test/**/*.js',
+    ],
+    exclude: [
+      'static/js/build/bundle.js',
+    ],
+    preprocessors: {
+      'static/lib/ngReact/react.ngReact.min.js': ['webpack'],
+      'static/lib/angular-moment.min.js': ['webpack'],
+    },
+    webpack: {},
+    webpackMiddleware: {
+      stats: 'errors-only'
+    },
+    reporters: ['dots', 'coverage'],
+    coverageReporter: {
+      dir: 'coverage',
+      type: 'html'
+    },
+    client: {
+      captureConsole: true
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['PhantomJS', 'Chrome'],
+    singleRun: false,
+    concurrency: Infinity
+  });
+};

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
+    "test": "./node_modules/.bin/karma start --single-run --browsers PhantomJS",
     "build": "./node_modules/.bin/webpack --progress -p -v",
     "watch": "./node_modules/.bin/webpack --watch"
   },
@@ -16,20 +17,42 @@
     "@types/angular": "1.5.16",
     "@types/react": "0.14.39",
     "@types/react-dom": "0.14.17",
-    "angular": "1.5.8",
-    "moment": "2.16.0",
-    "ngreact": "0.3.0",
-    "react": "15.3.2",
-    "react-dom": "15.3.2",
-    "typescript": "2.0.3"
+    "angular": "1.5.3",
+    "angular-animate": "^1.5.3",
+    "angular-cookies": "^1.5.3",
+    "angular-route": "^1.5.3",
+    "angular-sanitize": "^1.5.3",
+    "bootbox": "^4.1.0",
+    "bootstrap": "^3.3.2",
+    "bootstrap-datepicker": "^1.6.4",
+    "cal-heatmap": "^3.3.10",
+    "d3": "^3.3.3",
+    "eonasdan-bootstrap-datetimepicker": "^4.17.43",
+    "jquery": "1.12.4",
+    "raven-js": "^3.1.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "restangular": "^1.2.0",
+    "underscore": "^1.5.2"
   },
   "devDependencies": {
+    "angular-mocks": "^1.5.3",
+    "jasmine-core": "^2.5.2",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^0.5.5",
+    "karma-es6-shim": "^1.0.0",
+    "karma-jasmine": "^0.3.8",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-webpack": "^1.8.1",
     "css-loader": "0.25.0",
     "node-sass": "3.10.1",
     "sass-loader": "4.0.2",
     "source-map-loader": "0.1.5",
     "style-loader": "0.13.1",
+    "phantomjs-prebuilt": "^2.1.7",
     "ts-loader": "0.9.5",
+    "typescript": "2.0.3",
     "typings": "1.4.0",
     "webpack": "1.13.3"
   }

static/js/angular-route-builder.js

@@ -1,38 +0,0 @@
-var AngularRouteBuilder = function(routeProvider, pages, profiles, currentProfile) {
-  this.routeProvider = routeProvider;
-  this.pages = pages;
-  this.profiles = profiles;
-
-  for (var i = 0; i < profiles.length; ++i) {
-    var current = profiles[i];
-    if (current.id == currentProfile) {
-      this.profiles = this.profiles.slice(i);
-      break;
-    }
-  }
-};
-
-AngularRouteBuilder.prototype.otherwise = function(options) {
-  this.routeProvider.otherwise(options);
-};
-
-AngularRouteBuilder.prototype.route = function(path, pagename) {
-  // Lookup the page, matching our lists of profiles.
-  var pair = this.pages.get(pagename, this.profiles);
-  if (!pair) {
-    throw Error('Unknown page: ' + pagename);
-  }
-
-  // Create the route.
-  var foundProfile = pair[0];
-  var page = pair[1];
-  var templateUrl = foundProfile.templatePath + page.templateName;
-
-  var options = jQuery.extend({}, page.flags || {});
-  options['templateUrl'] = templateUrl;
-  options['reloadOnSearch'] = false;
-  options['controller'] = page.controller;
-
-  this.routeProvider.when(path, options);
-  return this;
-};

static/js/app.js

@@ -90,7 +90,8 @@ quayApp.config(['$compileProvider', function ($compileProvider) {
 }]);
 
 // Configure the routes.
-quayApp.config(['$routeProvider', '$locationProvider', 'pages', function($routeProvider, $locationProvider, pages) {
+quayApp.config(['$routeProvider', '$locationProvider', 'pages', 'RouteBuilderProvider',
+  function($routeProvider, $locationProvider, pages, RouteBuilderProvider) {
   $locationProvider.html5Mode(true);
 
   // WARNING WARNING WARNING
@@ -101,7 +102,7 @@ quayApp.config(['$routeProvider', '$locationProvider', 'pages', function($routeP
   var layoutProfile = 'layout';
   window.console.log('Using layout profile: ' + layoutProfile);
 
-  var routeBuilder = new AngularRouteBuilder($routeProvider, pages, [
+  var routeBuilder = new RouteBuilderProvider.$get()($routeProvider, pages, [
     // Start with the old pages (if we asked for it).
     {id: 'old-layout', templatePath: '/static/partials/'},
 

static/js/route-builder/route-builder.js

@@ -0,0 +1,57 @@
+(function() {
+  'use strict';
+
+  angular
+    .module("quay")
+    .factory('RouteBuilder', factory);
+
+  factory.$inject = [
+
+  ];
+
+  function factory() {
+    function RouteBuilder(routeProvider, pages, profiles, currentProfile) {
+      this.routeProvider = routeProvider;
+      this.pages = pages;
+      this.profiles = profiles;
+
+      for (var i = 0; i < profiles.length; ++i) {
+        if (profiles[i].id == currentProfile) {
+          this.profiles = this.profiles.slice(i);
+          break;
+        }
+      }
+    }
+
+    RouteBuilder.prototype.otherwise = function(options) {
+      this.routeProvider.otherwise(options);
+    };
+
+    RouteBuilder.prototype.route = function(path, pagename) {
+      // Lookup the page, matching our lists of profiles.
+      var pair = this.pages.get(pagename, this.profiles);
+      if (!pair) {
+        throw Error('Unknown page: ' + pagename);
+      }
+
+      // Create the route.
+      var foundProfile = pair[0];
+      var page = pair[1];
+      var templateUrl = foundProfile.templatePath + page.templateName;
+
+      var options = jQuery.extend({}, page.flags || {});
+      options['templateUrl'] = templateUrl;
+      options['reloadOnSearch'] = false;
+      options['controller'] = page.controller;
+
+      this.routeProvider.when(path, options);
+
+      return this;
+    };
+
+    return function(routeProvider, pages, profiles, currentProfile) {
+      return new RouteBuilder(routeProvider, pages, profiles, currentProfile);
+    }
+  }
+
+})();

static/js/route-builder/route-builder.spec.js

@@ -0,0 +1,120 @@
+describe("Service: RouteBuilder", function() {
+  var RouteBuilder;
+  var routeProviderMock;
+  var pagesMock;
+  var profiles;
+  var currentProfile;
+
+  beforeEach(module('quay'));
+
+  beforeEach(inject(function($injector) {
+    profiles = [
+      {id: 'old-layout', templatePath: '/static/partials/'},
+      {id: 'layout', templatePath: '/static/partials/'}
+    ];
+    currentProfile = 'layout';
+    routeProviderMock = jasmine.createSpyObj('routeProvider', ['otherwise', 'when']);
+    pagesMock = jasmine.createSpyObj('pagesMock', ['get', 'create']);
+    RouteBuilder = $injector.get('RouteBuilder');
+  }));
+
+  describe("constructor", function() {
+
+    it("returns a RouteBuilder object", function() {
+      var routeBuilder = new RouteBuilder(routeProviderMock, pagesMock, profiles, currentProfile);
+
+      expect(routeBuilder).toBeDefined();
+    });
+
+    it("initializes dependencies", function() {
+      var routeBuilder = new RouteBuilder(routeProviderMock, pagesMock, profiles, currentProfile);
+
+      expect(routeBuilder.routeProvider).toEqual(routeProviderMock);
+      expect(routeBuilder.pages).toEqual(pagesMock);
+      expect(routeBuilder.profiles).toBeDefined();
+    });
+
+    it("sets 'profiles' to all given profiles if given current profile does not match any of the given profiles' id", function() {
+      var routeBuilder = new RouteBuilder(routeProviderMock, pagesMock, profiles, 'fake-profile');
+
+      expect(routeBuilder.profiles).toEqual(profiles);
+    });
+
+    it("sets 'profiles' to the first given profile with id matching given current profile", function() {
+      var routeBuilder = new RouteBuilder(routeProviderMock, pagesMock, profiles, currentProfile);
+
+      expect(routeBuilder.profiles).toEqual([profiles[1]]);
+    });
+  });
+
+  describe("otherwise", function() {
+    var routeBuilder;
+
+    beforeEach(function() {
+      routeBuilder = new RouteBuilder(routeProviderMock, pagesMock, profiles, currentProfile);
+    });
+
+    it("calls routeProvider to set fallback route with given options", function() {
+      var options = {1: "option"};
+      routeBuilder.otherwise(options);
+
+      expect(routeProviderMock.otherwise.calls.argsFor(0)[0]).toEqual(options);
+    });
+  });
+
+  describe("route", function() {
+    var routeBuilder;
+    var path;
+    var pagename;
+    var page;
+
+    beforeEach(function() {
+      path = '/repository/:namespace/:name';
+      pagename = 'repo-view';
+      page = {
+        templateName: 'repository.html',
+        reloadOnSearch: false,
+        controller: jasmine.createSpy('pageController'),
+        flags: {},
+      };
+      routeBuilder = new RouteBuilder(routeProviderMock, pagesMock, profiles, currentProfile);
+    });
+
+    it("calls pages with given pagename and 'profiles' to get matching page and profile pair", function() {
+      pagesMock.get.and.returnValue([profiles[1], page]);
+      routeBuilder.route(path, pagename);
+
+      expect(pagesMock.get.calls.argsFor(0)[0]).toEqual(pagename);
+      expect(pagesMock.get.calls.argsFor(0)[1]).toEqual(routeBuilder.profiles);
+    });
+
+    it("throws error if no matching page/profile pair found", function() {
+      pagesMock.get.and.returnValue();
+      try {
+        routeBuilder.route(path, pagename);
+        fail();
+      } catch (error) {
+        expect(error.message).toEqual('Unknown page: ' + pagename);
+      }
+    });
+
+    it("calls routeProvider to set route for given path and options", function() {
+      pagesMock.get.and.returnValue([profiles[1], page]);
+      var expectedOptions = {
+        templateUrl: profiles[1].templatePath + page.templateName,
+        reloadOnSearch: false,
+        controller: page.controller,
+      };
+      routeBuilder.route(path, pagename);
+
+      expect(routeProviderMock.when.calls.argsFor(0)[0]).toEqual(path);
+      expect(routeProviderMock.when.calls.argsFor(0)[1]).toEqual(expectedOptions);
+    });
+
+    it("returns itself (the RouteBuilder instance)", function() {
+      pagesMock.get.and.returnValue([profiles[1], page]);
+
+      expect(routeBuilder.route(path, pagename)).toEqual(routeBuilder);
+    });
+  });
+});

static/js/services/angular-view-array.js

@@ -1,91 +0,0 @@
-  /**
-   * Specialized wrapper around array which provides a toggle() method for viewing the contents of the
-   * array in a manner that is asynchronously filled in over a short time period. This prevents long
-   * pauses in the UI for ngRepeat's when the array is significant in size.
-   */
-angular.module('quay').factory('AngularViewArray', ['$interval', function($interval) {
-  var ADDTIONAL_COUNT = 20;
-
-  function _ViewArray() {
-    this.isVisible = false;
-    this.visibleEntries = null;
-    this.hasEntries = false;
-    this.entries = [];
-    this.hasHiddenEntries = false;
-
-    this.timerRef_ = null;
-    this.currentIndex_ = 0;
-  }
-
-  _ViewArray.prototype.length = function() {
-    return this.entries.length;
-  };
-
-  _ViewArray.prototype.get = function(index) {
-    return this.entries[index];
-  };
-
-  _ViewArray.prototype.push = function(elem) {
-    this.entries.push(elem);
-    this.hasEntries = true;
-
-    if (this.isVisible) {
-      this.startTimer_();
-    }
-  };
-
-  _ViewArray.prototype.toggle = function() {
-    this.setVisible(!this.isVisible);
-  };
-
-  _ViewArray.prototype.setVisible = function(newState) {
-    this.isVisible = newState;
-
-    this.visibleEntries = [];
-    this.currentIndex_ = 0;
-
-    if (newState) {
-      this.showAdditionalEntries_();
-      this.startTimer_();
-    } else {
-      this.stopTimer_();
-    }
-  };
-
-  _ViewArray.prototype.showAdditionalEntries_ = function() {
-    var i = 0;
-    for (i = this.currentIndex_; i < (this.currentIndex_ + ADDTIONAL_COUNT) && i < this.entries.length; ++i) {
-      this.visibleEntries.push(this.entries[i]);
-    }
-
-    this.currentIndex_ = i;
-    this.hasHiddenEntries = this.currentIndex_ < this.entries.length;
-    if (this.currentIndex_ >= this.entries.length) {
-      this.stopTimer_();
-    }
-  };
-
-  _ViewArray.prototype.startTimer_ = function() {
-    if (this.timerRef_) { return; }
-
-    var that = this;
-    this.timerRef_ = $interval(function() {
-      that.showAdditionalEntries_();
-    }, 10);
-  };
-
-  _ViewArray.prototype.stopTimer_ = function() {
-    if (this.timerRef_) {
-      $interval.cancel(this.timerRef_);
-      this.timerRef_ = null;
-    }
-  };
-
-  var service = {
-    'create': function() {
-      return new _ViewArray();
-    }
-  };
-
-  return service;
-}]);

static/js/services/angular-view-array/angular-view-array.js

@@ -0,0 +1,104 @@
+(function() {
+  'use strict';
+
+  /**
+   * Specialized wrapper around array which provides a toggle() method for viewing the contents of the
+   * array in a manner that is asynchronously filled in over a short time period. This prevents long
+   * pauses in the UI for ngRepeat's when the array is significant in size.
+   */
+  angular
+    .module('quay')
+    .factory('AngularViewArray', factory);
+
+  factory.$inject = [
+    '$interval'
+  ];
+
+  function factory($interval) {
+    var ADDTIONAL_COUNT = 20;
+
+    function _ViewArray() {
+      this.isVisible = false;
+      this.visibleEntries = null;
+      this.hasEntries = false;
+      this.entries = [];
+      this.hasHiddenEntries = false;
+
+      this.timerRef_ = null;
+      this.currentIndex_ = 0;
+    }
+
+    _ViewArray.prototype.length = function() {
+      return this.entries.length;
+    };
+
+    _ViewArray.prototype.get = function(index) {
+      return this.entries[index];
+    };
+
+    _ViewArray.prototype.push = function(elem) {
+      this.entries.push(elem);
+      this.hasEntries = true;
+
+      if (this.isVisible) {
+        this.startTimer_();
+      }
+    };
+
+    _ViewArray.prototype.toggle = function() {
+      this.setVisible(!this.isVisible);
+    };
+
+    _ViewArray.prototype.setVisible = function(newState) {
+      this.isVisible = newState;
+
+      this.visibleEntries = [];
+      this.currentIndex_ = 0;
+
+      if (newState) {
+        this.showAdditionalEntries_();
+        this.startTimer_();
+      } else {
+        this.stopTimer_();
+      }
+    };
+
+    _ViewArray.prototype.showAdditionalEntries_ = function() {
+      var i = 0;
+      for (i = this.currentIndex_; i < (this.currentIndex_ + ADDTIONAL_COUNT) && i < this.entries.length; ++i) {
+        this.visibleEntries.push(this.entries[i]);
+      }
+
+      this.currentIndex_ = i;
+      this.hasHiddenEntries = this.currentIndex_ < this.entries.length;
+      if (this.currentIndex_ >= this.entries.length) {
+        this.stopTimer_();
+      }
+    };
+
+    _ViewArray.prototype.startTimer_ = function() {
+      if (this.timerRef_) { return; }
+
+      var that = this;
+      this.timerRef_ = $interval(function() {
+        that.showAdditionalEntries_();
+      }, 10);
+    };
+
+    _ViewArray.prototype.stopTimer_ = function() {
+      if (this.timerRef_) {
+        $interval.cancel(this.timerRef_);
+        this.timerRef_ = null;
+      }
+    };
+
+    var service = {
+      'create': function() {
+        return new _ViewArray();
+      }
+    };
+
+    return service;
+  }
+
+})();

static/js/services/angular-view-array/angular-view-array.spec.js

@@ -0,0 +1,144 @@
+describe("Service: AngularViewArray", function() {
+  var angularViewArray;
+
+  beforeEach(module('quay'));
+
+  beforeEach(inject(function($injector) {
+    angularViewArray = $injector.get('AngularViewArray');
+  }));
+
+  describe("create", function() {
+
+    it("returns a ViewArray object", function() {
+      var viewArray = angularViewArray.create();
+
+      expect(viewArray).toBeDefined();
+    });
+
+    describe("returned ViewArray object", function() {
+      var viewArray;
+
+      beforeEach(function() {
+        viewArray = angularViewArray.create();
+      });
+
+      describe("constructor", function() {
+        // TODO
+      });
+
+      describe("length", function() {
+
+        it("returns the number of entries", function() {
+          viewArray.entries = [{}, {}, {}];
+
+          expect(viewArray.length()).toEqual(viewArray.entries.length);
+        });
+      });
+
+      describe("get", function() {
+
+        it("returns the entry at a given index", function() {
+          var index = 8;
+          viewArray.entries = new Array(10);
+          viewArray.entries[index] = 3;
+
+          expect(viewArray.get(index)).toEqual(viewArray.entries[index]);
+        });
+      });
+
+      describe("push", function() {
+
+        it("adds given element to the end of entries", function() {
+          var element = 3;
+          var originalLength = viewArray.length();
+          viewArray.push(element);
+
+          expect(viewArray.entries.length).toEqual(originalLength + 1);
+          expect(viewArray.get(originalLength)).toEqual(element);
+        });
+
+        it("sets 'hasEntries' to true", function() {
+          viewArray.push(2);
+
+          expect(viewArray.hasEntries).toBe(true);
+        });
+
+        it("starts timer if 'isVisible' is true", function() {
+          spyOn(viewArray, "startTimer_").and.returnValue();
+          viewArray.isVisible = true;
+          viewArray.push(2);
+
+          expect(viewArray.startTimer_).toHaveBeenCalled();
+        });
+
+        it("does not start timer if 'isVisible' is false", function() {
+          spyOn(viewArray, "startTimer_").and.returnValue();
+          viewArray.isVisible = false;
+          viewArray.push(2);
+
+          expect(viewArray.startTimer_).not.toHaveBeenCalled();
+        });
+      });
+
+      describe("toggle", function() {
+
+        it("sets 'isVisible' to false if currently true", function() {
+          viewArray.isVisible = true;
+          viewArray.toggle();
+
+          expect(viewArray.isVisible).toBe(false);
+        });
+
+        it("sets 'isVisible' to true if currently false", function() {
+          viewArray.isVisible = false;
+          viewArray.toggle();
+
+          expect(viewArray.isVisible).toBe(true);
+        });
+      });
+
+      describe("setVisible", function() {
+
+        it("sets 'isVisible' to false if given false", function() {
+          viewArray.setVisible(false);
+
+          expect(viewArray.isVisible).toBe(false);
+        });
+
+        it("sets 'visibleEntries' to empty array if given false", function() {
+          viewArray.setVisible(false);
+
+          expect(viewArray.visibleEntries.length).toEqual(0);
+        });
+
+        it("shows additional entries if given true", function() {
+          spyOn(viewArray, "showAdditionalEntries_").and.returnValue();
+          viewArray.setVisible(true);
+
+          expect(viewArray.showAdditionalEntries_).toHaveBeenCalled();
+        });
+
+        it("does not show additional entries if given false", function() {
+          spyOn(viewArray, "showAdditionalEntries_").and.returnValue();
+          viewArray.setVisible(false);
+
+          expect(viewArray.showAdditionalEntries_).not.toHaveBeenCalled();
+        });
+
+        it("starts timer if given true", function() {
+          spyOn(viewArray, "startTimer_").and.returnValue();
+          viewArray.setVisible(true);
+
+          expect(viewArray.startTimer_).toHaveBeenCalled();
+        });
+
+        it("stops timer if given false", function() {
+          spyOn(viewArray, "stopTimer_").and.returnValue();
+          viewArray.setVisible(true);
+
+          expect(viewArray.stopTimer_).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

static/test/shims/window.shim.js

@@ -0,0 +1,30 @@
+// Add properties to window object used by 'app.js' to avoid test errors
+
+window.__config = {
+  'SERVER_HOSTNAME': "",
+  'PREFERRED_URL_SCHEME': "",
+};
+window.__features = {};
+window.__oauth = {
+  'GITHUB_TRIGGER_CONFIG': {
+    'CLIENT_ID': "",
+    'GITHUB_ENDPOINT': "",
+    'AUTHORIZE_ENDPOINT': "",
+  },
+  'GITLAB_TRIGGER_CONFIG': {
+    'CLIENT_ID': "",
+    'GITLAB_ENDPOINT': "",
+    'AUTHORIZE_ENDPOINT': "",
+  }
+};
+window.__endpoints = {
+  "/api/v1/user/": {
+    "get": {
+      "operationId": "getLoggedInUser",
+      "parameters": []
+    },
+    "x-name": "endpoints.api.user.User",
+    "x-path": "/api/v1/user/",
+    "x-tag": "user"
+  },
+};