【问题标题】:Testing uiRouter with requirejs使用 requirejs 测试 uiRouter
【发布时间】:2016-09-06 06:41:33
【问题描述】:

我已经在这个问题上停留了一段时间,并且没有成功解决这里关于使用 requirejs 测试 uiRouter 的任何其他问题。我有一个相当基本的控制器设置,一旦单击按钮,它就会使用 $state.go 在状态之间进行转换。

runsController.js

define([],
function() {
"use strict"
var runsController = function($scope, $window, $http, $state) {

    function getRuns() {
        $http.get($window.apiLinks.runs).success(function(data) {
            $scope.runs = data.objects;
        }).error(function(data) {
            console.error();
            console.error(data);
        });
    }
    getRuns();

    $scope.refresh = getRuns;



    $scope.createRun = function() {
        //$state.go('createRun');
    }

    return ["$scope", "$window", "$http", "$state", runsController];
});

控制器被添加到依赖于 uiRouter 的应用中。

app.js

define(["angular", "js/controllers/runsController", "js/router", "uiRouter"],
function(angular, runsController, router) {
'use strict'

var appName = "myApp";
var app = angular.module(appName, ["ui.router"]);

app.config(router);

app.controller("runsController", runsController);


function getName() {
    return appName;
}

return {
    app : app,
    getName : getName
};

});

路由器.js

define(["./controllers/runsController"],
function(runsController){

var routes = function($stateProvider, $urlRouterProvider) {

    // For any unmatched url, redirect to /runs
    $urlRouterProvider.otherwise("/runs");

    // Set up the states
    $stateProvider
        .state('runs', {
            url: "/runs",
            templateUrl: "partials/runs.html",
            controller: "runsController"

        })
        .state('createRun', {
            url: "/createRun",
            templateUrl: "partials/runCreator.html"
        });
};


return ["$stateProvider", "$urlRouterProvider", routes];

});

这是我为此控制器设置的测试:

define(["angular", "angularMocks", "js/app", "js/controllers/runsController"],
function(angular, mocks, app, runsController) {
'use strict'
describe('runsController Unit Tests', function() {
    var mockApp, scope, httpBackend, objects, state;


    objects = [
        {rid : 1, filename : "myFile.txt", exitCode : 0},
        {rid : 2, filename : "test.zip", exitCode : 0},
        {rid : 3, filename : "test2.tar", exitCode : 0}
    ];

    beforeEach(function() {

        mockApp = angular.module(app.getName());
    });

    beforeEach(inject(function ($rootScope, $controller, $httpBackend, $http, $state) {
        scope = $rootScope.$new();
        window.apiLinks = {"runs" : "/mock/api/runs"};
        httpBackend = $httpBackend;
        state = $state;
        httpBackend.when("GET", "/mock/api/runs").respond({
            "objects"  : objects
        });
        $controller(runsController[4], {
            $scope : scope,
            $window : window,
            $http : $http,
            $state : $state
        });
        httpBackend.flush();
    }));

    it("Get state working in test environment", function() {

    });

    it("Test that controller automatically gets the runs", function() {
        // Because of the way our controller files are setup, we have to specify the
        // last element in the array instead of just
        expect(scope.runs.length).toBe(3);
    });


});

这目前给我一个错误消息:错误:[$injector:unpr] 未知提供者:$stateProvider

从我一直在阅读的内容来看,我相信这意味着我需要注入控制器运行状态所需的依赖项,但是如果我在每次运行测试之前使用该应用程序,那么依赖项应该在.config() 做对了吗?谁能帮我弄清楚我没有看到什么?

提前致谢!

【问题讨论】:

  • 我也遇到了同样的错误。这个问题解决了吗?
  • 有一种解决方法,您可以使用 where 而不是在控制器声明中使用 $state 作为参数,而是使用 $injector.get('$state').go('newState')并且您将不再收到测试错误。不过,我不想将其作为官方答案,因为我认为以这种方式调用 .go 不是一个好习惯
  • 我遇到了同样的问题,刚刚解决了。在下面发布答案。

标签: javascript angularjs requirejs jasmine angular-ui-router


【解决方案1】:

我遇到了同样的问题,这就是我想出的。

这很重要:

karma.conf.js

 {
    pattern: 'ROOT/TO/YOUR/angular-ui-router/release/angular-ui-router.js',
    included: false
  },

test-main.js :这是你的业力 - 要求 - 配置文件

 paths: {
    // External libraries
    'angular': '/base/PATH/TO/YOUR/angular/angular',
    'angularMocks': '/base/PATH/TO/YOUR/angular-mocks/angular-mocks',
    'uiRouter' : '/base/PATH/TO/YOUR/angular-ui-router/release/angular-ui-router',
.....
  • /base/ + 你的路径

做摇摆

 shim: {
    'angular': { 'exports': 'angular' },
    'angularMocks': { deps: ['angular'], 'exports': 'angular.mock' },
    'uiRouter' : {deps: ['angular'], 'exports' : 'uiRouter'},

现在我们进行了由内而外的测试。

定义模块

define([
 'angular',
 'angularMocks',
 'uiRouter',
 .....

现在当您设置 beforeEach

BeforeEach(inject(function ($injector){
  $state = $injector.get('$state');
  ....

希望对你有所帮助。

【讨论】:

    猜你喜欢
    • 2016-01-14
    • 2013-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-11
    • 2013-12-26
    • 2013-05-19
    • 2012-11-16
    相关资源
    最近更新 更多