CI、headless Browser、mochaを使用してフロントエンドコードをテスト

CIとは
CIは持続的統合サービス(Continuous Integration、略称CI)を提供している.継続的な統合とは、コードに変更があれば、構築とテストを自動的に実行し、実行結果をフィードバックすることです.
headless Browserとは
headless Browser中国語翻訳、ヘッドレスブラウザ.コマンドウィンドウで実行できるインタフェースのないブラウザです.
mochaとは
☕️ Simple, flexible, fun JavaScript test framework for Node.js & The Browser ☕️
ブラウザおよびnodejs環境で実行できるフロントエンドテストフレームワーク
なぜテストコードを書くのか
反復需要に対して,我々人間が作成したコードは,現在のイベントノードでの正確性,イベントの推移,コードの変動,および人為的な関係を保証するしかない.以前の論理が以前の要求に完全に合致することを保証することはできません.この場合、テストコードを作成して機能点をテストする必要があります.テストは使い捨てではなく、 です.
オープンソースフレームワークにとって、テストのカバー面積はフレームワークの信頼性をより表している.自動化テストを使用して、貢献者が提出したPRをよりよく制約することもできます.
mochaを使用してコードのテストを開始します
まず、add.jsを作成し始めます.addの値を取得したいのはa+bです.

function return(a,b){
    reutnr a+b
}
    

はい、今この方法をテストすることができます.Numberをテストするために追加します(なぜhtmlを追加するのか、一部のjsはブラウザでしか実行できないため、コードがnodeでテストできる場合は、ヘッドレスブラウザで直接nodeテストを使用する必要はありません).

    
    
    
    
    










mocha.setup('bdd');



  mocha.run();

编写 test.js

chai.expect是一个chai.js的断言方法，如果出现问题，则会抛出一个异常 文档地址 http://www.chaijs.com/

describe 是mocha的测试取款，每一个it都会执行一个测试用例

var expect = chai.expect;

describe('ADD.JS TEST', function() {
  it('add(1,1)', function() {
    expect(add(1,1)).to.equal(2)
  });
})

index.htmlを直接実行して効果を確認することができます.もちろんhttpサーバを開くことができます.index.htmlを使用してhttp-serverサービスを迅速に開くことができます.
ブラウザで実行すると、テストに合格したことを示すプロンプトが表示されます.
より多くのテスト・インスタンスを追加する場合は、より多くのテスト・コードを追加し続けます.
次のhttpの作成を継続している間に、Webページを開いてコードテストを実行し、表示したくないことは明らかです.
この時、add.jsがボクシングを始めます.headlessを使用して、mocha-chromeテストケースをコマンドラインで直接実行します.mochaは、コマンドラインでmocha-chromeページをテストできるフレームワークである.テスト結果をコンソールに表示できます.

npm init 
...
npm i mocha-chrome --save-dev

修正mocha増加

  "scripts":{
    "test": "mocha-chrome ./test-some/index.html"
  }

呼び出しコマンド

npm test

正しいプロンプトがコンソールに表示されます
プロジェクトアドレスhttps://github.com/channg/ci-...
このとき、プロジェクトをテストするときにブラウザを開いてコードが検証に合格したかどうかをチェックする必要はありません.package.jsonを入力すればコンソールで効果が見られるので、楽になりますか.
続行
テスト例が長すぎたり、時間がかかりすぎたり、他の前置操作が必要になったり、複数のバージョン、複数のシステムの互換性をテストする必要があります.私たちはどうすればいいですか.明らかに、npm testを使用します.
したがって、ローカルでテストするたびに、CIを使用するつもりはありません.travis ciについてはチェン一峰の博文を読むことができます.
プロジェクトルートディレクトリに作成されたtravos ciの内容は次のとおりです.

sudo: required
language: node_js
node_js:
  - "8"
  - "9"

.travis.ymlでtravos ciボタンを開いたとき.プロジェクトのコミットのたびにrepository you want to buildの構築がトリガーされます.
またgithubの小さなアイコンを生成してプロジェクトのciに置くことができます.例えば、これはクールではありません.
この小さなバッジをクリックすると、私のプロジェクトがreadmeで構築されたプロセスを見ることができます.
travis ciのドキュメントを表示し、より多くの資料を取得します.https://docs.travis-ci.com/
の最後の部分
基本的なテスト方法はすでにマスターして、今もっと理解することができて、もし問題があれば、私のプロジェクトを見て比較することができますhttps://github.com/channg/ci-...
その他のリソース

https://docs.travis-ci.com/

http://www.chaijs.com/

https://mochajs.org/

https://github.com/shellscape...