Angular component testing in Nightwatch

Overview

Angular component testing in Nightwatch is available using our official [@nightwatch/angular][1] plugin, It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+

nightwatch-angular-plugin on Github

Installation

Step 1.

The @nightwatch/angular plugin can be installed from NPM with:

npm install @nightwatch/angular

Step 2.

Then update your Nightwatch configuration and add the plugin to the list:

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

Write tests

This plugin provides only the mountComponent command which can be used to mount a component in isolation.

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

Parameters:
Name Type Description
`componentPath` `string` Location of the component file (`.component`) to be mounted
`callback`
Optional		 `function` An optional callback function which will be called with the component element.

Configuration

We’ve designed the @nightwatch/angular plugin to work with sensible configuration defaults, but in some more advanced scenarios you may need to change some of the config options.

- projectRoot

Specify the project root directory where tests are written. By default this is set as the current directory. This can be overridden using the projectRoot property

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

The angular plugin uses webpack dev server to compile and render angular components. By default it uses port 5173 to serve the rendered pages. This can be overridden using Nightwatch config.

nightwatch.conf.js
module.exports = {
  'webpack_dev_server': {
    port: 10096 // defaults to 5173
  },
  // other nightwatch settings...
}
Example
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