ADM-997 [frontend]: add new label for new functions (#1577)

* ADM-997 [frontend]: add new label for new functions * ADM-997 [frontend]: responsive for mobile * ADM-997 [frontend]: fix comments * ADM-997 [frontend]: responsive for mobile
au-heartbeat · Aug 16, 2024 · e4010f4 · e4010f4
1 parent 44c68e5
commit e4010f4
Show file tree

Hide file tree

Showing 22 changed files with 395 additions and 80 deletions.
diff --git a/frontend/__tests__/components/Common/NewFunctionsLabel.test.tsx b/frontend/__tests__/components/Common/NewFunctionsLabel.test.tsx
@@ -0,0 +1,57 @@
+import NewFunctionsLabel from '@src/components/Common/NewFunctionsLabel';
+import { saveVersion } from '@src/context/meta/metaSlice';
+import { setupStore } from '@test/utils/setupStoreUtil';
+import { render, screen } from '@testing-library/react';
+import { NewLabelType } from '@src/constants/commons';
+import { Provider } from 'react-redux';
+
+const store = setupStore();
+
+describe('NewFunctionsLabel', () => {
+  const setup = (version: string, initVersion: string, newLabelType: NewLabelType = NewLabelType.General) => {
+    store.dispatch(saveVersion(version));
+    return render(
+      <Provider store={store}>
+        <NewFunctionsLabel initVersion={initVersion} newLabelType={newLabelType}>
+          test
+        </NewFunctionsLabel>
+      </Provider>,
+    );
+  };
+
+  it('should show new label when version from store is less than version that functions create', () => {
+    setup('1.2.1', '1.3.0');
+
+    expect(screen.queryByLabelText('new label')).toBeInTheDocument();
+  });
+
+  it('should show new label when version from store is equal to version that functions create', () => {
+    setup('1.3.0', '1.3.0');
+
+    expect(screen.queryByLabelText('new label')).toBeInTheDocument();
+  });
+
+  it('should not show new label when version from store is more than version that functions create', () => {
+    setup('1.3.1', '1.3.0');
+
+    expect(screen.queryByLabelText('new label')).not.toBeInTheDocument();
+  });
+
+  it('should not show new label when init version exist alpha', () => {
+    setup('1.3.0', '1.3.0-alpha');
+
+    expect(screen.queryByLabelText('new label')).not.toBeInTheDocument();
+  });
+
+  it('should not show new label when init version exist pre-release', () => {
+    setup('1.3.0', '1.3.0-0.3.1');
+
+    expect(screen.queryByLabelText('new label')).not.toBeInTheDocument();
+  });
+
+  it('should show customize new label when version from store is equal to version that functions create and type is CustomizeMarginAndHeight', () => {
+    setup('1.3.0', '1.3.0', NewLabelType.CustomizeMarginAndHeight);
+
+    expect(screen.queryByLabelText('new label')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/__tests__/containers/MetricsStep/Classification.test.tsx b/frontend/__tests__/containers/MetricsStep/Classification.test.tsx
@@ -3,6 +3,7 @@ import { act, render, waitFor, within, screen } from '@testing-library/react';
 import { Classification } from '@src/containers/MetricsStep/Classification';
 import { saveTargetFields } from '@src/context/Metrics/metricsSlice';
 import { ERROR_MESSAGE_TIME_DURATION } from '../../fixtures';
+import { saveVersion } from '@src/context/meta/metaSlice';
 import { setupStore } from '../../utils/setupStoreUtil';
 import userEvent from '@testing-library/user-event';
 import { Provider, useSelector } from 'react-redux';
@@ -35,9 +36,10 @@ const RenderComponent = () => {
   return <Classification title={mockTitle} label={mockClassificationLabel} targetFields={targetFields} />;
 };
 
-const setup = async (initField: ITargetFieldType[]) => {
+const setup = async (initField: ITargetFieldType[], version: string = '1.2.1') => {
   const store = setupStore();
   store.dispatch(saveTargetFields(initField));
+  store.dispatch(saveVersion(version));
   return render(
     <Provider store={store}>
       <RenderComponent />
@@ -67,18 +69,26 @@ describe('Classification', () => {
         { flag: false, key: 'custom_field10061', name: 'Story testing' },
       ]);
 
-      expect(screen.getByRole('combobox', { name: mockClassificationChartLabel })).toBeDisabled();
+      expect(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      ).toBeDisabled();
+      expect(screen.getByLabelText('new label')).toBeInTheDocument();
     });
 
     it('should enable classification charts when classification is selected', async () => {
       await setup(mockTargetFields);
 
-      expect(screen.getByRole('combobox', { name: mockClassificationChartLabel })).not.toBeDisabled();
+      expect(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      ).not.toBeDisabled();
+      expect(screen.getByLabelText('new label')).toBeInTheDocument();
     });
 
     it('should show selected classification options when classification is selected', async () => {
       await setup(mockTargetFields);
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
 
       await waitFor(() => {
         const listBox = within(screen.getByRole('listbox'));
@@ -90,13 +100,17 @@ describe('Classification', () => {
 
     it('should show selected classification options when select a new classification', async () => {
       await setup(mockTargetFields);
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
 
       expect(screen.queryAllByRole('option')).toHaveLength(3);
 
       await userEvent.click(screen.getByRole('combobox', { name: mockClassificationLabel }));
       await userEvent.click(screen.getByRole('option', { name: /Type/i }));
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
 
       await waitFor(() => {
         expect(screen.queryAllByRole('option')).toHaveLength(4);
@@ -105,7 +119,9 @@ describe('Classification', () => {
 
     it('should remove selected classification charts when remove a classification', async () => {
       await setup(mockTargetFields);
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
       const listBox = within(screen.getByRole('listbox'));
       const chartFormItem = within(screen.getByLabelText('Classification Visible Charts'));
       await userEvent.click(listBox.getByLabelText(`${classificationChartOptionLabelPrefix} Issue`));
@@ -126,7 +142,9 @@ describe('Classification', () => {
 
     it('should select classification charts correctly', async () => {
       await setup(mockTargetFields);
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
       const listBox = within(screen.getByRole('listbox'));
       const chartFormItem = within(screen.getByLabelText('Classification Visible Charts'));
       await userEvent.click(listBox.getByLabelText(`${classificationChartOptionLabelPrefix} Issue`));
@@ -144,7 +162,9 @@ describe('Classification', () => {
 
     it('should select all classification charts correctly', async () => {
       await setup(mockTargetFields);
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
       const listBox = within(screen.getByRole('listbox'));
       const chartFormItem = within(screen.getByLabelText('Classification Visible Charts'));
       await userEvent.click(listBox.getByLabelText(`${classificationChartOptionLabelPrefix} All`));
@@ -165,7 +185,9 @@ describe('Classification', () => {
     it('should enable and display all option given selected classification is less than 4', async () => {
       await setup(mockTargetFields);
 
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
       const listBox = within(screen.getByRole('listbox'));
 
       await waitFor(() => {
@@ -185,7 +207,9 @@ describe('Classification', () => {
         { flag: true, key: 'more_than_four', name: 'Test' },
       ]);
 
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
       const listBox = within(screen.getByRole('listbox'));
 
       await waitFor(() => {
@@ -203,7 +227,9 @@ describe('Classification', () => {
       ];
       await setup(mockStatus);
 
-      await userEvent.click(screen.getByRole('combobox', { name: mockClassificationChartLabel }));
+      await userEvent.click(
+        screen.getByRole('combobox', { name: (content) => content.includes(mockClassificationChartLabel) }),
+      );
       const listBox = within(screen.getByRole('listbox'));
       await userEvent.click(listBox.getByLabelText(`${classificationChartOptionLabelPrefix} ${mockStatus[0].name}`));
       await userEvent.click(listBox.getByLabelText(`${classificationChartOptionLabelPrefix} ${mockStatus[1].name}`));
@@ -217,6 +243,34 @@ describe('Classification', () => {
         );
       });
     });
+
+    it('should not show new label when version is more than 1.3.0', async () => {
+      await setup(
+        [
+          { flag: false, key: 'issue', name: 'Issue' },
+          { flag: false, key: 'type', name: 'Type' },
+          { flag: false, key: 'custom_field10060', name: 'Story testing' },
+          { flag: false, key: 'custom_field10061', name: 'Story testing' },
+        ],
+        '1.3.1',
+      );
+
+      expect(screen.queryByLabelText('new label')).not.toBeInTheDocument();
+    });
+
+    it('should show new label when version is equal to 1.3.0', async () => {
+      await setup(
+        [
+          { flag: false, key: 'issue', name: 'Issue' },
+          { flag: false, key: 'type', name: 'Type' },
+          { flag: false, key: 'custom_field10060', name: 'Story testing' },
+          { flag: false, key: 'custom_field10061', name: 'Story testing' },
+        ],
+        '1.3.0',
+      );
+
+      expect(screen.queryByLabelText('new label')).toBeInTheDocument();
+    });
   });
 
   describe('Classification Distinguished by', () => {

diff --git a/frontend/__tests__/containers/MetricsStep/CycleTime.test.tsx b/frontend/__tests__/containers/MetricsStep/CycleTime.test.tsx
@@ -60,7 +60,9 @@ const mockedUseAppDispatch = jest.fn();
 jest.mock('@src/hooks/useAppDispatch', () => ({
   useAppDispatch: () => mockedUseAppDispatch,
 }));
-
+jest.mock('semver', () => ({
+  gt: jest.fn((version, initVersion) => version > initVersion),
+}));
 const setup = () =>
   render(
     <Provider store={store}>

diff --git a/frontend/__tests__/containers/MetricsStep/MetricsStep.test.tsx b/frontend/__tests__/containers/MetricsStep/MetricsStep.test.tsx
@@ -38,6 +38,9 @@ jest.mock('@src/context/notification/NotificationSlice', () => ({
   ...jest.requireActual('@src/context/notification/NotificationSlice'),
   closeAllNotifications: jest.fn().mockReturnValue({ type: 'CLOSE_ALL_NOTIFICATIONS' }),
 }));
+jest.mock('semver', () => ({
+  gt: jest.fn((version, initVersion) => version > initVersion),
+}));
 
 let store = setupStore();
 const server = setupServer(

diff --git a/frontend/__tests__/containers/ReportStep/ChartAndTitleWrapper.test.tsx b/frontend/__tests__/containers/ReportStep/ChartAndTitleWrapper.test.tsx
@@ -1,7 +1,10 @@
 import ChartAndTitleWrapper from '@src/containers/ReportStep/ChartAndTitleWrapper';
 import { ChartType, TrendIcon, TrendType } from '@src/constants/resources';
+import { saveVersion } from '@src/context/meta/metaSlice';
+import { setupStore } from '@test/utils/setupStoreUtil';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
 import { theme } from '@src/theme';
 
 describe('ChartAndTitleWrapper', () => {
@@ -14,7 +17,9 @@ describe('ChartAndTitleWrapper', () => {
     };
     render(<ChartAndTitleWrapper trendInfo={testedTrendInfo} isLoading={false} />);
     const icon = screen.getByTestId('TrendingUpSharpIcon');
+    const newLabel = screen.queryByLabelText('new label');
 
+    expect(newLabel).not.toBeInTheDocument();
     expect(icon).toBeInTheDocument();
     expect(icon.parentElement?.parentElement).toHaveStyle({ color: theme.main.chartTrend.betterColor });
   });
@@ -28,7 +33,9 @@ describe('ChartAndTitleWrapper', () => {
     };
     render(<ChartAndTitleWrapper trendInfo={testedTrendInfo} isLoading={false} />);
     const icon = screen.getByTestId('TrendingDownSharpIcon');
+    const newLabel = screen.queryByLabelText('new label');
 
+    expect(newLabel).not.toBeInTheDocument();
     expect(screen.getByTestId('TrendingDownSharpIcon')).toBeInTheDocument();
     expect(icon.parentElement?.parentElement).toHaveStyle({ color: theme.main.chartTrend.worseColor });
   });
@@ -42,34 +49,89 @@ describe('ChartAndTitleWrapper', () => {
     };
     render(<ChartAndTitleWrapper trendInfo={testedTrendInfo} isLoading={false} />);
 
+    const newLabel = screen.queryByLabelText('new label');
+
     expect(screen.getByLabelText('trend number')).toHaveTextContent('83.72%');
+    expect(newLabel).not.toBeInTheDocument();
   });
 
-  it('should show the switch button group when chart type is classification', async () => {
+  it('should show the switch button group and show new label when chart type is classification and version is less than 1.3.0', async () => {
+    const store = setupStore();
+    store.dispatch(saveVersion('1.2.1'));
     const testedTrendInfo = {
       type: ChartType.Classification,
     };
     const clickSwitchClassificationModel = jest.fn();
     render(
-      <ChartAndTitleWrapper
-        trendInfo={testedTrendInfo}
-        clickSwitchClassificationModel={clickSwitchClassificationModel}
-        isLoading={false}
-        subTitle={'test'}
-      />,
+      <Provider store={store}>
+        <ChartAndTitleWrapper
+          trendInfo={testedTrendInfo}
+          clickSwitchClassificationModel={clickSwitchClassificationModel}
+          isLoading={false}
+          subTitle={'test'}
+        />
+      </Provider>,
     );
 
     expect(screen.getByLabelText('classification test switch model button group')).toBeInTheDocument();
 
     const cardCountSwitchButton = screen.getByLabelText('classification test switch card count model button');
     const storyPointsSwitchButton = screen.getByLabelText('classification test switch story points model button');
+    const newLabel = screen.getByLabelText('new label');
 
     expect(cardCountSwitchButton).toBeInTheDocument();
     expect(storyPointsSwitchButton).toBeInTheDocument();
+    expect(newLabel).toBeInTheDocument();
 
     await userEvent.click(cardCountSwitchButton);
     await userEvent.click(storyPointsSwitchButton);
 
     expect(clickSwitchClassificationModel).toHaveBeenCalledTimes(2);
   });
+
+  it('should show new label when version is equal to 1.3.0', () => {
+    const store = setupStore();
+    store.dispatch(saveVersion('1.3.0'));
+    const testedTrendInfo = {
+      type: ChartType.Classification,
+    };
+    const clickSwitchClassificationModel = jest.fn();
+    render(
+      <Provider store={store}>
+        <ChartAndTitleWrapper
+          trendInfo={testedTrendInfo}
+          clickSwitchClassificationModel={clickSwitchClassificationModel}
+          isLoading={false}
+          subTitle={'test'}
+        />
+      </Provider>,
+    );
+
+    const newLabel = screen.getByLabelText('new label');
+
+    expect(newLabel).toBeInTheDocument();
+  });
+
+  it('should not show new label when version is more than 1.3.0', () => {
+    const store = setupStore();
+    store.dispatch(saveVersion('2.3.0'));
+    const testedTrendInfo = {
+      type: ChartType.Classification,
+    };
+    const clickSwitchClassificationModel = jest.fn();
+    render(
+      <Provider store={store}>
+        <ChartAndTitleWrapper
+          trendInfo={testedTrendInfo}
+          clickSwitchClassificationModel={clickSwitchClassificationModel}
+          isLoading={false}
+          subTitle={'test'}
+        />
+      </Provider>,
+    );
+
+    const newLabel = screen.queryByLabelText('new label');
+
+    expect(newLabel).not.toBeInTheDocument();
+  });
 });