diff --git a/docs/articles/api/MockBuilder.md b/docs/articles/api/MockBuilder.md index ef75a736f1..8bca0772c6 100644 --- a/docs/articles/api/MockBuilder.md +++ b/docs/articles/api/MockBuilder.md @@ -265,9 +265,9 @@ beforeEach(() => { ``` In case of `RouterTestingModule`, -we need to use [`.keep`](#keep) for both of the modules and [`NG_MOCKS_ROOT_PROVIDERS`](#ngmocksrootproviders-token), +we need to use [`.keep`](#keep) for both of the modules and [`NG_MOCKS_ROOT_PROVIDERS`](#ng_mocks_root_providers-token), and to pass an empty array into `.withRoutes`. -[`NG_MOCKS_ROOT_PROVIDERS`](#ngmocksrootproviders-token) is needed, +[`NG_MOCKS_ROOT_PROVIDERS`](#ng_mocks_root_providers-token) is needed, because `RouterModule` has many root dependencies which should be also kept. ```ts @@ -296,7 +296,7 @@ beforeEach(() => { ## Config You can customize default behavior of mock things. -Also, it can be done globally via [`ngMocks.defaultConfig()`](./ngMocks/defaultConfig.md) to avoid repetitions. +Also, it can be done globally via [`ngMocks.defaultConfig()`](ngMocks/defaultConfig.md) to avoid repetitions. ### `precise` flag @@ -524,7 +524,7 @@ All other root providers will be replaced with their mocks, even for kept declar ## Factory function -You might be using other [testing frameworks for angular](../extra/with-3rd-party), +You might be using other [testing frameworks for angular](/extra/with-3rd-party.md), such as [`@ngneat/spectator`](https://www.npmjs.com/package/@ngneat/spectator) or [`@testing-library/angular`](https://www.npmjs.com/package/@testing-library/angular). diff --git a/docs/articles/api/MockComponent.md b/docs/articles/api/MockComponent.md index e93ab5cecc..b7b473479e 100644 --- a/docs/articles/api/MockComponent.md +++ b/docs/articles/api/MockComponent.md @@ -34,7 +34,7 @@ The class of a mock component has: :::tip Information about mocking FormControl, ControlValueAccessor, Validator and AsyncValidator -is in [a different section](../extra/mock-form-controls.md). +is in [a different section](/extra/mock-form-controls.md). ::: ## Simple example @@ -117,7 +117,7 @@ TestBed.configureTestingModule({ }); ``` -[`MockBuilder`](./MockBuilder.md) also supports standalone components +[`MockBuilder`](MockBuilder.md) also supports standalone components and allows to mock their imports only for shallow rendering. ## Advanced example diff --git a/docs/articles/api/MockDirective.md b/docs/articles/api/MockDirective.md index 351b7e376d..5474312352 100644 --- a/docs/articles/api/MockDirective.md +++ b/docs/articles/api/MockDirective.md @@ -34,7 +34,7 @@ A mock directive has: :::tip Information about mocking FormControl, ControlValueAccessor, Validator and AsyncValidator -is in [a different section](../extra/mock-form-controls.md). +is in [a different section](/extra/mock-form-controls.md). ::: ## Simple example @@ -118,7 +118,7 @@ TestBed.configureTestingModule({ }); ``` -[`MockBuilder`](./MockBuilder.md) recognizes and handles standalone directives. +[`MockBuilder`](MockBuilder.md) recognizes and handles standalone directives. Also, it allows to mock their imports only for shallow testing. ## Advanced example with attribute directives diff --git a/docs/articles/api/MockInstance.md b/docs/articles/api/MockInstance.md index a1363e98f0..bf50d9b77b 100644 --- a/docs/articles/api/MockInstance.md +++ b/docs/articles/api/MockInstance.md @@ -11,11 +11,11 @@ It is useful, when we want to configure spies before their usage. It supports: modules, components, directives, pipes, services and tokens. The mocks should be created by: -- [`MockBuilder`](../api/MockBuilder.md) -- [`MockModule`](../api/MockModule.md) -- [`MockComponent`](../api/MockComponent.md) -- [`MockDirective`](../api/MockDirective.md) -- [`MockProvider`](../api/MockProvider.md) +- [`MockBuilder`](/api/MockBuilder.md) +- [`MockModule`](/api/MockModule.md) +- [`MockComponent`](/api/MockComponent.md) +- [`MockDirective`](/api/MockDirective.md) +- [`MockProvider`](/api/MockProvider.md) ## Define customizations @@ -219,8 +219,8 @@ it('test 3', () => { It is definitely the right time to use it, if a test fails like: -- [TypeError: Cannot read property 'subscribe' of undefined](../troubleshooting/read-property-of-undefined.md) -- [TypeError: Cannot read property 'pipe' of undefined](../troubleshooting/read-property-of-undefined.md) +- [TypeError: Cannot read property 'subscribe' of undefined](/troubleshooting/read-property-of-undefined.md) +- [TypeError: Cannot read property 'pipe' of undefined](/troubleshooting/read-property-of-undefined.md) - or any other issue like reading properties or calling methods of undefined Or we want to customize a mock declaration which is accessed via: @@ -244,7 +244,7 @@ class RealComponent implements AfterViewInit { When we test `RealComponent` we would like to have a mock `ChildComponent`, and it would mean, if we replaced it with a mock `ChildComponent` then its `update$` would return `undefined`, -therefore our test would fail in `ngAfterViewInit` because of [`TypeError: Cannot read property 'subscribe' of undefined`](../troubleshooting/read-property-of-undefined.md). +therefore our test would fail in `ngAfterViewInit` because of [`TypeError: Cannot read property 'subscribe' of undefined`](/troubleshooting/read-property-of-undefined.md). In our case, we have a component instance created by Angular, and does not look like `TestBed` provides a solution here. That is where `ng-mocks` helps again with the `MockInstance` helper function. diff --git a/docs/articles/api/MockModule.md b/docs/articles/api/MockModule.md index cd7b8c4f0c..6120a54624 100644 --- a/docs/articles/api/MockModule.md +++ b/docs/articles/api/MockModule.md @@ -26,7 +26,7 @@ A mock module provides: - respect of tokens with a `useExisting` definition - empty objects instead of tokens with a `helperUseFactory` definition - base primitives instead of tokens with a `useValue` definition -- mocks of tokens with a `useValue` definition can read in the section called [How to fix `Type is part of the declarations of 2 modules`](../troubleshooting/declarations-of-2-modules.md). +- mocks of tokens with a `useValue` definition can read in the section called [How to fix `Type is part of the declarations of 2 modules`](/troubleshooting/declarations-of-2-modules.md). :::danger Do not use `MockModule` on modules which declare the tested declaration. diff --git a/docs/articles/api/MockPipe.md b/docs/articles/api/MockPipe.md index 4ea0f6fedc..95f766de11 100644 --- a/docs/articles/api/MockPipe.md +++ b/docs/articles/api/MockPipe.md @@ -116,7 +116,7 @@ TestBed.configureTestingModule({ }); ``` -[`MockBuilder`](./MockBuilder.md) also supports and correctly works with standalone pipes. +[`MockBuilder`](MockBuilder.md) also supports and correctly works with standalone pipes. ## Advanced example diff --git a/docs/articles/api/MockProvider.md b/docs/articles/api/MockProvider.md index 836fd84f2b..1e5d064aa0 100644 --- a/docs/articles/api/MockProvider.md +++ b/docs/articles/api/MockProvider.md @@ -231,7 +231,7 @@ describe('Test', () => { :::warning Please note The most common error developers meet, when they create mock services, is "**TypeError: Cannot read property 'subscribe' of undefined**". -If we are encountering it too, please read a section called [How to fix TypeError: Cannot read property 'subscribe' of undefined](../troubleshooting/read-property-of-undefined.md). +If we are encountering it too, please read a section called [How to fix TypeError: Cannot read property 'subscribe' of undefined](/troubleshooting/read-property-of-undefined.md). ::: ## Advanced example diff --git a/docs/articles/api/MockRender.md b/docs/articles/api/MockRender.md index d483cfb8fd..dd2885dc97 100644 --- a/docs/articles/api/MockRender.md +++ b/docs/articles/api/MockRender.md @@ -118,7 +118,7 @@ usage of `MockRender` after usage of `TestBed.get`, `TestBed.inject`, `TestBed.c triggers an error about dirty `TestBed`. However, it is still possible to use `MockRender` more than once in a test. -It requires a reset of `TestBed` (check [`ngMocks.flushTestBed`](./ngMocks/flushTestBed.md)). +It requires a reset of `TestBed` (check [`ngMocks.flushTestBed`](ngMocks/flushTestBed.md)). Please note, that this makes all existing service instances obsolete. ```ts diff --git a/docs/articles/api/MockService.md b/docs/articles/api/MockService.md index 99358f8656..398e959455 100644 --- a/docs/articles/api/MockService.md +++ b/docs/articles/api/MockService.md @@ -9,7 +9,7 @@ If you are here in order to mock **a service** or **a token**, please read [corresponding section about MockProvider](MockProvider.md). If you want to change default mock behavior, -please read [how to customize mocks](../extra/customize-mocks.md). +please read [how to customize mocks](/extra/customize-mocks.md). ::: If you **need a mock object of a class** which does not belong to Angular declarations, for instance `HTMLInputElement`, diff --git a/docs/articles/api/ngMocks/change.md b/docs/articles/api/ngMocks/change.md index 3d5ab02503..4a85e49a34 100644 --- a/docs/articles/api/ngMocks/change.md +++ b/docs/articles/api/ngMocks/change.md @@ -1,6 +1,6 @@ --- title: ngMocks.change -description: Documentation about ngMocks.change from ng-mocks library +description: Documentation about `ngMocks.change` from ng-mocks library --- `ngMocks.change` helps to **simulate external changes of a form control**. @@ -29,7 +29,7 @@ ngMocks.change(el, 123); expect(component.value).toEqual(123); ``` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). ```ts ngMocks.change('input', 123); diff --git a/docs/articles/api/ngMocks/click.md b/docs/articles/api/ngMocks/click.md index 32ab91bd96..7aa9b4938a 100644 --- a/docs/articles/api/ngMocks/click.md +++ b/docs/articles/api/ngMocks/click.md @@ -1,6 +1,6 @@ --- title: ngMocks.click -description: Documentation about ngMocks.click, a simple tool to click any element in unit tests +description: Documentation about `ngMocks.click`, a simple tool to click any element in unit tests --- There are several ways how to click an element in Angular unit tests. @@ -27,7 +27,7 @@ ngMocks.click(el.nativeElement, { }); ``` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). ```ts ngMocks.click('a'); @@ -42,5 +42,5 @@ ngMocks.click(['data-role']); ngMocks.click(['data-role', 'link']); ``` -Under the hood `ngMocks.click` uses [`ngMocks.trigger`](./trigger.md), -therefore all features of [`ngMocks.trigger`](./trigger.md) can be used. +Under the hood `ngMocks.click` uses [`ngMocks.trigger`](trigger.md), +therefore all features of [`ngMocks.trigger`](trigger.md) can be used. diff --git a/docs/articles/api/ngMocks/crawl.md b/docs/articles/api/ngMocks/crawl.md index b2d21a369b..6e64b5f20c 100644 --- a/docs/articles/api/ngMocks/crawl.md +++ b/docs/articles/api/ngMocks/crawl.md @@ -1,6 +1,6 @@ --- title: ngMocks.crawl -description: Documentation about ngMocks.crawl from ng-mocks library +description: Documentation about `ngMocks.crawl` from ng-mocks library --- `ngMocks.crawl` is a special function which goes through the passed `DebugNode` or `DebugElement`, @@ -26,7 +26,7 @@ a different amount of text nodes for the same template. ngMocks.crawl(debugElement, callback, textNodes); ``` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). ```ts ngMocks.crawl('div.root', callback, textNodes); diff --git a/docs/articles/api/ngMocks/defaultConfig.md b/docs/articles/api/ngMocks/defaultConfig.md index 7ef21b1920..0cc2514d09 100644 --- a/docs/articles/api/ngMocks/defaultConfig.md +++ b/docs/articles/api/ngMocks/defaultConfig.md @@ -3,7 +3,7 @@ title: ngMocks.defaultConfig description: Documentation about ngMocks.defaultConfig from ng-mocks library --- -Sets default config for mocks in [`MockBuilder`](../MockBuilder.md#config). +Sets default config for mocks in [`MockBuilder`](/api/MockBuilder.md#config). - `ngMocks.defaultConfig( Component, config )` - sets a default config for a component - `ngMocks.defaultConfig( Directive, config )` - sets a default config for a directive diff --git a/docs/articles/api/ngMocks/event.md b/docs/articles/api/ngMocks/event.md index 8dec3c515a..4f7863e946 100644 --- a/docs/articles/api/ngMocks/event.md +++ b/docs/articles/api/ngMocks/event.md @@ -1,6 +1,6 @@ --- title: ngMocks.event -description: Documentation about ngMocks.event, a simple interface to create custom events in unit tests +description: Documentation about `ngMocks.event`, a simple interface to create custom events in unit tests --- `ngMocks.event` solves the legacy of IE11, when an event object cannot be created via `new CustomEvent`, but via `document.createEvent`. @@ -14,4 +14,4 @@ const event = ngMocks.event('click', { }); ``` -The created event can be dispatched via [`ngMocks.trigger`](./trigger.md#custom-events). +The created event can be dispatched via [`ngMocks.trigger`](trigger.md#custom-events). diff --git a/docs/articles/api/ngMocks/faster.md b/docs/articles/api/ngMocks/faster.md index 94f20e4023..6b10741462 100644 --- a/docs/articles/api/ngMocks/faster.md +++ b/docs/articles/api/ngMocks/faster.md @@ -1,6 +1,6 @@ --- title: ngMocks.faster -description: Documentation about ngMocks.faster from ng-mocks library +description: Documentation about `ngMocks.faster` from ng-mocks library --- There is a `ngMocks.faster` feature that optimizes setup of similar test modules between tests @@ -35,7 +35,7 @@ describe('performance:correct', () => { If a test creates spies in `beforeEach` then this should be tuned, because `ngMocks.faster` will detect this difference and display a notice. -A possible solution is usage of [MockInstance](../MockInstance.md) instead of manual declaration, +A possible solution is usage of [MockInstance](/api/MockInstance.md) instead of manual declaration, or to move creation of spies outside of `beforeEach`. ## Example of MockInstance @@ -102,7 +102,7 @@ describe('beforeEach:manual-spy', () => { ## MockRender -Usage of `ngMocks.faster()` covers [`MockRender`](../MockRender.md) too. +Usage of `ngMocks.faster()` covers [`MockRender`](/api/MockRender.md) too. With its help, `MockRender` can be called in either `beforeEach` or `beforeAll`. `beforeAll` won't reset its fixture after a test, and the fixture can be used in the next test. diff --git a/docs/articles/api/ngMocks/find.md b/docs/articles/api/ngMocks/find.md index e4bf26e362..923a0c9152 100644 --- a/docs/articles/api/ngMocks/find.md +++ b/docs/articles/api/ngMocks/find.md @@ -1,6 +1,6 @@ --- title: ngMocks.find -description: Documentation about ngMocks.find from ng-mocks library +description: Documentation about `ngMocks.find` from ng-mocks library --- Returns a found DebugElement which belongs to a component with the correctly typed componentInstance, diff --git a/docs/articles/api/ngMocks/findInstance.md b/docs/articles/api/ngMocks/findInstance.md index 869db15d65..3531077c10 100644 --- a/docs/articles/api/ngMocks/findInstance.md +++ b/docs/articles/api/ngMocks/findInstance.md @@ -9,7 +9,7 @@ If the element is not specified, then the current fixture is used. - `ngMocks.findInstance( fixture?, directive, notFoundValue? )` - `ngMocks.findInstance( debugElement?, directive, notFoundValue? )` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.findInstance( cssSelector?, directive, notFoundValue? )` diff --git a/docs/articles/api/ngMocks/findInstances.md b/docs/articles/api/ngMocks/findInstances.md index 1dcc105670..a550022260 100644 --- a/docs/articles/api/ngMocks/findInstances.md +++ b/docs/articles/api/ngMocks/findInstances.md @@ -9,7 +9,7 @@ If the element is not specified, then the current fixture is used. - `ngMocks.findInstances( fixture?, directive )` - `ngMocks.findInstances( debugElement?, directive )` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.findInstances( cssSelector?, directive )` diff --git a/docs/articles/api/ngMocks/findTemplateRef.md b/docs/articles/api/ngMocks/findTemplateRef.md index 0b74c7c214..6348a69da0 100644 --- a/docs/articles/api/ngMocks/findTemplateRef.md +++ b/docs/articles/api/ngMocks/findTemplateRef.md @@ -10,7 +10,7 @@ If the element is not specified, then the current fixture is used. - `ngMocks.findTemplateRef( debugElement?, id, notFoundValue? )` - `ngMocks.findTemplateRef( debugElement?, [attribute, value?], notFoundValue? )` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.findTemplateRef( cssSelector?, [attribute, value?], notFoundValue? )` diff --git a/docs/articles/api/ngMocks/findTemplateRefs.md b/docs/articles/api/ngMocks/findTemplateRefs.md index 9f230057b7..845cef7208 100644 --- a/docs/articles/api/ngMocks/findTemplateRefs.md +++ b/docs/articles/api/ngMocks/findTemplateRefs.md @@ -10,7 +10,7 @@ If the element is not specified, then the current fixture is used. - `ngMocks.findTemplateRefs( debugElement?, id )` - `ngMocks.findTemplateRefs( debugElement?, [attribute, value?] )` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.findTemplateRefs( cssSelector?, [attribute, value?] )` @@ -40,4 +40,4 @@ const onlyFooters = ngMocks.findTemplateRefs(['myTpl', 'footer']); const empty = ngMocks.findTemplateRefs(['myTpl', 'body']); ``` -More information can be found in [`ngMocks.findTemplateRef`](./findTemplateRef.md). +More information can be found in [`ngMocks.findTemplateRef`](findTemplateRef.md). diff --git a/docs/articles/api/ngMocks/formatHtml.md b/docs/articles/api/ngMocks/formatHtml.md index 2a17b9aab0..18db212ef8 100644 --- a/docs/articles/api/ngMocks/formatHtml.md +++ b/docs/articles/api/ngMocks/formatHtml.md @@ -51,7 +51,7 @@ becomes ## ng-container -A cool thing is that `ngMocks.formatHtml` uses [`ngMocks.crawl`](./crawl.md) under the hood +A cool thing is that `ngMocks.formatHtml` uses [`ngMocks.crawl`](crawl.md) under the hood and respects `ng-container`. so if we have a pointer to `ng-container`, we can assert its content. diff --git a/docs/articles/api/ngMocks/formatText.md b/docs/articles/api/ngMocks/formatText.md index c809c1e866..16c4829c99 100644 --- a/docs/articles/api/ngMocks/formatText.md +++ b/docs/articles/api/ngMocks/formatText.md @@ -41,7 +41,7 @@ header 12 ## ng-container -A cool thing is that `ngMocks.formatText` uses [`ngMocks.crawl`](./crawl.md) under the hood +A cool thing is that `ngMocks.formatText` uses [`ngMocks.crawl`](crawl.md) under the hood and respects `ng-container`. so if we have a pointer to `ng-container`, we can assert its content. diff --git a/docs/articles/api/ngMocks/get.md b/docs/articles/api/ngMocks/get.md index 90acaebb17..f19e352210 100644 --- a/docs/articles/api/ngMocks/get.md +++ b/docs/articles/api/ngMocks/get.md @@ -1,6 +1,6 @@ --- title: ngMocks.get -description: Documentation about ngMocks.get from ng-mocks library +description: Documentation about `ngMocks.get` from ng-mocks library --- Returns a component, directive, service or token, which can be attribute or structural directives, @@ -25,7 +25,7 @@ const service = ngMocks.get(MyServiceType); ``` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.get( cssSelector, Directive, notFoundValue? )` ```ts diff --git a/docs/articles/api/ngMocks/guts.md b/docs/articles/api/ngMocks/guts.md index 5a94d80e60..aa4392c552 100644 --- a/docs/articles/api/ngMocks/guts.md +++ b/docs/articles/api/ngMocks/guts.md @@ -1,6 +1,6 @@ --- title: ngMocks.guts -description: Documentation about ngMocks.guts from ng-mocks library +description: Documentation about `ngMocks.guts` from ng-mocks library --- Generates and returns metadata for `TestBed` module. diff --git a/docs/articles/api/ngMocks/hide.md b/docs/articles/api/ngMocks/hide.md index 0d1097fc9c..71600e7dc7 100644 --- a/docs/articles/api/ngMocks/hide.md +++ b/docs/articles/api/ngMocks/hide.md @@ -1,9 +1,9 @@ --- title: ngMocks.hide -description: Documentation about ngMocks.hide from ng-mocks library +description: Documentation about `ngMocks.hide` from ng-mocks library --- -`ngMocks.hide` hides what [`ngMocks.render`](./render.md) has rendered. +`ngMocks.hide` hides what [`ngMocks.render`](render.md) has rendered. ```ts ngMocks.hide(declarationInst); diff --git a/docs/articles/api/ngMocks/ignoreOnConsole.md b/docs/articles/api/ngMocks/ignoreOnConsole.md index 83a341ed06..889feb9678 100644 --- a/docs/articles/api/ngMocks/ignoreOnConsole.md +++ b/docs/articles/api/ngMocks/ignoreOnConsole.md @@ -3,7 +3,7 @@ title: ngMocks.ignoreOnConsole description: A way to suppress console logs in Angular unit tests --- -`ngMocks.ignoreOnConsole` suppresses `console.log` with a spy (if [auto spy](../../extra/auto-spy.md) is being used). +`ngMocks.ignoreOnConsole` suppresses `console.log` with a spy (if [auto spy](/extra/auto-spy.md) is being used). `ngMocks.ignoreOnConsole` suppresses the functions for the current test suite in `beforeAll` and restores in `afterAll`. diff --git a/docs/articles/api/ngMocks/input.md b/docs/articles/api/ngMocks/input.md index 9ddff5ccad..6cb310d7f6 100644 --- a/docs/articles/api/ngMocks/input.md +++ b/docs/articles/api/ngMocks/input.md @@ -1,6 +1,6 @@ --- title: ngMocks.input -description: Documentation about ngMocks.input from ng-mocks library +description: Documentation about `ngMocks.input` from ng-mocks library --- Returns value of an `input` of an element. @@ -8,7 +8,7 @@ It avoids the issue of knowing the name of a component / directive the input bel - `ngMocks.input( debugElement, input, notFoundValue? )` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.input( cssSelector, input, notFoundValue? )` diff --git a/docs/articles/api/ngMocks/output.md b/docs/articles/api/ngMocks/output.md index 6c80ed3235..edf43eca91 100644 --- a/docs/articles/api/ngMocks/output.md +++ b/docs/articles/api/ngMocks/output.md @@ -1,6 +1,6 @@ --- title: ngMocks.output -description: Documentation about ngMocks.output from ng-mocks library +description: Documentation about `ngMocks.output` from ng-mocks library --- Returns an emitter of an `output` of an element. @@ -8,7 +8,7 @@ It avoids the issue of knowing the name of a component / directive the output be - `ngMocks.output( debugElement, output, notFoundValue? )` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). - `ngMocks.output( cssSelector, output, notFoundValue? )` diff --git a/docs/articles/api/ngMocks/render.md b/docs/articles/api/ngMocks/render.md index 1d9ad38648..6db212df93 100644 --- a/docs/articles/api/ngMocks/render.md +++ b/docs/articles/api/ngMocks/render.md @@ -1,12 +1,12 @@ --- title: ngMocks.render -description: Documentation about ngMocks.render from ng-mocks library +description: Documentation about `ngMocks.render` from ng-mocks library --- `ngMocks.render` goes through **all queries**, such as `ContentChild` and `ContentChildren`, tries to find related `TemplateRef` or a **structural directive**, and render it with a given context. -In order to hide them, use [`ngMocks.hide`](./hide.md). +In order to hide them, use [`ngMocks.hide`](hide.md). ```ts ngMocks.render(declarationInst, templateRef); @@ -44,8 +44,8 @@ To render a `TemplateRef` / `ng-template` we need to have 2 things: - a variable which points to a component / directive with the query - a variable which points to the template -The first task can be solved by [`ngMocks.find`](./find.md) or [`ngMocks.findInstance`](./findInstance.md), -the second task can be solved by [`ngMocks.findTemplateRef`](./findTemplateRef.md). +The first task can be solved by [`ngMocks.find`](find.md) or [`ngMocks.findInstance`](findInstance.md), +the second task can be solved by [`ngMocks.findTemplateRef`](findTemplateRef.md). Let's assume, that we have the next template: diff --git a/docs/articles/api/ngMocks/reset.md b/docs/articles/api/ngMocks/reset.md index 8c1228211e..ae8d51bd18 100644 --- a/docs/articles/api/ngMocks/reset.md +++ b/docs/articles/api/ngMocks/reset.md @@ -1,6 +1,6 @@ --- title: ngMocks.reset -description: Documentation about ngMocks.reset from ng-mocks library +description: Documentation about `ngMocks.reset` from ng-mocks library --- `ngMocks.reset` resets cache of `ng-mocks`. diff --git a/docs/articles/api/ngMocks/reveal.md b/docs/articles/api/ngMocks/reveal.md index 2b0d245b9d..981f0febe6 100644 --- a/docs/articles/api/ngMocks/reveal.md +++ b/docs/articles/api/ngMocks/reveal.md @@ -1,18 +1,18 @@ --- title: ngMocks.reveal -description: Documentation about ngMocks.reveal from ng-mocks library +description: Documentation about `ngMocks.reveal` from ng-mocks library --- There are `ng-container` and `ng-template` besides normal html elements in Angular. -But, the problem is that [`ngMocks.find`](./find.md) and [`ngMocks.findAll`](./findAll.md), which use `debugElement.query` and `debugElement.queryAll`, +But, the problem is that [`ngMocks.find`](find.md) and [`ngMocks.findAll`](findAll.md), which use `debugElement.query` and `debugElement.queryAll`, can find neither `ng-container` nor `ng-template`. However, a wish to assert on the content of a `ng-container` never leaves the head. Likewise, a wish to get a `ng-template` and to render it with a custom context, just because it is a test. **Here we go!** `ngMocks.reveal` has been made for that. -It is like [`ngMocks.find`](./find.md) and [`ngMocks.findAll`](./findAll.md), +It is like [`ngMocks.find`](find.md) and [`ngMocks.findAll`](findAll.md), but its **queries are based on Angular declarations** instead of css and html. Now, if we had a template like that: @@ -60,7 +60,7 @@ ngMocks.reveal('never-possible'); ## Narrowing context `ngMocks.reveal` supports `ComponentFixture`, `DebugElements`, `DebugNodes` -and selectors which are supported by [`ngMocks.find`](./find.md). +and selectors which are supported by [`ngMocks.find`](find.md). If none has been provided, then the latest known fixture is used. In a template like: @@ -184,7 +184,7 @@ const footer = ngMocks.reveal(['tpl', 'footer']); ## Query by id -Also we can query by ids. Simply prefix the desired id with `#`. +Also, we can query by ids. Simply prefix the desired id with `#`. In a template like: diff --git a/docs/articles/api/ngMocks/revealAll.md b/docs/articles/api/ngMocks/revealAll.md index 9b4df832cf..9997cf3ff4 100644 --- a/docs/articles/api/ngMocks/revealAll.md +++ b/docs/articles/api/ngMocks/revealAll.md @@ -3,7 +3,7 @@ title: ngMocks.revealAll description: Documentation about ngMocks.revealAll from ng-mocks library --- -Behavior of `ngMocks.revealAll` repeats [`ngMocks.reveal`](./reveal.md), +Behavior of `ngMocks.revealAll` repeats [`ngMocks.reveal`](reveal.md), but, instead of returning the first suitable element, `ngMocks.revealAll` will collect all suitable elements and return all of them. diff --git a/docs/articles/api/ngMocks/stub.md b/docs/articles/api/ngMocks/stub.md index bb3446dc7a..5b68ec64bc 100644 --- a/docs/articles/api/ngMocks/stub.md +++ b/docs/articles/api/ngMocks/stub.md @@ -1,6 +1,6 @@ --- title: ngMocks.stub -description: Documentation about ngMocks.stub from ng-mocks library +description: Documentation about `ngMocks.stub` from ng-mocks library --- `ngMocks.stub` is needed in case if we want to create stub methods / properties of a service. diff --git a/docs/articles/api/ngMocks/touch.md b/docs/articles/api/ngMocks/touch.md index 2123f3caf8..4ed21db54f 100644 --- a/docs/articles/api/ngMocks/touch.md +++ b/docs/articles/api/ngMocks/touch.md @@ -1,6 +1,6 @@ --- title: ngMocks.touch -description: Documentation about ngMocks.touch from ng-mocks library +description: Documentation about `ngMocks.touch` from ng-mocks library --- `ngMocks.touch` helps to **simulate external touches of a form control**. @@ -29,7 +29,7 @@ ngMocks.touch(valueAccessorEl); expect(component.myControl.touched).toEqual(true); ``` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). ```ts ngMocks.touch(['data-testid', 'inputControl']); diff --git a/docs/articles/api/ngMocks/trigger.md b/docs/articles/api/ngMocks/trigger.md index 9b776cddd0..6d6d21e15a 100644 --- a/docs/articles/api/ngMocks/trigger.md +++ b/docs/articles/api/ngMocks/trigger.md @@ -1,6 +1,6 @@ --- title: ngMocks.trigger -description: Documentation about ngMocks.trigger, a tool with a simple interface to trigger any events in unit tests +description: Documentation about `ngMocks.trigger`, a tool with a simple interface to trigger any events in unit tests --- `ngMocks.trigger` provides a simple interface which allows to trigger all the variety of events and to customize their properties. @@ -19,7 +19,7 @@ ngMocks.trigger(el, 'mouseleave', { }); ``` -or simply with selectors which are supported by [`ngMocks.find`](./find.md). +or simply with selectors which are supported by [`ngMocks.find`](find.md). ```ts ngMocks.trigger('input[name="address"]', 'focus'); @@ -40,7 +40,7 @@ ngMocks.trigger(el, 'keyup.meta.s'); ## Custom events Instead of the name of an event, an event object can be passed. -In order to create an event object [`ngMocks.event`](./event.md) can be used. +In order to create an event object [`ngMocks.event`](event.md) can be used. ```ts const el = ngMocks.find('input'); diff --git a/docs/articles/credits.md b/docs/articles/credits.md index 859e06dc7a..41ca84b8f6 100644 --- a/docs/articles/credits.md +++ b/docs/articles/credits.md @@ -15,23 +15,5 @@ sidebar_label: Credits - [DmitryEfimenko](https://github.com/DmitryEfimenko) provided valuable feedback and ideas how to improve the library -- [philmayfield](https://github.com/philmayfield) - donated to support the development -- [patelvimal](https://github.com/patelvimal) - donated to support the development -- [qdelettre](https://github.com/qdelettre) - donated to support the development -- [santoshyadavdev](https://github.com/santoshyadavdev) - donated to support the development -- [SerkanSipahi](https://github.com/SerkanSipahi) - donated to support the development -- [mattlewis92](https://github.com/mattlewis92) - donated to support the development -- anonymous x3 - donated to support the development -- [LPCmedia](https://github.com/LPCmedia) - donated to support the development -- [GerkinDev](https://github.com/GerkinDev) - donated to support the development - [Vinay Kaparthi](https://www.linkedin.com/in/vinay-kaparthi/) provided valuable feedback about performance of the library and shed light on some bottlenecks. diff --git a/docs/articles/extra/customize-mocks.md b/docs/articles/extra/customize-mocks.md index 3af6d6503f..3292a63d86 100644 --- a/docs/articles/extra/customize-mocks.md +++ b/docs/articles/extra/customize-mocks.md @@ -9,7 +9,7 @@ The goal of this article is to explain purpose of every way and to try to descri ## ngMocks.defaultMock -[`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md) - is useful to provide **default mock behavior** for declarations, services and tokens in the **entire test suites**. +[`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md) - is useful to provide **default mock behavior** for declarations, services and tokens in the **entire test suites**. For example, we have a service with a property that is an observable stream. In tests, we would like to avoid failures like `Cannot read property 'subscribe' of undefined`, when we are mocking the service. @@ -23,11 +23,11 @@ ngMocks.defaultMock(MyService, () => ({ ``` Profit, now mocks of `MyService` will have an `EMPTY` stream in the `stream$` property and all its subscribes will not fail anymore. -More information you can find in the related section about [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +More information you can find in the related section about [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). ## MockProvider -[`MockProvider`](../api/MockProvider.md) - is useful when we are configuring `TestBed.configureTestingModule` +[`MockProvider`](/api/MockProvider.md) - is useful when we are configuring `TestBed.configureTestingModule` and would like to mock a service or a token. ```ts @@ -40,7 +40,7 @@ Now, in related tests, `MyService` will be replaced with its mock object where i customization in the previous section about [`ngMocks.defaultMock`](#ngmocksdefaultmock). Furthermore, we can pass a custom slice as the second parameter for extra customization. -It takes the effect after all customizations defined in [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +It takes the effect after all customizations defined in [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). ```ts TestBed.configureTestingModule({ @@ -53,15 +53,15 @@ TestBed.configureTestingModule({ ``` This will override the `stream$` property, and now, all its subscribes will get an error in the related tests. -More information you can find in the section about [`MockProvider`](../api/MockProvider.md). +More information you can find in the section about [`MockProvider`](/api/MockProvider.md). ## MockInstance -[`MockInstance`](../api/MockInstance.md) - is useful when we need to customize behavior of a declaration or provider in a particular test. +[`MockInstance`](/api/MockInstance.md) - is useful when we need to customize behavior of a declaration or provider in a particular test. For example, we want the `stream$` to emit something. :::note -[`MockProvider`](../api/MockProvider.md) should be called before [`MockRender`](../api/MockRender.md) or `TestBed.createComponent`. +[`MockProvider`](/api/MockProvider.md) should be called before [`MockRender`](/api/MockRender.md) or `TestBed.createComponent`. ::: ```ts @@ -77,28 +77,28 @@ it('test', () => { }); ``` -[`MockInstance`](../api/MockInstance.md) is the latest in the sequence of customizing behavior, -and will be applied after [`MockProvider`](../api/MockProvider.md), [`MockBuilder.mock`](../api/MockBuilder.md#mock) -and [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +[`MockInstance`](/api/MockInstance.md) is the latest in the sequence of customizing behavior, +and will be applied after [`MockProvider`](/api/MockProvider.md), [`MockBuilder.mock`](/api/MockBuilder.md#mock) +and [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). -More information you can find in the related section about [`MockInstance`](../api/MockInstance.md). +More information you can find in the related section about [`MockInstance`](/api/MockInstance.md). ## MockService -[`MockService`](../api/MockService.md) - is useful when we need to create a mock instance of a class, and the class +[`MockService`](/api/MockService.md) - is useful when we need to create a mock instance of a class, and the class do not belong to declarations or providers. -**A mock object** produced by [`MockService`](../api/MockService.md) is based on its original class, and provides: +**A mock object** produced by [`MockService`](/api/MockService.md) is based on its original class, and provides: - all methods are dummies -- all properties have been linked via getters and setters (might not work in some cases, use [`ngMocks.stub`](../api/ngMocks/stub.md) then) +- all properties have been linked via getters and setters (might not work in some cases, use [`ngMocks.stub`](/api/ngMocks/stub.md) then) - respects [auto spy](auto-spy.md) environment For example, we have a mock component which real copy has an `inputElement` property with an instance of [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement), and some other component tries to `focus` on it like `this.viewChildRef.inputElement.focus()`, and another one tries to `blur`, etc. But, in our tests, these calls are just **side effects**, we would like to suppress them. -That is the case where [`MockService`](../api/MockService.md) shines. Because this customization may be useful for other tests too, let's define it via [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +That is the case where [`MockService`](/api/MockService.md) shines. Because this customization may be useful for other tests too, let's define it via [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). Also, its optional second parameter accepts a slice of the instance for extra customization. ```ts title="src/test.ts" @@ -116,13 +116,13 @@ and its consumers can safely call `.focus()`, `.blur()` along with other methods To recap the section: -- [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md) - customize mocks of declarations and providers **globally**. -- [`MockProvider`](../api/MockProvider.md) - customizes mocks of declarations and providers **in suites**. -- [`MockInstance`](../api/MockInstance.md) - customizes mocks of declarations and providers **in tests**. -- [`MockService`](../api/MockService.md) - creates **mock objects out of any classes**. +- [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md) - customize mocks of declarations and providers **globally**. +- [`MockProvider`](/api/MockProvider.md) - customizes mocks of declarations and providers **in suites**. +- [`MockInstance`](/api/MockInstance.md) - customizes mocks of declarations and providers **in tests**. +- [`MockService`](/api/MockService.md) - creates **mock objects out of any classes**. The priority of customization is: -- The first calls go to [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md) -- The second calls go to [`MockProvider`](../api/MockProvider.md) and [`MockBuilder.mock`](../api/MockBuilder.md#mock) -- The last call goes to [`MockInstance`](../api/MockInstance.md) +- The first calls go to [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md) +- The second calls go to [`MockProvider`](/api/MockProvider.md) and [`MockBuilder.mock`](/api/MockBuilder.md#mock) +- The last call goes to [`MockInstance`](/api/MockInstance.md) diff --git a/docs/articles/extra/how-to-write-tests.md b/docs/articles/extra/how-to-write-tests.md index 618400133a..86b35c7159 100644 --- a/docs/articles/extra/how-to-write-tests.md +++ b/docs/articles/extra/how-to-write-tests.md @@ -164,4 +164,4 @@ wouldn't be confused by the new structure. So my recommendation is: always follow the structure above, and read the rest of documentation as a reference of `ng-mocks` features. -Also, feel free ping our community if [you need help with `ng-mocks`](../need-help.md). +Also, feel free ping our community if [you need help with `ng-mocks`](/need-help.md). diff --git a/docs/articles/extra/install.md b/docs/articles/extra/install.md index 677e337599..a212003d64 100644 --- a/docs/articles/extra/install.md +++ b/docs/articles/extra/install.md @@ -18,9 +18,9 @@ There are several things you might need to configure globally for all tests: - default mocks should look like for different strategies (abstract classes) - adding spy to all mock methods automatically -It may be useful to configure [auto spy](./auto-spy.md) for all methods, getters and setters in mock declarations. +It may be useful to configure [auto spy](auto-spy.md) for all methods, getters and setters in mock declarations. -Apart from [auto spy](./auto-spy.md), we may want to customize mock behavior via [MockInstance](../api/MockInstance.md). +Apart from [auto spy](auto-spy.md), we may want to customize mock behavior via [MockInstance](/api/MockInstance.md). There is a way to reset all customizations automatically on `afterEach` and `afterAll` levels. Simply add the next code to `src/test.ts` or `src/setup-jest.ts` / `src/test-setup.ts` in case of jest, diff --git a/docs/articles/extra/mock-form-controls.md b/docs/articles/extra/mock-form-controls.md index 8121b069ad..13caf991a6 100644 --- a/docs/articles/extra/mock-form-controls.md +++ b/docs/articles/extra/mock-form-controls.md @@ -4,9 +4,9 @@ description: Information how to use ng-mocks in order to interact with mock form sidebar_label: Mock form controls --- -`ng-mocks` respects `ControlValueAccessor` interface if [a directive](../api/MockDirective.md), -or [a component](../api/MockComponent.md) implements it. -Apart from that, `ng-mocks` provides helper functions to emit [changes](../api/ngMocks/change.md) and [touches](../api/ngMocks/touch.md). +`ng-mocks` respects `ControlValueAccessor` interface if [a directive](/api/MockDirective.md), +or [a component](/api/MockComponent.md) implements it. +Apart from that, `ng-mocks` provides helper functions to emit [changes](/api/ngMocks/change.md) and [touches](/api/ngMocks/touch.md). it supports both `FormsModule` and `ReactiveFormsModule`: @@ -30,11 +30,11 @@ it supports both `FormsModule` and `ReactiveFormsModule`: ## Related tools -- [`ngMocks.change()`](../api/ngMocks/change.md) -- [`ngMocks.touch()`](../api/ngMocks/touch.md) +- [`ngMocks.change()`](/api/ngMocks/change.md) +- [`ngMocks.touch()`](/api/ngMocks/touch.md) -* [`isMockControlValueAccessor()`](../api/helpers/isMockControlValueAccessor.md) -* [`isMockValidator()`](../api/helpers/isMockValidator.md) +* [`isMockControlValueAccessor()`](/api/helpers/isMockControlValueAccessor.md) +* [`isMockValidator()`](/api/helpers/isMockValidator.md) ## Caution diff --git a/docs/articles/extra/mock-observables.md b/docs/articles/extra/mock-observables.md index 5d916f2953..8ac27ad546 100644 --- a/docs/articles/extra/mock-observables.md +++ b/docs/articles/extra/mock-observables.md @@ -5,9 +5,9 @@ sidebar_label: Mock observables --- **A mock observable in Angular tests** can be created by -[`MockProvider`](../api/MockProvider.md), -[`MockInstance`](../api/MockInstance.md) or -[`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +[`MockProvider`](/api/MockProvider.md), +[`MockInstance`](/api/MockInstance.md) or +[`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). ## The problem @@ -46,7 +46,7 @@ returns a spy, if [auto spy](auto-spy.md) has been configured, or `undefined`. T ## The solution Obviously, to solve this, we need to get the method to return an observable stream. -For that, we could extend the mock object via passing overrides as the second parameter into [`MockProvider`](../api/MockProvider.md). +For that, we could extend the mock object via passing overrides as the second parameter into [`MockProvider`](/api/MockProvider.md). ```ts TestBed.configureTestingModule({ @@ -63,7 +63,7 @@ Profit, now initialization of the component does not throw the error anymore. ## Permanent fix -If we want to do it for all tests globally, we might use [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +If we want to do it for all tests globally, we might use [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). ```ts ngMocks.defaultMock(TodoService, () => ({ @@ -78,7 +78,7 @@ Then, every time tests need a mock object of `TodoService`, its `list$()` will r Nevertheless, usually, we want not only to return a stub result as `EMPTY` observable stream, but also to provide a fake subject, that would simulate its calls. -A possible solution is to use [`MockInstance`](../api/MockInstance.md) within the `it` context: +A possible solution is to use [`MockInstance`](/api/MockInstance.md) within the `it` context: ```ts beforeEach(() => { @@ -106,7 +106,7 @@ it('test', () => { }); ``` -A solution for [`MockBuilder`](../api/MockBuilder.md) is quite similar. +A solution for [`MockBuilder`](/api/MockBuilder.md) is quite similar. ```ts let todoServiceList$: Subject; // <- a context variable. @@ -128,7 +128,7 @@ it('test', () => { }); ``` -This all might be implemented with [`MockInstance`](../api/MockInstance.md) too, +This all might be implemented with [`MockInstance`](/api/MockInstance.md) too, but it goes beyond the topic. ## Advanced example diff --git a/docs/articles/extra/quick-start.md b/docs/articles/extra/quick-start.md index c943f3a9c1..37306bec3f 100644 --- a/docs/articles/extra/quick-start.md +++ b/docs/articles/extra/quick-start.md @@ -8,17 +8,17 @@ Angular testing is fun and easy until you have met complex dependencies, and setting up the `TestBed` becomes really annoying and time-consuming. `ng-mocks` helps to bring fun and ease back allowing developers -**to create [mock child components](../api/MockComponent.md)** +**to create [mock child components](/api/MockComponent.md)** and stub dependencies via a few lines of code with help of -[`MockService`](../api/MockService.md), -[`MockComponent`](../api/MockComponent.md), -[`MockDirective`](../api/MockDirective.md), -[`MockPipe`](../api/MockPipe.md), -[`MockProvider`](../api/MockProvider.md), -[`MockModule`](../api/MockModule.md), +[`MockService`](/api/MockService.md), +[`MockComponent`](/api/MockComponent.md), +[`MockDirective`](/api/MockDirective.md), +[`MockPipe`](/api/MockPipe.md), +[`MockProvider`](/api/MockProvider.md), +[`MockModule`](/api/MockModule.md), or with pro tools such as -[`MockBuilder`](../api/MockBuilder.md) with -[`MockRender`](../api/MockRender.md). +[`MockBuilder`](/api/MockBuilder.md) with +[`MockRender`](/api/MockRender.md). Let's suppose that in our Angular application you have a component, called `AppBaseComponent`, and its template looks like that: @@ -49,7 +49,7 @@ This means that the component depends on the next child components, services and You could easily test it with `schemas: [NO_ERRORS_SCHEMA]` to avoid -[`Template parse errors: is not a known element`](../troubleshooting/not-a-known-element.md), +[`Template parse errors: is not a known element`](/troubleshooting/not-a-known-element.md), and it would work, but in this case you have zero guarantee, that our tests will fail if an interface of a dependency has been changed and requires code updates. Therefore, you have to avoid `NO_ERRORS_SCHEMA`. @@ -114,10 +114,10 @@ TestBed.configureTestingModule({ If you have noticed `search$ | async` in the template, you made the right assumption: you need to provide a fake observable stream to avoid failures -like [`Cannot read property 'pipe' of undefined`](../troubleshooting/read-property-of-undefined.md), +like [`Cannot read property 'pipe' of undefined`](/troubleshooting/read-property-of-undefined.md), when the component tries to execute `this.search$ = this.searchService.result$.pipe(...)` in `ngOnInit`. -For example, you can implement it via [`MockInstance`](../api/MockInstance.md): +For example, you can implement it via [`MockInstance`](/api/MockInstance.md): ```ts beforeEach(() => @@ -128,7 +128,7 @@ beforeEach(() => ``` or if you want to set that as default mock behavior for all tests, -you can use [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md) in `src/test.ts`: +you can use [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md) in `src/test.ts`: ```ts title="src/test.ts" ngMocks.defaultMock(SearchService, () => ({ @@ -153,7 +153,7 @@ Then, if someone deletes `AppSearchModule` the test fails too. ## ngMocks.guts -[`ngMocks.guts`](../api/ngMocks/guts.md) works like that: it accepts 3 parameters, each one is optional. +[`ngMocks.guts`](/api/ngMocks/guts.md) works like that: it accepts 3 parameters, each one is optional. - 1st parameter accepts things we want to test as they are, these won't be mocked. - 2nd parameter accepts dependencies of the things. These dependencies will be mocked. In the case of modules, @@ -162,7 +162,7 @@ Then, if someone deletes `AppSearchModule` the test fails too. Any parameter can be `null` to neglect it, or an array if we want to pass more than one thing. -Now, let's apply [`ngMocks.guts`](../api/ngMocks/guts.md) to `AppBaseComponent` and its `AppBaseModule` +Now, let's apply [`ngMocks.guts`](/api/ngMocks/guts.md) to `AppBaseComponent` and its `AppBaseModule` from the beginning of this article. The goal is to mock guts of `AppBaseModule`, but to keep `AppBaseComponent` as it is for testing, @@ -181,10 +181,10 @@ const testModuleDeclaration = ngMocks.guts( ); ``` -[`ngMocks.guts`](../api/ngMocks/guts.md) detects that `AppBaseModule` is a module and extracts its guts +[`ngMocks.guts`](/api/ngMocks/guts.md) detects that `AppBaseModule` is a module and extracts its guts respecting the 1st and the 3rd parameters, what should be mocked and excluded. -The result of [`ngMocks.guts`](../api/ngMocks/guts.md) is the same as: +The result of [`ngMocks.guts`](/api/ngMocks/guts.md) is the same as: ```ts const testModuleDeclaration = { @@ -261,7 +261,7 @@ Profit. That should be enough for the start. The functions above help with an easy start, but they do not cover all possible cases and do not provide tools for customizing behavior. -Consider reading [`MockBuilder`](../api/MockBuilder.md) and [`MockRender`](../api/MockRender.md) +Consider reading [`MockBuilder`](/api/MockBuilder.md) and [`MockRender`](/api/MockRender.md) if you want **to create mocks for child dependencies like a pro** in Angular tests. @@ -284,4 +284,4 @@ beforeEach(() => { Profit. -Have a question still? Do not hesitate to [contact us](../need-help.md). +Have a question still? Do not hesitate to [contact us](/need-help.md). diff --git a/docs/articles/extra/sanitizer.md b/docs/articles/extra/sanitizer.md index ccb324579d..b7042e1109 100644 --- a/docs/articles/extra/sanitizer.md +++ b/docs/articles/extra/sanitizer.md @@ -17,8 +17,8 @@ Because of that `ng-mocks` avoids its mocking by default. Another problem is that the class is abstract and there is no way to detect their abstract methods in javascript runtime in order to provide mock functions or spies instead. -However, `ng-mocks` contains [`MockRender`](../api/MockRender.md) which supports additional providers for rendered things. -Therefore, if we use [`MockRender`](../api/MockRender.md) and [`MockProvider`](../api/MockProvider.md), we can achieve desired environment and behavior: +However, `ng-mocks` contains [`MockRender`](/api/MockRender.md) which supports additional providers for rendered things. +Therefore, if we use [`MockRender`](/api/MockRender.md) and [`MockProvider`](/api/MockProvider.md), we can achieve desired environment and behavior: ```ts // rendering TargetComponent component @@ -40,7 +40,7 @@ Profit. ## Always mock / spy DomSanitizer If you want to spy `DomSanitizer` globally, -you can use [`ngMocks.globalMock`](../api/ngMocks/globalMock.md) and [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md). +you can use [`ngMocks.globalMock`](/api/ngMocks/globalMock.md) and [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md). In this case, `ng-mocks` understands that `DomSanitizer` should be mocked by default. diff --git a/docs/articles/extra/templateref.md b/docs/articles/extra/templateref.md index 03093e1e22..872dffe84c 100644 --- a/docs/articles/extra/templateref.md +++ b/docs/articles/extra/templateref.md @@ -8,8 +8,8 @@ sidebar_label: Testing TemplateRef Please use: -- [ngMocks.render](../api/ngMocks/render.md) -- [ngMocks.hide](../api/ngMocks/hide.md) +- [ngMocks.render](/api/ngMocks/render.md) +- [ngMocks.hide](/api/ngMocks/hide.md) ::: @@ -41,9 +41,9 @@ but when and how they are rendered by the library - we do not want to care. There are several **test examples** for different UI libraries: -- [ng-select](../guides/libraries/ng-select.md) -- [Angular Material and `mat-table`](../guides/libraries/angular-material.md) -- [PrimeNG and `p-calendar`](../guides/libraries/primeng.md) +- [ng-select](/guides/libraries/ng-select.md) +- [Angular Material and `mat-table`](/guides/libraries/angular-material.md) +- [PrimeNG and `p-calendar`](/guides/libraries/primeng.md) Other libraries / components can be tested in the similar way. @@ -121,7 +121,7 @@ We can find the directive via providing its class, but, unfortunately, not its selector. However, good news is that it will be changed soon. -Please follow this issue on github: [render by selector](https://github.com/help-me-mom/ng-mocks/issues/292). +Please follow this issue on GitHub: [render by selector](https://github.com/help-me-mom/ng-mocks/issues/292). ::: ```ts diff --git a/docs/articles/extra/with-3rd-party.md b/docs/articles/extra/with-3rd-party.md index ba46c5fc2c..426ec9856b 100644 --- a/docs/articles/extra/with-3rd-party.md +++ b/docs/articles/extra/with-3rd-party.md @@ -3,20 +3,20 @@ title: Usage with 3rd-party libraries description: Integration of ng-mocks with other libraries and frameworks --- -`ng-mocks` provides flexibility via [`ngMocks.guts`](../api/ngMocks/guts.md) and [`MockBuilder`](../api/MockBuilder.md) +`ng-mocks` provides flexibility via [`ngMocks.guts`](/api/ngMocks/guts.md) and [`MockBuilder`](/api/MockBuilder.md) that allows developers to use other **Angular testing libraries**, and at the same time to **turn dependencies into mocks**. -## @ngneat/spectator +## `@ngneat/spectator` For example, if there is a need to mock declarations in [`@ngneat/spectator`](https://www.npmjs.com/package/@ngneat/spectator) and its functions like `createHostFactory`, `createComponentFactory`, `createDirectiveFactory` and so on, -you can use two options from `ng-mocks`: [`ngMocks.guts`](../api/ngMocks/guts.md) and [`MockBuilder`](../api/MockBuilder.md) +you can use two options from `ng-mocks`: [`ngMocks.guts`](/api/ngMocks/guts.md) and [`MockBuilder`](/api/MockBuilder.md) -### @ngneat/spectator and ngMocks.guts +### `@ngneat/spectator` and `ngMocks.guts` -if we use [`ngMocks.guts`](../api/ngMocks/guts.md) we need to pass the desired component to the first parameter, +if we use [`ngMocks.guts`](/api/ngMocks/guts.md) we need to pass the desired component to the first parameter, and its module to pass as the second parameter to extract its guts and mock them. ```ts @@ -27,9 +27,9 @@ const createComponent = createComponentFactory({ }); ``` -### @ngneat/spectator and MockBuilder +### `@ngneat/spectator` and MockBuilder -If we use [`MockBuilder`](../api/MockBuilder.md), then we simply build what we need. +If we use [`MockBuilder`](/api/MockBuilder.md), then we simply build what we need. `MyComponent` is kept, whereas all declarations, imports and exports of `ItsModule` are mocked. ```ts @@ -61,7 +61,7 @@ The same applies to [`@testing-library/angular`](https://www.npmjs.com/package/@ ### @testing-library/angular and ngMocks.guts -In case of [`ngMocks.guts`](../api/ngMocks/guts.md): +In case of [`ngMocks.guts`](/api/ngMocks/guts.md): ```ts const dependencies = ngMocks.guts(MyComponent, ItsModule); @@ -70,7 +70,7 @@ await render(MyComponent, dependencies); ### @testing-library/angular and MockBuilder -In case of [`MockBuilder`](../api/MockBuilder.md): +In case of [`MockBuilder`](/api/MockBuilder.md): ```ts const dependencies = MockBuilder(MyComponent, ItsModule).build(); diff --git a/docs/articles/guides/component-standalone.md b/docs/articles/guides/component-standalone.md index d0f5d2ac84..6b87a80bf0 100644 --- a/docs/articles/guides/component-standalone.md +++ b/docs/articles/guides/component-standalone.md @@ -1,5 +1,5 @@ --- -title: How to test a standalone component in Angular and mock its imports +title: How to test a standalone component in Angular and mock its `imports` description: Covering an Angular standalone component with tests sidebar_label: Standalone Component --- @@ -8,7 +8,7 @@ This section describes how to test a standalone component. Usually, developers want to mock all dependencies. For a standalone component, it means all its imports. -This behavior is possible to achieve with [`MockBuilder`](../api/MockBuilder.md#shallow-flag). +This behavior is possible to achieve with [`MockBuilder`](/api/MockBuilder.md#shallow-flag). Let's image we have the next standalone component: @@ -35,8 +35,8 @@ beforeEach(() => { }); ``` -Under the hood it marks `StandaloneComponent` as [kept](../api/MockBuilder.md#keep) -and sets [shallow](../api/MockBuilder.md#shallow-flag) and [export](../api/MockBuilder.md#export-flag) flags: +Under the hood it marks `StandaloneComponent` as [kept](/api/MockBuilder.md#keep) +and sets [shallow](/api/MockBuilder.md#shallow-flag) and [export](/api/MockBuilder.md#export-flag) flags: ```ts beforeEach(() => { @@ -50,7 +50,7 @@ beforeEach(() => { That's it. Now all imports of `StandaloneComponent` are mocks, and its properties, methods, injections and template are available for testing. -If you need to keep an import, simply call [`.keep`](../api/MockBuilder.md#keep) with it. +If you need to keep an import, simply call [`.keep`](/api/MockBuilder.md#keep) with it. For example, if we wanted to keep `StandalonePipe` then the code would look like: ```ts diff --git a/docs/articles/guides/directive-standalone.md b/docs/articles/guides/directive-standalone.md index 16f6e5cec6..668b43d96e 100644 --- a/docs/articles/guides/directive-standalone.md +++ b/docs/articles/guides/directive-standalone.md @@ -9,7 +9,7 @@ Here you can find how to test a standalone directive. A standalone directive has the same feature set as a regular directive. The only possible dependencies for a standalone directive are root services and tokens. In a unit test, developers prefer to mock such dependencies. -[`MockBuilder`](../api/MockBuilder.md#shallow-flag) helps to configure `TestBed` in such the way. +[`MockBuilder`](/api/MockBuilder.md#shallow-flag) helps to configure `TestBed` in such the way. Let's image we have the next standalone directive: @@ -39,8 +39,8 @@ beforeEach(() => { }); ``` -Under the hood it marks `StandaloneDirective` as [kept](../api/MockBuilder.md#keep) -and sets [shallow](../api/MockBuilder.md#shallow-flag) and [export](../api/MockBuilder.md#export-flag) flags: +Under the hood it marks `StandaloneDirective` as [kept](/api/MockBuilder.md#keep) +and sets [shallow](/api/MockBuilder.md#shallow-flag) and [export](/api/MockBuilder.md#export-flag) flags: ```ts beforeEach(() => { @@ -54,7 +54,7 @@ beforeEach(() => { Now all dependencies of `StandaloneDirective` are mocks, and the properties, methods, injections of the directive are available for testing. -If you need to keep a dependency, simply call [`.keep`](../api/MockBuilder.md#keep) with it. +If you need to keep a dependency, simply call [`.keep`](/api/MockBuilder.md#keep) with it. For example, if we wanted to keep `RootService` then the code would look like: ```ts diff --git a/docs/articles/guides/lazy-loaded-module.md b/docs/articles/guides/lazy-loaded-module.md index af61568655..ded573f6b2 100644 --- a/docs/articles/guides/lazy-loaded-module.md +++ b/docs/articles/guides/lazy-loaded-module.md @@ -8,7 +8,7 @@ The process of testing declarations of a lazy loaded module is the same as testing declarations of regular modules. However, we might need declarations from the parent module which loads the lazy loaded module. -For such a case, [`MockBuilder`](../api/MockBuilder.md) supports an array of modules as the second parameter. +For such a case, [`MockBuilder`](/api/MockBuilder.md) supports an array of modules as the second parameter. There we can provide the lazy loaded module and its parent module. ```ts diff --git a/docs/articles/guides/libraries/angular-material.md b/docs/articles/guides/libraries/angular-material.md index ee84fa9498..df3a9eb4f2 100644 --- a/docs/articles/guides/libraries/angular-material.md +++ b/docs/articles/guides/libraries/angular-material.md @@ -35,12 +35,12 @@ A test of such a template requires to: - assert the rest of templates :::note -Information about testing `ng-template` and its `TemplateRef` is taken from the [ngMocks.render](../../api/ngMocks/render.md). +Information about testing `ng-template` and its `TemplateRef` is taken from the [ngMocks.render](/api/ngMocks/render.md). ::: ## Spec file -With [`MockBuilder`](../../api/MockBuilder.md), our spec file needs a single line to provide mocks: +With [`MockBuilder`](/api/MockBuilder.md), our spec file needs a single line to provide mocks: ```ts beforeEach(() => MockBuilder(TargetComponent, TargetModule)); @@ -55,9 +55,9 @@ In this test we need to verify that `mat-table` data from out component's instan The tools from `ng-mocks` we need: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.reveal`](../../api/ngMocks/reveal.md): to find a debug element of `MatTable` -- [`ngMocks.input`](../../api/ngMocks/input.md): to get an input's value +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.reveal`](/api/ngMocks/reveal.md): to find a debug element of `MatTable` +- [`ngMocks.input`](/api/ngMocks/input.md): to get an input's value ```ts it('binds inputs', () => { @@ -83,10 +83,10 @@ render them, and assert the rendered html. The tools from `ng-mocks` we need: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.reveal`](../../api/ngMocks/reveal.md): to find debug elements of `mat-table` and `ng-container` -- [`ngMocks.formatHtml`](../../api/ngMocks/formatHtml.md): to get html of a `ng-container` -- [`ngMocks.render`](../../api/ngMocks/render.md): to render the templates +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.reveal`](/api/ngMocks/reveal.md): to find debug elements of `mat-table` and `ng-container` +- [`ngMocks.formatHtml`](/api/ngMocks/formatHtml.md): to get html of a `ng-container` +- [`ngMocks.render`](/api/ngMocks/render.md): to render the templates ```ts it('provides correct template for matColumnDef="position"', () => { @@ -127,7 +127,7 @@ it is `MatHeaderRowDef`. The tools from `ng-mocks` we need: -- [`ngMocks.findInstance`](../../api/ngMocks/findInstance.md): to find the instance of `MatHeaderRowDef` +- [`ngMocks.findInstance`](/api/ngMocks/findInstance.md): to find the instance of `MatHeaderRowDef` ```ts it('provides correct template for mat-header-row', () => { diff --git a/docs/articles/guides/libraries/ng-select.md b/docs/articles/guides/libraries/ng-select.md index adc99d6035..30da6fc78d 100644 --- a/docs/articles/guides/libraries/ng-select.md +++ b/docs/articles/guides/libraries/ng-select.md @@ -50,12 +50,12 @@ Therefore, to test it we need to: - assert templates :::note -Information about testing `ng-template` and its `TemplateRef` is taken from the [ngMocks.render](../../api/ngMocks/render.md). +Information about testing `ng-template` and its `TemplateRef` is taken from the [ngMocks.render](/api/ngMocks/render.md). ::: ## Spec file -The best way to mock everything except our component is to use [`MockBuilder`](../../api/MockBuilder.md). +The best way to mock everything except our component is to use [`MockBuilder`](/api/MockBuilder.md). Let's assume that the component is called `TargetComponent` and the module it belongs to is called `TargetModule`. Then our `beforeEach` should look like that: @@ -81,9 +81,9 @@ There are 5 inputs we bind on `ng-select` based on the template of the component Therefore, to write a test, we need to use: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.find`](../../api/ngMocks/find.md): to find a debug element which belongs to `NgSelectComponent` -- [`ngMocks.input`](../../api/ngMocks/input.md): to get an input's value +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.find`](/api/ngMocks/find.md): to find a debug element which belongs to `NgSelectComponent` +- [`ngMocks.input`](/api/ngMocks/input.md): to get an input's value ```ts it('binds inputs', () => { @@ -116,9 +116,9 @@ Following Angular naming convention, the name of output for `[(ngModel)]` is `ng Therefore, to convert it with a test, we need to use: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.find`](../../api/ngMocks/find.md): to find a debug element which belongs to `NgSelectComponent` -- [`ngMocks.output`](../../api/ngMocks/output.md): to get an output's `EventEmitter` +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.find`](/api/ngMocks/find.md): to find a debug element which belongs to `NgSelectComponent` +- [`ngMocks.output`](/api/ngMocks/output.md): to get an output's `EventEmitter` ```ts it('binds outputs', () => { @@ -146,10 +146,10 @@ and to render it with a proper context. To write a test, we need to use: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.find`](../../api/ngMocks/find.md): to find a debug element which belongs to `NgSelectComponent` -- [`ngMocks.findTemplateRef`](../../api/ngMocks/findTemplateRef.md): to find the template which belongs to `ng-label-tmp` -- [`ngMocks.render`](../../api/ngMocks/render.md): to render the template +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.find`](/api/ngMocks/find.md): to find a debug element which belongs to `NgSelectComponent` +- [`ngMocks.findTemplateRef`](/api/ngMocks/findTemplateRef.md): to find the template which belongs to `ng-label-tmp` +- [`ngMocks.render`](/api/ngMocks/render.md): to render the template ```ts it('provides correct template for ng-label-tmp', () => { diff --git a/docs/articles/guides/libraries/ngrs.md b/docs/articles/guides/libraries/ngrs.md index 1118fdcb8c..a13911ecce 100644 --- a/docs/articles/guides/libraries/ngrs.md +++ b/docs/articles/guides/libraries/ngrs.md @@ -3,7 +3,7 @@ title: How to test NGRS in Angular applications sidebar_label: NGRS --- -If you need to avoid mocking of `NGRS` in your modules, you need to use [`.keep`](../../api/MockBuilder.md#keep). +If you need to avoid mocking of `NGRS` in your modules, you need to use [`.keep`](/api/MockBuilder.md#keep). ```ts beforeEach(() => diff --git a/docs/articles/guides/libraries/ngrx.md b/docs/articles/guides/libraries/ngrx.md index 9bfbefd2ba..5861d0cda2 100644 --- a/docs/articles/guides/libraries/ngrx.md +++ b/docs/articles/guides/libraries/ngrx.md @@ -14,7 +14,7 @@ Under the hood, `NGRX` uses four modules, and these modules should be configured * `EffectsFeatureModule` for `EffectsModule.forFeature` Let's imagine that we want to keep `ngrx` in a test. -In this case, we should pass the modules into [`.keep`](../../api/MockBuilder.md#keep): +In this case, we should pass the modules into [`.keep`](/api/MockBuilder.md#keep): ```ts beforeEach(() => @@ -68,7 +68,7 @@ beforeEach(() => ); ``` -It might be needed to use [`MockRenderFactory`](../../api/MockRender.md#factory), +It might be needed to use [`MockRenderFactory`](/api/MockRender.md#factory), if you need to get a `Store` instance before rendering: ```ts diff --git a/docs/articles/guides/libraries/primeng.md b/docs/articles/guides/libraries/primeng.md index 12aa29e6a6..7739ee933b 100644 --- a/docs/articles/guides/libraries/primeng.md +++ b/docs/articles/guides/libraries/primeng.md @@ -27,12 +27,12 @@ To test it, we need to: - assert templates :::note -Information about testing `ng-template` and its `TemplateRef` is taken from the [ngMocks.render](../../api/ngMocks/render.md). +Information about testing `ng-template` and its `TemplateRef` is taken from the [ngMocks.render](/api/ngMocks/render.md). ::: ## Spec file -With [`MockBuilder`](../../api/MockBuilder.md), our spec file needs a single line to provide mocks: +With [`MockBuilder`](/api/MockBuilder.md), our spec file needs a single line to provide mocks: ```ts beforeEach(() => MockBuilder(TargetComponent, TargetModule)); @@ -45,9 +45,9 @@ and `TargetModule` is its module. The tools from `ng-mocks` we need: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.find`](../../api/ngMocks/find.md): to find a debug element which belongs to `p-calendar` -- [`ngMocks.input`](../../api/ngMocks/input.md): to get an input's value +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.find`](/api/ngMocks/find.md): to find a debug element which belongs to `p-calendar` +- [`ngMocks.input`](/api/ngMocks/input.md): to get an input's value ```ts it('binds inputs', () => { @@ -68,9 +68,9 @@ it('binds inputs', () => { The tools from `ng-mocks` we need: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.find`](../../api/ngMocks/find.md): to find a debug element which belongs to `p-calendar` -- [`ngMocks.output`](../../api/ngMocks/output.md): to get an output's `EventEmitter` +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.find`](/api/ngMocks/find.md): to find a debug element which belongs to `p-calendar` +- [`ngMocks.output`](/api/ngMocks/output.md): to get an output's `EventEmitter` ```ts it('binds outputs', () => { @@ -98,10 +98,10 @@ render it, and assert the rendered html. The tools from `ng-mocks` we need: -- [`MockRender`](../../api/MockRender.md): to render `TargetComponent` and get its instance -- [`ngMocks.find`](../../api/ngMocks/find.md): to find a debug element of `p-calendar` -- [`ngMocks.findTemplateRef`](../../api/ngMocks/findTemplateRef.md): to find a template which belongs `pTemplate` -- [`ngMocks.render`](../../api/ngMocks/render.md): to render the template +- [`MockRender`](/api/MockRender.md): to render `TargetComponent` and get its instance +- [`ngMocks.find`](/api/ngMocks/find.md): to find a debug element of `p-calendar` +- [`ngMocks.findTemplateRef`](/api/ngMocks/findTemplateRef.md): to find a template which belongs `pTemplate` +- [`ngMocks.render`](/api/ngMocks/render.md): to render the template ```ts it('provides correct template for pTemplate="header"', () => { diff --git a/docs/articles/guides/mock/activated-route.md b/docs/articles/guides/mock/activated-route.md index 869b5c6804..c26904e877 100644 --- a/docs/articles/guides/mock/activated-route.md +++ b/docs/articles/guides/mock/activated-route.md @@ -28,7 +28,7 @@ class TargetComponent { ``` In our test as a mock `ActivatedRoute`, we would like to provide `paramValue` as `paramId`. -To do so, we can use [`MockInstance`](../../api/MockInstance.md). +To do so, we can use [`MockInstance`](/api/MockInstance.md). The first step is to call a spy when someone wants to access `snapshot`: diff --git a/docs/articles/guides/mock/directive-structural-let-of.md b/docs/articles/guides/mock/directive-structural-let-of.md index 9a11dda38d..6b814ea44a 100644 --- a/docs/articles/guides/mock/directive-structural-let-of.md +++ b/docs/articles/guides/mock/directive-structural-let-of.md @@ -20,8 +20,8 @@ and the string `'actionsCellTemplate'` will be assigned to the `dxTemplateOf` in ## Static context The simplest way is to provide a fake `$implicit` context of `DxTemplateDirective`. -That can be done with help of the [`render`](../../api/MockBuilder.md#render-flag) flag, -which is a part of [`MockBuilder`](../../api/MockBuilder.md). +That can be done with help of the [`render`](/api/MockBuilder.md#render-flag) flag, +which is a part of [`MockBuilder`](/api/MockBuilder.md). ```ts beforeEach(() => @@ -54,8 +54,8 @@ expect(instance.dxTemplateOf).toEqual('actionsCellTemplate'); If static context isn't an option, then instead of rendering the structural directive with other elements, it can be rendered later on in the middle of testing. -To do that we need to use [`ngMocks.render`](../../api/ngMocks/render.md#render-structural-directives) to render the directive, -and [`ngMocks.hide`](../../api/ngMocks/hide.md#structural-directive) to hide the directive. +To do that we need to use [`ngMocks.render`](/api/ngMocks/render.md#render-structural-directives) to render the directive, +and [`ngMocks.hide`](/api/ngMocks/hide.md#structural-directive) to hide the directive. ```ts // We need to find the instance of the directive. diff --git a/docs/articles/guides/pipe-standalone.md b/docs/articles/guides/pipe-standalone.md index be2752b1d8..bf28aa3e96 100644 --- a/docs/articles/guides/pipe-standalone.md +++ b/docs/articles/guides/pipe-standalone.md @@ -6,7 +6,7 @@ sidebar_label: Standalone Pipe A standalone pipe doesn't have many differences comparing to a regular pipe. It cannot import any dependencies, it can only inject root providers. -In order to mock root providers, [`MockBuilder`](../api/MockBuilder.md#shallow-flag) can be used. +In order to mock root providers, [`MockBuilder`](/api/MockBuilder.md#shallow-flag) can be used. Let's image we have the next standalone pipe: @@ -37,7 +37,7 @@ beforeEach(() => { Now all root dependencies of `StandalonePipe` are mocks, and the properties, methods, injections of the pipe are available for testing. -If you need to keep a dependency, simply call [`.keep`](../api/MockBuilder.md#keep) with it. +If you need to keep a dependency, simply call [`.keep`](/api/MockBuilder.md#keep) with it. For example, if we wanted to keep `RootService` then the code would look like: ```ts diff --git a/docs/articles/guides/route.md b/docs/articles/guides/route.md index c7b9b8c327..f665b93d3a 100644 --- a/docs/articles/guides/route.md +++ b/docs/articles/guides/route.md @@ -14,7 +14,7 @@ However, to test that, we need to configure `TestBed` a bit differently: - it is fine to mock all components and declarations - `RouterModule` should be kept the as it is, so it can do its job - `RouterTestingModule` should be added with empty routes -- [`NG_MOCKS_ROOT_PROVIDERS`](../api/MockBuilder.md#ngmocksrootproviders-token) should be kept, +- [`NG_MOCKS_ROOT_PROVIDERS`](/api/MockBuilder.md#ng_mocks_root_providers-token) should be kept, because `RouterModule` depends on many root services which cannot be mocked. This guarantees that the application's routes will be used, diff --git a/docs/articles/guides/view-child.md b/docs/articles/guides/view-child.md index 293c232a93..85073d8089 100644 --- a/docs/articles/guides/view-child.md +++ b/docs/articles/guides/view-child.md @@ -62,9 +62,9 @@ and its template is the next: ``` -In this case, we can use [`MockBuilder`](../api/MockBuilder.md), +In this case, we can use [`MockBuilder`](/api/MockBuilder.md), Let's pass `TargetComponent` as the first parameter, and its module -as the second one into [`MockBuilder`](../api/MockBuilder.md). +as the second one into [`MockBuilder`](/api/MockBuilder.md). Then `DependencyComponent` and `DependencyDirective` will be replaced with their mocks, therefore we can use fake emits and provide custom behavior if it is needed. @@ -78,7 +78,7 @@ beforeEach(() => MockBuilder( ``` In the test, we can access the mock declarations via normal queries -or via [`ngMocks.findInstance`](../api/ngMocks/findInstance.md). +or via [`ngMocks.findInstance`](/api/ngMocks/findInstance.md). For example, if we wanted to simulate an emit of the child component, we could call it like that: diff --git a/docs/articles/index.md b/docs/articles/index.md index 69fbfbdc21..462f8da81c 100644 --- a/docs/articles/index.md +++ b/docs/articles/index.md @@ -47,11 +47,11 @@ Also, there is a brief summary with **the latest changes** in [CHANGELOG](https: ## Quick Navigation -- [How to read this manual](./tl-dr.md) -- [Making tests faster](./api/ngMocks/faster.md) -- [Autospy everything](./extra/auto-spy.md) -- [Testing inputs, outputs and lifecycle hooks](./api/MockRender.md) -- [Mocking methods in components before their initialization](./api/MockInstance.md) +- [How to read this manual](tl-dr.md) +- [Making tests faster](api/ngMocks/faster.md) +- [Auto-spy everything](extra/auto-spy.md) +- [Testing inputs, outputs and lifecycle hooks](api/MockRender.md) +- [Mocking methods in components before their initialization](api/MockInstance.md) ## Very short introduction @@ -201,4 +201,4 @@ If you like `ng-mocks`, please support it: Thank you! -P.S. Feel free to [contact us](./need-help.md) if you need help. +P.S. Feel free to [contact us](need-help.md) if you need help. diff --git a/docs/articles/migrations.md b/docs/articles/migrations.md index c6e9cfe8b1..f7505e8e48 100644 --- a/docs/articles/migrations.md +++ b/docs/articles/migrations.md @@ -4,16 +4,16 @@ description: Critical changes to consider during an updating process to the late sidebar_label: Updating to the latest --- -Usually, you can use the latest version of `ng-mocks` with any [Angular 5+ application](./index.md). +Usually, you can use the latest version of `ng-mocks` with any [Angular 5+ application](index.md). Below you can find critical changes. They happen on major releases. -If you are facing an issue, despite the instructions, please, feel free to [contact us](./need-help.md). +If you are facing an issue, despite the instructions, please, feel free to [contact us](need-help.md). ## From 13 to 14 -[`MockBuilder`](./api/MockBuilder.md) becomes stricter and starts to throw errors on wrong configuration. -If you call [`MockBuilder`](./api/MockBuilder.md) with 2 parameters and use the chain for dependencies: +[`MockBuilder`](api/MockBuilder.md) becomes stricter and starts to throw errors on wrong configuration. +If you call [`MockBuilder`](api/MockBuilder.md) with 2 parameters and use the chain for dependencies: ```ts beforeEach(() => { @@ -23,7 +23,7 @@ beforeEach(() => { }); ``` -[`MockBuilder`](./api/MockBuilder.md) throws an error +[`MockBuilder`](api/MockBuilder.md) throws an error if `Dep1` or `Dep2` hasn't been imported or declared somewhere in `ItsModule` and its imports. :::important @@ -55,7 +55,7 @@ beforeEach(() => { }); ``` -Please note, that if you call [`MockBuilder`](./api/MockBuilder.md) with 0 or 1 parameters, all chained dependencies +Please note, that if you call [`MockBuilder`](api/MockBuilder.md) with 0 or 1 parameters, all chained dependencies are added to TestBed and exported by default now: ```ts @@ -86,16 +86,16 @@ The update should be straight forward. Because of issues with the speed of merging a fix for `jest`, there is a braking change in `12.4.0`. -If you are using [`MockInstance`](./api/MockInstance.md) in `beforeAll`, `beforeEach` or `it`, +If you are using [`MockInstance`](api/MockInstance.md) in `beforeAll`, `beforeEach` or `it`, and rely on automatic reset, then you have to perform extra configuration. -More information in the [How to install ng-mocks](./extra/install.md#default-customizations) -and in [`MockInstance.scope`](./api/MockInstance.md#scope) sections. +More information in the [How to install ng-mocks](extra/install.md#default-customizations) +and in [`MockInstance.scope`](api/MockInstance.md#scope) sections. ## From 11 to 12 The only breaking change is `auto-spy`. -[`ngMocks.autoSpy('jasmine')`](./extra/auto-spy.md) and [`ngMocks.autoSpy('jest')`](./extra/auto-spy.md) +[`ngMocks.autoSpy('jasmine')`](extra/auto-spy.md) and [`ngMocks.autoSpy('jest')`](extra/auto-spy.md) should be used instead of `import 'ng-mocks/dist/jasmine';` and `import 'ng-mocks/dist/jest';`. ## From 11.10 to 11.11 and higher @@ -122,22 +122,22 @@ but respects exports of modules. The story is the same as in the [update from 8 to 9 for `MockBuilder.mock`](#from-mockmodule-to-mockbuildermock). If you still need to export them, -then you should consider a migration of affected tests to [`MockBuilder`](./api/MockBuilder.md) or [`ngMocks.guts`](./api/ngMocks/guts.md). +then you should consider a migration of affected tests to [`MockBuilder`](api/MockBuilder.md) or [`ngMocks.guts`](api/ngMocks/guts.md). #### MockHelper -`MockHelper` has been renamed to [`ngMocks`](./api/ngMocks.md), please check its docs. +`MockHelper` has been renamed to [`ngMocks`](api/ngMocks.md), please check its docs. #### MockComponent Previously, it had been accepting a `meta` parameter, now it has been removed. -[Contact us](./need-help.md), if you are using this functionality. +[Contact us](need-help.md), if you are using this functionality. #### Tokens -- `NG_GUARDS` has been renamed to [`NG_MOCKS_GUARDS`](./api/MockBuilder.md#ng_mocks_guards-token) -- `NG_INTERCEPTORS` has been renamed to [`NG_MOCKS_INTERCEPTORS`](./api/MockBuilder.md#ng_mocks_interceptors-token) +- `NG_GUARDS` has been renamed to [`NG_MOCKS_GUARDS`](api/MockBuilder.md#ngmocksguards-token) +- `NG_INTERCEPTORS` has been renamed to [`NG_MOCKS_INTERCEPTORS`](api/MockBuilder.md#ngmocksinterceptors-token) ## From 9 to 10 @@ -146,10 +146,10 @@ The update should be straight forward. ## From 8 to 9 -#### from MockModule to MockBuilder.mock +#### from MockModule to `MockBuilder.mock` -[`MockModule`](./api/MockModule.md) exports all imports and declarations, -and [`MockBuilder.mock`](./api/MockBuilder.md#mock) respects exports of modules. +[`MockModule`](api/MockModule.md) exports all imports and declarations, +and [`MockBuilder.mock`](api/MockBuilder.md#mock) respects exports of modules. This behavior allows tests to fail, if a declaration of a module has been changed, and it does not export a dependency anymore. Likewise, an Angular application would fail too. diff --git a/docs/articles/troubleshooting/browser-animations-module.md b/docs/articles/troubleshooting/browser-animations-module.md index 37da421191..0443320796 100644 --- a/docs/articles/troubleshooting/browser-animations-module.md +++ b/docs/articles/troubleshooting/browser-animations-module.md @@ -6,7 +6,7 @@ sidebar_label: BrowserAnimationsModule By default, Angular recommends replacing `BrowserAnimationsModule` with `NoopAnimationsModule` in unit tests. -In order to do so globally, you can use [`ngMocks.globalReplace`](../api/ngMocks/globalReplace.md): +In order to do so globally, you can use [`ngMocks.globalReplace`](/api/ngMocks/globalReplace.md): ```ts title="src/test.ts" ngMocks.globalReplace(BrowserAnimationsModule, NoopAnimationsModule); @@ -16,7 +16,7 @@ Now, every time `ng-mocks` sees `BrowserAnimationsModule`, it will substitute it ## MockBuilder -Please check how [`MockBuilder`](../api/MockBuilder.md) behaves in this case: +Please check how [`MockBuilder`](/api/MockBuilder.md) behaves in this case: ```ts // BrowserAnimationsModule is replaced by NoopAnimationsModule. @@ -34,7 +34,7 @@ MockBuilder(MyComponent, MyModule).exclude(BrowserAnimationsModule); ## ngMocks.guts -Please check how [`ngMocks.guts`](../api/ngMocks/guts.md) behaves in this case: +Please check how [`ngMocks.guts`](/api/ngMocks/guts.md) behaves in this case: ```ts // BrowserAnimationsModule is replaced by NoopAnimationsModule. @@ -53,5 +53,5 @@ ngMocks.guts(MyComponent, MyModule, BrowserAnimationsModule); ## fakeAsync A kept / mock `BrowserAnimationsModule` causes issues with `fakeAsync`. -Please open an issue on [github](https://github.com/help-me-mom/ng-mocks/issues), +Please open an issue on [GitHub](https://github.com/help-me-mom/ng-mocks/issues), if you have a case where `NoopAnimationsModule` isn't a solution. diff --git a/docs/articles/troubleshooting/declarations-of-2-modules.md b/docs/articles/troubleshooting/declarations-of-2-modules.md index 4591322b52..505d3c200f 100644 --- a/docs/articles/troubleshooting/declarations-of-2-modules.md +++ b/docs/articles/troubleshooting/declarations-of-2-modules.md @@ -24,15 +24,15 @@ TestBed.configureTestingModule({ }); ``` -The problem is clear: when we create the mock module, [`MockModule`](../api/MockModule.md) recursively creates its mock dependencies, and, therefore, it creates a mock class of `SharedModule`. +The problem is clear: when we create the mock module, [`MockModule`](/api/MockModule.md) recursively creates its mock dependencies, and, therefore, it creates a mock class of `SharedModule`. Now imported and mock declarations are part of 2 modules. -To solve this, we need to let [`MockModule`](../api/MockModule.md) know, that `SharedModule` should stay as it is. +To solve this, we need to let [`MockModule`](/api/MockModule.md) know, that `SharedModule` should stay as it is. There are good and bad news. -The bad news is that [`MockModule`](../api/MockModule.md) does not support that, -but the good news is that `ng-mocks` has [`MockBuilder`](../api/MockBuilder.md) for such a complicated case. -The only task now is to rewrite `beforeEach` to use [`MockBuilder`](../api/MockBuilder.md) instead of [`MockModule`](../api/MockModule.md). +The bad news is that [`MockModule`](/api/MockModule.md) does not support that, +but the good news is that `ng-mocks` has [`MockBuilder`](/api/MockBuilder.md) for such a complicated case. +The only task now is to rewrite `beforeEach` to use [`MockBuilder`](/api/MockBuilder.md) instead of [`MockModule`](/api/MockModule.md). **A possible solution** might look like: @@ -45,6 +45,6 @@ beforeEach(() => { The configuration says that we want to test `ComponentToTest`, which depends on `SharedModule` and `ModuleWithServicesAndSharedModule`, but `SharedModule` should stay as it is. -Now, during the building process, [`MockBuilder`](../api/MockBuilder.md) will keep `SharedModule` as it is, although it is a dependency of the mock module, and that avoids declarations of the same things in 2 modules. +Now, during the building process, [`MockBuilder`](/api/MockBuilder.md) will keep `SharedModule` as it is, although it is a dependency of the mock module, and that avoids declarations of the same things in 2 modules. -More detailed information how to use it you can find in the section called [`MockBuilder`](../api/MockBuilder.md). +More detailed information how to use it you can find in the section called [`MockBuilder`](/api/MockBuilder.md). diff --git a/docs/articles/troubleshooting/internals-vs-externals.md b/docs/articles/troubleshooting/internals-vs-externals.md index 3aaf4c3f68..c124cb8e86 100644 --- a/docs/articles/troubleshooting/internals-vs-externals.md +++ b/docs/articles/troubleshooting/internals-vs-externals.md @@ -61,7 +61,7 @@ but the code is starting to smell, because `ExternalModule` has been already imp `InternalDirective` belongs to, and an additional import of `MockModule(ExternalModule)` feels wrong. -Seems like, if [`MockModule`](../api/MockModule.md) exported its imports and declarations, it would solve the issue. +Seems like, if [`MockModule`](/api/MockModule.md) exported its imports and declarations, it would solve the issue. Yes... it was like that in versions before 9, but then another issue appeared, and it belongs to externals (exports). @@ -91,20 +91,20 @@ Additionally, to the issue of `InternalDirective`, which has not been exported, Because `MockModule(InternalModule)` exports `MockComponent(MyComponent)`, there are two declarations of `MyComponent` defined in the testing module now. -Eventually, it will lead us to the error about [declarations of 2 modules](./declarations-of-2-modules.md). +Eventually, it will lead us to the error about [declarations of 2 modules](declarations-of-2-modules.md). It means, that in tests for `MyComponent` where we want to mock dependencies, we cannot use `InternalModule` at all. ## Solution -If you have read [quick start](../extra/quick-start.md), you know it. -It can be achieved by [`MockBuilder`](../api/MockBuilder.md) or [`ngMocks.guts`](../api/ngMocks/guts.md). +If you have read [quick start](/extra/quick-start.md), you know it. +It can be achieved by [`MockBuilder`](/api/MockBuilder.md) or [`ngMocks.guts`](/api/ngMocks/guts.md). Both of them solve the issue, but in different ways. ### MockBuilder -[`MockBuilder(InternalDirective, InternalModule)`](../api/MockBuilder.md) builds a new definition for `InternalModule`, +[`MockBuilder(InternalDirective, InternalModule)`](/api/MockBuilder.md) builds a new definition for `InternalModule`, where `InternalDirective` has been exported, so `InternalDirective` has access to all its dependencies as before, and we have access to `InternalDirective` in the test: @@ -131,12 +131,12 @@ TestBed.configureTestingModule({ }); ``` -With [`MockBuilder`](../api/MockBuilder.md), we can change export behavior when we need it, -it can be achieved with [export](../api/MockBuilder.md#export-flag) and [exportAll](../api/MockBuilder.md#exportall-flag) flags. +With [`MockBuilder`](/api/MockBuilder.md), we can change export behavior when we need it, +it can be achieved with [export](/api/MockBuilder.md#export-flag) and [exportAll](/api/MockBuilder.md#exportall-flag) flags. ### ngMocks.guts -[`ngMocks.guts(InternalDirective, InternalModule)`](../api/ngMocks/guts.md) simply mocks guts of `InternalModule`, +[`ngMocks.guts(InternalDirective, InternalModule)`](/api/ngMocks/guts.md) simply mocks guts of `InternalModule`, so the definition of a testing module looks like: ```ts diff --git a/docs/articles/troubleshooting/multiple-components-match-node-with-tagname.md b/docs/articles/troubleshooting/multiple-components-match-node-with-tagname.md new file mode 100644 index 0000000000..fff2b48224 --- /dev/null +++ b/docs/articles/troubleshooting/multiple-components-match-node-with-tagname.md @@ -0,0 +1,57 @@ +--- +title: 'How to fix Error NG0300: Multiple components match node with tagname' +description: 'A solution for Angular tests when they fail with "Error NG0300: Multiple components match node with tagname"' +sidebar_label: 'Multiple components' +--- + +If you are facing `Error NG0300: Multiple components match node with tagname` in your tests, +it means that somehow the same component is imported or declared via different modules. +Usually, it's a sign that something has been mocked incorrectly. + +Let's imagine we have the next module: + +```ts +@NgModule({ + imports: [Module1, Module2, Module3], + declarations: [Component1, Component2, Component3], + exports: [Component1, Component2, Component3], +}) +exports class MainModule {} +``` + +The module declares 3 components and imports 3 modules. +The components use each other and the imported modules heavily. +However, in out test we would like to mock `Component2` only. + +Therefore, `TestBed` might look like that: + +```ts +TestBed.configureTestingModule({ + imports: [ + MainModule, + ], + declarations: [ + MockComponent2, // our own mock with the same selector + ], +}); +``` + +Although it looks right and the intention is to utilize `MockComponent2` instead of `Component2` as an override, +tests won't pass because `MockComponent2` and `Component2` match node with tagname `component-2`. + +The solution here is to substitute `Component2` with `MockComponent2` in `MainModule`, +so `TestBed` wouldn't encounter `Component2` at all. + +To do so, you should use [`MockBuilder.replace`](/api/MockBuilder.md#replace): + +```ts +beforeEach(() => { + return MockBuilder(MainModule) + .replace(Component2, MockComponent2); +}); +``` + +The definition above declares `MainModule` in `TestBed` in the way that `MockComponent2` is presented everywhere, +where `Component2` was before. + +Now the test won't throw `Error NG0300: Multiple components match node with tagname`. diff --git a/docs/articles/troubleshooting/no-selector.md b/docs/articles/troubleshooting/no-selector.md index 4b1216a192..12b578a62d 100644 --- a/docs/articles/troubleshooting/no-selector.md +++ b/docs/articles/troubleshooting/no-selector.md @@ -11,7 +11,7 @@ if their parent classes have not been decorated yet. The right fix is to remove these declarations from modules, only final classes should be specified in there. If you cannot remove them for a reason, for example, it is a 3rd-party library, -then you need to write tests with usage of [`MockBuilder`](../api/MockBuilder.md) and its [`.exclude`](../api/MockBuilder.md#exclude) feature. +then you need to write tests with usage of [`MockBuilder`](/api/MockBuilder.md) and its [`.exclude`](/api/MockBuilder.md#exclude) feature. ```ts beforeEach(() => { diff --git a/docs/articles/troubleshooting/not-a-known-element.md b/docs/articles/troubleshooting/not-a-known-element.md index ff93c1ad40..8aeced316b 100644 --- a/docs/articles/troubleshooting/not-a-known-element.md +++ b/docs/articles/troubleshooting/not-a-known-element.md @@ -35,7 +35,7 @@ or to export `DependencyComponent`. there are 3 solutions to do it: -1. to call [`MockComponent`](../api/MockComponent.md) on it directly in the `TestBed` +1. to call [`MockComponent`](/api/MockComponent.md) on it directly in the `TestBed` ```ts beforeEach(() => { @@ -46,7 +46,7 @@ there are 3 solutions to do it: }); ``` -2. to use [`ngMocks.guts`](../api/ngMocks/guts.md), +2. to use [`ngMocks.guts`](/api/ngMocks/guts.md), it does the same things as the first solution, but provides mocks of all imports and declarations from `MyModule`. @@ -57,7 +57,7 @@ there are 3 solutions to do it: }); ``` -3. to use [`MockBuilder`](../api/MockBuilder.md), +3. to use [`MockBuilder`](/api/MockBuilder.md), its behavior differs from the solutions above. It creates a mock `MyModule`, that exports all its imports and declarations including a mock `DependencyComponent`. @@ -67,4 +67,4 @@ there are 3 solutions to do it: ``` Profit. More detailed information about pros and cons of each approach you can read in -[motivation and quick start from ng-mocks](../extra/quick-start.md). +[motivation and quick start from ng-mocks](/extra/quick-start.md). diff --git a/docs/articles/troubleshooting/read-property-of-undefined.md b/docs/articles/troubleshooting/read-property-of-undefined.md index cb5bf79943..08992f8acf 100644 --- a/docs/articles/troubleshooting/read-property-of-undefined.md +++ b/docs/articles/troubleshooting/read-property-of-undefined.md @@ -6,10 +6,10 @@ sidebar_label: Read property of undefined This issue means that something has been replaced with a mock object and returns a dummy result (`undefined`) instead of observable streams. -There is an answer for this error in the section called [How to mock observables](../extra/mock-observables.md), +There is an answer for this error in the section called [How to mock observables](/extra/mock-observables.md), if the error has been triggered by a mock service, and its property is of type of `undefined`. -Or you might check [`MockInstance`](../api/MockInstance.md) or [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md) +Or you might check [`MockInstance`](/api/MockInstance.md) or [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md) in the case if the error has been caused by a mock component or a mock directive. ## Angular Material UI @@ -26,8 +26,8 @@ and customize its mock to return `Observable` instead of `undefined`. ### Skip mocking of root providers To skip mocking of root providers simply -add [`.keep(NG_MOCKS_ROOT_PROVIDERS)`](../api/MockBuilder.md#ngmocksrootproviders-token) -to your [`MockBuilder`](../api/MockBuilder.md) definition: +add [`.keep(NG_MOCKS_ROOT_PROVIDERS)`](/api/MockBuilder.md#ng_mocks_root_providers-token) +to your [`MockBuilder`](/api/MockBuilder.md) definition: ```ts import { MockBuilder, NG_MOCKS_ROOT_PROVIDERS } from 'ng-mocks'; @@ -42,7 +42,7 @@ describe('suite', () => { ### To customize a mock -To customize a mock, you can use `EMPTY` and [`ngMocks.defaultMock`](../api/ngMocks/defaultMock.md): +To customize a mock, you can use `EMPTY` and [`ngMocks.defaultMock`](/api/ngMocks/defaultMock.md): ```ts title="src/test.ts" import { EMPTY } from 'rxjs'; diff --git a/docs/sidebars.js b/docs/sidebars.js index 6ae8b77a12..be18dd976a 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -114,6 +114,7 @@ module.exports = { 'troubleshooting/not-a-known-element', 'troubleshooting/internals-vs-externals', 'troubleshooting/browser-animations-module', + 'troubleshooting/multiple-components-match-node-with-tagname', 'troubleshooting/faq', ], },