テストあなたの物語

角のための物語帳

文脈

NX 13 — 角13 — ストーリー6.6.0アルファ.36

なぜ？

アプリケーションをより多くのバグを導入するリスクが大きくなります.最近のプロジェクトでは、単体テストといくつかの統合テストをテストしなければなりません.我々は、インクリメンタルに動作し、スプリントの間に機能を追加し、より機能的なルールで古いものを再動作します.すべてのDEVSを単体テストでテストしても、単体テストですべてをテストすることができなかったことがわかります.
我々はすべてのコンポーネント/ディレクティブを含むストーリーブックを開発している.時々、我々は開発の間、それのいくつかをチェックします、そして、Ho驚き、それは壊れています―

どうやって？

私はバックエンドとの相互作用をテストすることなく簡単にいくつかの機能テストを導入するソリューションを探していました.我々の目標は機能的に我々のHMIをテストするだけでした.
話を聞いたCypress そしていくつかの研究をした後、私たちにとって完璧な解決策を見つけました.Nx 私たちの童話をテストするためのサイプレスの設定でE 2 Eアプリケーションを含めることが可能性を提供します.
私はすべての要件をインストールし、いくつかの機能テストを書き始める.何が驚いた、いくつかのテストはすべてのユニットテストと統合テストが動作しますが、リードのdevとして、それは私がアプリケーションの品質を保証していないことを意味するため、最初は欺瞞だった.しかし、2番目の考えでは、私はまだ何を学ぶことができると新しいものを発見喜びを参照してください!私は、我々の多くがすでにこの状況にいると確信します.では、チャットをやめましょう.

インストール

私は、あなたがすでにNXを持っていると思います — 物語と角プロジェクト.ここでは、ちょうど物語のためのサイプレスインストールについて話します.

nx generate [@nrwl/storybook](http://twitter.com/nrwl/storybook):cypress-project --name={your_app_name} --linter=eslint --no-interactive

私のアプリは“storybook”と呼ばれ、コマンドの結果です.

nx generate [@nrwl/storybook](http://twitter.com/nrwl/storybook):cypress-project --name=storybook --linter=eslint --no-interactive
UPDATE package.json
CREATE apps/storybook-e2e/cypress.json             
CREATE apps/storybook-e2e/src/fixtures/example.json
CREATE apps/storybook-e2e/src/support/commands.ts  
CREATE apps/storybook-e2e/src/support/index.ts     
CREATE apps/storybook-e2e/tsconfig.json            
CREATE apps/storybook-e2e/project.json             
UPDATE workspace.json                              
CREATE apps/storybook-e2e/.eslintrc.json           
UPDATE nx.json

パッケージで.JSON、私たちはさらに2つのdev依存関係を見ることができます:@ nrwl/cypressとcypress、論理.
である.JSONには次があります.

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "sourceMap": _false_,
    "outDir": "../../dist/out-tsc",
    "allowJs": _true_,
    "types": ["cypress", "node"]
  },
  "include": ["src/ **/*.ts", "src/** /*.js"]
}

タイプ「サイプレス」以外は特別です.
それでは、ストーリーブックE 2 E/プロジェクトを見てみましょう.JSONファイル

{
  "root": "apps/storybook-e2e",
  "sourceRoot": "apps/storybook-e2e/src",
  "projectType": "application",
  "targets": {
    "e2e": {
      "executor": "@nrwl/cypress:cypress",
      "options": {
        "cypressConfig": "apps/storybook-e2e/cypress.json",
        "devServerTarget": "storybook:storybook"
      },
      "configurations": {
        "ci": {
          "devServerTarget": "storybook:storybook:ci"
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/storybook-e2e/**/*.{js,ts}"]
      }
    }
  },
  "tags": [],
  "implicitDependencies": ["storybook"]
}

私たちが見ることができるように、ターゲットのサーバーは、私たちの童話アプリ“devservertarget”で定義されています:“ストーリーブック:ストーリーブック:CI”は、CIモードで起動されます.だから私たちの童話アプリ“暗黙の依存関係”と“暗黙の依存関係”です.
もう試してみてください.

nx e2e {your_app_name}-e2e

次のようになります.

Can't run because no spec files were found.

We searched for any files inside of this folder:

...\apps\storybook-e2e\src\integration

はい、まだ書き込みテストはありません.サイプレステストを書く方法がわからない場合は、ドキュメントを読むことができますhere どちらが完璧です.
このコマンドは端末でのテストに最適です.しかし、我々の何人かは、本当のウインドウでそれを見たいです.サイプレスを開き、オンデマンドでテストを実行するには、別のサイプレスを作成することをお勧めします.このようなJSON :

// cypress.local.json
{
  "fileServerFolder": ".",
  "fixturesFolder": "apps/storybook-e2e/src/fixtures",
  "integrationFolder": "apps/storybook-e2e/src/integration",
  "modifyObstructiveCode": _false_,
  "supportFile": "apps/storybook-e2e/src/support/index.ts",
  "pluginsFile": _false_,
  "video": _true_,
  "videosFolder": "../../dist/cypress/apps/storybook-e2e/videos",
  "screenshotsFolder": "../../dist/cypress/apps/storybook-e2e/screenshots",
  "chromeWebSecurity": _false_,
  "baseUrl": "http://localhost:4400" // set the url of your local Storybook
}

このコマンドをパッケージに追加します.JSON :

"test:storybook:local": "cypress open --browser ~\\chrome-win\\chrome.exe -C apps/storybook-e2e/cypress.local.json"

ここではChromeをブラウザとして使っています.
今すぐあなたのローカルの童話とローカルサイプレスを起動することができます

nx run storybook:storybook
npm run test:storybook:local

テストを書くまで失敗するでしょう.
ストーリーブックをテストするのを助けるために、以下をインストールするように提案しますlibrary :

npm i -D cypress-storybook

次に、ヘルパーコマンドをサポートインデックスファイルにインポートします.

// apps/storybook-e2e/src/support/index.ts
import 'cypress-storybook/cypress'

その後、ストーリーブックのプレビューファイルをインポートするには、ヒストリコマンドを理解するためにストーリーブックを助けます.

// apps/storybook/.storybook/preview.js
import 'cypress-storybook/angular'

最後に、テストファイルで何をしなければなりません.

describe('MyComponent', () => {
    beforeEach(() => {
      cy.visitStorybook();
      cy.loadStory('title-of-my-story', 'MyStoryName');
    });

    it('my test', () => {
    ...
    });
});

このドキュメントでは、sys . visitstorybook ()をラップすることをお勧めします.前に、前にではなく、私は試したときに、各テストの間にフォームケースでストーリーをリセットしません.

結論

今より多くのバグを倒すために武装されます!言い訳がない、特にあなたがNXを使用するならば、構成のために多くを助けます.私は、あなたにいくつかを書くように提案しますcommands フィクスチャやフォームタグを取得するfillformコマンドのようなテストを書くのを簡単にします.それはあなたのテストを読みやすくなります.
読書ありがとう.

もっと学ぶ

Angular for everyone: All about it