From 13923851377ba0eaeb52a13f83ab65fb99b86b06 Mon Sep 17 00:00:00 2001 From: Eyo Okon Eyo Date: Fri, 22 Nov 2024 18:23:33 +0100 Subject: [PATCH] correct usages of testing library for fleet --- .../epm/screens/detail/index.test.tsx | 6 +-- .../agent_enrollment_flyout.test.tsx | 45 +++++++++---------- .../root_privileges_callout.test.tsx | 3 +- ...ultiple_agent_policy_summary_line.test.tsx | 23 +++++----- .../package_policy_actions_menu.test.tsx | 25 ++++++----- 5 files changed, 46 insertions(+), 56 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx index 6c9be4796f205..400c5f3a5aa6d 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.test.tsx @@ -7,7 +7,7 @@ import React, { lazy, memo } from 'react'; import { Route } from '@kbn/shared-ux-router'; -import { act, cleanup } from '@testing-library/react'; +import { act } from '@testing-library/react'; import { INTEGRATIONS_ROUTING_PATHS, pagePathGetters } from '../../../../constants'; import type { @@ -65,10 +65,6 @@ describe('When on integration detail', () => { act(() => testRenderer.mountHistory.push(detailPageUrlPath)); }); - afterEach(() => { - cleanup(); - }); - describe('and the package is installed', () => { beforeEach(async () => { await render(); diff --git a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx index 19709c55665fc..13ecfc2282226 100644 --- a/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx +++ b/x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx @@ -8,7 +8,7 @@ import './agent_enrollment_flyout.test.mocks'; import React from 'react'; -import { act, cleanup, fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, waitFor } from '@testing-library/react'; import type { RenderResult } from '@testing-library/react'; import { createFleetTestRendererMock } from '../../mock'; @@ -23,11 +23,8 @@ import type { FlyOutProps } from './types'; import { AgentEnrollmentFlyout } from '.'; const render = (props?: Partial) => { - cleanup(); const renderer = createFleetTestRendererMock(); - const results = renderer.render(); - - return results; + return renderer.render(); }; const testAgentPolicy: AgentPolicy = { @@ -46,7 +43,7 @@ const testAgentPolicy: AgentPolicy = { describe('', () => { let results: RenderResult; - beforeEach(async () => { + beforeEach(() => { jest.mocked(useAuthz).mockReturnValue({ fleet: { readAgentPolicies: true, @@ -88,10 +85,6 @@ describe('', () => { agentPolicies: [{ id: 'fleet-server-policy' } as AgentPolicy], refreshAgentPolicies: jest.fn(), }); - - act(() => { - results = render(); - }); }); afterEach(() => { @@ -113,6 +106,8 @@ describe('', () => { describe('managed instructions', () => { it('uses the agent policy selection step', () => { + results = render(); + expect(results.queryByTestId('agentEnrollmentFlyout')).not.toBeNull(); expect(results.queryByTestId('agent-policy-selection-step')).not.toBeNull(); expect(results.queryByTestId('agent-enrollment-key-selection-step')).toBeNull(); @@ -154,24 +149,22 @@ describe('', () => { describe('standalone instructions', () => { function goToStandaloneTab() { - act(() => { - fireEvent.click(results.getByTestId('standaloneTab')); - }); + fireEvent.click(results.getByTestId('standaloneTab')); } - beforeEach(() => { + it('uses the agent policy selection step', async () => { results = render({ isIntegrationFlow: true, }); - }); - it('uses the agent policy selection step', async () => { goToStandaloneTab(); - expect(results.queryByTestId('agentEnrollmentFlyout')).not.toBeNull(); - expect(results.queryByTestId('agent-policy-selection-step')).not.toBeNull(); - expect(results.queryByTestId('agent-enrollment-key-selection-step')).toBeNull(); - expect(results.queryByTestId('configure-standalone-step')).not.toBeNull(); + await waitFor(() => { + expect(results.queryByTestId('agentEnrollmentFlyout')).not.toBeNull(); + expect(results.queryByTestId('agent-policy-selection-step')).not.toBeNull(); + expect(results.queryByTestId('agent-enrollment-key-selection-step')).toBeNull(); + expect(results.queryByTestId('configure-standalone-step')).not.toBeNull(); + }); }); describe('with a specific policy', () => { @@ -185,13 +178,15 @@ describe('', () => { }); }); - it('does not use either of the agent policy selection or enrollment key steps', () => { + it('does not use either of the agent policy selection or enrollment key steps', async () => { goToStandaloneTab(); - expect(results.queryByTestId('agentEnrollmentFlyout')).not.toBeNull(); - expect(results.queryByTestId('agent-policy-selection-step')).toBeNull(); - expect(results.queryByTestId('agent-enrollment-key-selection-step')).toBeNull(); - expect(results.queryByTestId('configure-standalone-step')).not.toBeNull(); + await waitFor(() => { + expect(results.queryByTestId('agentEnrollmentFlyout')).not.toBeNull(); + expect(results.queryByTestId('agent-policy-selection-step')).toBeNull(); + expect(results.queryByTestId('agent-enrollment-key-selection-step')).toBeNull(); + expect(results.queryByTestId('configure-standalone-step')).not.toBeNull(); + }); }); }); }); diff --git a/x-pack/plugins/fleet/public/components/enrollment_instructions/root_privileges_callout.test.tsx b/x-pack/plugins/fleet/public/components/enrollment_instructions/root_privileges_callout.test.tsx index ae7e62773cb63..6cf1f68673ac7 100644 --- a/x-pack/plugins/fleet/public/components/enrollment_instructions/root_privileges_callout.test.tsx +++ b/x-pack/plugins/fleet/public/components/enrollment_instructions/root_privileges_callout.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; -import { cleanup, waitFor } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import { createFleetTestRendererMock } from '../../mock'; @@ -15,7 +15,6 @@ import { RootPrivilegesCallout } from './root_privileges_callout'; describe('RootPrivilegesCallout', () => { function render(rootIntegrations?: Array<{ name: string; title: string }>) { - cleanup(); const renderer = createFleetTestRendererMock(); const results = renderer.render(); diff --git a/x-pack/plugins/fleet/public/components/multiple_agent_policy_summary_line.test.tsx b/x-pack/plugins/fleet/public/components/multiple_agent_policy_summary_line.test.tsx index 100a6f67ad838..22efe3f84d435 100644 --- a/x-pack/plugins/fleet/public/components/multiple_agent_policy_summary_line.test.tsx +++ b/x-pack/plugins/fleet/public/components/multiple_agent_policy_summary_line.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { act, fireEvent } from '@testing-library/react'; +import { fireEvent, waitFor } from '@testing-library/react'; import React from 'react'; import type { TestRenderer } from '../mock'; @@ -31,7 +31,7 @@ describe('MultipleAgentPolicySummaryLine', () => { testRenderer = createFleetTestRendererMock(); }); - test('it should only render the policy name when there is only one policy', async () => { + test('it should only render the policy name when there is only one policy', () => { const results = render([{ name: 'Test policy', revision: 2 }] as AgentPolicy[]); expect(results.container.textContent).toBe('Test policyrev. 2'); expect(results.queryByTestId('agentPolicyNameLink')).toBeInTheDocument(); @@ -48,19 +48,18 @@ describe('MultipleAgentPolicySummaryLine', () => { expect(results.queryByTestId('agentPoliciesNumberBadge')).toBeInTheDocument(); expect(results.container.textContent).toBe('Test policy 1+2'); - await act(async () => { - fireEvent.click(results.getByTestId('agentPoliciesNumberBadge')); - }); - expect(results.queryByTestId('agentPoliciesPopover')).toBeInTheDocument(); - expect(results.queryByTestId('agentPoliciesPopoverButton')).toBeInTheDocument(); - expect(results.queryByTestId('policy-0001')).toBeInTheDocument(); - expect(results.queryByTestId('policy-0002')).toBeInTheDocument(); - expect(results.queryByTestId('policy-0003')).toBeInTheDocument(); + fireEvent.click(results.getByTestId('agentPoliciesNumberBadge')); - await act(async () => { - fireEvent.click(results.getByTestId('agentPoliciesPopoverButton')); + await waitFor(() => { + expect(results.queryByTestId('agentPoliciesPopover')).toBeInTheDocument(); + expect(results.queryByTestId('agentPoliciesPopoverButton')).toBeInTheDocument(); + expect(results.queryByTestId('policy-0001')).toBeInTheDocument(); + expect(results.queryByTestId('policy-0002')).toBeInTheDocument(); + expect(results.queryByTestId('policy-0003')).toBeInTheDocument(); }); + fireEvent.click(results.getByTestId('agentPoliciesPopoverButton')); + expect(results.queryByTestId('manageAgentPoliciesModal')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/fleet/public/components/package_policy_actions_menu.test.tsx b/x-pack/plugins/fleet/public/components/package_policy_actions_menu.test.tsx index 7195eb73890f2..944e9a8a2ecc6 100644 --- a/x-pack/plugins/fleet/public/components/package_policy_actions_menu.test.tsx +++ b/x-pack/plugins/fleet/public/components/package_policy_actions_menu.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; -import { act } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import type { AgentPolicy, InMemoryPackagePolicy } from '../types'; import { createIntegrationsTestRendererMock } from '../mock'; @@ -118,7 +118,8 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies(); const packagePolicy = createMockPackagePolicy({ hasUpgrade: false }); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + + await waitFor(() => { const upgradeButton = utils.getByTestId('PackagePolicyActionsUpgradeItem'); expect(upgradeButton).toBeDisabled(); }); @@ -129,7 +130,7 @@ describe('PackagePolicyActionsMenu', () => { const packagePolicy = createMockPackagePolicy({ hasUpgrade: true }); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + await waitFor(() => { const upgradeButton = utils.getByTestId('PackagePolicyActionsUpgradeItem'); expect(upgradeButton).not.toBeDisabled(); }); @@ -140,7 +141,7 @@ describe('PackagePolicyActionsMenu', () => { const packagePolicy = createMockPackagePolicy({ hasUpgrade: true }); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + await waitFor(() => { const upgradeButton = utils.getByTestId('PackagePolicyActionsUpgradeItem'); expect(upgradeButton).toBeDisabled(); }); @@ -150,7 +151,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies({ is_managed: true }); const packagePolicy = createMockPackagePolicy(); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + await waitFor(() => { expect(utils.queryByText('Delete integration')).toBeNull(); }); }); @@ -159,7 +160,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies({ is_managed: false }); const packagePolicy = createMockPackagePolicy(); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + await waitFor(() => { expect(utils.queryByText('Delete integration')).not.toBeNull(); }); }); @@ -168,7 +169,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies({ is_managed: false, supports_agentless: true }); const packagePolicy = createMockPackagePolicy(); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + await waitFor(() => { expect(utils.queryByText('Delete integration')).not.toBeNull(); }); }); @@ -177,7 +178,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies(); const packagePolicy = createMockPackagePolicy({ hasUpgrade: true }); const { utils } = renderMenu({ agentPolicies, packagePolicy, showAddAgent: true }); - await act(async () => { + await waitFor(() => { expect(utils.queryByText('Add agent')).not.toBeNull(); }); }); @@ -186,7 +187,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies({ is_managed: true }); const packagePolicy = createMockPackagePolicy({ hasUpgrade: true }); const { utils } = renderMenu({ agentPolicies, packagePolicy, showAddAgent: true }); - await act(async () => { + await waitFor(() => { expect(utils.queryByText('Add agent')).toBeNull(); }); }); @@ -195,7 +196,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies({ supports_agentless: true }); const packagePolicy = createMockPackagePolicy({ hasUpgrade: true }); const { utils } = renderMenu({ agentPolicies, packagePolicy, showAddAgent: true }); - await act(async () => { + await waitFor(() => { expect(utils.queryByText('Add agent')).toBeNull(); }); }); @@ -204,7 +205,7 @@ describe('PackagePolicyActionsMenu', () => { const agentPolicies = createMockAgentPolicies(); const packagePolicy = createMockPackagePolicy(); const { utils } = renderMenu({ agentPolicies, packagePolicy }); - await act(async () => { + await waitFor(() => { const editButton = utils.getByTestId('PackagePolicyActionsEditItem'); expect(editButton).not.toHaveAttribute('disabled'); expect(editButton).toHaveAttribute('href'); @@ -227,7 +228,7 @@ describe('PackagePolicyActionsMenu', () => { agentPolicies: [], packagePolicy, }); - await act(async () => { + await waitFor(() => { const editButton = utils.getByTestId('PackagePolicyActionsEditItem'); expect(editButton).not.toHaveAttribute('disabled'); expect(editButton).toHaveAttribute('href');