單元測試解決角度組件中的塊

有誰知道如何在路由組件中單元測試解析塊項目？如果有人可以在解析塊中測試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: { 
       '[email protected]': { 
        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()

來源

2017-07-16 mars

[Test Angular resolve method]的可能重複（https://stackoverflow.com/questions/37278543/test-angular-resolve-method） – estus

不測試你的框架。這意味着不要測試ui-router，這是衆所周知的正常工作。具體而言，我們知道它將調用已註冊的解析函數。

如果你想測試解析函數本身，它實際上很簡單。我們只需要使該功能可用於測試。我們實際上可以測試此功能，而無需啓動Web瀏覽器或做任何事情。

這是一個使用名爲藍色磁帶 *的測試庫*使用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路由器甚至AngularJS上它只是測試你在乎的是什麼，你的業務邏輯。

注意，這個測試本身有點任意。

*我在此使用藍色磁帶而不是磁帶，因爲它使得測試異步函數非常簡單，因爲它會自動處理任何返回thennable的函數。

來源

2017-07-17 06:31:32

單元測試解決角度組件中的塊

回答

相關問題