added jest test for agent enrollment flyout steps behaviour

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/agent_enrollment_flyout.test.mocks.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+jest.mock('../../../../../../hooks/use_request', () => {
+  const module = jest.requireActual('../../../../../../hooks/use_request');
+  return {
+    ...module,
+    useGetSettings: jest.fn(),
+    sendGetFleetStatus: jest.fn(),
+  };
+});
+
+jest.mock('../../agent_requirements_page', () => {
+  const module = jest.requireActual('../../agent_requirements_page');
+  return {
+    ...module,
+    FleetServerRequirementPage: jest.fn(),
+    useFleetServerInstructions: jest.fn(),
+  };
+});
+
+/**
+ * These steps functions use hooks inside useMemo which is not compatible with jest currently
+ */
+jest.mock('./steps', () => {
+  const module = jest.requireActual('./steps');
+  return {
+    ...module,
+    AgentPolicySelectionStep: jest.fn(),
+    AgentEnrollmentKeySelectionStep: jest.fn(),
+  };
+});
+
+jest.mock('@elastic/eui', () => {
+  const module = jest.requireActual('@elastic/eui');
+  return {
+    ...module,
+    EuiSteps: 'eui-steps',
+  };
+});

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx

@@ -0,0 +1,164 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import './agent_enrollment_flyout.test.mocks';
+
+import React from 'react';
+import { registerTestBed } from '@kbn/test/jest';
+import { act } from '@testing-library/react';
+
+import { coreMock } from 'src/core/public/mocks';
+
+import { KibanaContextProvider } from '../../../../../../../../../../src/plugins/kibana_react/public';
+
+import type { AgentPolicy } from '../../../../../../../common';
+import { useGetSettings, sendGetFleetStatus } from '../../../../../../hooks/use_request';
+import { FleetStatusProvider, ConfigContext } from '../../../../../../hooks';
+
+import { useFleetServerInstructions } from '../../agent_requirements_page';
+
+import { AgentEnrollmentKeySelectionStep, AgentPolicySelectionStep } from './steps';
+
+import type { Props } from '.';
+import { AgentEnrollmentFlyout } from '.';
+
+const TestComponent = (props: Props) => (
+  <KibanaContextProvider services={coreMock.createStart()}>
+    <ConfigContext.Provider value={{ agents: { enabled: true, elasticsearch: {} }, enabled: true }}>
+      <FleetStatusProvider>
+        <AgentEnrollmentFlyout {...props} />
+      </FleetStatusProvider>
+    </ConfigContext.Provider>
+  </KibanaContextProvider>
+);
+
+const setup = async (props?: Props) => {
+  const testBed = await registerTestBed(TestComponent)(props);
+  const { find, component } = testBed;
+
+  return {
+    ...testBed,
+    actions: {
+      goToStandaloneTab: () =>
+        act(() => {
+          find('agentEnrollmentFlyout.standaloneTab').simulate('click');
+          component.update();
+        }),
+    },
+  };
+};
+
+type SetupReturn = ReturnType<typeof setup>;
+type TestBed = SetupReturn extends Promise<infer U> ? U : SetupReturn;
+
+const testAgentPolicy: AgentPolicy = {
+  id: 'test',
+  is_managed: false,
+  namespace: 'test',
+  package_policies: [],
+  revision: 1,
+  status: 'active',
+  updated_at: 'test',
+  updated_by: 'test',
+  name: 'test',
+};
+
+describe('<AgentEnrollmentFlyout />', () => {
+  let testBed: TestBed;
+
+  beforeEach(async () => {
+    (useGetSettings as jest.Mock).mockReturnValue({
+      data: { item: { fleet_server_hosts: ['test'] } },
+    });
+
+    (sendGetFleetStatus as jest.Mock).mockResolvedValue({
+      data: { isReady: true },
+    });
+
+    (useFleetServerInstructions as jest.Mock).mockReturnValue({
+      serviceToken: 'test',
+      getServiceToken: jest.fn(),
+      isLoadingServiceToken: false,
+      installCommand: jest.fn(),
+      platform: 'test',
+      setPlatform: jest.fn(),
+    });
+
+    await act(async () => {
+      testBed = await setup({
+        agentPolicies: [],
+        onClose: jest.fn(),
+      });
+      testBed.component.update();
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('managed instructions', () => {
+    it('uses the agent policy selection step', async () => {
+      const { exists } = testBed;
+      expect(exists('agentEnrollmentFlyout')).toBe(true);
+      expect(AgentPolicySelectionStep).toHaveBeenCalled();
+      expect(AgentEnrollmentKeySelectionStep).not.toHaveBeenCalled();
+    });
+
+    describe('with a specific policy', () => {
+      beforeEach(async () => {
+        jest.clearAllMocks();
+        await act(async () => {
+          testBed = await setup({
+            agentPolicy: testAgentPolicy,
+            onClose: jest.fn(),
+          });
+          testBed.component.update();
+        });
+      });
+
+      it('uses the configure enrollment step, not the agent policy selection step', () => {
+        const { exists } = testBed;
+        expect(exists('agentEnrollmentFlyout')).toBe(true);
+        expect(AgentPolicySelectionStep).not.toHaveBeenCalled();
+        expect(AgentEnrollmentKeySelectionStep).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('standalone instructions', () => {
+    it('uses the agent policy selection step', async () => {
+      const { exists, actions } = testBed;
+      actions.goToStandaloneTab();
+      expect(exists('agentEnrollmentFlyout')).toBe(true);
+      expect(AgentPolicySelectionStep).toHaveBeenCalled();
+      expect(AgentEnrollmentKeySelectionStep).not.toHaveBeenCalled();
+    });
+
+    describe('with a specific policy', () => {
+      beforeEach(async () => {
+        jest.clearAllMocks();
+        await act(async () => {
+          testBed = await setup({
+            agentPolicy: testAgentPolicy,
+            onClose: jest.fn(),
+          });
+          testBed.component.update();
+        });
+      });
+
+      it('does not use either of the agent policy selection or enrollment key steps', () => {
+        const { exists, actions } = testBed;
+        jest.clearAllMocks();
+        expect(exists('agentEnrollmentFlyout')).toBe(true);
+        actions.goToStandaloneTab();
+        expect(AgentPolicySelectionStep).not.toHaveBeenCalled();
+        expect(AgentEnrollmentKeySelectionStep).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_enrollment_flyout/index.tsx

@@ -29,7 +29,7 @@ import { StandaloneInstructions } from './standalone_instructions';
 import { MissingFleetServerHostCallout } from './missing_fleet_server_host_callout';
 import type { BaseProps } from './types';
 
-interface Props extends BaseProps {
+export interface Props extends BaseProps {
   onClose: () => void;
 }
 
@@ -54,7 +54,7 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
   }, [modal, lastModal, settings]);
 
   return (
-    <EuiFlyout onClose={onClose} size="m">
+    <EuiFlyout data-test-subj="agentEnrollmentFlyout" onClose={onClose} size="m">
       <EuiFlyoutHeader hasBorder aria-labelledby="FleetAgentEnrollmentFlyoutTitle">
         <EuiTitle size="m">
           <h2 id="FleetAgentEnrollmentFlyoutTitle">
@@ -73,13 +73,21 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
         </EuiText>
         <EuiSpacer size="l" />
         <EuiTabs style={{ marginBottom: '-25px' }}>
-          <EuiTab isSelected={mode === 'managed'} onClick={() => setMode('managed')}>
+          <EuiTab
+            data-test-subj="managedTab"
+            isSelected={mode === 'managed'}
+            onClick={() => setMode('managed')}
+          >
             <FormattedMessage
               id="xpack.fleet.agentEnrollment.enrollFleetTabLabel"
               defaultMessage="Enroll in Fleet"
             />
           </EuiTab>
-          <EuiTab isSelected={mode === 'standalone'} onClick={() => setMode('standalone')}>
+          <EuiTab
+            data-test-subj="standaloneTab"
+            isSelected={mode === 'standalone'}
+            onClick={() => setMode('standalone')}
+          >
             <FormattedMessage
               id="xpack.fleet.agentEnrollment.enrollStandaloneTabLabel"
               defaultMessage="Run standalone"