YeoMan(2)TODO Demo - Karma - Local Storage - Deployment

YeoMan(2)TODO Demo - Karma - Local Storage - Deployment

1. Karma Test
Karma is a frameworks, consist of ngScenario and Jasmine.

Run the command to execute the test
>grunt test

Error Messages:
PhantomJS 1.9.7 (Mac OS X) ERROR   ReferenceError: Can't find variable: jQuery   at /Users/carl/work/winner/winner-seller-console/mytodo/app/bower_components/jquery-ui/ui/jquery-ui.js:315

Solution:
Compare and check the Jquery file in karma.conf.js with the bower components directories, change the configuration as follow:
'app/bower_components/jquery/dist/jquery.js',

Js file to verify the about page, about.js
'use strict';
describe('Controller: AboutCtrl', function () {
  // load the controller's module
  beforeEach(module('mytodoApp'));
  var AboutCtrl,
    scope;
  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    AboutCtrl = $controller('AboutCtrl', {
      $scope: scope
    });
  }));
  it('should attach a list of awesomeThings to the scope', function () {
    expect(scope.awesomeThings.length).toBe(3);
  });
});

The bugList page test class main.js
'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('mytodoApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });
  }));

  it('should have no items to start', function () {
      expect(scope.todos.length).toBe(0);
  });

  it('should add items to the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    expect(scope.todos.length).toBe(1);
  });

it('should add items to the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    scope.removeTodo(0);
    expect(scope.todos.length).toBe(0);
  });
});

2. Persistent with Local Storage
>bower install --save angular-local-storage

Run the command grunt serve. We will have the angular-local-storage dependency on index.html.

Add the Local Storage Module in app.js
angular
  .module('mytodoApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.sortable',
    'LocalStorageModule'
  ])
  .config(['localStorageServiceProvider', function(localStorageServiceProvider){
    localStorageServiceProvider.setPrefix('buglist');
  }])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
…snip….
}

Change the Main Controller as follow:
angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope, localStorageService) {
    var todosInStore = localStorageService.get('todos');
    $scope.todos = todosInStore && todosInStore.split('\n') || [];

    $scope.$watch('todos', function () {
      localStorageService.add('todos', $scope.todos.join('\n'));
    }, true);

    $scope.addTodo = function () {
         $scope.todos.push($scope.todo);
           $scope.todo = '';
    };
    $scope.removeTodo = function (index) {
            $scope.todos.splice(index, 1); //remove 1 ele begin from index
     };
  });

Then Open the tool on chrome — [Resources] ——[Local Storage] ——> Key Value

3. Deploy to Production
Release everything to dist directory
>grunt

Preview release
>grunt serve:dist

I have some Error Message if I access the page from FireFox.

Error Message:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=app&p1=Error%3A%20%…0(http%3A%2F%2Flocalhost%3A9000%2Fscripts%2Fd3a6bda4.vendor.js%3A1%3A11551) d3a6bda4.vendor.js:1

Solution:
http://stackoverflow.com/questions/20089960/angularjs-1-2-1-injectormodulerr-after-minifying-yet-it-runs-well-before-mini

The problem should bring in by task uglifyjs. So I change the configuration Gruntfile.js
    useminPrepare: {
      html: '<%= yeoman.app %>/index.html',
      options: {
        dest: '<%= yeoman.dist %>',
        flow: {
          html: {
            steps: {
              //js: ['concat', 'uglifyjs'],
              js: ['concat'],
              css: ['cssmin']
            },
            post: {}
          }
        }
      }
    },

  grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    //'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

It works.

I redo all the steps, because that I change one machine and reinstall all the software.

References:
http://yeoman.io/codelab/write-unit-tests.html
http://yeoman.io/codelab/local-storage.html