Question

我已经跟随Codelab和yeoman的this教程。正确实施时，您使用本地存储来存储TodoList。我在设置我的测试时遇到问题，以测试它是否有效。这是我到目前为止所得到的：

'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);
  });

});

我得到的错误是

第12行col 68＆＃39; $ httpBackend＆＃39;已定义但从未使用过。 }）;

我如何编写单元测试来坐在本地存储中？

Answer 1

我认为目前这个想法有点嘲弄你的本地存储：

编写单元测试

对于额外的挑战，请重新审视步骤8中的单元测试并考虑   如何在代码使用本地时更新测试   存储

提示：这不是一个直截了当的答案而且涉及到了解   模拟服务。查看AngularJS中的单元测试最佳实践，   特别是AngularJS部分的模拟服务和模块。

自从提出这个问题以来，情况可能已经发生了变化。无论如何，这是我的解决方案：

'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']); 
  });
});

Answer 2

您的设置现在正确（从参数列表中删除$ httpBackend后）

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

此错误是一个简单的测试错误，这意味着您的代码在某处无法正常工作（您的第二次测试失败）

我自己会检查待机长度，而不是数学运算的结果。

我会把你的测试写成这样的测试：

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

你使用茉莉花作为测试工具。 jasmine准确地记录了期望失败的错误，所以你应该得到像

这样的东西

expect '1' to be '0'

从那里开始！

使用localStorage运行测试

2 个答案: