Awesome

@nightwatch/angular

Official Nightwatch plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+

Setup:

Install nightwatch angular plugin in your project:

npm install @nightwatch/angular

Update your Nightwatch configuration and add the plugin to the list:

module.exports = {
  plugins: ['@nightwatch/angular'],

  // other nightwatch settings...
}

Note: For the plugin to function, you must configure the path to the root directory of your angular project.

Usage

This plugin includes a Nightwatch commands which can be used to mount Angular components.

browser.mountComponent(componentPath, [callback]):

Parameters:

• componentPath – location of the component file (/path/to/component/*.component) to be mounted
• callback – an optional callback function which will be called with the component element

Example:

it('Test Form Component', async function (browser) {
  const component = await browser.mountComponent('/src/components/Form.component');

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

Configuration

- projectRoot

Nightwatch angular plugin needs to know the root directory of the angular project for which the tests are written. By default this is set as the current directory ('./'). This can be overridden using the projectRoot property like this:

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 the following configurations:

module.exports = {

  'webpack_dev_server': {
    port: 10096 // defaults to 5173
  },

  // other nightwatch settings...
}

License

MIT