fix: add providers to configureTestingModule (#22)

Author: timdeschryver

package.json

@@ -34,6 +34,7 @@
     "@angular/platform-browser": "^8.0.0",
     "@angular/platform-browser-dynamic": "^8.0.0",
     "@angular/router": "^8.0.0",
+    "@ngrx/store": "^8.0.0-rc.0",
     "@phenomnomnominal/tsquery": "^3.0.0",
     "@testing-library/dom": "^5.0.1",
     "core-js": "^3.1.3",

projects/testing-library/src/lib/testing-library.ts

@@ -32,15 +32,18 @@ export async function render<T>(
   TestBed.configureTestingModule({
     declarations: [...declarations, ...componentDeclarations],
     imports: [...imports],
+    providers: [...providers],
     schemas: [...schemas],
   });
 
   if (providers) {
     // override services this way to have the service overridden at the component level
-    providers.forEach(p => {
-      const { provide, ...provider } = p;
-      TestBed.overrideProvider(provide, provider);
-    });
+    providers
+      .reduce((acc, provider) => acc.concat(provider), [])
+      .forEach(p => {
+        const { provide, ...provider } = p;
+        TestBed.overrideProvider(provide, provider);
+      });
   }
 
   const fixture = isTemplate

src/app/app.component.spec.ts

@@ -1,26 +1,30 @@
 import { AppComponent } from './app.component';
 import { render } from '@testing-library/angular';
 import { configureJestSetup } from '@testing-library/angular/jest-utils';
+import { provideMockStore } from '@ngrx/store/testing';
 
 configureJestSetup();
 
 test(`matches snapshot`, async () => {
   const { container } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
+    providers: [provideMockStore()],
   });
   expect(container).toMatchSnapshot();
 });
 
 test(`should have a title`, async () => {
   const { getByText } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
+    providers: [provideMockStore()],
   });
   expect(getByText('Welcome to app!')).toBeDefined();
 });
 
 test(`should render title in a h1 tag`, async () => {
   const { container } = await render('<app-root></app-root>', {
     declarations: [AppComponent],
+    providers: [provideMockStore()],
   });
   expect(container.querySelector('h1').textContent).toContain('Welcome to app!');
 });

src/app/app.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'app';
+
+  constructor(private store: Store<any>) {}
 }

src/app/app.module.ts

@@ -2,15 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { StoreModule } from '@ngrx/store';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
+  declarations: [AppComponent],
+  imports: [BrowserModule, StoreModule.forRoot({})],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

yarn.lock

@@ -511,6 +511,11 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@ngrx/store@^8.0.0-rc.0":
+  version "8.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-8.0.0-rc.0.tgz#3ec0ca8986fb3cb2b246cab0c851833a21f9a134"
+  integrity sha512-TL+2BERGH4DET8sIW1D02wkmKxlnVXWezm1OkQJd2Q/6h6MwZBd8SeDpuiEIUHr2/1BPUyPNe1bj+vemeiwWrw==
+
 "@ngtools/json-schema@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"