2014-12-01 17 views
12

Birim testlerimi çalıştırmak için gulp/gulp-jasmine/angular kullanıyorum. Benim Gulp hedefini çalıştırırken Ancak, aşağıdaki hatayla karşılaşırsanız: Yutkunuyorum-yasemin PhantomJS kullanır (hiçbir tarayıcı penceresi tetiklenir) imangulp-jasmine Pencere tanımlanmamış bir hata

C:\Projects\website2>gulp test 
[01:53:10] Using gulpfile C:\Projects\website2\gulpfile.js 
[01:53:10] Starting 'test'... 
[01:53:11] Version: webpack 1.4.13 
     Asset  Size Chunks    Chunk Names 
test.bundle.js 1051728  0 [emitted] test 
F 

Failures: 
1) Exception loading: C:\Projects\website2\scripts\dist\test.bundle.js Error 
1.1) ReferenceError: window is not defined 

1 spec, 1 failure 
Finished in 0.015 seconds 
[01:53:11] 'test' errored after 916 ms 
[01:53:11] Error in plugin 'gulp-jasmine' 
Message: 
    Tests failed 

. Birisi bana yanlış yaptığım şey konusunda yardımcı olabilir mi? Eksik olduğum bir yapılandırma ayarı var mı?

var gulp = require('gulp'); 
var path = require('path'); 
var webpack = require('gulp-webpack'); 
var webpackConfig = require('./webpack.config'); 
var testWebpackConfig = require('./test.webpack.config'); 
var jasmine = require('gulp-jasmine'); 

gulp.task('default', ['build'], function() { 

}); 

gulp.task('build', function() { 
    return gulp.src(['scripts/app/**/*.js', '!scripts/app/**/*.tests.js']) 
     .pipe(webpack(webpackConfig)) 
     .pipe(gulp.dest('scripts/dist')); 
}); 

gulp.task('test', function() { 
    return gulp.src(['scripts/app/**/*.tests.js']) 
     .pipe(webpack(testWebpackConfig)) 
     .pipe(gulp.dest('scripts/dist'))  
     .pipe(jasmine()); 
}); 
+0

o konuda bir gelişme var kullanılır? Bendede aynı sorun var. –

+0

"Pencere tanımlı değil" hatası, düzgün bir şekilde yüklenebilmesi için bir tarayıcı ve çalışma DOM'unun bağlamını gerektiren Açısal ile ilgili olduğundan şüpheleniyorum. yasemin sadece bir test çerçevesidir. DOM API (yani pencere) sağlayan bir tarayıcıya ihtiyacınız olduğunu düşünüyorum. PhantomJS'nin bunun için iyi çalıştığını gördüm. Cevabımı aşağıya bakın. – pixelbits

cevap

8

yudum-yasemin node.js aracılığıyla testleri çalıştırır ve böylece istemci tarafı test için uygun değildir, eğer istersen, istemci tarafı testleri için https://github.com/sindresorhus/gulp-jasmine/issues/46

bkz , bir SpecRunner.html dosyası yazabilir Yasemin (yerine Karma veya paralel olarak) kullanan (isim önemli değil) ve tarayıcınızda çalıştırmak:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Jasmine Spec Runner</title> 

    <!-- You need to specify package 'jasmine-core' in your Node.js package.json --> 

    <link rel="shortcut icon" href="node_modules/jasmine-core/images/jasmine_favicon.png"> 
    <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> 

    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> 
    <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script> 

    <!-- Source and Spec dependencies --> 
    <script src="node_modules/underscore/underscore.js"></script> 
    <script src="node_modules/angular/angular.js"></script> 
    <script src="node_modules/angular-mocks/angular-mocks.js"></script> 

    <!-- Source files --> 
    <script src="app/MySourceCode1.js"></script> 
    <script src="app/MySourceCode2.js"></script> 

    <!-- Spec files --> 
    <script src="test/MySourceCode1.spec.js"></script> 
    <script src="test/MySourceCode2.spec.js"></script> 
    </head> 
    <body> 
    </body> 
</html> 

veya kullanmak gulp-jasmine-browser:

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 

// You need to specify packages 'jasmine-core' and 'gulp-jasmine-browser' 
// in your Node.js package.json 

gulp.task('jasmine', function() { 
    return gulp.src([ 
    'node_modules/underscore/underscore.js', 
    'node_modules/angular/angular.js', 
    'node_modules/angular-mocks/angular-mocks.js', 

    'app/MySourceCode1.js', 
    'app/MySourceCode2.js', 
    'test/MySourceCode1.spec.js', 
    'test/MySourceCode2.spec.js', 
    ]) 
    .pipe($.jasmineBrowser.specRunner()) 
    .pipe($.jasmineBrowser.server()); 
}); 

Ya Karma :)

5

Ben başsız tarayıcı için PhantomJS kullanarak bu başka bir yol çözmeyi başardı, komut satırı testi koşucu için karma test çerçevesi için yasemin ve yutkunmak: Burada

benim gulpfile.js olduğunu Görev koşucusu için.

npm install angular 
npm install angular-mocks 
npm install -g gulp 
npm install gulp 
npm install karma 
npm install -g karma-cli 
npm install karma-jasmine 
npm install karma-junit-reporter 
npm install karma-chrome-launcher 
npm install karma-firefox-launcher 
npm install karma-phantomjs-launcher 
npm install phantomjs 

güncelleyin gulpfile.js ve iki görevi sağlar:: Varsayılan görev kez birim testler

module.exports = function(config) { 
    config.set({ 
     basePath: './', 

     files: [ 
      'node_modules/angular/angular.js', 
      'node_modules/angular-mocks/angular-mocks.js', 
      'index-controller.js', 
      'index-controller.tests.js' 
     ], 

     exclude: [ 
     ], 

     autoWatch: true, 

     frameworks: ['jasmine'], 

     browsers: ['PhantomJS'], 

     plugins: [ 
      'karma-jasmine', 
      'karma-junit-reporter', 
      'karma-chrome-launcher', 
      'karma-firefox-launcher', 
      'karma-phantomjs-launcher' 
     ], 

     junitReporter: { 
      outputFile: 'unit.xml', 
      suite: 'unit' 
     } 

    }) 
} 

gerekli npm modüllerini yükleyin karma.conf.js , dosya sistemini izlemek ve herhangi bir dosya değiştiğinde testleri çalıştırmak için bir TDD görevi:

gulp file.js

var gulp = require('gulp'); 
var karma = require('karma').server; 
gulp.task('default', function(done) { 
    karma.start({  
    configFile: __dirname + '/karma.conf.js', 
     singleRun: true 
    }, done); 

}); 

gulp.task('tdd', function (done) { 
    karma.start({ 
    configFile: __dirname + '/karma.conf.js' 
    }, done); 
}); 

tetiklemek için:

Bütünlüğü için
gulp default 
gulp tdd 

, burada indeks-kontrolör ve ilişkili testtir:

endeks-controller.js

var app = angular.module('app', []); 
app.controller('ctrl', function($scope) { 
    $scope.name = 'mickey mouse'; 
}); 

in Dex-controller.tests.js

describe('index-controller', function() { 
    beforeEach(module('app')); 
    var $controller; 

    beforeEach(inject(function(_$controller_){ 
     // The injector unwraps the underscores (_) from around the 
     // parameter names when matching 
     $controller = _$controller_; 
    })); 

    describe('$scope.name', function() { 
     it('should be mickey mouse', function() { 
      var $scope = {}; 
      var controller = $controller('ctrl', { $scope: $scope }); 

      expect($scope.name).toEqual('mickey mouse'); 
     }); 

    }); 
}); 
+0

Karma '' node_module'da 'karma'' başlatacak her şeyi gerektirir, bu yüzden 'node_modules/karma- *' seçeneğiniz yoksa config' eklenti 'bölümüne ihtiyacınız olmaz. . – LeeGee

İlgili konular