Nightwatch 中的 Angular 组件测试

概述

Nightwatch 中的 Angular 组件测试可使用我们的官方 [@nightwatch/angular][1] 插件，它在后台使用 Webpack DevServer。需要 Nightwatch 2.4+

nightwatch-angular-plugin on Github

安装

步骤 1。

可以使用以下方法从 NPM 安装 @nightwatch/angular 插件

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 插件使用 webpack dev server 来编译和呈现 Angular 组件。默认情况下，它使用端口 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