Nightwatch での Angular コンポーネントテスト

概要

Nightwatch での Angular コンポーネントテストは、公式の **[@nightwatch/angular][1]** プラグインを使用して利用できます。内部的には Webpack DevServer を使用します。Nightwatch 2.4 以上が必要です。

nightwatch-angular-plugin on Github

インストール

ステップ 1。

@nightwatch/angular プラグインは、NPM を使用してインストールできます。

npm install @nightwatch/angular

ステップ 2。

次に、Nightwatch の設定を更新し、プラグインをリストに追加します。

nightwatch.conf.js
module.exports = {
  plugins: ['@nightwatch/angular']
}

テストの作成

このプラグインは、コンポーネントを独立してマウントするために使用できる mountComponent コマンドのみを提供します。

.mountComponent(`componentPath`, `[callback]`)

パラメーター
名前 型 説明
`componentPath` `string` マウントするコンポーネントファイル（`.component`）の場所
`callback`
オプション		 `function` コンポーネント要素を使用して呼び出されるオプションのコールバック関数。

設定

@nightwatch/angular プラグインは、妥当な設定のデフォルト値で動作するように設計されていますが、より高度なシナリオでは、一部の設定オプションを変更する必要がある場合があります。

- projectRoot

テストが記述されているプロジェクトのルートディレクトリを指定します。デフォルトでは、現在のディレクトリとして設定されています。これは projectRoot プロパティを使用してオーバーライドできます。

nightwatch.conf.js
module.exports = {
  '@nightwatch/angular': {
    projectRoot: 'path/to/angular/project' // defaults to current directory
  },
  // other nightwatch settings...
}
- port

Angular プラグインは、Angular コンポーネントをコンパイルしてレンダリングするために Webpack Dev Server を使用します。デフォルトでは、ポート 5173 を使用してレンダリングされたページを提供します。これは Nightwatch の設定を使用してオーバーライドできます。

nightwatch.conf.js
module.exports = {
  'webpack_dev_server': {
    port: 10096 // defaults to 5173
  },
  // other nightwatch settings...
}
例
const component = await browser.mountComponent('../../../src/components/Form.component')
test/sampleTest.js
it('Test Form Component', async function (browser) {
  const component = await browser.mountComponent('../../../src/components/Form.component');


  expect(component).text.to.equal('form-component works!');
});

[1]: https://github.com/nightwatchjs/nightwatch-plugin-angular