From 2328efba99a5f68d6efa30e6d5a92a792da53500 Mon Sep 17 00:00:00 2001 From: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com> Date: Wed, 7 Aug 2024 19:08:24 +0100 Subject: [PATCH] [ResponseOps][Cases] Fix multi select filter flaky test (#190079) ## Summary Fixes https://github.com/elastic/kibana/issues/183663 Updated all `getBy` to `findBy` and added `await waitFor ` for checking method calls --- .../all_cases/multi_select_filter.test.tsx | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx index 10bdd185ef9f1..c2575b146b9f8 100644 --- a/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx @@ -6,12 +6,11 @@ */ import React from 'react'; import { MultiSelectFilter } from './multi_select_filter'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl'; -// FLAKY: https://github.com/elastic/kibana/issues/183663 -describe.skip('multi select filter', () => { +describe('multi select filter', () => { it('should render the amount of options available', async () => { const onChange = jest.fn(); const props = { @@ -29,10 +28,10 @@ describe.skip('multi select filter', () => { render(); - userEvent.click(screen.getByRole('button', { name: 'Tags' })); + userEvent.click(await screen.findByRole('button', { name: 'Tags' })); await waitForEuiPopoverOpen(); - expect(screen.getByText('4 options')).toBeInTheDocument(); + expect(await screen.findByText('4 options')).toBeInTheDocument(); }); it('hides the limit reached warning when a selected tag is removed', async () => { @@ -53,14 +52,17 @@ describe.skip('multi select filter', () => { const { rerender } = render(); - userEvent.click(screen.getByRole('button', { name: 'Tags' })); + userEvent.click(await screen.findByRole('button', { name: 'Tags' })); await waitForEuiPopoverOpen(); - expect(screen.getByText('Limit reached')).toBeInTheDocument(); + expect(await screen.findByText('Limit reached')).toBeInTheDocument(); - userEvent.click(screen.getByRole('option', { name: 'tag a' })); + userEvent.click(await screen.findByRole('option', { name: 'tag a' })); + + await waitFor(() => { + expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] }); + }); - expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] }); rerender(); expect(screen.queryByText('Limit reached')).not.toBeInTheDocument(); @@ -84,20 +86,23 @@ describe.skip('multi select filter', () => { const { rerender } = render(); - userEvent.click(screen.getByRole('button', { name: 'Tags' })); + userEvent.click(await screen.findByRole('button', { name: 'Tags' })); await waitForEuiPopoverOpen(); expect(screen.queryByText('Limit reached')).not.toBeInTheDocument(); - userEvent.click(screen.getByRole('option', { name: 'tag b' })); + userEvent.click(await screen.findByRole('option', { name: 'tag b' })); - expect(onChange).toHaveBeenCalledWith({ - filterId: 'tags', - selectedOptionKeys: ['tag a', 'tag b'], + await waitFor(() => { + expect(onChange).toHaveBeenCalledWith({ + filterId: 'tags', + selectedOptionKeys: ['tag a', 'tag b'], + }); }); + rerender(); - expect(screen.getByText('Limit reached')).toBeInTheDocument(); + expect(await screen.findByText('Limit reached')).toBeInTheDocument(); }); it('should not call onChange when the limit has been reached', async () => { @@ -118,14 +123,16 @@ describe.skip('multi select filter', () => { render(); - userEvent.click(screen.getByRole('button', { name: 'Tags' })); + userEvent.click(await screen.findByRole('button', { name: 'Tags' })); await waitForEuiPopoverOpen(); - expect(screen.getByText('Limit reached')).toBeInTheDocument(); + expect(await screen.findByText('Limit reached')).toBeInTheDocument(); - userEvent.click(screen.getByRole('option', { name: 'tag b' })); + userEvent.click(await screen.findByRole('option', { name: 'tag b' })); - expect(onChange).not.toHaveBeenCalled(); + await waitFor(() => { + expect(onChange).not.toHaveBeenCalled(); + }); }); it('should remove selected option if it suddenly disappeared from the list', async () => { @@ -144,7 +151,10 @@ describe.skip('multi select filter', () => { const { rerender } = render(); rerender(); - expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] }); + + await waitFor(() => { + expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] }); + }); }); it('activates custom renderOption when set', async () => { @@ -164,12 +174,12 @@ describe.skip('multi select filter', () => { }; render(); - userEvent.click(screen.getByRole('button', { name: 'Tags' })); + userEvent.click(await screen.findByRole('button', { name: 'Tags' })); await waitForEuiPopoverOpen(); - expect(screen.getAllByTestId(TEST_ID).length).toBe(2); + expect((await screen.findAllByTestId(TEST_ID)).length).toBe(2); }); - it('should not show the amount of options if hideActiveOptionsNumber is active', () => { + it('should not show the amount of options if hideActiveOptionsNumber is active', async () => { const onChange = jest.fn(); const props = { id: 'tags', @@ -184,7 +194,7 @@ describe.skip('multi select filter', () => { }; const { rerender } = render(); - expect(screen.queryByLabelText('1 active filters')).toBeInTheDocument(); + expect(await screen.findByLabelText('1 active filters')).toBeInTheDocument(); rerender(); expect(screen.queryByLabelText('1 active filters')).not.toBeInTheDocument(); });