2016-12-22 15 views
6

Tôi nhận được lỗi sau khi thử nghiệm ứng dụng góc cạnh.Không thể tìm thấy góc biến trong spec.js Sử dụng Webpack + Karma + Jasmine để kiểm tra đơn vị AngularJS

Can't find variable: angular in spec/abc.spec.js 

Ứng dụng của tôi đang chạy tốt với webpack. Ngoài ra nghiệp chướng cho thành công trên

expect(true).toBe(true); 

Sau đây là bộ xương của tôi:

enter image description here

abc.ts

var angular = require('angular'); 
var angular_mocks = require('angular-mocks'); 
var specs = require('../spec/abc.spec.js'); 

var myApp = angular.module('myApp',[]); 

myApp.controller('MyController', function($scope) { 
    $scope.spices = [{"name":"pasilla", "spiciness":"mild"}, 
        {"name":"jalapeno", "spiciness":"hot hot hot!"}, 
        {"name":"habanero", "spiciness":"LAVA HOT!!"}]; 
    $scope.spice = "habanero"; 
}); 

abc.spec.js

describe('myController function', function() { 

describe('myController', function() { 
    var $scope; 

    beforeEach(angular.mock.module('myApp')); 

    beforeEach(inject(function ($rootScope, $controller) { 
     $scope = $rootScope.$new(); 
     $controller('MyController', {$scope: $scope}); 
    })); 

    it('should create "spices" model with 3 spices', function() { 
     expect($scope.spices.length).toBe(3); 
    }); 

    it('should set the default value of spice', function() { 
     expect($scope.spice).toBe('habanero'); 

    }); 

    it('should set the default value of spice', function() { 
     expect(angular).toBeDefined(); 

    }); 
}); 
}); 

nghiệp. config. js

// Karma configuration 
// Generated on Wed Dec 21 2016 19:28:26 GMT+0530 (India Standard Time) 

var webConfig = require('./karma.conf') 

module.exports = function(config) { 
config.set({ 

// base path that will be used to resolve all patterns (eg. files, exclude) 
basePath: '', 


// frameworks to use 
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter 
frameworks: ['jasmine'], 


// list of files/patterns to load in the browser 
files: [ 

    'spec/*.js' 
], 


// list of files to exclude 
exclude: [ 
'src/bundle.js' 
], 

webpack: webConfig, 

webpackMiddleware: { 
    stats: 'errors-only' 
}, 

// preprocess matching files before serving them to the browser 
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
preprocessors: { 
    'src/*.js': ['coverage', 'webpack'] 
}, 


// test results reporter to use 
// possible values: 'dots', 'progress' 
// available reporters: https://npmjs.org/browse/keyword/karma-reporter 
reporters: ['progress','coverage'], 


coverageReporter: { 
    type : 'html', 
    dir : 'coverage/' 
}, 


// web server port 
port: 9876, 


// enable/disable colors in the output (reporters and logs) 
colors: true, 


// level of logging 
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 
logLevel: config.LOG_INFO, 


// enable/disable watching file and executing tests whenever any file changes 
autoWatch: true, 


// start these browsers 
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 
browsers: ['PhantomJS'], 


// Continuous Integration mode 
// if true, Karma captures browsers, runs the tests and exits 
singleRun: false, 

// Concurrency level 
// how many browser should be started simultaneous 
concurrency: Infinity 
    }) 
} 

webpack.config.js

var webConfig = { 

entry: './src/abc', 
output:{ 
    path: 'src', 
    filename:'bundle.js' 
}, 

resolve: { 
    root: ['src', "node_modules"], 
    extensions: ['', '.ts', '.js'] 
}, 

modules: { 
    loaders: [ 
     { 
      test:/\.ts?$/, 
      loader:'ts-loader' 
     } 
    ] 
} 
} 

module.exports = webConfig; 

tsconfig.js

{ 
"compilerOptions": { 
"target": "es5", 
"module": "amd", 
"moduleResolution": "node", 
"removeComments": true, 
"preserveConstEnums": true, 
"sourceMap": true 
}, 
"exclude": [ 
    "typings", 
    "node_modules" 
    ] 
} 

LỖI:

C:\Users\namankheterpal\IdeaProjects\ngwk>karma start 

webpack: bundle is now VALID. 
22 12 2016 13:55:36.125:WARN [karma]: No captured browser, open http://localhost:9876/ 
22 12 2016 13:55:36.137:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 
22 12 2016 13:55:36.138:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 
22 12 2016 13:55:36.151:INFO [launcher]: Starting browser PhantomJS 
22 12 2016 13:55:37.906:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#GxGMuAyLHkfyOc9NAAAA with id 40162084 
PhantomJS 2.1.1 (Windows 8 0.0.0) myController function myController encountered a declaration exception FAILED 
    ReferenceError: Can't find variable: angular in spec/abc.spec.js (line 6) 
    spec/abc.spec.js:6:23 
    spec/abc.spec.js:3:11 
    global [email protected]/abc.spec.js:1:9 
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.006 secs/0.001 secs) 

Reffrence https://github.com/webpack/karma-webpack

Vui lòng cho tôi biết nếu tôi thiếu điều gì đó và nếu có bất kỳ thông tin nào khác được yêu cầu.

Xin cảm ơn trước.

Trả lời

0

Bao gồm thư viện góc của bạn và các tập tin nguồn của bạn tại

files: [ 
    'location/angular.min.js' 
'spec/*.js' 
], 

bạn phải thêm thư viện góc để thực hiện kiểm tra nghiệp và cũng file nguồn của bạn.

+0

Tôi đã thử nhưng không có trợ giúp. Tôi cũng đã bao gồm các tệp này trong abc.js, do đó được đóng gói bởi webpack tôi đoán. –

+0

bao gồm chúng riêng lẻ –

+0

Tôi đã thử bao gồm cả góc cạnh và mock-mocks ở đây nhưng không thể tìm thấy mã của tôi. Các tệp của tôi có dạng chữ. wespack ts-loader được sử dụng cho transpiling. lý do tại sao tôi đã sử dụng webpack-karma. Có cách nào để trực tiếp đưa các tệp .ts vào đây để nghiệp có thể thực thi chúng không. –

Các vấn đề liên quan