Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nightwatchjs/nightwatch-plugin-angular
Component testing support for Angular
https://github.com/nightwatchjs/nightwatch-plugin-angular
Last synced: 28 days ago
JSON representation
Component testing support for Angular
- Host: GitHub
- URL: https://github.com/nightwatchjs/nightwatch-plugin-angular
- Owner: nightwatchjs
- License: mit
- Created: 2023-03-20T10:02:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-16T12:11:01.000Z (8 months ago)
- Last Synced: 2024-10-30T00:55:17.033Z (3 months ago)
- Language: HTML
- Size: 49.2 MB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - nightwatch-plugin-angular (⭐2) - Official [Nightwatch](https://nightwatchjs.org/) plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+. (Recently Updated / [Sep 01, 2024](/content/2024/09/01/README.md))
- awesome-angular - nightwatch-plugin-angular - Official [Nightwatch](https://nightwatchjs.org/) plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+. (Table of contents / Angular)
- fucking-awesome-angular - nightwatch-plugin-angular - Official 🌎 [Nightwatch](nightwatchjs.org/) plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+. (Table of contents / Angular)
- fucking-awesome-angular - nightwatch-plugin-angular - Official 🌎 [Nightwatch](nightwatchjs.org/) plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+. (Table of contents / Angular)
README
# @nightwatch/angular
[![Discord][discord-badge]][discord]
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]
[![version][version-badge]][package]
Official Nightwatch plugin which adds component testing support for Angular apps. It uses the [Webpack DevServer](https://vitejs.dev/) under the hood. Requires Nightwatch 2.4+
## Setup:
Install nightwatch angular plugin in your project:
```bash
npm install @nightwatch/angular
```
Update your [Nightwatch configuration](https://nightwatchjs.org/guide/configuration/overview.html) and add the plugin to the list:
```js
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:
```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!');
});
```
## 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:
```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 the following configurations:
```js
module.exports = {
'webpack_dev_server': {
port: 10096 // defaults to 5173
},
// other nightwatch settings...
}
```
# License
MIT
[build-badge]: https://github.com/nightwatchjs/nightwatch-plugin-angular/actions/workflows/node.js.yml/badge.svg?branch=main
[build]: https://github.com/nightwatchjs/nightwatch-plugin-angular/actions/workflows/node.js.yml
[version-badge]: https://img.shields.io/npm/v/@nightwatch/angular.svg?style=flat-square
[package]: https://www.npmjs.com/package/@nightwatch/angular
[license-badge]: https://img.shields.io/npm/l/@nightwatch/angular.svg?style=flat-square
[license]: https://github.com/nightwatchjs/@nightwatch/angular/blob/main/LICENSE
[discord-badge]: https://img.shields.io/discord/618399631038218240.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square
[discord]: https://discord.gg/SN8Da2X