Feature Request: Replace Angular Testbed based spec schematics

[DDtMM]

Describe the feature or problem you'd like to solve

My fingers hurt from having to replace the default code in every spec with some initial code for testing with NgMocks.

Proposed solution

Add a new library project called schematics created using @angular-devkit/schematics-cli.

• Add spec schematics for the following types where there are existing specs created:
  • class
  • Component
  • Directive
  • Interceptor
  • Pipe
  • Service
• _Nice to have: Application app.component.spec.ts for both module and standalone components. Seems like a pain for a specific file.
• Nice to have: ng_add schematic that asks to replace default schematics in a project's angular.json.
• Package schematics with ng-mocks.
• Documentation for schematics including instructions for modifying angular.json.

Additional context

• Schematics for libraries: How to package schematics with a library project.
• Angular cli schematics source: Useful for reference.
• Override default Angular schematics by Andre Mihalciuc: A blog post that demonstrates schematics for spec files.
• Angular Schematics: Unit Testing: Guide for writing unit tests with example repo.

[JsantosDK]

Curious on this, would the schematics be placed in the project layout, I assume under ng-mocks/libs/ng-mocks/schematics?

[satanTime]

Hi @JsantosDK, right, ng-mocks/libs/ng-mocks contains sources to produce the final build.

[JsantosDK]

What schematics exactly should be done?

• Test schematics can be added, but with what MockRender or MockComponent or both?
• An add schematics can be created to manage installation of the lib (would be a good idea if schematics for the spec setup are introduced since when a person installs ng-mocks, they could be asked to install the schematics directly)?
• Migration schematics to manage breaking changes/version updates?

Note that doing schematics may also introduce incompatibly between old versions.
Not sure we can add schematics that are compatible with both Angular 5 and 17.

[JsantosDK]

Hello @satanTime, since you are busy, I will try to develop this feature myself.

For now, I will work on building PR that adds a schematic for components so that instead of generation this:

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { FooComponent } from './foo.component';

describe('FooComponent', () => {
  let component: FooComponent;
  let fixture: ComponentFixture<FooComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FooComponent]
    });
    fixture = TestBed.createComponent(FooComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

We generate this:

import { MockedComponentFixture, MockBuilder, MockRender } from 'ng-mocks';

import { FooComponent } from './foo.component';

describe('FooComponent', () => {
  let component: FooComponent;
  let fixture: MockedComponentFixture<FooComponent>;

  beforeEach(() => {
    return MockBuilder(FooComponent)
  });

  it('should create', () => {
    fixture = MockRender(FooComponent);
    component = fixture.point.componentInstance;
    expect(component).toBeTruthy();
  });
});

I will try to add more options to this if it proves to be something that is used.