fix(tests): correct TestBed configuration for all components

rafikhan · rafikhan · commit 57e5732a3d3d · 2025-08-21T12:32:15.000-04:00
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.
diff --git a/firestore/scripts/MockRestaurantData.js b/firestore/scripts/MockRestaurantData.js
@@ -12,95 +12,94 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
-*/
+ */
 
-
-/**  If connecting to a live Firebase project (one that you set up in the 
+/**  If connecting to a live Firebase project (one that you set up in the
  * Firebase console) put your config vars into the `prod` field object here
- * and change the `initializeApp` value in `app.module.ts` to `environment.prod`. 
+ * and change the `initializeApp` value in `app.module.ts` to `environment.prod`.
  * Otherwise, leave untouched to enable connection to demo project and emulators.
-*/
+ */
 
 export const data = {
   words: [
-    'Bar',
-    'Fire',
-    'Grill',
-    'Drive Thru',
-    'Place',
-    'Best',
-    'Spot',
-    'Prime',
-    'Eatin\'',
+    "Bar",
+    "Fire",
+    "Grill",
+    "Drive Thru",
+    "Place",
+    "Best",
+    "Spot",
+    "Prime",
+    "Eatin'",
   ],
   cities: [
-    'Albuquerque',
-    'Arlington',
-    'Atlanta',
-    'Austin',
-    'Baltimore',
-    'Boston',
-    'Charlotte',
-    'Chicago',
-    'Cleveland',
-    'Colorado Springs',
-    'Columbus',
-    'Dallas',
-    'Denver',
-    'Detroit',
-    'El Paso',
-    'Fort Worth',
-    'Fresno',
-    'Houston',
-    'Indianapolis',
-    'Jacksonville',
-    'Kansas City',
-    'Las Vegas',
-    'Long Island',
-    'Los Angeles',
-    'Louisville',
-    'Memphis',
-    'Mesa',
-    'Miami',
-    'Milwaukee',
-    'Nashville',
-    'New York',
-    'Oakland',
-    'Oklahoma',
-    'Omaha',
-    'Philadelphia',
-    'Phoenix',
-    'Portland',
-    'Raleigh',
-    'Sacramento',
-    'San Antonio',
-    'San Diego',
-    'San Francisco',
-    'San Jose',
-    'Tucson',
-    'Tulsa',
-    'Virginia Beach',
-    'Washington',
+    "Albuquerque",
+    "Arlington",
+    "Atlanta",
+    "Austin",
+    "Baltimore",
+    "Boston",
+    "Charlotte",
+    "Chicago",
+    "Cleveland",
+    "Colorado Springs",
+    "Columbus",
+    "Dallas",
+    "Denver",
+    "Detroit",
+    "El Paso",
+    "Fort Worth",
+    "Fresno",
+    "Houston",
+    "Indianapolis",
+    "Jacksonville",
+    "Kansas City",
+    "Las Vegas",
+    "Long Island",
+    "Los Angeles",
+    "Louisville",
+    "Memphis",
+    "Mesa",
+    "Miami",
+    "Milwaukee",
+    "Nashville",
+    "New York",
+    "Oakland",
+    "Oklahoma",
+    "Omaha",
+    "Philadelphia",
+    "Phoenix",
+    "Portland",
+    "Raleigh",
+    "Sacramento",
+    "San Antonio",
+    "San Diego",
+    "San Francisco",
+    "San Jose",
+    "Tucson",
+    "Tulsa",
+    "Virginia Beach",
+    "Washington",
   ],
   categories: [
-    'Brunch',
-    'Burgers',
-    'Coffee',
-    'Deli',
-    'Dim Sum',
-    'Indian',
-    'Italian',
-    'Mediterranean',
-    'Mexican',
-    'Pizza',
-    'Ramen',
-    'Sushi',
+    "Brunch",
+    "Burgers",
+    "Coffee",
+    "Deli",
+    "Dim Sum",
+    "Indian",
+    "Italian",
+    "Mediterranean",
+    "Mexican",
+    "Pizza",
+    "Ramen",
+    "Sushi",
   ],
   ratingsTexts: {
-    1: 'Would never eat here again!',
-    2: 'Not my cup of tea.',
-    3: 'Exactly okay :/',
-    4: 'Actually pretty good, would recommend!',
-    5: 'This is my favorite place. Literally.',
+    1: "Would never eat here again!",
+    2: "Not my cup of tea.",
+    3: "Exactly okay :/",
+    4: "Actually pretty good, would recommend!",
+    5: "This is my favorite place. Literally.",
   },
 };
diff --git a/firestore/scripts/PopulateFirestore.js b/firestore/scripts/PopulateFirestore.js
@@ -22,22 +22,22 @@
  * modifying the contents of the firestore database.
  */
 
-import { initializeApp } from 'firebase/app';
+import { initializeApp } from "firebase/app";
 import {
   getFirestore,
   connectFirestoreEmulator,
   addDoc,
   collection,
-} from 'firebase/firestore/lite';
+} from "firebase/firestore/lite";
 import {
   getAuth,
   connectAuthEmulator,
   createUserWithEmailAndPassword,
   signInWithEmailAndPassword,
-} from 'firebase/auth';
+} from "firebase/auth";
 
-import { projectConfig } from './environment.js';
-import { data } from './MockRestaurantData.js';
+import { projectConfig } from "./environment.js";
+import { data } from "./MockRestaurantData.js";
 
 const app = initializeApp(projectConfig);
 const auth = getAuth(app);
@@ -47,9 +47,9 @@ const db = getFirestore(app);
  * Connect to emulators if a `demo` configuration hasn been pulled from
  * environment.js.
  */
-if (app.options.projectId.indexOf('demo-') == 0) {
-  connectFirestoreEmulator(db, '127.0.0.1', 8080);
-  connectAuthEmulator(auth, 'http://127.0.0.1:9099');
+if (app.options.projectId.indexOf("demo-") == 0) {
+  connectFirestoreEmulator(db, "127.0.0.1", 8080);
+  connectAuthEmulator(auth, "http://127.0.0.1:9099");
 }
 
 /**
@@ -59,14 +59,14 @@ const signInWithAnonCredentials = async () => {
   try {
     await signInWithEmailAndPassword(
       auth,
-      'Anonymous@Anonymous.com',
-      'AnonymousPassword'
+      "Anonymous@Anonymous.com",
+      "AnonymousPassword",
     );
   } catch (userNotCreatedError) {
     await createUserWithEmailAndPassword(
       auth,
-      'Anonymous@Anonymous.com',
-      'AnonymousPassword'
+      "Anonymous@Anonymous.com",
+      "AnonymousPassword",
     );
   }
 };
@@ -76,7 +76,7 @@ const signInWithAnonCredentials = async () => {
  * database.
  */
 const addFakeRestaurant = async (restaurant) => {
-  const restaurantRef = await addDoc(collection(db, 'restaurants'), restaurant);
+  const restaurantRef = await addDoc(collection(db, "restaurants"), restaurant);
   addMockRating(restaurantRef.id, restaurant.avgRating);
 };
 
@@ -89,16 +89,16 @@ const generateMockRestaurants = () => {
   var restaurants = [];
 
   for (var i = 0; i < 20; i++) {
-    var name = getRandomItem(data.words) + ' ' + getRandomItem(data.words);
+    var name = getRandomItem(data.words) + " " + getRandomItem(data.words);
     var category = getRandomItem(data.categories);
     var city = getRandomItem(data.cities);
     var price = Math.floor(Math.random() * 4) + 1;
     var photoID = Math.floor(Math.random() * 22) + 1;
     // TODO(abradham): Modify to be able to use local emulated storage bucket
     var photo =
-      'https://storage.googleapis.com/firestorequickstarts.appspot.com/food_' +
+      "https://storage.googleapis.com/firestorequickstarts.appspot.com/food_" +
       photoID +
-      '.png';
+      ".png";
     var numRatings = 0;
     var avgRating = Math.floor(Math.random() * 5) + 1;
 
@@ -126,7 +126,7 @@ const addMockRestaurants = async (restaurntsArr) => {
   for (var i = 0; i < restaurntsArr.length; i++) {
     let promise = addFakeRestaurant(restaurntsArr[i]);
     if (!promise) {
-      console.debug('Couldn\'t add a restaurant to firestore');
+      console.debug("Couldn't add a restaurant to firestore");
       return Promise.reject();
     } else {
       promises.push(promise);
@@ -150,21 +150,21 @@ const addMockRating = async (restaurantId, avgRating) => {
   const newRating = {
     rating: avgRating,
     text: data.ratingsTexts[avgRating],
-    userName: 'Anonymous (Bot)',
+    userName: "Anonymous (Bot)",
   };
 
   // Add new rating to given restaurant's `ratings/` subcollection
   await addDoc(
     collection(db, `restaurants/${restaurantId}/ratings`),
-    newRating
+    newRating,
   );
 };
 
 const main = async () => {
   // Connect to emulators if a `demo` environment is pulled
-  if (app.options.projectId.indexOf('demo-') == 0) {
-    connectFirestoreEmulator(db, '127.0.0.1', 8080);
-    connectAuthEmulator(auth, 'http://127.0.0.1:9099');
+  if (app.options.projectId.indexOf("demo-") == 0) {
+    connectFirestoreEmulator(db, "127.0.0.1", 8080);
+    connectAuthEmulator(auth, "http://127.0.0.1:9099");
   }
 
   await signInWithAnonCredentials();
diff --git a/firestore/src/app/homepage/homepage.component.spec.ts b/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;
diff --git a/firestore/src/app/restaurant-card/restaurant-card.component.spec.ts b/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;
diff --git a/firestore/src/app/restuarant-page/restuarant-page.component.spec.ts b/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: {} },
       ]
diff --git a/firestore/src/app/review-list/review-list.component.spec.ts b/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;
diff --git a/firestore/src/app/sign-in-modal/sign-in-modal.component.spec.ts b/firestore/src/app/sign-in-modal/sign-in-modal.component.spec.ts
diff --git a/firestore/src/app/submit-review-modal/submit-review-modal.component.spec.ts b/firestore/src/app/submit-review-modal/submit-review-modal.component.spec.ts
