2017-11-27 4 views
0

私はjavascriptで新しく、自分のコードをテストしてTDDを実行できるようにしたいと考えています。jasmineでgulpを使って自分のクラスを実行

私はジャスミンをセットアップし、index.htmlでテストを実行することができました。それは良いことです。しかし、私はコマンドラインでそれを実行し、おそらくこれをエイビービルドのためのジェンキンに入れることができるだろう。

あなたがそれを行うことができるかどうか知っていますか?

私はより明確にするために私の例を示します:

のsrc/calculator.js

function Calculator() { 

    this.add = function(a,b) { 
    return a + b; 
    }; 

    this.multiply = function(a,b) { 
    return a * b; 
    }; 

    this.divide = function(a, b) { 
    return a/b; 
    }; 

}; 

テスト/仕様/ test.jsを

(function() { 
    'use strict'; 

    describe('CalculatorSuite', function() { 

    var calculator = new Calculator(); 

    describe('we will perform some operation', function() { 
     it('operation add', function() { 
     expect(calculator.add(5,5)).toBe(10); 
     }); 
    }); 

    describe('we will perform some operation', function() { 
     it('operation multiply', function() { 
     expect(calculator.multiply(5,5)).toBe(25); 
     }); 
    }); 

    describe('we will perform some operation', function() { 
     it('operation divide', function() { 
     expect(calculator.divide(5,5)).toBe(1); 
     }); 
    }); 


    }); 
})(); 

私が持っているしたいと思いますタスクgulp testと指定されたテストがうまくいくかどうかは、index.htmlを使用していないかどうかだけです。

言い換えれば..あなたがjqueryプラグインを持っているか、コードを使ってjavascriptクラスを持っていれば、それをテストする最良の方法は何ですか?事前に

おかげで、

答えて

1

は、あなたが望む結果を得るために、あなたはカルマのようなテストランナーを使用する必要があります。

nodejs、install nodejs 8(長期サポート版)が必要です。

次に、デフォルトを使用するためにnpm init -fのpackage.jsonファイルを初期化できます。

次に必要な依存関係をインストールします。カルマ、ジャスミン・コア、カルマ・ジャスミンなどを:

npm install gulp jasmine jasmine-core karma karma-chrome-launcher karma-jasmine --save-dev

あなたpackage.json次のようなものになります。私は2つを追加しました

{ 
    "name": "stackoverflow", 
    "version": "1.0.0", 
    "description": "", 
    "main": "calculator.js", 
    "scripts": { 
    "karma": "karma start", 
    "gulp": "gulp" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "gulp": "^3.9.1", 
    "jasmine": "^2.8.0", 
    "karma": "^1.7.1", 
    "karma-chrome-launcher": "^2.2.0", 
    "karma-jasmine": "^1.1.0", 
    "jasmine-core": "^2.8.0" 
    } 
} 

お知らせnpmで実行することができるサンプルスクリプトタスクは必要ですが、必要ないので、あなたが求めているようにgulpに焦点を当てましょう。

のでgulpfile.jsを作成し、カルマのタスクを追加します。

const gulp = require('gulp'); 
var karma = require('karma').Server; 

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

あなたはkarma.conf.jsファイルが必要です。私はそこにクロームのドライバを使用しています

module.exports = function(config) { 
    config.set({ 
    frameworks: ['jasmine'], 
    files: [ 
     'calculator.js', 
     'test.js' 
    ], 
    browsers: ['Chrome'], 
    port: 9876, 
    singleRun: true 
    }) 
}; 

お知らせ。別のブラウザを使用している場合は、そのドキュメントを確認してください。

あなたはそれがあなたのシステム上のグローバル、あなたのような出力が表示されます持っている場合は、gulp karmaを実行します。

> [email protected] karma D:\dev\stackoverflow\jasmine 
> karma start 

27 11 2017 14:58:32.317:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ 
27 11 2017 14:58:32.321:INFO [launcher]: Launching browser Chrome with unlimited concurrency 
27 11 2017 14:58:32.330:INFO [launcher]: Starting browser Chrome 
27 11 2017 14:58:33.045:INFO [Chrome 62.0.3202 (Windows 7 0.0.0)]: Connected on socket Yst3dx48_MFL7 
VudAAAA with id 50722983 
Chrome 62.0.3202 (Windows 7 0.0.0): Executed 3 of 3 SUCCESS (0.009 secs/0.003 secs) 

かそうでない場合は、私がpackage.jsonに追加scriptsのいずれかを使用してnpm run karmaを実行することができますお使いのシステムにグローバルにgulpがあります。

+0

あなたの精巧な答え@元に感謝します。ノードモジュールを持つ利点は何ですか?つまり、単純なjsをテストできるようにするには、それをノードモジュールに変更する必要がありますか?私がこのcalculator.jsを私のウェブサイト(古い学校)に追加したいのであれば、それらの行に影響を及ぼしているのでしょうか、それともノードや角を使ってそれを使う必要がありますか?私は簡単なjavascriptをテストすることができるメカニズムを見つけることができるようにしたい、jqueryまたはプレーンなjavascriptにすることができます。例えば、私は、wordpressプラグインのための簡単なソリューションをdevelpoと私はスクリプトやクラスを使用しています。あなたはそれをする最善の方法は何ですか? – eballo

+0

@eballoの場合は、ランナーとしてカルマを使用してください。正確にあなたが求めている私の更新された答えを参照してください。この場合、ファイルを変更する必要はありません。 – Juan

+0

今私はそれがもっと好きです!それから私は単純なjavascriptファイルをノードモジュールに変更する必要はありません。あなたの助けをありがとうJuan! – eballo

関連する問題