docs(README): stable release for angular 13

README.md

@@ -14,25 +14,17 @@
 
 The current version of the library **has been tested** and **can be used** with:
 
-|  Angular |                           ng-mocks                            | Jasmine | Jest | Ivy |
-| -------: | :-----------------------------------------------------------: | :-----: | :--: | :-: |
-|  >13.0.2 | [in progress](https://github.com/ike18t/ng-mocks/issues/1427) |         |      |     |
-| <=13.0.2 |                            latest                             |   yes   | yes  | yes |
-|       12 |                            latest                             |   yes   | yes  | yes |
-|       11 |                            latest                             |   yes   | yes  | yes |
-|       10 |                            latest                             |   yes   | yes  | yes |
-|        9 |                            latest                             |   yes   | yes  | yes |
-|        8 |                            latest                             |   yes   | yes  |     |
-|        7 |                            latest                             |   yes   | yes  |     |
-|        6 |                            latest                             |   yes   | yes  |     |
-|        5 |                            latest                             |   yes   | yes  |     |
-
-**PLEASE NOTE: If you are using Angular 13 or planning to use it,
-please note that currently only Angular `<=13.0.2` is supported,
-[work is in progress](https://github.com/ike18t/ng-mocks/issues/1427) to implement support of Angular `>13.0.2`.
-Thank you for patience, understanding and support.**
-
-To stay with the latest supported version, you can set the versions to `<=13.0.2` in your `package.json` for `@angular/*` and `@angular-devkit/*`.
+| Angular | ng-mocks | Jasmine | Jest | Ivy |
+| ------: | :------: | :-----: | :--: | :-: |
+|      13 |  latest  |   yes   | yes  | yes |
+|      12 |  latest  |   yes   | yes  | yes |
+|      11 |  latest  |   yes   | yes  | yes |
+|      10 |  latest  |   yes   | yes  | yes |
+|       9 |  latest  |   yes   | yes  | yes |
+|       8 |  latest  |   yes   | yes  |     |
+|       7 |  latest  |   yes   | yes  |     |
+|       6 |  latest  |   yes   | yes  |     |
+|       5 |  latest  |   yes   | yes  |     |
 
 ## Important links
 
@@ -77,7 +69,7 @@ An example of a spec for a profile edit component.
 // lastName, and a user can edit them.
 // In the following test suite, we would like to
 // cover behavior of the component.
-describe('profile', () => {
+describe('profile:classic', () => {
   // First of all, we would like to reuse the same
   // TestBed in every test.
   // ngMocks.faster suppresses reset of TestBed
@@ -86,11 +78,14 @@ describe('profile', () => {
   // https://ng-mocks.sudo.eu/api/ngMocks/faster
   ngMocks.faster();
 
+  // Helps to reset customizations after each test.
+  MockInstance.scope();
+
   // Let's declare TestBed in beforeAll
   // instead of beforeEach.
   // The code mocks everything in SharedModule
   // and provides a mock AuthService.
-  beforeAll(() => {
+  beforeAll(async () => {
     return TestBed.configureTestingModule({
       imports: [
         MockModule(SharedModule), // mock
@@ -141,7 +136,7 @@ describe('profile', () => {
     const spySave = MockInstance(
       StorageService,
       'save',
-      jasmine.createSpy('StorageService.save'),
+      jasmine.createSpy(), // or jest.fn()
     );
 
     // Renders <profile [profile]="params.profile">

docs/articles/api/MockComponent.md

@@ -102,7 +102,7 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockComponent/test.spec.ts&initialpath=%3Fspec%3DMockComponent)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockComponent/test.spec.ts&initialpath=%3Fspec%3DMockComponent)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockComponent/test.spec.ts"
 describe('MockComponent', () => {
   beforeEach(() => {
     return MockBuilder(TestedComponent).mock(DependencyComponent);
@@ -147,7 +147,11 @@ describe('MockComponent', () => {
     // called 'someOutput'. TestedComponent listens on the output via
     // `(someOutput)="trigger($event)"`.
     // Let's install a spy and trigger the output.
-    spyOn(component, 'trigger');
+    ngMocks.stubMember(
+      component,
+      'trigger',
+      jasmine.createSpy(), // or jest.fn()
+    );
     mockComponent.someOutput.emit({
       payload: 'foo',
     });
@@ -189,7 +193,10 @@ describe('MockComponent', () => {
     // componentInstance is a MockedComponent<T> to access
     // its `__render` method. `isMockOf` function helps here.
     const mockComponent = fixture.point.componentInstance;
-    ngMocks.render(mockComponent, ngMocks.findTemplateRef('something'));
+    ngMocks.render(
+      mockComponent,
+      ngMocks.findTemplateRef('something'),
+    );
 
     // The rendered template is wrapped by <div data-key="something">.
     // We can use this selector to assert exactly its content.

docs/articles/api/MockDirective.md

@@ -102,7 +102,7 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockDirective-Attribute/test.spec.ts&initialpath=%3Fspec%3DMockDirective%3AAttribute)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockDirective-Attribute/test.spec.ts&initialpath=%3Fspec%3DMockDirective%3AAttribute)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockDirective-Attribute/test.spec.ts"
 describe('MockDirective:Attribute', () => {
   beforeEach(() => {
     return MockBuilder(TestedComponent).mock(DependencyDirective);
@@ -151,7 +151,11 @@ describe('MockDirective:Attribute', () => {
     // 'someOutput'. TestedComponent listens on the output via
     // `(someOutput)="trigger($event)"`.
     // Let's install a spy and trigger the output.
-    spyOn(component, 'trigger');
+    ngMocks.stubMember(
+      component,
+      'trigger',
+      jasmine.createSpy(), // or jest.fn()
+    );
     mockDirective.someOutput.emit();
 
     // Assert on the effect.
@@ -173,7 +177,7 @@ if we want to assert on its nested elements.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockDirective-Structural/test.spec.ts&initialpath=%3Fspec%3DMockDirective%3AStructural)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockDirective-Structural/test.spec.ts&initialpath=%3Fspec%3DMockDirective%3AStructural)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockDirective-Structural/test.spec.ts"
 describe('MockDirective:Structural', () => {
   // IMPORTANT: by default structural directives are not rendered.
   // Because they might require a context which should be provided.

docs/articles/api/MockInstance.md

@@ -248,10 +248,8 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockInstance/test.spec.ts&initialpath=%3Fspec%3DMockInstance)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockInstance/test.spec.ts&initialpath=%3Fspec%3DMockInstance)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockInstance/test.spec.ts"
 describe('MockInstance', () => {
-  MockInstance.scope();
-
   // A normal setup of the TestBed, TargetComponent will be replaced
   // with its mock object.
   // Do not forget to return the promise of MockBuilder.
@@ -268,6 +266,11 @@ describe('MockInstance', () => {
     }));
   });
 
+  afterEach(() => {
+    // Resets customizations
+    MockInstance(ChildComponent);
+  });
+
   it('should render', () => {
     // Without the custom initialization rendering would fail here
     // with "Cannot read property 'subscribe' of undefined".

docs/articles/api/MockModule.md

@@ -104,7 +104,7 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockModule/test.spec.ts&initialpath=%3Fspec%3DMockModule)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockModule/test.spec.ts&initialpath=%3Fspec%3DMockModule)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockModule/test.spec.ts"
 describe('MockModule', () => {
   beforeEach(() => {
     return MockBuilder(TestedComponent).mock(DependencyModule);

docs/articles/api/MockPipe.md

@@ -103,15 +103,14 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockPipe/test.spec.ts&initialpath=%3Fspec%3DMockPipe)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockPipe/test.spec.ts&initialpath=%3Fspec%3DMockPipe)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockPipe/test.spec.ts"
 describe('MockPipe', () => {
   // A fake transform function.
   const fakeTransform = (...args: string[]) => JSON.stringify(args);
 
   // A spy, just in case if we want to verify
   // how the pipe has been called.
-  const spy = jasmine.createSpy('transform')
-    .and.callFake(fakeTransform);
+  const spy = jasmine.createSpy().and.callFake(fakeTransform);
   // in case of jest
   // const spy = jest.fn().mockImplementation(fakeTransform);
 
@@ -122,8 +121,9 @@ describe('MockPipe', () => {
   it('transforms values to json', () => {
     const fixture = MockRender(TestedComponent);
 
-    expect(fixture.nativeElement.innerHTML)
-      .toEqual('<component>["foo"]</component>');
+    expect(fixture.nativeElement.innerHTML).toEqual(
+      '<component>["foo"]</component>',
+    );
 
     // Also we can find an instance of the pipe in
     // the fixture if it is needed.

docs/articles/api/MockProvider.md

@@ -109,7 +109,7 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockProvider/test.spec.ts&initialpath=%3Fspec%3DMockProvider)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockProvider/test.spec.ts&initialpath=%3Fspec%3DMockProvider)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockProvider/test.spec.ts"
 describe('MockProvider', () => {
   const mockObj = { value: 123 };
 
@@ -132,26 +132,21 @@ describe('MockProvider', () => {
     // overriding the token's data that does affect the provided token.
     mockObj.value = 321;
     const fixture = MockRender(TargetComponent);
-    const injector = fixture.point.injector;
-
-    expect(injector.get(Dependency1Service).echo())
-      .toBeUndefined();
-    expect(injector.get(Dependency2Service).echo())
-      .toBeUndefined();
-    expect(injector.get(OBJ_TOKEN))
-      .toBe(mockObj);
-    expect(fixture.nativeElement.innerHTML)
-      .not.toContain('"target"');
-    expect(fixture.nativeElement.innerHTML)
-      .toContain('"d2:mock"');
-    expect(fixture.nativeElement.innerHTML)
-      .toContain('"mock token"');
-    expect(fixture.nativeElement.innerHTML)
-      .toContain('"mock"');
-    expect(fixture.nativeElement.innerHTML)
-      .toContain('"value": 321');
-    expect(fixture.nativeElement.innerHTML)
-      .toContain('"pri"');
+    expect(
+      fixture.point.injector.get(Dependency1Service).echo(),
+    ).toBeUndefined();
+    expect(
+      fixture.point.injector.get(Dependency2Service).echo(),
+    ).toBeUndefined();
+    expect(fixture.point.injector.get(OBJ_TOKEN)).toBe(
+      mockObj as any,
+    );
+    expect(fixture.nativeElement.innerHTML).not.toContain('"target"');
+    expect(fixture.nativeElement.innerHTML).toContain('"d2:mock"');
+    expect(fixture.nativeElement.innerHTML).toContain('"mock token"');
+    expect(fixture.nativeElement.innerHTML).toContain('"mock"');
+    expect(fixture.nativeElement.innerHTML).toContain('"value": 321');
+    expect(fixture.nativeElement.innerHTML).toContain('"pri"');
   });
 });
 ```

docs/articles/api/MockRender.md

@@ -483,7 +483,7 @@ Please, pay attention to comments in the code.
 - [Try it on StackBlitz](https://stackblitz.com/github/ng-mocks/examples?file=src/examples/MockRender/test.spec.ts&initialpath=%3Fspec%3DMockRender)
 - [Try it on CodeSandbox](https://codesandbox.io/s/github/ng-mocks/examples?file=/src/examples/MockRender/test.spec.ts&initialpath=%3Fspec%3DMockRender)
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/examples/MockRender/test.spec.ts"
 describe('MockRender', () => {
   // Do not forget to return the promise of MockBuilder.
   beforeEach(() => MockBuilder(TestedComponent, DependencyModule));
@@ -514,10 +514,10 @@ describe('MockRender', () => {
 
     // ngMocks.input helps to get the current value of an input on
     // a related debugElement without knowing its owner.
-    expect(ngMocks.input(fixture.point, 'value1'))
-      .toEqual('something1');
-    expect(ngMocks.input(fixture.point, 'value2'))
-      .toEqual('check');
+    expect(ngMocks.input(fixture.point, 'value1')).toEqual(
+      'something1',
+    );
+    expect(ngMocks.input(fixture.point, 'value2')).toEqual('check');
 
     // ngMocks.output does the same with outputs.
     ngMocks.output(fixture.point, 'trigger').emit('foo1');
@@ -538,10 +538,12 @@ describe('MockRender', () => {
     });
 
     // Checking the inputs.
-    expect(ngMocks.input(fixture.point, 'value1'))
-      .toEqual('something2');
-    expect(ngMocks.input(fixture.point, 'value2'))
-      .toBeUndefined();
+    expect(ngMocks.input(fixture.point, 'value1')).toEqual(
+      'something2',
+    );
+    expect(ngMocks.input(fixture.point, 'value2')).toEqual(
+      'default2',
+    );
 
     // Checking the outputs.
     ngMocks.output(fixture.point, 'trigger').emit('foo2');
@@ -551,8 +553,7 @@ describe('MockRender', () => {
     // the testing component.
     fixture.componentInstance.value1 = 'updated';
     fixture.detectChanges();
-    expect(ngMocks.input(fixture.point, 'value1'))
-      .toEqual('updated');
+    expect(ngMocks.input(fixture.point, 'value1')).toEqual('updated');
   });
 });
 ```

docs/articles/api/ngMocks/click.md

@@ -39,7 +39,7 @@ ngMocks.click('[data-role="link"]');
 ngMocks.click(['data-role']);
 ```
 ```ts
-ngMocks.click(['data-role', 'linke']);
+ngMocks.click(['data-role', 'link']);
 ```
 
 Under the hood `ngMocks.click` uses [`ngMocks.trigger`](./trigger.md),

docs/articles/api/ngMocks/defaultMock.md

@@ -23,9 +23,7 @@ declare class MyComponent {
 }
 ```
 
-```ts
-// src/test.ts
-
+```ts title="src/test.ts"
 // the returned object will be applied to the component instance.
 ngMocks.defaultMock(MyComponent, () => ({
   stream$: EMPTY,

docs/articles/api/ngMocks/faster.md

@@ -105,14 +105,14 @@ 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.
 Please pay attention that state of components also stays the same.
 
-```ts
+```ts title="https://github.com/ike18t/ng-mocks/blob/master/tests/issue-488/faster.spec.ts"
 describe('issue-488:faster', () => {
   let fixture: MockedComponentFixture<MyComponent>;
 
   ngMocks.faster();
 
   beforeAll(() => MockBuilder(MyComponent, MyModule));
-  beforeAll(() => fixture = MockRender(MyComponent));
+  beforeAll(() => (fixture = MockRender(MyComponent)));
 
   it('first test has initial render', () => {
     expect(ngMocks.formatText(fixture)).toEqual('1');

docs/articles/api/ngMocks/globalExclude.md

@@ -20,8 +20,7 @@ then this effect of `initTestEnvironment` will be overloaded.
 To keep the effect, we need to exclude `TranslationModule` during the mocking process.
 That is where `ngMocks.globalExclude` comes for help.
 
-```ts
-// test.ts
+```ts title="src/test.ts"
 @NgModule({
   imports: [TranslationModule.forRoot(mockBackend)],
   exports: [BrowserDynamicTestingModule, TranslationModule],

docs/articles/api/ngMocks/globalKeep.md

@@ -9,13 +9,11 @@ The best place to do that is in `src/test.ts` for `jasmine` or in `src/setup-jes
 
 Let's mark the `APP_URL` token in order to be kept in mock modules.
 
-```ts
-// test.ts
+```ts title="src/test.ts"
 ngMocks.globalKeep(APP_URL);
 ```
 
-```ts
-// test.spec.ts
+```ts title="src/test.spec.ts"
 // ...
 MockModule(ModuleWithService);
 // ...

docs/articles/api/ngMocks/globalMock.md

@@ -9,15 +9,13 @@ The best place to do that is in `src/test.ts` for `jasmine` or in `src/setup-jes
 
 Let's mark the `APP_URL` token in order to be mocked in its kept modules.
 
-```ts
-// test.ts
+```ts title="src/test.ts"
 ngMocks.globalKeep(AppModule);
 ngMocks.globalMock(APP_URL);
 ngMocks.defaultMock(APP_URL, () => 'mock');
 ```
 
-```ts
-// test.spec.ts
+```ts title="src/test.spec.ts"
 // ...
 MockModule(AppModule);
 // ...

docs/articles/api/ngMocks/globalReplace.md

@@ -10,8 +10,7 @@ The best place to do that is in `src/test.ts` for `jasmine` or in `src/setup-jes
 If we wanted to replace `BrowserAnimationsModule` with `NoopAnimationsModule` globally,
 we could do it like that:
 
-```ts
-// test.ts
+```ts title="src/test.ts"
 ngMocks.globalReplace(BrowserAnimationsModule, NoopAnimationsModule);
 ```