diff --git a/frontend/__tests__/containers/MetricsStep/Crews.test.tsx b/frontend/__tests__/containers/MetricsStep/Crews.test.tsx index 38693e6601..9241b9c01d 100644 --- a/frontend/__tests__/containers/MetricsStep/Crews.test.tsx +++ b/frontend/__tests__/containers/MetricsStep/Crews.test.tsx @@ -1,5 +1,5 @@ import { act, render, screen, waitFor, within } from '@testing-library/react'; -import { updateAssigneeFilter } from '@src/context/Metrics/metricsSlice'; +import {savePipelineCrews, saveUsers, updateAssigneeFilter} from '@src/context/Metrics/metricsSlice'; import { Crews } from '@src/containers/MetricsStep/Crews'; import { setupStore } from '../../utils/setupStoreUtil'; import userEvent from '@testing-library/user-event'; @@ -11,11 +11,6 @@ const mockLabel = 'Included Crews'; const assigneeFilterLabels = ['Last assignee', 'Historical assignee']; const assigneeFilterValues = ['lastAssignee', 'historicalAssignee']; -jest.mock('@src/context/Metrics/metricsSlice', () => ({ - ...jest.requireActual('@src/context/Metrics/metricsSlice'), - selectMetricsContent: jest.fn().mockReturnValue({ users: ['crew A', 'crew B'], pipelineCrews: ['A', 'B'] }), -})); - const mockedUseAppDispatch = jest.fn(); jest.mock('@src/hooks/useAppDispatch', () => ({ useAppDispatch: () => mockedUseAppDispatch, @@ -47,17 +42,29 @@ describe('Crew', () => { }); it('should selected all options by default when initializing given type is board', () => { + store.dispatch(saveUsers(['crew A', 'crew B'])); setup(); expect(screen.getByRole('button', { name: 'crew A' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'crew B' })).toBeInTheDocument(); }); - it('should selected all options by default when initializing given type is other', () => { + + it('should show detail options when initializing given type is other and click Included crews button', async () => { + store.dispatch(savePipelineCrews(['crew B', 'crew C'])); setup('other'); - expect(screen.getByRole('button', { name: 'A' })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: 'B' })).toBeInTheDocument(); + await act(async () => { + await userEvent.click(screen.getByRole('combobox', { name: mockLabel })); + }); + const listBox = within(screen.getByRole('listbox')); + expect(listBox.getByRole('option', { name: 'All' })).toBeVisible(); + expect(listBox.getByRole('option', { name: 'crew A' })).toBeVisible(); + expect(listBox.getByRole('option', { name: 'crew B' })).toBeVisible(); + expect(() => { + listBox.getByRole('option', { name: 'crew C' }); + }).toThrow(); }); + it('should show detail options when click Included crews button', async () => { setup(); @@ -72,6 +79,7 @@ describe('Crew', () => { }); it('should show error message when crews is null', async () => { + store.dispatch(saveUsers(['crew A', 'crew B'])); setup(); await act(async () => { await userEvent.click(screen.getByRole('combobox', { name: mockLabel })); @@ -85,6 +93,7 @@ describe('Crew', () => { }); it('should show other selections when cancel one option given default all selections in crews', async () => { + store.dispatch(saveUsers(['crew A', 'crew B'])); setup(); await act(async () => { @@ -101,6 +110,7 @@ describe('Crew', () => { }); it('should clear crews data when check all option', async () => { + store.dispatch(saveUsers(['crew A', 'crew B'])); setup(); await act(async () => { diff --git a/frontend/src/containers/MetricsStep/Crews/index.tsx b/frontend/src/containers/MetricsStep/Crews/index.tsx index 9b686cebe6..10086a1d41 100644 --- a/frontend/src/containers/MetricsStep/Crews/index.tsx +++ b/frontend/src/containers/MetricsStep/Crews/index.tsx @@ -15,11 +15,17 @@ interface crewsProps { type?: string; } +function getValidSelectedCrews(configCrews: string[], realCrews: string[]): string[] { + return configCrews.filter((crew: string): boolean => realCrews.includes(crew)); +} + export const Crews = ({ options, title, label, type = 'board' }: crewsProps) => { const isBoardCrews = type === 'board'; const dispatch = useAppDispatch(); const { users, pipelineCrews } = useAppSelector(selectMetricsContent); - const [selectedCrews, setSelectedCrews] = useState(isBoardCrews ? users : pipelineCrews); + const [selectedCrews, setSelectedCrews] = useState( + isBoardCrews ? users : getValidSelectedCrews(pipelineCrews, options), + ); const isAllSelected = options.length > 0 && selectedCrews.length === options.length; const isEmptyCrewData = selectedCrews.length === 0;