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

Front-end testing framework

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();
+        });
+      });
+    });
+  });
+});