feat: add vitest utils

Author: timdeschryver

apps/example-app/src/app/examples/05-component-provider.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect } from 'vitest';
 import { TestBed } from '@angular/core/testing';
 import { render, screen } from '@testing-library/angular';
-import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils';
+import { provideMock, Mock, createMock } from '@testing-library/angular/vitest-utils';
 import userEvent from '@testing-library/user-event';
 
 import { ComponentWithProviderComponent, CounterService } from './05-component-provider';
@@ -32,7 +32,7 @@ test('renders the current value and can increment and decrement', async () => {
   expect(valueControl).toHaveTextContent('1');
 });
 
-test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
+test('renders the current value and can increment and decrement with a mocked vitest-utils service', async () => {
   const user = userEvent.setup();
 
   const counter = createMock(CounterService);
@@ -64,7 +64,7 @@ test('renders the current value and can increment and decrement with a mocked je
   expect(valueControl).toHaveTextContent('60');
 });
 
-test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {
+test('renders the current value and can increment and decrement with provideMocked from vitest-utils', async () => {
   const user = userEvent.setup();
 
   await render(ComponentWithProviderComponent, {

apps/example-app/src/app/examples/12-service-component.spec.ts

@@ -1,7 +1,7 @@
 import { of } from 'rxjs';
 import { test, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/angular';
-import { createMock } from '@testing-library/angular/jest-utils';
+import { createMock } from '@testing-library/angular/vitest-utils';
 
 import { Customer, CustomersComponent, CustomersService } from './12-service-component';
 

apps/example-app/tsconfig.json

@@ -6,7 +6,8 @@
     "target": "es2020",
     "paths": {
       "@testing-library/angular": ["projects/testing-library"],
-      "@testing-library/angular/jest-utils": ["projects/testing-library/jest-utils"]
+      "@testing-library/angular/jest-utils": ["projects/testing-library/jest-utils"],
+      "@testing-library/angular/vitest-utils": ["projects/testing-library/vitest-utils"]
     }
   },
   "angularCompilerOptions": {

projects/testing-library/vitest-utils/index.ts

@@ -0,0 +1 @@
+export * from './src/public_api';

projects/testing-library/vitest-utils/ng-package.json

@@ -0,0 +1 @@
+{}

projects/testing-library/vitest-utils/src/lib/create-mock.ts

@@ -0,0 +1,55 @@
+import { Type, Provider } from '@angular/core';
+import { vi, type Mock as VitestMock } from 'vitest';
+
+export type Mock<T> = T & { [K in keyof T]: T[K] & VitestMock };
+
+export function createMock<T>(type: Type<T>): Mock<T> {
+  const mock: any = {};
+
+  function mockFunctions(proto: any) {
+    if (!proto) {
+      return;
+    }
+
+    for (const prop of Object.getOwnPropertyNames(proto)) {
+      if (prop === 'constructor') {
+        continue;
+      }
+
+      const descriptor = Object.getOwnPropertyDescriptor(proto, prop);
+      if (typeof descriptor?.value === 'function') {
+        mock[prop] = vi.fn();
+      }
+    }
+
+    mockFunctions(Object.getPrototypeOf(proto));
+  }
+
+  mockFunctions(type.prototype);
+
+  return mock;
+}
+
+export function createMockWithValues<T, K extends keyof T>(type: Type<T>, values: Partial<Record<K, T[K]>>): Mock<T> {
+  const mock = createMock(type);
+
+  Object.entries(values).forEach(([field, value]) => {
+    (mock as any)[field] = value;
+  });
+
+  return mock;
+}
+
+export function provideMock<T>(type: Type<T>): Provider {
+  return {
+    provide: type,
+    useValue: createMock(type),
+  };
+}
+
+export function provideMockWithValues<T, K extends keyof T>(type: Type<T>, values: Partial<Record<K, T[K]>>): Provider {
+  return {
+    provide: type,
+    useValue: createMockWithValues(type, values),
+  };
+}

projects/testing-library/vitest-utils/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './create-mock';

projects/testing-library/vitest-utils/src/public_api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of testing-library
+ */
+
+export * from './lib';

projects/testing-library/vitest-utils/tests/create-mock.spec.ts

@@ -0,0 +1,74 @@
+import { Component, inject } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { test, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '../../src/public_api';
+import { createMock, provideMock, provideMockWithValues } from '../src/public_api';
+
+class FixtureService {
+  constructor(private foo: string, public bar: string) {}
+
+  print() {
+    console.log(this.foo, this.bar);
+  }
+
+  concat() {
+    return this.foo + this.bar;
+  }
+}
+
+@Component({
+  selector: 'atl-fixture',
+  template: ` <button (click)="print()">Print</button> `,
+})
+class FixtureComponent {
+  private service = inject(FixtureService);
+
+  print() {
+    this.service.print();
+  }
+}
+
+test('mocks all functions', () => {
+  const mock = createMock(FixtureService);
+  expect(mock.print.mock).toBeDefined();
+});
+
+test('provides a mock service', async () => {
+  await render(FixtureComponent, {
+    providers: [provideMock(FixtureService)],
+  });
+  const service = TestBed.inject(FixtureService);
+
+  fireEvent.click(screen.getByText('Print'));
+  expect(service.print).toHaveBeenCalledTimes(1);
+});
+
+test('provides a mock service with values', async () => {
+  await render(FixtureComponent, {
+    providers: [
+      provideMockWithValues(FixtureService, {
+        bar: 'value',
+        concat: vi.fn(() => 'a concatenated value'),
+      }),
+    ],
+  });
+
+  const service = TestBed.inject(FixtureService);
+
+  fireEvent.click(screen.getByText('Print'));
+
+  expect(service.bar).toEqual('value');
+  expect(service.concat()).toEqual('a concatenated value');
+  expect(service.print).toHaveBeenCalled();
+});
+
+test('is possible to write a mock implementation', async () => {
+  await render(FixtureComponent, {
+    providers: [provideMock(FixtureService)],
+  });
+
+  const service = TestBed.inject(FixtureService);
+
+  fireEvent.click(screen.getByText('Print'));
+  expect(service.print).toHaveBeenCalled();
+});