Merge pull request stakwork#516 from Vayras/CurrentMonth

Feature: Current month selection for admin date dropdown
AbdulWahab3181 · May 15, 2024 · 4b5f3e0 · 4b5f3e0
2 parents ed6ffed + 37425fa
commit 4b5f3e0
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/src/pages/superadmin/header/HeaderStyles.tsx b/src/pages/superadmin/header/HeaderStyles.tsx
@@ -156,7 +156,7 @@ export const Option = styled.div`
   top: 65px;
   right: 48px;
   width: 169px;
-  height: 157px;
+  height: 167px;
   display: inline-flex;
   padding: 12px 28px 12px 28px;
   flex-direction: column;
@@ -231,7 +231,7 @@ export const WorkspaceOption = styled.div`
 `;
 
 export const WorkspaceText = styled.div`
-  flex: 2, 
+  flex: 2;
   text-align: 'center';
   white-space: nowrap;
   overflow: hidden;

diff --git a/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx b/src/pages/superadmin/header/__tests__/SuperAdminHeader.spec.tsx
@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/dom';
 import { render, screen, within, act, fireEvent } from '@testing-library/react';
 import moment from 'moment';
 import nock from 'nock';
@@ -8,11 +9,11 @@ import { user } from '../../../../__test__/__mockData__/user';
 import { mockUsehistory } from '../../../../__test__/__mockFn__/useHistory';
 import { Header } from '../';
 
-beforeAll(() => {
-  nock.disableNetConnect();
-  setupStore();
-  mockUsehistory();
-});
+// beforeAll(() => {
+//   nock.disableNetConnect();
+//   setupStore();
+//   mockUsehistory();
+// });
 
 /**
  * @jest-environment jsdom
@@ -206,6 +207,7 @@ describe('Header Component', () => {
 
     expect(screen.getByText(exportCSVText)).toBeInTheDocument();
   });
+
   test('displays "Custom" when dates are selected', async () => {
     const setStartDateMock = jest.fn();
     const setEndDateMock = jest.fn();
@@ -230,4 +232,44 @@ describe('Header Component', () => {
 
     expect(dropDownButton).toHaveTextContent('Custom');
   });
+
+  test('displays current month and number of days dynamically based on current date', async () => {
+    const setStartDateMock = jest.fn();
+    const setEndDateMock = jest.fn();
+    const setWorkspaceMock = jest.fn();
+
+    const endDate = moment().startOf('day').unix();
+    const startDate = moment().startOf('month').unix();
+
+    render(
+      <Header
+        startDate={startDate}
+        endDate={endDate}
+        setStartDate={setStartDateMock}
+        setEndDate={setEndDateMock}
+        workspace={''}
+        setWorkspace={setWorkspaceMock}
+      />
+    );
+
+    const dropDownButton = screen.getByTestId('DropDown');
+    fireEvent.click(dropDownButton);
+
+    const CurrentMonthOption = screen.getByText('Current Month');
+    fireEvent.click(CurrentMonthOption);
+
+    const expectedTextContent = 'Current Month';
+
+    await waitFor(() => expect(dropDownButton).toHaveTextContent(expectedTextContent));
+
+    const leftWrapperElement = screen.getByTestId('leftWrapper');
+    const monthElement = within(leftWrapperElement).getByTestId('month');
+
+    expect(monthElement).toBeInTheDocument();
+
+    const expectedDateRange = `${moment.unix(startDate).format('DD MMM')} - ${moment
+      .unix(endDate)
+      .format('DD MMM YYYY')}`;
+    expect(monthElement).toHaveTextContent(expectedDateRange);
+  });
 });
diff --git a/src/pages/superadmin/header/index.tsx b/src/pages/superadmin/header/index.tsx
@@ -112,6 +112,9 @@ export const Header = ({
         case 90:
           text = 'Last 90 Days';
           break;
+        case moment().date():
+          text = `Current Month`;
+          break;
         default:
           break;
       }
@@ -240,6 +243,7 @@ export const Header = ({
                   <li onClick={() => handleDropDownChange(7)}>7 Days</li>
                   <li onClick={() => handleDropDownChange(30)}>30 Days</li>
                   <li onClick={() => handleDropDownChange(90)}>90 Days</li>
+                  <li onClick={() => handleDropDownChange(moment().date())}>Current Month</li>
                   <li>
                     <CustomButton onClick={() => handleDropDownChange('Custom')}>
                       Custom