Question

有没有人知道如何对路由组件中的块项进行单元测试？如果任何人都可以在解决方案块中测试 courseDetails ，那就太棒了。

(function() {
    'use strict';

    angular
        .module('writingsolutionsComponents')
        .component('courseSettings', {
            bindings: {
                newCourseForm: '<',
                courseDetails: '<',
                timezones: '<',
                citations: '<',
                disciplines: '<'
            },
            templateUrl: 'course-settings/course-settings.html',
            controller: 'CourseSettingsController'
        })
        .config(stateConfig);

    stateConfig.$inject = ['$stateProvider'];

    function stateConfig($stateProvider, $urlRouterProvider) {
        $stateProvider.state('course-settings', {
            parent: 'app',
            url: '/:courseId/course-settings',
            data: {
                pageTitle: "Hello World"
            },
            views: {
                'content@': {
                    component: 'courseSettings'
                }
            },
            resolve: {
                courseDetails: function(CourseService, $stateParams) {
                    return CourseService.get($stateParams.courseId);
                },
                timezones: function(TimezoneService) {
                    return TimezoneService.getTimeZones();
                },
                citations: function(CitationService) {
                    return CitationService.getCitations();
                },
                disciplines: function(DisciplineService) {
                    return DisciplineService.getAllDisciplines();
                }


                }
            }
        });
    }
})();

我尝试过跟踪，但没有为我锻炼。

CourseServiceMock = {
    get: function () {
      return $q.resolve({courseId: "32432535",                                                        title: "Communication"});
    }
  };
  spyOn(CourseServiceMock , 'get').and.callThrough();

  expect(CourseServiceMock .get).toHaveBeenCalled()

Answer 1

不要测试您的框架。这意味着不测试 ui-router ，已知它可以正常工作。具体来说，我们知道它将调用已注册的解析函数。

如果你想测试解析函数本身，它实际上非常简单。我们只需要使该功能可用于测试。我们实际上可以在不启动Web浏览器或做任何花哨的事情的情况下测试此功能。

这是一个使用名为 blue-tape *的测试库来使用NodeJS运行测试的示例，如果必须的话，可以调整它以使用Jasmine。

// tests.js
const test = require("blue-tape");

test("courseDetails resolve retrieves the course based on route/:courseId", async t => {
  // arrange
  const courses = [{courseId: "32432535", title: "Communication"}];
  const mockCourseService = {
    get(id) {
      return Promise.resolve(courses.find(course => course.id === id));
    }
  };
  const mock$stateParams = {courseId: "32432535"};

  // act
  const result = await courseDetails(mockCourseService, mock$stateParams);

  // assert
  t.equal(result.courseId, courses[0].courseId);
});

要使其正常运行，请运行

npm install --save-dev blue-tape

然后运行

node test.js

好处是你的测试不依赖于 ui-router 甚至 AngularJS ，它只是测试你关心的事情，你的业务逻辑。

注意，这个测试本身有点武断。

*我在这里使用 blue-tape 而不是磁带，因为它可以非常简单地测试异步函数，因为它会自动处理任何返回thennable的函数。

单元测试解析Angular组件中的块

1 个答案: