Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remscodes/ngx-testing-tools
🛠️ Provides high-level utilities and reduces boilerplate for testing Angular applications
https://github.com/remscodes/ngx-testing-tools
angular angular15 angular16 angular17 angular18 testing testing-library tools
Last synced: about 3 hours ago
JSON representation
🛠️ Provides high-level utilities and reduces boilerplate for testing Angular applications
- Host: GitHub
- URL: https://github.com/remscodes/ngx-testing-tools
- Owner: remscodes
- License: mit
- Created: 2023-12-17T19:04:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-17T23:11:58.000Z (3 months ago)
- Last Synced: 2024-10-20T10:14:45.197Z (3 months ago)
- Topics: angular, angular15, angular16, angular17, angular18, testing, testing-library, tools
- Language: TypeScript
- Homepage: https://remscodes.github.io/ngx-testing-tools
- Size: 2.14 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-testing-tools - Provides high-level utilities and reduces boilerplate for testing Angular applications. (Table of contents / Angular)
- fucking-awesome-angular - ngx-testing-tools - Provides high-level utilities and reduces boilerplate for testing Angular applications. (Table of contents / Angular)
- fucking-awesome-angular - ngx-testing-tools - Provides high-level utilities and reduces boilerplate for testing Angular applications. (Table of contents / Angular)
README
Angular Testing Tools
Makes Angular testing easier
[](https://github.com/remscodes/ngx-testing-tools/actions/workflows/npm-ci.yml)
[](https://codecov.io/gh/remscodes/ngx-testing-tools)
[](https://www.npmjs.org/package/ngx-testing-tools)
[](https://bundlephobia.com/package/ngx-testing-tools)
[](LICENSE)
## In a nutshell
This library aims to **reduce boilerplate** 😎 and **provides high-level tools**️ 🔥 for testing Component, Guard, Interceptor and everything else related to the Angular mechanism.
It makes tests **easier to read** 😌 and **faster to write** ⚡️!
## Quick examples
#### Testing Component
```ts
describe('AppComponent', () => {
const tb = componentTestBed(AppComponent) // 🛠️ Create the test bed which is re-compiled for each test
.inject('prefs', Preferences); // 🖇️ Link a key to an injection for all tests, see below 👇
it('should render title', tb(({ component, query }) => { // 🔋 Access enhanced tools for testing components
expect(component.title).toEqual('app-v17');
const span = query.findElement('.content span');
expect(span.textContent).toContain('app-v17 app is running!');
}));
it('should update preferences on click', tb(({ action, injected: { prefs } }) => { // 🤯 Retrieve injections by autocompletion
expect(prefs.approved).toBeFalse();
action.click('#my-button');
expect(prefs.approved).toBeTrue();
}));
});
```
🫡 (The redundant "should create" test is even called up for you!)
#### Testing Service
```ts
describe('AppService', () => {
const tb = serviceTestBed(AppService, { httpTesting: true }); // 🛠️ Create the test bed and enable http testing
it('should fetch cat fact', tb(({ service, http, rx }, done) => {
const mockRes = { fact: 'string', length: 6 };
rx.remind = service.getCatFact().subscribe({ // 🧯 Use rx.remind to auto unsubscribe after the end of the test
next: (res) => {
expect(res).toEqual(mockRes);
done();
},
});
http.emitSuccessResponse({ url: service.CAT_FACT_URL, body: mockRes }); // 🎭 Fake the http response of the request that matches the url
}));
});
```
## Installation
```shell
npm install --save-dev ngx-testing-tools
```
## Documentation
Visit the docs at https://remscodes.github.io/ngx-testing-tools.
## Demo
Check [demo](./projects/ngx-testing-tools-demo) `.spec.ts` files.
## Version compatibility
Compatible with Angular `>= 15.2.x`.
## What's next ? 🤩
- More custom test beds :
- `ResolverTestBed`
- Mocks
- Angular schematics
## License
[MIT](LICENSE) © Rémy Abitbol.