fix(jest): export mock functions

projects/jest-utils/src/lib/configure-test-suite.ts

@@ -1,7 +1,10 @@
 import { TestBed, getTestBed, ComponentFixture } from '@angular/core/testing';
 import 'jest';
 
-// Ref: https://github.com/angular/angular/issues/12409
+/**
+ * Use with caution, this might brake some tests
+ * Ref: https://github.com/angular/angular/issues/12409
+ */
 export function configureJestSetup() {
   const testBedApi: any = getTestBed();
   const originReset = TestBed.resetTestingModule;

projects/jest-utils/src/lib/index.ts

@@ -1 +1,2 @@
 export * from './configure-test-suite';
+export * from './create-mock';

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

@@ -1,8 +1,9 @@
-import { createMock, provideMock, Mock } from '../../src/jest-utils';
-import { render } from '../../src/public_api';
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
+import { createMock, provideMock, Mock } from '../src/public_api';
+import { render } from '../../testing-library/src/public_api';
+
 class FixtureService {
   constructor(private foo: string, public bar: string) {}
 

src/app/__snapshots__/app.component.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`matches snapshot 1`] = `
       style="text-align:center"
     >
       <h1>
-         Welcome to app! 
+        Welcome to app!
       </h1>
       <img
         alt="Angular Logo"
@@ -18,7 +18,7 @@ exports[`matches snapshot 1`] = `
       />
     </div>
     <h2>
-      Here are some links to help you start: 
+      Here are some links to help you start:
     </h2>
     <ul>
       <li>
@@ -55,6 +55,9 @@ exports[`matches snapshot 1`] = `
         </h2>
       </li>
     </ul>
+    <button>
+      Greet
+    </button>
   </app-root>
 </div>
 `;

src/app/app.component.html

@@ -1,11 +1,13 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  <h1>Welcome to {{ title }}!</h1>
+  <img
+    width="300"
+    alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+  />
 </div>
-<h2>Here are some links to help you start: </h2>
+<h2>Here are some links to help you start:</h2>
 <ul>
   <li>
     <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
@@ -18,3 +20,4 @@ <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular bl
   </li>
 </ul>
 
+<button (click)="greet()">Greet</button>

src/app/app.component.spec.ts

@@ -1,11 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 import { Store } from '@ngrx/store';
 import { provideMockStore } from '@ngrx/store/testing';
+
 import { render } from '@testing-library/angular';
-import { configureJestSetup } from '@testing-library/angular/jest-utils';
-import { AppComponent } from './app.component';
+import { provideMock } from '@testing-library/angular/jest-utils';
 
-configureJestSetup();
+import { AppComponent } from './app.component';
+import { GreetService } from './greet.service';
 
 test(`matches snapshot`, async () => {
   const { container } = await render('<app-root></app-root>', {
@@ -36,5 +37,17 @@ test(`should be able to get the Store`, async () => {
     declarations: [AppComponent],
     providers: [provideMockStore()],
   });
-  expect(TestBed.get(Store)).toBeDefined();
+  expect(TestBed.get<Store<any>>(Store)).toBeDefined();
+});
+
+test(`should provide a mock greet service`, async () => {
+  const component = await render(AppComponent, {
+    declarations: [AppComponent],
+    providers: [provideMockStore(), provideMock(GreetService)],
+  });
+  const service: GreetService = TestBed.get<GreetService>(GreetService);
+
+  component.click(component.getByText('Greet'));
+
+  expect(service.greet).toHaveBeenCalled();
 });

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { GreetService } from './greet.service';
 
 @Component({
   selector: 'app-root',
@@ -9,5 +10,9 @@ import { Store } from '@ngrx/store';
 export class AppComponent {
   title = 'app';
 
-  constructor(private store: Store<any>) {}
+  constructor(private store: Store<any>, private greetService: GreetService) {}
+
+  greet() {
+    this.greetService.greet();
+  }
 }

src/app/greet.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GreetService {
+  greet(): void {
+    console.log('👋👋');
+  }
+}