Merge pull request #4975 from OneCommunityGlobal/Amalesh-UserTeamsTable-tests

Amalesh - Taking over "Anirudh taking over for Swathy - Unit test TeamsAndProjects/UserTeamsTable.jsx"

Author: one-community

src/components/UserProfile/TeamsAndProjects/__tests__/UserTeamsTable.test.jsx

@@ -0,0 +1,179 @@
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { Provider } from 'react-redux';
+import UserTeamsTable from '../UserTeamsTable';
+import thunk from 'redux-thunk';
+import configureMockStore from 'redux-mock-store';
+import { render, screen, within, waitFor } from '@testing-library/react';
+import { userProfileMock } from '../../../../__tests__/mockStates.js';
+import axios from 'axios';
+
+vi.mock('react-redux', async () => {
+  const actual = await vi.importActual('react-redux');
+  return {
+    ...actual,
+    connect: () => Component => Component,
+  };
+});
+
+vi.mock('axios');
+vi.mock('react-toastify', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+vi.mock('utils/permissions', () => vi.fn(() => true));
+
+const mockStore = configureMockStore([thunk]);
+
+const mockUserProfile = {
+  userProfile: {
+    ...userProfileMock,
+    teams: [
+      { _id: '1', teamName: 'Team1' },
+      { _id: '2', teamName: 'Team2' },
+    ],
+  },
+  setCodeValid: vi.fn(),
+  onAssignTeamCode: vi.fn(),
+  onUserVisibilitySwitch: vi.fn(),
+  onButtonClick: vi.fn(),
+  onDeleteClick: vi.fn(),
+  fetchTeamCodeAllUsers: vi.fn(),
+  canEditTeamCode: false,
+  canEditVisibility: false,
+  codeValid: true,
+  disabled: false,
+  edit: true,
+  role: 'Administrator',
+  isVisible: false,
+  inputAutoComplete: [],
+  inputAutoStatus: false,
+  isLoading: false,
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  axios.get.mockResolvedValue({ data: {} });
+  axios.patch.mockResolvedValue({ data: {} });
+});
+
+const renderComponent = mockProps => {
+  const store = mockStore({
+    auth: {
+      user: {
+        role: 'Owner',
+        permissions: {
+          frontPermissions: [],
+        },
+      },
+    },
+  });
+
+  return render(
+    <Provider store={store}>
+      <UserTeamsTable
+        canEditVisibility={mockProps.canEditVisibility}
+        isVisible={mockProps.isVisible}
+        renderedOn={Date.now()}
+        edit={mockProps.edit}
+        role={mockProps.role}
+        disabled={mockProps.disabled}
+        canEditTeamCode={mockProps.canEditTeamCode}
+        userProfile={
+          mockProps.userProfile
+            ? {
+                ...mockProps.userProfile,
+                teamCode: '',
+              }
+            : null
+        }
+        codeValid={mockProps.codeValid}
+        hasPermission={vi.fn(() => true)}
+        setCodeValid={mockProps.setCodeValid}
+        onAssignTeamCode={mockProps.onAssignTeamCode}
+        onUserVisibilitySwitch={mockProps.onUserVisibilitySwitch}
+        onButtonClick={mockProps.onButtonClick}
+        onDeleteClick={mockProps.onDeleteClick}
+        fetchTeamCodeAllUsers={mockProps.fetchTeamCodeAllUsers}
+        inputAutoComplete={mockProps.inputAutoComplete}
+        inputAutoStatus={mockProps.inputAutoStatus}
+        isLoading={mockProps.isLoading}
+      />
+    </Provider>
+  );
+};
+
+describe('User Teams Table Component', () => {
+  it('render without crashing', async () => {
+    const { unmount } = renderComponent(mockUserProfile);
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+    unmount();
+  });
+
+  it('renders correct number of teams the user is assigned to', async () => {
+    renderComponent(mockUserProfile);
+
+    await waitFor(() => {
+      const rows = within(screen.getByRole('table')).getAllByRole('row');
+      expect(rows.length).toBe(3);
+    });
+  });
+
+  it('renders correct team names', async () => {
+    renderComponent(mockUserProfile);
+
+    await waitFor(() => {
+      const teamRows = within(screen.getByRole('table')).getAllByRole('row');
+      expect(teamRows.length).toBe(3);
+      const teamNames = [
+        teamRows[1].cells[1].textContent,
+        teamRows[2].cells[1].textContent,
+      ];
+
+      expect(teamNames).toEqual(['Team1', 'Team2']);
+    });
+  });
+
+  it('visibility toggle appears with permission', async () => {
+    const modifiedMock = {
+      ...mockUserProfile,
+      canEditVisibility: true,
+    };
+
+    renderComponent(modifiedMock);
+    await waitFor(() => {
+      const visibilityLabel = screen.getByText('Visibility');
+      expect(visibilityLabel).toBeInTheDocument();
+    });
+  });
+
+  it('renders team code input field with correct placeholder', async () => {
+    renderComponent(mockUserProfile);
+
+    await waitFor(() => {
+      const teamCodeInput = screen.getByPlaceholderText('X-XXX');
+      expect(teamCodeInput).toBeInTheDocument();
+      expect(teamCodeInput.tagName).toBe('INPUT');
+      expect(teamCodeInput.type).toBe('text');
+      expect(teamCodeInput.id).toBe('teamCode');
+    });
+  });
+
+  it('renders table headers with correct column titles', async () => {
+    renderComponent(mockUserProfile);
+
+    await waitFor(() => {
+      const headerCells = within(screen.getByRole('table')).getAllByRole('columnheader');
+      expect(headerCells.length).toBe(4);
+      expect(headerCells[0].textContent).toBe('#');
+      expect(headerCells[1].textContent).toBe('Team Name');
+      expect(headerCells[2].textContent).toBe('Members');
+      expect(headerCells[3].textContent).toBe('');
+    });
+  });
+});

src/components/WeeklySummariesReport/WeeklySummariesReport.module.css

@@ -102,6 +102,9 @@
   width: 50%;
   height: 22px;
   padding: 0;
+  line-height: 20px;
+  color: #bbb;
+  font-weight: bold;
   content: '';
 }
 
@@ -113,7 +116,10 @@
   background-color: #bbb;
 }
 
-.switchToggleInner::after {
+.switch-toggle-inner::after {
+  content: '';
+  padding-right: 2px;
+  text-align: right;
   background-color: white;
 }
 
@@ -138,7 +144,7 @@
 }
 
 .switchToggle:checked + .switchToggleLabel .switchToggleSwitch {
-  right: 4px;
+  right: 0;
   background: white;
 }
 
@@ -153,8 +159,8 @@
 }
 
 .copyIcon {
-  margin: 2px;
   cursor: pointer;
+  margin: 2px;
 }
 
 .filterContainer {