From e606433e248ec28cfe2e7bfefafaff6299b9124a Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sat, 14 Dec 2024 08:34:09 +0900
Subject: [PATCH] fix: flatten component providers for consistency to the
 framework

Close #506
---
 .../src/lib/testing-library.ts                |  3 ++-
 .../providers/component-provider.spec.ts      | 20 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 7c7de892..2ddf3891 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/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);
   }
 
diff --git a/projects/testing-library/tests/providers/component-provider.spec.ts b/projects/testing-library/tests/providers/component-provider.spec.ts
index 3c3ec0cf..9290d5bd 100644
--- a/projects/testing-library/tests/providers/component-provider.spec.ts
+++ b/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() {