Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update website #76

Merged
merged 2 commits into from
Feb 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions website/docs/examples/about.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
id: about
title: About examples
---
44 changes: 44 additions & 0 deletions website/docs/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Getting Started

## System requirements

It requires the following minimum versions :

- Node v18.10.0 or higher
- Angular v15.2.0 or higher

Check [version compatibility](./reference/version-compatibility) for more details.

## Installation

As this library is intended for testing, install it as a development dependency.

<Tabs groupId="package-manager">

<TabItem value="pnpm">
```shell
pnpm install --save-dev ngx-testing-tools
```
Registry
> https://npm.im/ngx-testing-tools
</TabItem>

<TabItem label="yarn" value="yarn">
```shell
yarn install --dev ngx-testing-tools
```
Registry
> https://yarn.pm/ngx-testing-tools
</TabItem>

<TabItem value="npm">
```shell
npm install --save-dev ngx-testing-tools
```
Registry
> https://npm.im/ngx-testing-tools
</TabItem>
</Tabs>
134 changes: 134 additions & 0 deletions website/docs/guides/component.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
# Component TestBed

### Usage

```ts
describe('AppComponent', () => {
const tb = componentTestBed(AppComponent);

it('should do something', tb(() => {
// ... expectations
}));
});
```

## Options

```ts
describe('AppComponent', () => {
const tb = componentTestBed(AppComponent, {
// ... options (see below)
});
});
```

Options :

[//]: # (@formatter:off)
```ts
{
imports?: Importation[] = [];
providers?: AnyProvider[] = [];
declarations?: Declaration[] = [];
schemas?: SchemaMetadata[] = [];
// Disables Angular animations with `provideNoopAnimations()`.
noopAnimations?: boolean = true;
// Run component fixture `detectChanges()` before assertion.
startDetectChanges?: boolean = true;
// Useful when you only want to test the logic of the described component.
// If enabled, no template will be rendered and no change detections will be performed.
noTemplate?: boolean = false;
// Enables `HttpTools`.
httpTesting?: boolean = false;
// When enabled, the assertion will end by `HttpTestingController.verify()`.
// Works only when `httpTesting` test bed option is `true`, otherwise has no effect.
verifyHttp?: boolean = true;
// Automatically compiles the custom test bed for each test.
autoCompile?: boolean = true;
// Automatically invokes the "should create" test.
// It checks if the provided `described` instance is truthy.
checkCreate?: boolean = true;
}
```
[//]: # (@formatter:on)

#### ComponentTestBed Definitions

Check common definitions :

- [tb.import(..)](#importoneormanyimports---basetestbed)
- [tb.provide(..)](#provideoneormanyproviders---basetestbed)
- [tb.declare(..)](#declareoneormanydeclarations---renderertestbed)
- [tb.inject(..)](#injectname-token---basetestbed)
- [tb.setup(..)](#setupaction---jasmineimplementationcallback)
- [tb.compile(..)](#compile---promisevoid)

#### (assertion, options?) -> jasmine.ImplementationCallback

Options :

[//]: # (@formatter:off)
```ts
{
// Run component fixture `detectChanges()` before assertion.
startDetectChanges?: boolean = true;
// When enabled, the assertion will end by `HttpTestingController.verify()`.
// Works only when `httpTesting` test bed option is `true`, otherwise has no effect.
verifyHttp?: boolean = true;
}
```
[//]: # (@formatter:on)

Check examples : [tb(..)](#assertion-options---jasmineimplementationcallback-2).

Examples :

```ts
it('should do something', tb(({ component, fixture, injector, action, query }) => {
component.myInput = true;
fixture.detectChanges();

const auth = injector.get(AuthService);

const inner = query.findComponent(InnerComponent);

action.click('#my-button');

// (…) expectations
}, { startDetectChanges: false }));
```

```ts
it('should do something', tb(({ component }, done) => {
// (…) expectations
done();
}));
```

```ts
it('should do something', tb(async ({ component }) => {
// (…) async expectations
}));
```

#### ComponentTestBed Tools

#### ComponentTools

```ts
{
// The described component fixture.
fixture: ComponentFixture<T>;
// The described component instance.
component: T;
// Enhanced tools to query elements (see below).
query: ComponentQueryTools;
// Enhanced tools to perform action on elements (see below).
action: ComponentActionTools;
}
```

Check common tools :

- [BaseTools](#basetools)
- [HttpTestingTools](#httptestingtools)
Empty file added website/docs/guides/service.md
Empty file.
47 changes: 0 additions & 47 deletions website/docs/intro.md

This file was deleted.

53 changes: 53 additions & 0 deletions website/docs/introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
# Introduction

## In a nutshell

This library aims to **reduce boilerplate** 😎 and **provides high-level tools**️ 🔥 for testing Component, Service, 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
}));
});
```
Empty file.
1 change: 1 addition & 0 deletions website/docs/reference/version-compatibility.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Version compatibility
Loading