fix(tests): correct TestBed configuration for all components

After upgrading to Angular 20 and @angular/fire 20, all tests were failing due to an incorrect TestBed configuration.

The Firebase providers were being imported in the imports array instead of the providers array. This commit moves the Firebase providers to the providers array in the TestBed configuration for all components. It also adds any missing module dependencies to the imports array.

With these changes, all tests now pass.

Author: rafikhan

firestore/src/app/homepage/homepage.component.spec.ts

@@ -98,15 +98,16 @@ describe('HomepageComponent', () => {
         MatToolbarModule,
         MatIconModule,
         MatCardModule,
-        provideFirebaseApp(() => initializeApp(projectConfig)),
-        provideFirestore(() => getFirestore()),
-        provideAuth(() => getAuth()),
       ],
       declarations: [HomepageComponent, RestaurantCardComponent],
       providers: [{
         provide: HomepageFirestore,
         useClass: MockHomepageFirestore
-      }]
+      },
+      provideFirebaseApp(() => initializeApp(projectConfig)),
+      provideFirestore(() => getFirestore()),
+      provideAuth(() => getAuth()),
+      ]
     });
     fixture = TestBed.createComponent(HomepageComponent);
     component = fixture.componentInstance;

firestore/src/app/restaurant-card/restaurant-card.component.spec.ts

@@ -15,6 +15,9 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { RestaurantCardComponent } from './restaurant-card.component';
 
@@ -25,7 +28,7 @@ describe('RestaurantCardComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [RestaurantCardComponent],
-      imports: []
+      imports: [MatCardModule, MatIconModule, RouterTestingModule]
     });
     fixture = TestBed.createComponent(RestaurantCardComponent);
     component = fixture.componentInstance;

firestore/src/app/restuarant-page/restuarant-page.component.spec.ts

@@ -23,6 +23,10 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { projectConfig } from 'src/environments/environment.default';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import { getAuth, provideAuth } from '@angular/fire/auth';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { ReviewListComponent } from '../review-list/review-list.component';
 
 describe('RestuarantPageComponent', () => {
   let component: RestuarantPageComponent;
@@ -32,11 +36,15 @@ describe('RestuarantPageComponent', () => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule,
         MatDialogModule,
+        MatToolbarModule,
+        MatIconModule,
+        CommonModule
+      ],
+      declarations: [RestuarantPageComponent, ReviewListComponent],
+      providers: [
         provideFirebaseApp(() => initializeApp(projectConfig)),
         provideFirestore(() => getFirestore()),
-        provideAuth(() => getAuth())],
-      declarations: [RestuarantPageComponent],
-      providers: [
+        provideAuth(() => getAuth()),
         { provide: MAT_DIALOG_DATA, useValue: {} },
         { provide: MatDialogRef, useValue: {} },
       ]

firestore/src/app/review-list/review-list.component.spec.ts

@@ -21,6 +21,9 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { projectConfig } from 'src/environments/environment.default';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import { getAuth, provideAuth } from '@angular/fire/auth';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
 
 describe('ReviewListComponent', () => {
   let component: ReviewListComponent;
@@ -29,9 +32,16 @@ describe('ReviewListComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ReviewListComponent],
-      imports: [provideFirebaseApp(() => initializeApp(projectConfig)),
-      provideFirestore(() => getFirestore()),
-      provideAuth(() => getAuth())]
+      imports: [
+        MatDividerModule,
+        MatIconModule,
+        CommonModule
+      ],
+      providers: [
+        provideFirebaseApp(() => initializeApp(projectConfig)),
+        provideFirestore(() => getFirestore()),
+        provideAuth(() => getAuth())
+      ]
     });
     fixture = TestBed.createComponent(ReviewListComponent);
     component = fixture.componentInstance;

firestore/src/app/sign-in-modal/sign-in-modal.component.spec.ts

@@ -43,11 +43,11 @@ describe('SignInModalComponent', () => {
         MatFormFieldModule,
         FormsModule,
         MatInputModule,
-        BrowserAnimationsModule,
+        BrowserAnimationsModule],
+      providers: [
         provideFirebaseApp(() => initializeApp(projectConfig)),
         provideFirestore(() => getFirestore()),
-        provideAuth(() => getAuth())],
-      providers: [
+        provideAuth(() => getAuth()),
         { provide: MAT_DIALOG_DATA, useValue: {} },
         {
           provide: MatDialogRef, useValue: {

firestore/src/app/submit-review-modal/submit-review-modal.component.spec.ts

@@ -23,6 +23,13 @@ import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { projectConfig } from 'src/environments/environment.default';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import { getAuth, provideAuth } from '@angular/fire/auth';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
 describe('SubmitReviewModalComponent', () => {
@@ -32,10 +39,18 @@ describe('SubmitReviewModalComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        FormsModule,
+        CommonModule,
+        MatIconModule,
+        BrowserAnimationsModule
+      ],
+      providers: [
         provideFirebaseApp(() => initializeApp(projectConfig)),
         provideFirestore(() => getFirestore()),
-        provideAuth(() => getAuth())],
-      providers: [
+        provideAuth(() => getAuth()),
         { provide: MAT_DIALOG_DATA, useValue: {} },
         { provide: MatDialogRef, useValue: {} }
       ],