navigator.webkitGetUserMedia 用 Karma/Jasmine 打破 unitTests答案

【问题标题】：navigator.webkitGetUserMedia breaks unitTests with Karma/Jasminenavigator.webkitGetUserMedia 用 Karma/Jasmine 打破 unitTests
【发布时间】：2015-07-07 07:04:50
【问题描述】：

我有一个 AngularJS WebApp，我用 Karma 和 Jasmine.js 对其进行了测试

但如果我在控制器中使用 navigator.webkitGetUserMedia() 会引发错误。

TypeError: 'undefined' 不是函数（评估 'navigator.webkitGetUserMedia'）

这是我的控制器的示例

app.controller('appCtrl', function ($scope, $interval, $location, globVal, loginService) {

        
        navigator.webkitGetUserMedia({video: true, audio: false},
        function (stream) {
            globVal.webcam = window.URL.createObjectURL(stream);
        },
                function (err) {
                    console.log("error happened:" + err);
                }
        );

        
        $scope.startTimeout = $interval(function () {
            // do something
        }, 2000);


    });

我的测试规范

'use strict';

describe("控制器：appCtrl", function () { 变量 $rootScope, $范围，控制器，全局值，位置；

beforeEach(function () {
    module('myModul');

    globVal = {
        customer: {why: 'idle'},
        goHome: 1,
        goHomeCounter:1
    };

    module(function ($provide) {
        $provide.value('globVal', globVal);
    });
    
    inject(function ($injector, $location) {
        $rootScope = $injector.get('$rootScope');
        $scope = $rootScope.$new();
        controller = $injector.get('$controller')("appCtrl", {$scope: $scope});
        location = $location;
    });
}); 

describe("init", function () {

    it('Should init', function () {
        expect($scope).toBeDefined();
    });

});

describe("globVal idle", function () {

    it('should globVal be idle', function () {
        expect(globVal.customer.why).toBe('idle');
    });

});

describe("startTimeout", function () {
    
    it('Should have method startTimeout ', function () {
        expect($scope.startTimeout).toBeDefined();
    });

});

我应该如何模拟导航器对象？

【问题讨论】：

标签： angularjs unit-testing karma-jasmine

【解决方案1】：

问题可能是您的 karma.conf.js 中没有使用协议“https:”

在添加以下几行之前，我遇到了完全相同的问题（当然还有正确的证书）。

  config.set({
    protocol: 'https:',
    httpsServerOptions: {
      key: fs.readFileSync('server.key', 'utf8'),
      cert: fs.readFileSync('server.crt', 'utf8')
    },

【讨论】：

【解决方案2】：

您可以在 beforeEach 或 it("should ...") 函数中注入 $window 并替换 $window 中的整个导航器对象。

像这样：

it("should ... when running in an obscure environment", inject(function ($window) {
  $window.navigator = {
    userAgent: 'Mozilla/5.0 (NodeJS; Karma 0.0.0) (Cucumber/0.0 like virtualisation) Fantasy/0.0',
    appVersion: '5.0 (NodeJS; Karma 0.0.0) (Cucumber/0.0 like virtualisation) Fantasy/0.0',
    platform: 'nodeKarma'
  };

  scope.$digest();
  .......
}));

确保包含足够多的属性！

【讨论】：

【解决方案3】：

使用spyOn(navigator, 'webkitGetUserMedia'); 如果这不起作用，只需创建自己的 webkitGetUserMedia 函数作为测试规范中导航器对象的一部分。

【讨论】：

谢谢。我的解决方案： navigator.webkitGetUserMedia = function(a,b,c){ var foo = { a:a, b:b, c:c }; };
酷，你仍然可以使用 spyOn() 然后做一个断言，如 expect(navigator.webkitGetUserMedia).toHaveBeenCalled();