カテゴリー
Linux

『Vue.js入門 基礎から実践アプリケーション開発まで』 10.2 コンポーネントの実装 に取り掛かる前に実行した npm run unit の結果がわからない

『Vue.js入門 基礎から実践アプリケーション開発まで』 10.2 コンポーネントの実装 に取り掛かる前に実行した npm run unit の結果

わからない

  • このまま進めていってよいのか、わからない
  • レポートの読み方が、わからない 

ユニットテストの実行と結果

次のようになりました。

構文エラーは無いようですが、 テストを 1 つも実行していないのでエラーとなっています。

root@496b66ee2aa3:/app/kandan-app# npm run unit

> kandan-app@1.0.0 unit /app/kandan-app
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

26 12 2018 23:17:26.066:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
26 12 2018 23:17:26.072:INFO [launcher]: Launching browser ChromeHeadlessNoSandbox with unlimited concurrency
26 12 2018 23:17:26.135:INFO [launcher]: Starting browser ChromeHeadless
26 12 2018 23:17:26.616:INFO [HeadlessChrome 71.0.3578 (Linux 0.0.0)]: Connected on socket K1onS_4J4vGiAfWcAAAA with id 47413904

HeadlessChrome 71.0.3578 (Linux 0.0.0): Executed 0 of 0 ERROR (0.01 secs / 0 secs)


=============================== Coverage summary ===============================
Statements   : 40% ( 8/20 )
Branches     : 100% ( 0/0 )
Functions    : 0% ( 0/6 )
Lines        : 40% ( 8/20 )
================================================================================
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! kandan-app@1.0.0 unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the kandan-app@1.0.0 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-26T23_17_27_373Z-debug.log
root@496b66ee2aa3:/app/kandan-app#

これは、気にしなくてよいのでしょうか？

そして、レポートの読み方がそもそもよくわかりません＞＜。

レポートの読み方を調べる

各項目は、次の意味で良さそうです。

Statements: How many of the statements in you code are executed. Branches: Conditional statements create branches of code which may not be executed (e.g. if/else). This metric tells you how many of your branches have been executed. Functions: The proportion of the functions you have defined which have been called. Lines: The proportion of lines of code which have been executed.

現在の状況

vue init で作成したプロジェクトで、 test/unit/karma.conf.js が設定ファイルです。

それを PhantomJS ではなく、 ChromeHeadless でテストするようにした結果 、レポート部分は次のようになりました （たぶん最初から変わっていません）。

    reporters: ['spec', 'coverage'],

そして、『Vue.js入門 基礎から実践アプリケーション開発まで』 10.2 コンポーネントの実装 に取り掛かる、前、が今です。

TDD で進めていくよ！というコンセプトで、テストを作り、失敗することを確認してから、テストが成功するようにコードを書いていきます。

なので、テストを作る前から失敗していますので、テストが成功するようにコードを書いていったとしても、テストを作る前の失敗が取り除かれなければ何も意味がありません。

このまま進めていって大丈夫なのか、わかりません。。。

おわりに

わかりませんが、このまま進める予定です。

プロジェクト作成後に PhantomJS から ChromeHeadless へと変更した ときは、サンプルテストコードが動きましたし、エラー内容はテストがないよ！というものです。

ですので、テストさえ書けば動くように思います。

今回、わざわざ投稿したのは、JavaScript 環境でのテストを行ったことがなく、状況がどうにも判断できないからでした。

以上です。

その後 (2018年12月31日) 。問題ないことがわかりました

10.2.1 KbnButton コンポーネント、で実際のテストとコードを作成して動かしたところ、問題ないことがわかりました。

Coverage summary の項目はすべてグリーンとはなりませんでしたけれども、10.2.1 KbnButton コンポーネント の部分はすべて最終的にグリーンとなりましたので、これで問題なしと結論づけました♪

実際に動かしたときの結果です。

root@496b66ee2aa3:/app/kandan-app# npm run unit

> kandan-app@1.0.0 unit /app/kandan-app
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

31 12 2018 12:19:17.347:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
31 12 2018 12:19:17.358:INFO [launcher]: Launching browser ChromeHeadlessNoSandbox with unlimited concurrency
31 12 2018 12:19:17.407:INFO [launcher]: Starting browser ChromeHeadless
31 12 2018 12:19:17.893:INFO [HeadlessChrome 71.0.3578 (Linux 0.0.0)]: Connected on socket Ua2qsAdM3xYWA8KOAAAA with id 81653964

  KbnButton
    プロパティ
      type
        デフォルト
          ✓ kbn-buttonクラスを持つbutton要素で構成されること
        button
          ✓ kbn-buttonクラスを持つbutton要素で構成されること
        text
          ✓ kbn-buttonクラスを持つbutton要素で構成されること
      disabled
        デフォルト
          ✓ disabled属性が付与されていないこと
        true
          ✓ disabled属性が付与されていること
        false
          ✓ disabled属性が付与されていないこと
      イベント
        click
          ✓ 発行されていること
      スロット
        コンテンツ挿入あり
          ✓ 挿入されていること
        コンテンツ挿入なし
          ✓ 挿入されていないこと

HeadlessChrome 71.0.3578 (Linux 0.0.0): Executed 9 of 9 SUCCESS (0.113 secs / 0.069 secs)
TOTAL: 9 SUCCESS


=============================== Coverage summary ===============================
Statements   : 47.83% ( 11/23 )
Branches     : 100% ( 2/2 )
Functions    : 0% ( 0/6 )
Lines        : 47.83% ( 11/23 )
================================================================================


   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │      New minor version of npm available! 6.4.1 -> 6.5.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.5.0   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

root@496b66ee2aa3:/app/kandan-app#

コメントを残す