fix: override component providers (#19)

Author: timdeschryver

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

@@ -31,11 +31,18 @@ export async function render<T>(
 
   TestBed.configureTestingModule({
     declarations: [...declarations, ...componentDeclarations],
-    providers: [...providers],
     imports: [...imports],
     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);
+    });
+  }
+
   const fixture = isTemplate
     ? createWrapperComponentFixture(templateOrComponent as string, { wrapper, componentProperties })
     : createComponentFixture(templateOrComponent as Type<T>, { componentProperties });

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

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