docs: ✏️ improvements

docs/docs/events.md

@@ -42,9 +42,9 @@ spectator.dispatchKeyboardEvent(SpectatorElement, 'keyup', { key: 'Escape', keyC
 spectator.dispatchTouchEvent(SpectatorElement, type, x, y);
 ```
 
-#### Custom Events
+## Custom Events
 
-You can trigger custom events (@Output() of child components) [using](https://github.com/ngneat/spectator/blob/master/projects/spectator/test/child-custom-event/child-custom-event-parent.component.spec.ts) the following method:
+You can trigger custom events (`@Output()` of child components) [using](https://github.com/ngneat/spectator/blob/master/projects/spectator/test/child-custom-event/child-custom-event-parent.component.spec.ts) the following method:
 ```ts
 spectator.triggerEventHandler(MyChildComponent, 'myCustomEvent', 'eventValue');
 spectator.triggerEventHandler('app-child-component', 'myCustomEvent', 'eventValue');

docs/docs/helpers.md

@@ -3,7 +3,7 @@ id: helpers
 title: Helpers
 ---
 
-### Keyboard helpers
+## Keyboard helpers
 ```ts
 spectator.keyboard.pressEnter();
 spectator.keyboard.pressEscape();
@@ -14,7 +14,7 @@ spectator.keyboard.pressKey('ctrl.a');
 spectator.keyboard.pressKey('ctrl.shift.a');
 ```
 
-### Mouse helpers
+## Mouse helpers
 ```ts
 spectator.mouse.contextmenu('.selector');
 spectator.mouse.dblclick('.selector');

docs/docs/installation.md

@@ -3,6 +3,24 @@ id: installation
 title: Installation
 ---
 
+> A Powerful Tool to Simplify Your Angular Tests
+
+Spectator helps you get rid of all the boilerplate grunt work, leaving you with readable, sleek and streamlined unit tests.
+
+## Features
+- ✅ Support for testing Angular components, directives and services
+- ✅ Easy DOM querying
+- ✅ Clean API for triggering keyboard/mouse/touch events
+- ✅ Testing `ng-content`
+- ✅ Custom Jasmine/Jest Matchers (toHaveClass, toBeDisabled..)
+- ✅ Routing testing support
+- ✅ HTTP testing support
+- ✅ Built-in support for entry components
+- ✅ Built-in support for component providers
+- ✅ Auto-mocking providers
+- ✅ Strongly typed
+- ✅ Jest Support
+
 ### NPM
 
 `npm install @ngneat/spectator --save-dev`

docs/docs/integration-testing.md

@@ -1,50 +0,0 @@
----
-id: integration-testing
-title: Integration Testing
----
-
-### Integration testing with `RouterTestingModule`
-
-If you set the `stubsEnabled` option to `false`, you can pass a real routing configuration
-and setup an integration test using the `RouterTestingModule` from Angular.
-
-Note that this requires promises to resolve. One way to deal with this, is by making your test async:
-
-```ts
-describe('Routing integration test', () => {
-  const createComponent = createRoutingFactory({
-    component: MyComponent,
-    declarations: [OtherComponent],
-    stubsEnabled: false,
-    routes: [
-      {
-        path: '',
-        component: MyComponent
-      },
-      {
-        path: 'foo',
-        component: OtherComponent
-      }
-    ]
-  });
-
-  it('should navigate away using router link', async () => {
-    const spectator = createComponent();
-
-    // wait for promises to resolve...
-    await spectator.fixture.whenStable();
-
-    // test the current route by asserting the location
-    expect(spectator.get(Location).path()).toBe('/');
-
-    // click on a router link
-    spectator.click('.link-1');
-
-    // don't forget to wait for promises to resolve...
-    await spectator.fixture.whenStable();
-
-    // test the new route by asserting the location
-    expect(spectator.get(Location).path()).toBe('/foo');
-  });
-});
-```

docs/docs/queries.md

@@ -5,7 +5,7 @@ title: Queries
 
 The Spectator API includes convenient methods for querying the DOM as part of a test: `query`, `queryAll`, `queryLast` , `queryHost` and `queryHostAll`. All query methods are polymorphic and allow you to query using any of the following techniques.
 
-#### String Selector
+## String Selector
  Pass a string selector (in the same style as you would when using jQuery or document.querySelector) to query for elements that match that path in the DOM. This method for querying is equivalent to Angular's By.css predicate. Note that native HTML elements will be returned. For example:
  ```ts
 // Returns a single HTMLElement
@@ -18,7 +18,7 @@ spectator.query('div', { root: true });
 
 spectator.query('app-child', { read: ChildServiceService });
 ```
-#### Type Selector
+## Type Selector
 Pass a type (such as a component, directive or provider class) to query for instances of that type in the DOM. This is equivalent to Angular's `By.directive` predicate. You can optionally pass in a second parameter to read a specific injection token from the matching elements' injectors. For example:
 ```ts
 // Returns a single instance of MyComponent (if present)
@@ -31,7 +31,7 @@ spectator.query(MyComponent, { read: ElementRef });
 host.queryLast(ChildComponent);
 host.queryAll(ChildComponent);
 ```
-#### DOM Selector
+## DOM Selector
 Spectator allows you to query for elements using selectors inspired by [dom-testing-library](https://testing-library.com/docs/dom-testing-library/api-queries). The available selectors are:
 
 ```ts
@@ -55,7 +55,7 @@ For example, in this following HTML `byText('foobar', {selector: 'div'})` won't
 </div>
 ```
 
-#### Testing Select Elements
+## Testing Select Elements
 Spectator allows you to test `<select></select>` elements easily, and supports multi select.
 
 Example:

docs/docs/testing-components.md

@@ -66,31 +66,45 @@ it('should...', () => {
   expect(spectator.query('button')).toHaveText('Click');
 });
 ```
-The `createComponent()` method returns an instance of `Spectator` which exposes the following API:
+The `createComponent()` method returns an instance of `Spectator` which exposes the following properties:
 
 - `fixture` - The tested component's fixture
 - `component` - The tested component's instance
 - `element` - The tested component's native element
 - `debugElement` - The tested fixture's debug element
-- `get()` - Provides a wrapper for `TestBed.get()`:
+
+And the following methods:
+
+### `get()`
+Provides a wrapper for `TestBed.get()`:
+
 ```ts
 const service = spectator.get(QueryService);
 
 const fromComponentInjector = true;
 const service = spectator.get(QueryService, fromComponentInjector);
 ```
-- `inject()` - Provides a wrapper for `TestBed.inject()`:
+
+### `inject()`
+Provides a wrapper for Ivy's `TestBed.inject()`:
+
 ```ts
 const service = spectator.inject(QueryService);
 
 const fromComponentInjector = true;
 const service = spectator.inject(QueryService, fromComponentInjector);
 ```
-- `detectChanges()` - Runs detectChanges on the tested element/host:
+
+### `detectChanges()`
+Runs `detectChanges` on the tested element/host:
+
 ```ts
 spectator.detectChanges();
 ```
-- `setInput()` - Changes the value of an @Input() of the tested component:
+
+### `setInput()`
+Changes the value of an `@Input()` of the tested component:
+
 ```ts
 it('should...', () => {
   spectator.setInput('className', 'danger');
@@ -100,7 +114,9 @@ it('should...', () => {
   });
 });
 ```
-- `output` - Returns an Observable @Output() of the tested component:
+### `output()`
+Returns an observable `@Output()` of the tested component:
+
 ```ts
 it('should emit the $event on click', () => {
   let output;
@@ -110,7 +126,10 @@ it('should emit the $event on click', () => {
   expect(output).toEqual({ type: 'click' });
 });
 ```
-- `tick(millis?: number)` - Run the fakeAsync `tick()` function and call `detectChanges()`:
+
+### `tick(millis?: number)`
+Run the fakeAsync `tick()` function and call `detectChanges()`:
+
 ```ts
 it('should work with tick', fakeAsync(() => {
   spectator = createComponent(ZippyComponent);
@@ -120,3 +139,56 @@ it('should work with tick', fakeAsync(() => {
   expect(spectator.component.updatedAsync).not.toBeFalsy();
 }))
 ```
+
+## Component Providers
+
+By default, the original component providers (e.g. the `providers` on the `@Component`) are not touched.
+
+However, in most cases, you want to access the component's providers in your test or replace them with mocks.
+
+For example:
+
+```ts
+@Component({
+  template: '...',
+  providers: [FooService]
+})
+class FooComponent {
+  constructor(private fooService: FooService} {}
+
+  // ...
+}
+```
+
+Use the `componentProviders` to replace the `FooService` provider:
+
+```ts
+const createComponent = createComponentFactory({
+  component: FooComponent,
+  componentProviders: [
+    {
+      provide: FooService,
+      useValue: someThingElse
+    }
+  ]
+})
+```
+
+Or mock the service by using `componentMocks`:
+
+```ts
+const createComponent = createComponentFactory({
+  component: FooComponent,
+  componentMocks: [FooService]
+});
+```
+
+To access the provider, get it from the component injector using the `fromComponentInjector` parameter:
+
+```ts
+spectator.get(FooService, true)
+```
+
+In the same way you can also override the component view providers by using the `componentViewProviders` and `componentViewProvidersMocks`.
+
+The same rules also apply to directives using the `directiveProviders` and `directiveMocks` parameters.

docs/docs/testing-with-host.md

@@ -38,8 +38,8 @@ The host method returns an instance of `SpectatorHost` which extends `Spectator`
 - `hostElement` - The host's native element
 - `hostDebugElement` - The host's fixture debug element
 - `setHostInput` -  Changes the value of an `@Input()` of the host component
-- `queryHost` - Read more about querying in Spectator
-- `queryHostAll` - Read more about querying in Spectator
+- `queryHost` - Read more about [querying](./queries) in Spectator
+- `queryHostAll` - Read more about [querying](./queries) in Spectator
 
 ### Custom Host Component
 Sometimes it's helpful to pass your own host implementation. We can pass a custom host component to the `createHostComponentFactory()` that will replace the default one:

docs/docs/testing-with-http.md

@@ -3,7 +3,7 @@ id: testing-with-http
 title: Testing With Http 
 ---
 
-Spectator makes testing data services, which use the Angular HTTP module, a lot easier. For example, let's say that you have service with three methods, one performs a GET, one a POST and one performs
+Spectator makes testing data services, which use the Angular HTTP module, a lot easier. For example, let's say that you have service with three methods, one performs a `GET`, one a `POST` and one performs
 concurrent requests:
 
 ```ts