[Uptime] handle unequal steps between check group changes for step de…

…tails page in Uptime (elastic#106289)

x-pack/plugins/uptime/public/components/synthetics/check_steps/use_expanded_row.test.tsx

@@ -6,26 +6,32 @@
  */
 
 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';
 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 (
       <Route path={SYNTHETIC_CHECK_STEPS_ROUTE}>
         Step list
-        {steps.map((journeyStep, index) => (
+        {defaultSteps.map((journeyStep, index) => (
           <EuiButtonIcon
             key={index}
             data-test-subj={TEST_ID + index}
@@ -115,6 +121,10 @@ describe('useExpandedROw', () => {
     expect(Object.keys(expandedRowsObj)).toStrictEqual([]);
   });
 
+  beforeEach(() => {
+    jest.spyOn(ReactRouterDom, 'useParams').mockReturnValue({ checkGroupId: checkGroup });
+  });
+
   it('it can expand both rows at same time', async () => {
     render(<Component />, {
       history,
@@ -138,13 +148,54 @@ 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`);
     });
 
     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']);
+  });
 });

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] = (
-          <ExecutedStep
-            step={step}
-            browserConsole={getBrowserConsole(expandedRowKey)}
-            index={step.synthetics?.step?.index!}
-            loading={loading}
-          />
-        );
+        if (step) {
+          expandedRowsN[expandedRowKey] = (
+            <ExecutedStep
+              step={step}
+              browserConsole={getBrowserConsole(expandedRowKey)}
+              index={step.synthetics?.step?.index!}
+              loading={loading}
+            />
+          );
+        }
       }
     }