fix: flatten component providers for consistency to the framework (#507)

Closes #506

Author: lacolaco

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

@@ -119,7 +119,8 @@ export async function render<SutType, WrapperType = SutType>(
 
   await TestBed.compileComponents();
 
-  for (const { provide, ...provider } of componentProviders) {
+  // Angular supports nested arrays of providers, so we need to flatten them to emulate the same behavior.
+  for (const { provide, ...provider } of componentProviders.flat(Infinity)) {
     TestBed.overrideProvider(provide, provider);
   }
 

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

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Provider } from '@angular/core';
 import { Component } from '@angular/core';
 import { render, screen } from '../../src/public_api';
 
@@ -42,6 +42,24 @@ test('shows the provided service value with template syntax', async () => {
   expect(screen.getByText('bar')).toBeInTheDocument();
 });
 
+test('flatten the nested array of component providers', async () => {
+  const provideService = (): Provider => [
+    {
+      provide: Service,
+      useValue: {
+        foo() {
+          return 'bar';
+        },
+      },
+    },
+  ];
+  await render(FixtureComponent, {
+    componentProviders: [provideService()],
+  });
+
+  expect(screen.getByText('bar')).toBeInTheDocument();
+});
+
 @Injectable()
 class Service {
   foo() {