Running tests with localStorage

问题

i have followed this tutorial from Codelab and yeoman. When implemented right you are using local storage to store the TodoList. I have problems with setting up with my tests, to test if this works. This is what i've got so far:

'use strict';

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

  // load the controller's module
  beforeEach(module('yeoTodoApp'), module('LocalStorageModule'));

  var MainCtrl,
    scope;

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

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

});

The error i get is

line 12 col 68 '$httpBackend' is defined but never used. });

How would i write my unit tests to sit the local storage?

回答1:

your setup is correct now (after you removed $httpBackend from the arguments list)

Controller: MainCtrl should add items to the list then remove FAILED

this error is a simple test error, which means that your code somewhere doesnt work as expected (your second test fails)

i for myself would check todos length, and not the result of a mathematical operation.

i would write your tests the test like this:

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

you use jasmine as a test-tool. jasmine logs on errors exactly which expectation fails, so you should get something like

expect '1' to be '0'

go from there!

回答2:

I think at the moment the idea is kind of mocking your local storage:

Write unit tests

For an extra challenge, revisit unit testing in Step 8 and consider how you might update your tests now that the code is using local storage.

Tip: It's not a straight forward answer and involves knowing about mock services. Check out Unit Testing Best Practices in AngularJS, specifically the Mocking Services and Modules in AngularJS section.

Things may have changed since this question was asked. Anyhow, here is my solution:

'use strict';

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

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

  var MainCtrl,
    scope,
    localStorage, store;

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

    MainCtrl = $controller('MainCtrl', {
      $scope:scope
      // place here mocked dependencies
    });

    /*mock the localStorageService*/
    store={};

    localStorage = {
      set: function(key, value) {
        store[key] = value;
      },
      get: function(key) {
        return store[key];
      }
    };

  }));

  it('should check the list length', function () {
    expect(MainCtrl.todos.length).toBe(0);
  });

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

  it('should add then remove an item from the list', function () {
    MainCtrl.todoadded = 'Test 2';
    MainCtrl.addTodo();
    MainCtrl.removeTodo(0);
    expect(MainCtrl.todos.length).toBe(0);
  });

  it('should check that the localstorage is undefined before being set', function() {
    var a=localStorage.get('todos');
    expect(a).toBeUndefined();
  });

  it('should set and get the localstorage', function() {
    localStorage.set('todos', ['Test 3']);
    var a=localStorage.get('todos');
    expect(a).toEqual(['Test 3']);

    localStorage.set('todos', ['Test 4']);
    var b=localStorage.get('todos');
    expect(b).toEqual(['Test 4']); 
  });
});

来源：https://stackoverflow.com/questions/24337046/running-tests-with-localstorage