github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ResponseOps][Cases] Fix multi select filter flaky test (#190079)

Browse source 
## Summary

Fixes https://github.com/elastic/kibana/issues/183663

Updated all `getBy` to `findBy` and added `await waitFor ` for checking
method calls
This commit is contained in:
Janki Salvi 2024-08-07 19:08:24 +01:00 • committed by GitHub
parent 5a86b0523e
commit 2328efba99
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

58
x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx
View file

@ -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(<MultiSelectFilter {...props} />);
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(<MultiSelectFilter {...props} />);
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(<MultiSelectFilter {...props} selectedOptionKeys={[]} />);
expect(screen.queryByText('Limit reached')).not.toBeInTheDocument();
@ -84,20 +86,23 @@ describe.skip('multi select filter', () => {
const { rerender } = render(<MultiSelectFilter {...props} />);
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(<MultiSelectFilter {...props} selectedOptionKeys={['tag a', 'tag b']} />);
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(<MultiSelectFilter {...props} />);
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(<MultiSelectFilter {...props} />);
rerender(<MultiSelectFilter {...props} options={[{ key: 'tag a', label: 'tag a' }]} />);
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(<MultiSelectFilter {...props} />);
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(<MultiSelectFilter {...props} />);
expect(screen.queryByLabelText('1 active filters')).toBeInTheDocument();
expect(await screen.findByLabelText('1 active filters')).toBeInTheDocument();
rerender(<MultiSelectFilter {...props} hideActiveOptionsNumber />);
expect(screen.queryByLabelText('1 active filters')).not.toBeInTheDocument();
});