diff --git a/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.test.tsx b/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.test.tsx index a195001903f6cc..09e3d7044116ef 100644 --- a/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.test.tsx +++ b/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.test.tsx @@ -6,11 +6,11 @@ */ import React from 'react'; -import { Route } from 'react-router-dom'; +import ReactRouterDom, { Route } from 'react-router-dom'; import { fireEvent, screen } from '@testing-library/dom'; -import { EuiButtonIcon } from '@elastic/eui'; +import { renderHook, act as hooksAct } from '@testing-library/react-hooks'; import { createMemoryHistory } from 'history'; - +import { EuiButtonIcon } from '@elastic/eui'; import { useExpandedRow } from './use_expanded_row'; import { render } from '../../../lib/helper/rtl_helpers'; import { JourneyStep } from '../../../../common/runtime_types'; @@ -18,14 +18,20 @@ import { SYNTHETIC_CHECK_STEPS_ROUTE } from '../../../../common/constants'; import { COLLAPSE_LABEL, EXPAND_LABEL } from '../translations'; import { act } from 'react-dom/test-utils'; +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useParams: jest.fn(), +})); + describe('useExpandedROw', () => { let expandedRowsObj = {}; + const checkGroup = 'fake-group'; const TEST_ID = 'uptimeStepListExpandBtn'; const history = createMemoryHistory({ - initialEntries: ['/journey/fake-group/steps'], + initialEntries: [`/journey/${checkGroup}/steps`], }); - const steps: JourneyStep[] = [ + const defaultSteps: JourneyStep[] = [ { _id: '1', '@timestamp': '123', @@ -74,8 +80,8 @@ describe('useExpandedROw', () => { const Component = () => { const { expandedRows, toggleExpand } = useExpandedRow({ - steps, - allSteps: steps, + steps: defaultSteps, + allSteps: defaultSteps, loading: false, }); @@ -84,7 +90,7 @@ describe('useExpandedROw', () => { return ( Step list - {steps.map((journeyStep, index) => ( + {defaultSteps.map((journeyStep, index) => ( { expect(Object.keys(expandedRowsObj)).toStrictEqual([]); }); + beforeEach(() => { + jest.spyOn(ReactRouterDom, 'useParams').mockReturnValue({ checkGroupId: checkGroup }); + }); + it('it can expand both rows at same time', async () => { render(, { history, @@ -138,8 +148,8 @@ describe('useExpandedROw', () => { const newFakeGroup = 'new-fake-group-1'; - steps[0].monitor.check_group = newFakeGroup; - steps[1].monitor.check_group = newFakeGroup; + defaultSteps[0].monitor.check_group = newFakeGroup; + defaultSteps[1].monitor.check_group = newFakeGroup; act(() => { history.push(`/journey/${newFakeGroup}/steps`); @@ -147,4 +157,45 @@ describe('useExpandedROw', () => { expect(JSON.stringify(expandedRowsObj)).toContain(newFakeGroup); }); + + it('handles unequal amount of steps when navigating to new check group', async () => { + const { result, rerender } = renderHook( + ({ + steps, + allSteps, + loading, + }: { + steps: JourneyStep[]; + allSteps: JourneyStep[]; + loading: boolean; + }) => + useExpandedRow({ + steps, + allSteps, + loading, + }), + { initialProps: { steps: defaultSteps, allSteps: defaultSteps, loading: false } } + ); + + // check group, with two steps + // let's expand both rows + hooksAct(() => { + result.current.toggleExpand({ journeyStep: defaultSteps[0] }); + }); + hooksAct(() => { + result.current.toggleExpand({ journeyStep: defaultSteps[1] }); + }); + + // expect two open rows + expect(Object.keys(result.current.expandedRows)).toEqual(['0', '1']); + + // change checkGroupId to ensure that useEffect runs + jest.spyOn(ReactRouterDom, 'useParams').mockReturnValue({ checkGroupId: 'new-fake-group' }); + + // rerender with new check group, with one step + rerender({ steps: [defaultSteps[0]], allSteps: [defaultSteps[0]], loading: false }); + + // expect only one accordion to be expanded + expect(Object.keys(result.current.expandedRows)).toEqual(['0']); + }); }); diff --git a/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.tsx b/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.tsx index 24ef0d7fb7e8fc..4b50a94f602b7f 100644 --- a/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.tsx +++ b/x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.tsx @@ -40,17 +40,18 @@ export const useExpandedRow = ({ loading, steps, allSteps }: HookProps) => { for (const expandedRowKeyStr in expandedRows) { if (expandedRows.hasOwnProperty(expandedRowKeyStr)) { const expandedRowKey = Number(expandedRowKeyStr); + const step = steps.find((stepF) => stepF.synthetics?.step?.index !== expandedRowKey); - const step = steps.find((stepF) => stepF.synthetics?.step?.index !== expandedRowKey)!; - - expandedRowsN[expandedRowKey] = ( - - ); + if (step) { + expandedRowsN[expandedRowKey] = ( + + ); + } } }