[ADM-792] add test for cycle time by status

frontend/__tests__/src/components/HomeGuide/HomeGuide.test.tsx

@@ -88,7 +88,7 @@ describe('HomeGuide', () => {
     fireEvent.change(input)
 
     await waitFor(() => {
-      expect(mockedUseAppDispatch).toHaveBeenCalledTimes(3)
+      expect(mockedUseAppDispatch).toHaveBeenCalledTimes(4)
       expect(navigateMock).toHaveBeenCalledWith(METRICS_PAGE_ROUTE)
     })
   })

frontend/__tests__/src/components/Metrics/MetricsStep/CycleTime.test.tsx

@@ -1,32 +1,57 @@
-import { act, render, waitFor, within } from '@testing-library/react'
+import { act, render, waitFor, within, screen } from '@testing-library/react'
 import { CycleTime } from '@src/components/Metrics/MetricsStep/CycleTime'
 import userEvent from '@testing-library/user-event'
 import { Provider } from 'react-redux'
 import { setupStore } from '../../../utils/setupStoreUtil'
 import { CYCLE_TIME_SETTINGS, ERROR_MESSAGE_TIME_DURATION, LIST_OPEN, NO_RESULT_DASH } from '../../../fixtures'
-import { saveDoneColumn, updateTreatFlagCardAsBlock } from '@src/context/Metrics/metricsSlice'
+import {
+  saveCycleTimeSettings,
+  saveDoneColumn,
+  selectMetricsContent,
+  setCycleTimeSettingsType,
+  updateTreatFlagCardAsBlock,
+} from '@src/context/Metrics/metricsSlice'
+import { CYCLE_TIME_SETTINGS_TYPES, METRICS_CONSTANTS } from '@src/constants/resources'
 
 const FlagAsBlock = 'Consider the "Flag" as "Block"'
+const cycleTimeSettings = [
+  {
+    column: 'Doing',
+    status: 'Analysis',
+    value: 'Analysis',
+  },
+  {
+    column: 'Doing',
+    status: 'In Dev',
+    value: 'Analysis',
+  },
+  {
+    column: 'Doing',
+    status: 'doing',
+    value: 'Analysis',
+  },
+  {
+    column: 'Testing',
+    status: 'Test',
+    value: 'Review',
+  },
+  {
+    column: 'TODO',
+    status: 'To do',
+    value: '----',
+  },
+  {
+    column: 'Done',
+    status: 'done',
+    value: 'Done',
+  },
+]
+const cycleTimeTypeLabels = ['By Column', 'By Status']
 
 let store = setupStore()
 jest.mock('@src/context/Metrics/metricsSlice', () => ({
   ...jest.requireActual('@src/context/Metrics/metricsSlice'),
-  selectMetricsContent: jest.fn().mockReturnValue({
-    cycleTimeSettings: [
-      {
-        name: 'Doing',
-        value: 'Analysis',
-      },
-      {
-        name: 'Testing',
-        value: 'Review',
-      },
-      {
-        name: 'TODO',
-        value: '----',
-      },
-    ],
-  }),
+  selectMetricsContent: jest.fn(),
   selectTreatFlagCardAsBlock: jest.fn().mockReturnValue(true),
   selectCycleTimeWarningMessage: jest.fn().mockReturnValue('Test warning Message'),
 }))
@@ -54,10 +79,15 @@ const setup = () =>
 describe('CycleTime', () => {
   beforeEach(() => {
     store = setupStore()
+    ;(selectMetricsContent as jest.Mock).mockReturnValue({
+      cycleTimeSettingsType: 'byColumn',
+      cycleTimeSettings,
+    })
   })
 
   afterEach(() => {
     jest.clearAllMocks()
+    jest.useRealTimers()
   })
 
   describe('CycleTime Title', () => {
@@ -103,11 +133,29 @@ describe('CycleTime', () => {
       const inputElements = getAllByRole('combobox')
       const selectedInputValues = inputElements.map((input) => input.getAttribute('value'))
 
-      const expectedInputValues = ['Analysis', 'Review', NO_RESULT_DASH]
+      const expectedInputValues = ['Analysis', 'Review', NO_RESULT_DASH, 'Done']
 
       expect(selectedInputValues).toEqual(expectedInputValues)
     })
 
+    it('should use default value when state value is null', () => {
+      ;(selectMetricsContent as jest.Mock).mockReturnValue({
+        cycleTimeSettingsType: 'byColumn',
+        cycleTimeSettings: [
+          {
+            column: 'Doing',
+            status: 'Analysis',
+            value: null,
+          },
+        ],
+      })
+      setup()
+
+      const inputElements = screen.getAllByRole('combobox')
+      const selectedInputValues = inputElements.map((input) => input.getAttribute('value'))
+      expect(selectedInputValues).toEqual([NO_RESULT_DASH])
+    })
+
     it('should show detail options when click included button', async () => {
       const { getAllByRole, getByRole } = setup()
       const columnsArray = getAllByRole('button', { name: LIST_OPEN })
@@ -286,4 +334,95 @@ describe('CycleTime', () => {
       expect(queryByText('Test warning Message')).not.toBeInTheDocument()
     })
   })
+
+  it('should update cycle time type and clear table value when select status type', async () => {
+    setup()
+    await userEvent.click(screen.getByRole('radio', { name: cycleTimeTypeLabels[1] }))
+
+    expect(mockedUseAppDispatch).toHaveBeenCalledTimes(3)
+    expect(mockedUseAppDispatch).toHaveBeenCalledWith(setCycleTimeSettingsType(CYCLE_TIME_SETTINGS_TYPES.BY_STATUS))
+    expect(mockedUseAppDispatch).toHaveBeenCalledWith(
+      saveCycleTimeSettings(
+        cycleTimeSettings.map((item) => ({
+          ...item,
+          value: METRICS_CONSTANTS.cycleTimeEmptyStr,
+        }))
+      )
+    )
+    expect(mockedUseAppDispatch).toHaveBeenCalledWith(saveDoneColumn([]))
+  })
+
+  describe('cycle time by status', () => {
+    beforeEach(() => {
+      ;(selectMetricsContent as jest.Mock).mockReturnValue({
+        cycleTimeSettingsType: 'byStatus',
+        cycleTimeSettings,
+      })
+    })
+
+    it('should show status mapping table when cycle time settings type by status', async () => {
+      setup()
+
+      expect(screen.getByText('Analysis (Doing)')).toBeInTheDocument()
+      expect(screen.getByText('In Dev (Doing)')).toBeInTheDocument()
+      expect(screen.getByText('doing (Doing)')).toBeInTheDocument()
+      expect(screen.getByText('Test (Testing)')).toBeInTheDocument()
+      expect(screen.getByText('To do (TODO)')).toBeInTheDocument()
+    })
+
+    it('should show selected option when click the dropDown button ', async () => {
+      setup()
+      const columnsArray = screen.getAllByRole('button', { name: LIST_OPEN })
+      await userEvent.click(columnsArray[2])
+
+      const listBox = within(screen.getByRole('listbox'))
+      const options = listBox.getAllByRole('option')
+      const selectedOption = options.find((option) => option.getAttribute('aria-selected') === 'true')
+      const selectedOptionText = selectedOption?.textContent
+      expect(selectedOptionText).toBe('Analysis')
+    })
+
+    it('should show other selections when change option and will not affect Real done', async () => {
+      setup()
+      const columnsArray = screen.getAllByRole('button', { name: LIST_OPEN })
+      await userEvent.click(columnsArray[2])
+      const listBox = within(screen.getByRole('listbox'))
+      const mockOptions = listBox.getAllByRole('option')
+      await userEvent.click(mockOptions[1])
+
+      const inputElements = screen.getAllByRole('combobox')
+      const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[2]
+      expect(selectedInputValue).toBe('To do')
+      expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]))
+    })
+
+    it('should not reset Real done when marked as done from other options', async () => {
+      setup()
+      const columnsArray = screen.getAllByRole('button', { name: LIST_OPEN })
+      await userEvent.click(columnsArray[0])
+      const listBox = within(screen.getByRole('listbox'))
+      await userEvent.click(listBox.getAllByRole('option')[8])
+
+      const inputElements = screen.getAllByRole('combobox')
+      const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[0]
+      expect(selectedInputValue).toBe('Done')
+      expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]))
+    })
+
+    it('should show the correct selected value when cancel the done', async () => {
+      setup()
+      const columnsArray = screen.getAllByRole('button', { name: LIST_OPEN })
+      await userEvent.click(columnsArray[0])
+      const listBox = within(screen.getByRole('listbox'))
+      await userEvent.click(listBox.getAllByRole('option')[8])
+      await userEvent.click(columnsArray[0])
+      const newListBox = within(screen.getByRole('listbox'))
+      await userEvent.click(newListBox.getAllByRole('option')[7])
+
+      const inputElements = screen.getAllByRole('combobox')
+      const selectedInputValue = inputElements.map((option) => option.getAttribute('value'))[0]
+      expect(selectedInputValue).toBe('Review')
+      expect(mockedUseAppDispatch).not.toHaveBeenCalledWith(saveDoneColumn([]))
+    })
+  })
 })

frontend/__tests__/src/components/Metrics/MetricsStep/MetricsStep.test.tsx

@@ -39,17 +39,31 @@ describe('MetricsStep', () => {
 
   it('should render Crews when select velocity, and show Real done when have done column in Cycle time', async () => {
     store.dispatch(updateMetrics([REQUIRED_DATA_LIST[1]]))
+    store.dispatch(
+      saveCycleTimeSettings([
+        { column: 'Testing', status: 'testing', value: 'Done' },
+        { column: 'Testing', status: 'test', value: 'Done' },
+      ])
+    )
+
     const { getByText, queryByText } = setup()
 
     expect(getByText(CREWS_SETTING)).toBeInTheDocument()
     expect(queryByText(CYCLE_TIME_SETTINGS)).not.toBeInTheDocument()
     expect(queryByText(CLASSIFICATION_SETTING)).not.toBeInTheDocument()
+    expect(getByText(REAL_DONE)).toBeInTheDocument()
+  })
 
-    act(() => {
-      store.dispatch(saveCycleTimeSettings([{ name: 'Testing', value: 'Done' }]))
-    })
+  it('should not show Real done when only one value is done for cycle time', async () => {
+    store.dispatch(updateMetrics([REQUIRED_DATA_LIST[1]]))
+    store.dispatch(saveCycleTimeSettings([{ column: 'Testing', status: 'testing', value: 'Done' }]))
 
-    expect(getByText(REAL_DONE)).toBeInTheDocument()
+    const { getByText, queryByText } = setup()
+
+    expect(getByText(CREWS_SETTING)).toBeInTheDocument()
+    expect(queryByText(CYCLE_TIME_SETTINGS)).not.toBeInTheDocument()
+    expect(queryByText(CLASSIFICATION_SETTING)).not.toBeInTheDocument()
+    expect(queryByText(REAL_DONE)).not.toBeInTheDocument()
   })
 
   it('should show Cycle Time Settings when select cycle time in config page', async () => {
@@ -60,7 +74,7 @@ describe('MetricsStep', () => {
   })
 
   it('should hide Real Done when no done column in cycleTime settings', async () => {
-    await store.dispatch(saveCycleTimeSettings([{ name: 'Testing', value: 'Block' }]))
+    await store.dispatch(saveCycleTimeSettings([{ column: 'Testing', status: 'testing', value: 'Block' }]))
     const { queryByText } = setup()
 
     expect(queryByText(REAL_DONE)).not.toBeInTheDocument()
@@ -100,33 +114,68 @@ describe('MetricsStep', () => {
     beforeEach(() => {
       const cycleTimeSettingsWithTwoDoneValue = [
         {
-          name: 'To Do',
+          column: 'To Do',
+          status: 'BACKLOG',
+          value: 'To Do',
+        },
+        {
+          column: 'To Do',
+          status: 'TO DO',
+          value: 'To Do',
+        },
+        {
+          column: 'To Do',
+          status: 'GOING TO DO',
           value: 'To Do',
         },
         {
-          name: 'In Progress',
+          column: 'In Progress',
+          status: 'IN PROGRESS',
           value: 'Done',
         },
         {
-          name: 'Block',
+          column: 'In Progress',
+          status: 'IN DEV',
+          value: 'Done',
+        },
+        {
+          column: 'Block',
+          status: 'BLOCK',
           value: 'Block',
         },
         {
-          name: 'Test',
+          column: 'Test',
+          status: 'TESTING',
+          value: 'To do',
+        },
+        {
+          column: 'Test',
+          status: 'TO BE TESTED',
           value: 'To do',
         },
         {
-          name: 'Done',
+          column: 'Done',
+          status: 'PRE-DONE,',
+          value: 'Done',
+        },
+        {
+          column: 'Done',
+          status: 'DONE',
+          value: 'Done',
+        },
+        {
+          column: 'Done',
+          status: 'CANCEL',
           value: 'Done',
         },
       ]
-      const doneColumn = ['IN PROGRESS', 'IN DEV', 'PRE-DONE', 'DONE', 'CANCLE']
+      const doneColumn = ['IN PROGRESS', 'IN DEV', 'PRE-DONE', 'DONE', 'CANCEL']
       const jiraColumns = [
         { key: 'indeterminate', value: { name: 'To Do', statuses: ['BACKLOG', 'TO DO', 'GOING TO DO'] } },
         { key: 'indeterminate', value: { name: 'In Progress', statuses: ['IN PROGRESS', 'IN DEV'] } },
         { key: 'indeterminate', value: { name: 'Block', statuses: ['BLOCK'] } },
         { key: 'indeterminate', value: { name: 'Test', statuses: ['TESTING', 'TO BE TESTED'] } },
-        { key: 'done', value: { name: 'Done', statuses: ['PRE-DONE,', 'DONE', 'CANCLE'] } },
+        { key: 'done', value: { name: 'Done', statuses: ['PRE-DONE,', 'DONE', 'CANCEL'] } },
       ]
 
       store.dispatch(updateMetrics(REQUIRED_DATA_LIST))

frontend/__tests__/src/components/Metrics/MetricsStep/RealDone.test.tsx

@@ -109,7 +109,12 @@ describe('RealDone', () => {
     })
 
     it('should show doing when choose Testing column is Done', async () => {
-      await store.dispatch(saveCycleTimeSettings([{ name: 'Done', value: 'Done' }]))
+      await store.dispatch(
+        saveCycleTimeSettings([
+          { column: 'Done', status: 'DONE', value: 'Done' },
+          { column: 'Done', status: 'CANCELLED', value: 'Done' },
+        ])
+      )
       const { getByRole } = setup()
 
       await act(async () => {
@@ -144,27 +149,4 @@ describe('RealDone', () => {
       })
     })
   })
-
-  describe('when done column with only one status', () => {
-    it('should not show read done box', async () => {
-      const mockColumnsList = [
-        {
-          key: 'done',
-          value: {
-            name: 'Done',
-            statuses: ['DONE'],
-          },
-        },
-      ]
-
-      const { queryByText } = render(
-        <Provider store={store}>
-          <RealDone columns={mockColumnsList} label={mockLabel} title={mockTitle} />
-        </Provider>
-      )
-
-      expect(queryByText(mockTitle)).not.toBeInTheDocument()
-      expect(queryByText(mockLabel)).not.toBeInTheDocument()
-    })
-  })
 })

frontend/__tests__/src/components/Metrics/MetricsStepper/MetricsStepper.test.tsx

@@ -88,6 +88,7 @@ jest.mock('@src/utils/util', () => ({
   transformToCleanedBuildKiteEmoji: jest.fn(),
   findCaseInsensitiveType: jest.fn(),
   filterAndMapCycleTimeSettings: jest.fn(),
+  getRealDoneStatus: jest.fn(),
 }))
 
 jest.mock('@src/hooks/useGenerateReportEffect', () => ({