fix: providers on a module level (#26)

BREAKING CHANGE:

Component providers should be provided via `componentProviders`.

Author: timdeschryver

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

@@ -17,6 +17,7 @@ export interface RenderOptions<C, Q extends Queries = typeof queries> {
   imports?: any[];
   schemas?: any[];
   componentProperties?: Partial<C>;
+  componentProviders?: any[];
   queries?: Q;
   wrapper?: Type<any>;
 }

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

@@ -28,6 +28,7 @@ export async function render<T>(
     queries,
     wrapper = WrapperComponent,
     componentProperties = {},
+    componentProviders = [],
   } = renderOptions;
 
   const isTemplate = typeof templateOrComponent === 'string';
@@ -40,9 +41,8 @@ export async function render<T>(
     schemas: [...schemas],
   });
 
-  if (providers) {
-    // override services this way to have the service overridden at the component level
-    providers
+  if (componentProviders) {
+    componentProviders
       .reduce((acc, provider) => acc.concat(provider), [])
       .forEach(p => {
         const { provide, ...provider } = p;

projects/testing-library/tests/component-provider/component-provider.spec.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import { Component } from '@angular/core';
+import { render } from '../../src/public_api';
+
+// tslint:disable: no-use-before-declare
+test('shows the service value', async () => {
+  const { getByText } = await render(FixtureComponent);
+
+  getByText('foo');
+});
+
+test('shows the service value with template syntax', async () => {
+  const { getByText } = await render('<fixture-component></fixture-component>', {
+    declarations: [FixtureComponent],
+  });
+
+  getByText('foo');
+});
+
+test('shows the provided service value', async () => {
+  const { getByText } = await render(FixtureComponent, {
+    componentProviders: [
+      {
+        provide: Service,
+        useValue: {
+          foo() {
+            return 'bar';
+          },
+        },
+      },
+    ],
+  });
+
+  getByText('bar');
+});
+
+test('shows the provided service value with template syntax', async () => {
+  const { getByText } = await render('<fixture-component></fixture-component>', {
+    declarations: [FixtureComponent],
+    componentProviders: [
+      {
+        provide: Service,
+        useValue: {
+          foo() {
+            return 'bar';
+          },
+        },
+      },
+    ],
+  });
+
+  getByText('bar');
+});
+
+@Injectable()
+export class Service {
+  foo() {
+    return 'foo';
+  }
+}
+
+@Component({
+  selector: 'fixture-component',
+  template: '{{service.foo()}}',
+  providers: [Service],
+})
+export class FixtureComponent {
+  constructor(public service: Service) {}
+}

projects/testing-library/tests/providers/component-provider.spec.ts

@@ -0,0 +1,72 @@
+import { Injectable } from '@angular/core';
+import { Component } from '@angular/core';
+import { render } from '../../src/public_api';
+import { TestBed } from '@angular/core/testing';
+
+// tslint:disable: no-use-before-declare
+test('shows the service value', async () => {
+  const { getByText } = await render(FixtureComponent, {
+    providers: [Service],
+  });
+
+  getByText('foo');
+});
+
+test('shows the service value with template syntax', async () => {
+  const { getByText } = await render('<fixture-component></fixture-component>', {
+    declarations: [FixtureComponent],
+    providers: [Service],
+  });
+
+  getByText('foo');
+});
+
+test('shows the provided service value', async () => {
+  const { getByText } = await render(FixtureComponent, {
+    providers: [
+      {
+        provide: Service,
+        useValue: {
+          foo() {
+            return 'bar';
+          },
+        },
+      },
+    ],
+  });
+
+  getByText('bar');
+});
+
+test('shows the provided service value with template syntax', async () => {
+  const { getByText } = await render('<fixture-component></fixture-component>', {
+    declarations: [FixtureComponent],
+    providers: [
+      {
+        provide: Service,
+        useValue: {
+          foo() {
+            return 'bar';
+          },
+        },
+      },
+    ],
+  });
+
+  getByText('bar');
+});
+
+@Injectable()
+export class Service {
+  foo() {
+    return 'foo';
+  }
+}
+
+@Component({
+  selector: 'fixture-component',
+  template: '{{service.foo()}}',
+})
+export class FixtureComponent {
+  constructor(public service: Service) {}
+}

projects/testing-library/tests/providers/module-provider.spec.ts

@@ -1,7 +1,9 @@
-import { AppComponent } from './app.component';
+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 { provideMockStore } from '@ngrx/store/testing';
+import { AppComponent } from './app.component';
 
 configureJestSetup();
 
@@ -28,3 +30,11 @@ test(`should render title in a h1 tag`, async () => {
   });
   expect(container.querySelector('h1').textContent).toContain('Welcome to app!');
 });
+
+test(`should be able to get the Store`, async () => {
+  await render('<app-root></app-root>', {
+    declarations: [AppComponent],
+    providers: [provideMockStore()],
+  });
+  expect(TestBed.get(Store)).toBeDefined();
+});