Merge remote-tracking branch 'origin/develop' into Cody/increase-Week…

…lyPickButton-responsiveness

Merge develop into feature branch

.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: [
+    '../stories/*.mdx',
     '../stories/**/*.mdx',
     '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
@@ -12,6 +13,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/manager-api',
   ],
   framework: {
     name: '@storybook/nextjs',

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: ['about', 'technical-planning-documents'],
+  },
+});

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react';
 import '../app/globals.css';
+import '../stories/styles.css';
 
 const preview: Preview = {
   parameters: {
@@ -9,13 +10,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#09090B' },
-        { name: 'light', value: '#fff' },
-      ],
-    },
+    layout: 'centered',
   },
 };
 

app/(main)/league/all/page.test.tsx

@@ -1,124 +1,277 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import {
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+  fireEvent,
+} from '@testing-library/react';
 import Leagues from './page';
 import { useDataStore } from '@/store/dataStore';
 import { getUserLeagues } from '@/utils/utils';
-import {
-  getGameWeek,
-  getAllLeagues,
-  getUserDocumentId,
-} from '@/api/apiFunctions';
-import { AuthContext } from '@/context/AuthContextProvider';
+import { getAllLeagues, addUserToLeague } from '@/api/apiFunctions';
+import { toast } from 'react-hot-toast';
+import Alert from '@/components/AlertNotification/AlertNotification';
+import { AlertVariants } from '@/components/AlertNotification/Alerts.enum';
 
-jest.mock('@/store/dataStore', () => ({
-  useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })),
-}));
+const mockUseAuthContext = {
+  isSignedIn: false,
+};
 
-jest.mock('@/utils/utils', () => ({
-  getUserLeagues: jest.fn(() => Promise.resolve([])),
+jest.mock('@/context/AuthContextProvider', () => ({
+  useAuthContext() {
+    return {
+      ...mockUseAuthContext,
+    };
+  },
 }));
 
-jest.mock('@/api/apiFunctions', () => ({
-  getGameWeek: jest.fn(() =>
-    Promise.resolve({
-      week: 1,
-    }),
-  ),
-  getAllLeagues: jest.fn(() =>
-    Promise.resolve([
+jest.mock('@/store/dataStore', () => ({
+  useDataStore: jest.fn(() => ({
+    user: {
+      documentId: '123',
+      id: '1234',
+      email: '[email protected]',
+      leagues: ['league1'],
+    },
+    allLeagues: [
       {
         leagueId: '123',
         leagueName: 'Test League',
-        logo: 'https://example.com/logo.png',
-        participants: ['123456', '78', '9'],
+        logo: 'logo.png',
+        participants: ['123456', '78'],
         survivors: ['123456', '78'],
       },
-    ]),
-  ),
+    ],
+    updateUser: jest.fn(),
+  })),
 }));
 
-jest.mock('@/context/AuthContextProvider', () => ({
-  useAuthContext: jest.fn(() => ({ user: { id: '123' } })),
+jest.mock('@/utils/utils', () => ({
+  getUserLeagues: jest.fn(() => Promise.resolve([])),
+  cn: jest.fn(),
+}));
+
+jest.mock('@/api/apiFunctions', () => ({
+  getAllLeagues: jest.fn(),
+  addUserToLeague: jest.fn(),
+}));
+
+jest.mock('react-hot-toast', () => ({
+  toast: {
+    custom: jest.fn(),
+  },
 }));
 
 describe('Leagues Component', () => {
   const mockUseDataStore = useDataStore as unknown as jest.Mock;
   const mockGetUserLeagues = getUserLeagues as jest.Mock;
-  const mockGetGameWeek = getGameWeek as jest.Mock;
   const mockGetAllLeagues = getAllLeagues as jest.Mock;
+  const mockAddUserToLeague = addUserToLeague as jest.Mock;
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  xtest('should render "You are not enrolled in any leagues" message when no leagues are found', async () => {
-    mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
-    mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
+  it('should render "You are not enrolled in any leagues" message when no leagues are found', async () => {
+    mockUseAuthContext.isSignedIn = true;
+    mockUseDataStore.mockReturnValue({
+      user: {
+        documentId: '123',
+        email: '[email protected]',
+        id: '123',
+        leagues: [],
+      },
+      allLeagues: [],
+    });
+
     render(<Leagues />);
 
+    await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner'));
+
     await waitFor(() => {
-      expect(
-        screen.getByText('You are not enrolled in any leagues'),
-      ).toBeInTheDocument();
+      const messageElement = screen.getByTestId('no-leagues-message');
+      expect(messageElement).toBeInTheDocument();
     });
   });
 
-  xtest('should display GlobalSpinner while loading data', async () => {
-    mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
-    mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
-    render(<Leagues />);
+  it('should display GlobalSpinner while loading data', async () => {
+    mockUseAuthContext.isSignedIn = true;
 
-    await waitFor(() => {
-      expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
+    mockUseDataStore.mockReturnValueOnce({
+      user: {
+        documentId: '123',
+        email: '[email protected]',
+        id: '123',
+        leagues: [],
+      },
+      allLeagues: [],
     });
-  });
-  xtest('should not display GlobalSpinner after loading data', async () => {
-    mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
-    mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
 
     render(<Leagues />);
 
     expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
-    });
   });
 
-  xtest('should handle form submission to join a league', async () => {
-    mockUseDataStore.mockReturnValueOnce({
-      user: { id: '123', leagues: [] },
+  it('should not display GlobalSpinner after loading data', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    mockUseDataStore.mockReturnValue({
+      user: {
+        documentId: '123',
+        email: '[email protected]',
+        id: '123',
+        leagues: [],
+      },
       allLeagues: [
         {
           leagueId: '123',
           leagueName: 'Test League',
-          logo: 'https://findmylogo.com/logo.png',
+          logo: 'logo.png',
           participants: ['123456', '78'],
-          survivors: ['123456', '78', '9'],
+          survivors: ['123456', '78'],
         },
       ],
     });
+
     mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
+
+    render(<Leagues />);
+
+    await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner'));
+
+    expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
+  });
+
+  it('should handle form submission to join a league', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    const user = {
+      documentId: '123',
+      email: '[email protected]',
+      id: '123',
+      leagues: [],
+    };
+
+    const league = {
+      leagueId: '123',
+      leagueName: 'Test League',
+      logo: 'logo.png',
+      participants: [],
+      survivors: [],
+    };
+
+    const updateUser = jest.fn();
+
+    mockUseDataStore.mockReturnValue({
+      user,
+      allLeagues: [league],
+      updateUser,
+    });
+
+    mockGetAllLeagues.mockResolvedValueOnce([league]);
+    mockAddUserToLeague.mockResolvedValue(
+      Promise.resolve({
+        userDocumentId: user.documentId,
+        selectedLeague: league.leagueId,
+        selectedLeagues: [league.leagueId],
+        participants: [user.id],
+        survivors: [user.id],
+      }),
+    );
 
     render(<Leagues />);
 
     await waitFor(() => {
       expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
     });
 
-    const selectElement = screen.getByLabelText(/Select league to join/i);
-    expect(selectElement).toBeInTheDocument();
+    const selectElement = screen.getByTestId('select-available-leagues');
+    fireEvent.change(selectElement, { target: { value: '123' } });
+    fireEvent.click(screen.getByTestId('join-league-button'));
+
+    await waitFor(() => {
+      expect(mockAddUserToLeague).toHaveBeenCalledWith({
+        userDocumentId: user.documentId,
+        selectedLeague: league.leagueId,
+        selectedLeagues: [league.leagueId],
+        participants: [user.id],
+        survivors: [user.id],
+      });
+      expect(updateUser).toHaveBeenCalledWith(
+        user.documentId,
+        user.id,
+        user.email,
+        [...user.leagues, league.leagueId],
+      );
+      expect(toast.custom).toHaveBeenCalledWith(
+        <Alert
+          variant={AlertVariants.Success}
+          message={`Added ${league.leagueName} to your leagues!`}
+        />,
+      );
+    });
+  });
+
+  it('should show error if adding to league fails', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    const user = {
+      documentId: '123',
+      email: '[email protected]',
+      id: '123',
+      leagues: [],
+    };
 
+    const league = {
+      leagueId: '123',
+      leagueName: 'Test League',
+      logo: 'logo.png',
+      participants: [],
+      survivors: [],
+    };
+
+    mockUseDataStore.mockReturnValue({
+      user,
+      allLeagues: [league],
+    });
+
+    mockGetUserLeagues.mockResolvedValueOnce([]);
+    mockGetAllLeagues.mockResolvedValueOnce([league]);
+    mockAddUserToLeague.mockResolvedValue(
+      Promise.resolve({
+        userDocumentId: user.documentId,
+        selectedLeague: league.leagueId,
+        selectedLeagues: [league.leagueId],
+        participants: [user.id],
+        survivors: [user.id],
+      }),
+    );
+
+    render(<Leagues />);
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
+    });
+
+    const selectElement = screen.getByTestId('select-available-leagues');
     fireEvent.change(selectElement, { target: { value: '123' } });
-    fireEvent.click(screen.getByText(/Join League/i));
+    fireEvent.click(screen.getByTestId('join-league-button'));
 
     await waitFor(() => {
-      expect(
-        screen.getByText('Added Test League to your leagues!'),
-      ).toBeInTheDocument();
+      expect(mockAddUserToLeague).toHaveBeenCalledWith({
+        userDocumentId: user.documentId,
+        selectedLeague: league.leagueId,
+        selectedLeagues: [league.leagueId],
+        participants: [user.id],
+        survivors: [user.id],
+      });
+
+      expect(toast.custom).toHaveBeenCalledWith(
+        <Alert
+          variant={AlertVariants.Error}
+          message="Failed to add the league. Please try again."
+        />,
+      );
     });
   });
 });