feat: add automatic mock for angular entities (#2908)

e2e/automocks/__mocks__/test-manual-mock.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+    selector: 'test',
+    template: 'this is a manual mock for test',
+    standalone: true,
+    styles: [':host { display: block; }'],
+})
+export class TestComponent {
+    public value = input.required<string>();
+
+    method() {}
+}

e2e/automocks/__tests__/test-automocks.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import * as testManualMockComponent from '../test-manual-mock.component';
+import * as testModule from '../test.module';
+
+jest.mock('../test.module');
+jest.mock('../test-manual-mock.component');
+
+it('should mock module', () => {
+    @Component({
+        template: `
+            <test [value]="'value'">{{ 'test' | test }}</test>
+            <div test [value]="'value'">{{ 'test' | test }}</div>
+        `,
+        imports: [testModule.TestModule],
+    })
+    class TestComponent {}
+
+    jest.spyOn(console, 'error');
+
+    expect(() => TestBed.createComponent(TestComponent).detectChanges()).not.toThrow();
+
+    expect(console.error).not.toHaveBeenCalled();
+});
+
+it('should ignore modules with manual mock', () => {
+    const fixture = TestBed.createComponent(testManualMockComponent.TestComponent);
+
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.nativeElement.innerHTML).toBe('this is a manual mock for test');
+    expect(jest.isMockFunction(fixture.componentInstance.method)).toBeFalsy();
+});

e2e/automocks/external-lib/index.ts

@@ -0,0 +1,3 @@
+export * from './some.service';
+export * from './some.component';
+export * from './some.pipe';

e2e/automocks/external-lib/some.component.ts

@@ -0,0 +1,11 @@
+import { Component, input, output } from '@angular/core';
+
+@Component({
+    selector: 'some',
+    template: ``,
+})
+export class SomeComponent {
+    public readonly value = input.required<string>();
+
+    public readonly helloWorld = output();
+}

e2e/automocks/external-lib/some.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'some',
+})
+export class SomePipe implements PipeTransform {
+    public transform(value: string): string {
+        return value.toUpperCase();
+    }
+}

e2e/automocks/external-lib/some.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class SomeService {
+    public doSomething(): void {}
+}

e2e/automocks/jest-cjs.config.ts

@@ -0,0 +1,23 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-automocks',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/../setup-test-env.ts', '<rootDir>/setup-test-env.ts'],
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                babelConfig: true,
+                tsconfig: '<rootDir>/tsconfig-cjs.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    moduleNameMapper: {
+        '^external-lib$': '<rootDir>/external-lib/index.ts',
+    },
+};
+
+export default config;

e2e/automocks/jest-esm.config.ts

@@ -0,0 +1,22 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-automocks',
+    extensionsToTreatAsEsm: ['.ts', '.mts'],
+    setupFilesAfterEnv: ['<rootDir>/../setup-test-env.mts', '<rootDir>/setup-test-env.mts'],
+    transform: {
+        '^.+\\.(ts|mts|mjs|js|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                babelConfig: true,
+                useESM: true,
+                tsconfig: '<rootDir>/tsconfig-esm.spec.json',
+            },
+        ],
+    },
+    moduleNameMapper: {
+        '^external-lib$': '<rootDir>/external-lib/index.ts',
+    },
+};
+
+export default config;

e2e/automocks/jest-transpile-cjs.config.ts

@@ -0,0 +1,23 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-automocks',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/../setup-test-env.ts', '<rootDir>/setup-test-env.ts'],
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                babelConfig: true,
+                tsconfig: '<rootDir>/tsconfig-transpile-cjs.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    moduleNameMapper: {
+        '^external-lib$': '<rootDir>/external-lib/index.ts',
+    },
+};
+
+export default config;

e2e/automocks/jest-transpile-esm.config.ts

@@ -0,0 +1,22 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const config: JestConfigWithTsJest = {
+    displayName: 'e2e-automocks',
+    extensionsToTreatAsEsm: ['.ts', '.mts'],
+    setupFilesAfterEnv: ['<rootDir>/../setup-test-env.mts', '<rootDir>/setup-test-env.mts'],
+    transform: {
+        '^.+\\.(ts|mts|mjs|js|html)$': [
+            '<rootDir>/../../build/index.js',
+            {
+                babelConfig: true,
+                useESM: true,
+                tsconfig: '<rootDir>/tsconfig-transpile-esm.spec.json',
+            },
+        ],
+    },
+    moduleNameMapper: {
+        '^external-lib$': '<rootDir>/external-lib/index.ts',
+    },
+};
+
+export default config;

e2e/automocks/mock-component-example/my.component.spec.ts

@@ -0,0 +1,52 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SomeComponent } from 'external-lib';
+
+import { MyComponent } from './my.component';
+
+jest.mock('external-lib');
+
+describe('MyComponent', () => {
+    let fixture: ComponentFixture<MyComponent>;
+    let component: MyComponent;
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    describe('if isVisible is true', () => {
+        beforeEach(() => {
+            fixture.componentRef.setInput('isVisible', true);
+            fixture.detectChanges();
+        });
+
+        it('should render SomeComponent', () => {
+            expect(fixture.debugElement.query(By.directive(SomeComponent))).toBeTruthy();
+        });
+
+        describe('on helloWorld event', () => {
+            beforeEach(() => {
+                jest.spyOn(component, 'onHelloWorld');
+
+                fixture.debugElement.query(By.directive(SomeComponent)).triggerEventHandler('helloWorld', 'hello');
+            });
+
+            it('should call onHelloWorld', () => {
+                expect(component.onHelloWorld).toHaveBeenCalledWith('hello');
+            });
+        });
+    });
+
+    describe('if isVisible is false', () => {
+        beforeEach(() => {
+            fixture.componentRef.setInput('isVisible', false);
+            fixture.detectChanges();
+        });
+
+        it('should not render SomeComponent', () => {
+            expect(fixture.debugElement.query(By.directive(SomeComponent))).toBeFalsy();
+        });
+    });
+});

e2e/automocks/mock-component-example/my.component.ts

@@ -0,0 +1,20 @@
+import { Component, input, signal } from '@angular/core';
+import { SomeComponent } from 'external-lib';
+
+@Component({
+    selector: 'my',
+    template: `
+        @if (isVisible()) {
+        <some [value]="value()" (helloWorld)="onHelloWorld($event)" />
+        }
+    `,
+    imports: [SomeComponent],
+})
+export class MyComponent {
+    public readonly isVisible = input(false);
+    public readonly value = signal('');
+
+    public onHelloWorld(data: string): void {
+        console.log(data);
+    }
+}

e2e/automocks/mock-pipe-example/my.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SomePipe } from 'external-lib';
+
+import { MyComponent } from './my.component';
+
+jest.mock('external-lib');
+
+describe('MyComponent', () => {
+    let fixture: ComponentFixture<MyComponent>;
+    let component: MyComponent;
+
+    beforeEach(() => {
+        jest.mocked(SomePipe).prototype.transform.mockReturnValue('transformed');
+
+        fixture = TestBed.createComponent(MyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should render transformed value', () => {
+        expect(fixture.nativeElement.textContent).toBe('transformed');
+    });
+
+    describe('if value changes', () => {
+        beforeEach(() => {
+            component.value.set('new value');
+            jest.mocked(SomePipe).prototype.transform.mockReturnValue('new transformed');
+            fixture.detectChanges();
+        });
+
+        it('should render new transformed value', () => {
+            expect(fixture.nativeElement.textContent).toBe('new transformed');
+        });
+    });
+});

e2e/automocks/mock-pipe-example/my.component.ts

@@ -0,0 +1,11 @@
+import { Component, signal } from '@angular/core';
+import { SomePipe } from 'external-lib';
+
+@Component({
+    selector: 'my',
+    template: ` <p>{{ value() | some }}</p> `,
+    imports: [SomePipe],
+})
+export class MyComponent {
+    public readonly value = signal('');
+}

e2e/automocks/mock-service-example/my.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SomeService } from 'external-lib';
+
+import { MyComponent } from './my.component';
+
+jest.mock('external-lib');
+
+describe('MyComponent', () => {
+    let fixture: ComponentFixture<MyComponent>;
+    let someService: jest.Mocked<SomeService>;
+
+    beforeEach(() => {
+        someService = jest.mocked(TestBed.inject(SomeService));
+
+        fixture = TestBed.createComponent(MyComponent);
+        fixture.detectChanges();
+    });
+
+    describe('on button click', () => {
+        beforeEach(() => {
+            fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
+        });
+
+        it('should call doSomething on SomeService', () => {
+            expect(someService.doSomething).toHaveBeenCalled();
+        });
+    });
+});

e2e/automocks/mock-service-example/my.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { SomeService } from 'external-lib';
+
+@Component({
+    selector: 'my',
+    template: `<button (click)="onButtonClick()">Click me</button>`,
+})
+export class MyComponent {
+    private readonly someService = inject(SomeService);
+
+    public onButtonClick(): void {
+        this.someService.doSomething();
+    }
+}

e2e/automocks/setup-test-env.mts

@@ -0,0 +1,3 @@
+import { setupAutoMocks } from '../../setup-env/automocks.mjs';
+
+setupAutoMocks();

e2e/automocks/setup-test-env.ts

@@ -0,0 +1,3 @@
+import { setupAutoMocks } from '../../setup-env/automocks.js';
+
+setupAutoMocks();

e2e/automocks/test-manual-mock.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+    selector: 'test',
+    template: 'this is a test',
+    standalone: true,
+    styles: [':host { display: block; }'],
+})
+export class TestComponent {
+    public value = input.required<string>();
+
+    method() {}
+}

e2e/automocks/test.component.ts

@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+    selector: 'test',
+    template: 'this is a test',
+    standalone: true,
+    styles: [':host { display: block; }'],
+})
+export class TestComponent {
+    public value = input.required<string>();
+
+    method() {}
+}

e2e/automocks/test.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, input } from '@angular/core';
+
+@Directive({
+    selector: '[test]',
+    standalone: true,
+})
+export class TestDirective {
+    public value = input.required<string>();
+
+    method() {}
+}