test: ✅ fix jest spy

yjaaidi · yjaaidi · commit 926ec349d688 · 2025-11-03T15:01:45.000+01:00
diff --git a/apps/401-recipe-filter-solution/src/app/recipe/recipe-filter.spec.ts b/apps/401-recipe-filter-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/401-recipe-filter-starter/src/app/recipe/recipe-filter.spec.ts b/apps/401-recipe-filter-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,13 +1,14 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/observe';
 import { RecipeFilter } from './recipe-filter.ng';
 
 describe(RecipeFilter.name, () => {
   it.todo('🚧 triggers filterChange output');
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [
diff --git a/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-filter.spec.ts b/apps/402-recipe-search-filter-interaction-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/402-recipe-search-filter-interaction-starter/src/app/recipe/recipe-filter.spec.ts b/apps/402-recipe-search-filter-interaction-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-filter.spec.ts b/apps/403-recipe-search-add-button-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-filter.spec.ts b/apps/403-recipe-search-add-button-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-filter.spec.ts b/apps/404-recipe-filter-material-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-filter.spec.ts b/apps/404-recipe-filter-material-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/501-recipe-preview-ct-solution/src/app/recipe/recipe-filter.spec.ts b/apps/501-recipe-preview-ct-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/501-recipe-preview-ct-starter/src/app/recipe/recipe-filter.spec.ts b/apps/501-recipe-preview-ct-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/502-recipe-filter-ct-solution/src/app/recipe/recipe-filter.spec.ts b/apps/502-recipe-filter-ct-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/502-recipe-filter-ct-starter/src/app/recipe/recipe-filter.spec.ts b/apps/502-recipe-filter-ct-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/503-recipe-search-ct-solution/src/app/recipe/recipe-filter.spec.ts b/apps/503-recipe-search-ct-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/503-recipe-search-ct-starter/src/app/recipe/recipe-filter.spec.ts b/apps/503-recipe-search-ct-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-filter.spec.ts b/apps/504-playwright-visual-regression-testing-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-filter.spec.ts b/apps/504-playwright-visual-regression-testing-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/601-testronaut-solution/src/app/recipe/recipe-filter.spec.ts b/apps/601-testronaut-solution/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/apps/601-testronaut-starter/src/app/recipe/recipe-filter.spec.ts b/apps/601-testronaut-starter/src/app/recipe/recipe-filter.spec.ts
@@ -1,6 +1,7 @@
 import { outputBinding } from '@angular/core';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
+import { createSpy } from '@whiskmate/testing/create-spy';
 import { RecipeFilterCriteria } from './recipe-filter-criteria';
 import { RecipeFilter } from './recipe-filter.ng';
 
@@ -20,7 +21,7 @@ describe(RecipeFilter.name, () => {
   });
 
   async function mountRecipeFilter() {
-    const filterChangeSpy = vi.fn();
+    const filterChangeSpy = createSpy();
 
     await render(RecipeFilter, {
       bindings: [outputBinding('filterChange', filterChangeSpy)],
diff --git a/libs/testing/src/create-spy.ts b/libs/testing/src/create-spy.ts
@@ -0,0 +1,19 @@
+import type { Mock } from 'vitest';
+
+/* Using jest.Mock as a return type instead of MockedFunction
+ * because vitest implements [Symbol.dispose] but not jest.
+ * We downgrade to Jest API. */
+export function createSpy<PARAMS extends unknown[], RETURN>(): Mock<
+  (...args: PARAMS) => RETURN
+> {
+  const g = globalThis as unknown as { vi: typeof vi };
+  return typeof jest !== 'undefined'
+    ? (jest.fn() as unknown as Mock<(...args: PARAMS) => RETURN>)
+    : g.vi.fn();
+}
+
+declare global {
+  const jest: {
+    fn: () => Mock<(...args: unknown[]) => unknown>;
+  };
+}
diff --git a/libs/testing/src/observe.ts b/libs/testing/src/observe.ts
@@ -1,5 +1,5 @@
-import type { Mock } from 'vitest';
 import { Observable, Unsubscribable } from 'rxjs';
+import { createSpy } from './create-spy';
 
 export function observe<T>(observable: Subscribable<T>) {
   const next = createSpy<[T], void>();
@@ -50,21 +50,3 @@ export function observe<T>(observable: Subscribable<T>) {
 type Subscribable<T> =
   | Observable<T>
   | { subscribe(fn: (v: T) => void): Unsubscribable };
-
-/* Using jest.Mock as a return type instead of MockedFunction
- * because vitest implements [Symbol.dispose] but not jest.
- * We downgrade to Jest API. */
-function createSpy<PARAMS extends unknown[], RETURN>(): Mock<
-  (...args: PARAMS) => RETURN
-> {
-  const g = globalThis as unknown as { vi: typeof vi };
-  return typeof jest !== 'undefined'
-    ? (jest.fn() as unknown as Mock<(...args: PARAMS) => RETURN>)
-    : g.vi.fn();
-}
-
-declare global {
-  const jest: {
-    fn: () => Mock<(...args: unknown[]) => unknown>;
-  };
-}
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -15,6 +15,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
+      "@whiskmate/testing/create-spy": ["libs/testing/src/create-spy.ts"],
       "@whiskmate/testing/observe": ["libs/testing/src/observe.ts"],
       "@whiskmate/testing/set-up-test-bed": [
         "libs/testing/src/set-up-test-bed.ts"
