Merge branch 'main' of github.com:392-f24/FitForecast

src/components/AddClothesButton.irena.test.jsx

@@ -3,32 +3,42 @@ import { vi, describe, it, expect } from 'vitest';
 import AddClothesButton from './AddClothesButton';
 import Closet from '../pages/Closet';
 
+// Mocking Firebase utilities
 vi.mock('../utilities/firebase', () => ({
-    auth: {
-      currentUser: { uid: 'testUserId' },
-    },
-  }));
+  auth: {
+    currentUser: { uid: 'testUserId' },
+  },
+}));
 
-  vi.mock('../utilities/database', () => ({
-    getClothesData: vi.fn((uid, callback) => {
-      callback([]); // Simulate an empty clothes list
-      return () => {}; // Return unsubscribe function
-    }),
-    getCategories: vi.fn(() => Promise.resolve({
+// Mocking database utilities
+vi.mock('../utilities/database', () => ({
+  getClothesData: vi.fn((uid, callback) => {
+    // Simulate an empty clothes list
+    callback([]);
+    // Return an unsubscribe function
+    return () => {};
+  }),
+  getCategories: vi.fn(() =>
+    Promise.resolve({
       categoriesOrdered: ['shirt'],
-      categoriesDict: {}
-    }))
-  }));
-
-describe('AddClothesButton', () => {
-  it('should open the Add Clothes form when the Add button is clicked', async () => {
+      categoriesDict: {},
+    })
+  ),
+}));
+
+describe('AddClothesButton Component', () => {
+  it('displays the Add Clothes form when the Add button is clicked', async () => {
+    // Render the Closet component
     render(<Closet />);
-    await screen.findByText("shirt");
 
+    // Ensure the "shirt" category is displayed
+    await screen.findByText('shirt');
+
+    // Find and click the Add button
     const addButton = screen.getByRole('button', { name: /add/i });
     fireEvent.click(addButton);
 
+    // Verify that the Add Clothes form appears
     expect(screen.getByText(/Add Clothes/i)).toBeInTheDocument();
-
   });
 });

src/components/SuggestedOutfit.aining-genai.test.jsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, vi, expect } from "vitest";
+import SuggestedOutfit from "./SuggestedOutfit";
+import { MemoryRouter } from "react-router-dom";
+
+// Mock Firebase auth
+vi.mock("../utilities/firebase", () => ({
+  auth: {
+    currentUser: { uid: "testUserId" },
+  },
+}));
+
+// Mock the getSuggestedOutfit function
+vi.mock("../utilities/functions", () => ({
+  getSuggestedOutfit: vi.fn(() =>
+    Promise.resolve({
+      top: "",
+      bottom: "",
+      outerwear: "",
+      footwear: "",
+    })
+  ),
+}));
+
+describe("SuggestedOutfit Component", () => {
+  it("displays a message asking the user to add clothes when no clothes are in the closet", async () => {
+    const mockWeatherData = { temp: 20 }; // Example weather data
+    const mockWeatherError = null;
+
+    render(
+      <MemoryRouter>
+        <SuggestedOutfit
+          weatherData={mockWeatherData}
+          weatherError={mockWeatherError}
+        />
+      </MemoryRouter>
+    );
+
+    // Wait for the outfit loading to finish
+    const messageElement = await screen.findByText(
+      /Add more clothes to get an outfit suggestion!/i
+    );
+
+    // Check if the message is displayed
+    expect(messageElement).toBeInTheDocument();
+  });
+});

src/pages/Closet.charlie.gen-ai.test.jsx

@@ -1,29 +1,32 @@
 import { describe, it, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import Closet from './Closet';
-import { getClothesData, getCategories } from '../utilities/database';
-import { auth } from '../utilities/firebase';
 
-vi.mock('../utilities/database');
-vi.mock('../utilities/firebase');
+// Mock the utilities
+vi.mock('../utilities/firebase', () => ({
+  auth: { currentUser: { uid: '12345' } },
+}));
+
+vi.mock('../utilities/database', () => ({
+  getCategories: vi.fn(),
+  getClothesData: vi.fn(),
+}));
+
+// Import mocked utilities
+import { getCategories, getClothesData } from '../utilities/database';
 
 const mockCategories = {
   categoriesOrdered: ['T-Shirts', 'Pants', 'Shoes'],
   categoriesDict: { 'T-Shirts': {}, Pants: {}, Shoes: {} },
 };
 
-const mockUser = { uid: '12345' };
-
 const mockClothesData = [
   { category: 'Pants', imageURL: 'pants1.png' },
   { category: 'Shoes', imageURL: 'shoes1.png' },
 ];
 
 beforeEach(() => {
-  // Mock Firebase Authentication
-  auth.currentUser = mockUser;
-
-  // Mock database calls
+  // Set up mocks
   getCategories.mockResolvedValue(mockCategories);
   getClothesData.mockImplementation((uid, callback) => {
     callback(mockClothesData);
@@ -40,12 +43,12 @@ describe('Closet component', () => {
     // Render the Closet component
     render(<Closet />);
 
-    // Wait for the categories to load and ensure "T-Shirts" category is selectable
+    // Wait for categories to load
     await screen.findByText('T-Shirts');
 
     // Click the "T-Shirts" category button
     const tShirtButton = screen.getByRole('button', { name: /T-Shirts/i });
-    tShirtButton.click();
+    fireEvent.click(tShirtButton);
 
     // Verify the placeholder message
     const message = await screen.findByText(/add your first t-shirt/i);