Skip to content

Commit

Permalink
fix flaky tests, add loop
Browse files Browse the repository at this point in the history
  • Loading branch information
@js-jankisalvi
js-jankisalvi committed Jan 25, 2024
1 parent 2f8825d commit 644e95f
Showing 1 changed file with 139 additions and 126 deletions.
265 changes: 139 additions & 126 deletions x-pack/plugins/cases/public/components/all_cases/columns_popover.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,164 +13,177 @@ import type { AppMockRenderer } from '../../common/mock';
import { createAppMockRenderer } from '../../common/mock';
import { ColumnsPopover } from './columns_popover';

// FLAKY: https://github.com/elastic/kibana/issues/174682
// FLAKY: https://github.com/elastic/kibana/issues/174683
// FLAKY: https://github.com/elastic/kibana/issues/174684
describe.skip('ColumnsPopover', () => {
let appMockRenderer: AppMockRenderer;

beforeEach(() => {
appMockRenderer = createAppMockRenderer();
jest.clearAllMocks();
});
for (let i = 0; i < 500; i++) {
describe('ColumnsPopover', () => {
let appMockRenderer: AppMockRenderer;

const selectedColumns = [
{ field: 'title', name: 'Title', isChecked: true },
{ field: 'category', name: 'Category', isChecked: false },
{ field: 'tags', name: 'Tags', isChecked: false },
];
beforeEach(() => {
appMockRenderer = createAppMockRenderer();
jest.clearAllMocks();
});

it('renders correctly a list of selected columns', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);
const selectedColumns = [
{ field: 'title', name: 'Title', isChecked: true },
{ field: 'category', name: 'Category', isChecked: false },
{ field: 'tags', name: 'Tags', isChecked: false },
];

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
it('renders correctly a list of selected columns', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);

expect(await screen.findByTestId('column-selection-popover')).toBeInTheDocument();
userEvent.click(await screen.findByTestId('column-selection-popover-button'));

selectedColumns.forEach(({ field, name, isChecked }) => {
expect(screen.getByTestId(`column-selection-switch-${field}`)).toHaveAttribute(
'aria-checked',
isChecked.toString()
);
expect(screen.getByText(name)).toBeInTheDocument();
expect(await screen.findByTestId('column-selection-popover')).toBeInTheDocument();

selectedColumns.forEach(({ field, name, isChecked }) => {
expect(screen.getByTestId(`column-selection-switch-${field}`)).toHaveAttribute(
'aria-checked',
isChecked.toString()
);
expect(screen.getByText(name)).toBeInTheDocument();
});
});
});

it('clicking a switch calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(
await screen.findByTestId(`column-selection-switch-${selectedColumns[0].field}`),
undefined,
{ skipPointerEventsCheck: true }
);

await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith([
{ ...selectedColumns[0], isChecked: false },
selectedColumns[1],
selectedColumns[2],
]);
it('clicking a switch calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(
await screen.findByTestId(`column-selection-switch-${selectedColumns[0].field}`),
undefined,
{ skipPointerEventsCheck: true }
);

await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith([
{ ...selectedColumns[0], isChecked: false },
selectedColumns[1],
selectedColumns[2],
]);
});
});
});

it('clicking Show All calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();
it('clicking Show All calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);
appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(await screen.findByTestId('column-selection-popover-show-all-button'));
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(
await screen.findByTestId('column-selection-popover-show-all-button'),
undefined,
{
skipPointerEventsCheck: true,
}
);

const onSelectedColumnsChangeCallParams = selectedColumns.map((column) => ({
...column,
isChecked: true,
}));
const onSelectedColumnsChangeCallParams = selectedColumns.map((column) => ({
...column,
isChecked: true,
}));

await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith(onSelectedColumnsChangeCallParams);
await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith(onSelectedColumnsChangeCallParams);
});
});
});

it('clicking Hide All calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);
it('clicking Hide All calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(await screen.findByTestId('column-selection-popover-hide-all-button'));
appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);

await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith(
selectedColumns.map((column) => ({ ...column, isChecked: false }))
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(
await screen.findByTestId('column-selection-popover-hide-all-button'),
undefined,
{
skipPointerEventsCheck: true,
}
);

await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith(
selectedColumns.map((column) => ({ ...column, isChecked: false }))
);
});
});
});

it('searching for text changes the column list correctly', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);
it('searching for text changes the column list correctly', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Title');
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Title');

expect(await screen.findByTestId('column-selection-switch-title')).toBeInTheDocument();
expect(screen.queryByTestId('column-selection-switch-category')).not.toBeInTheDocument();
expect(screen.queryByTestId('column-selection-switch-tags')).not.toBeInTheDocument();
});
expect(await screen.findByTestId('column-selection-switch-title')).toBeInTheDocument();
expect(screen.queryByTestId('column-selection-switch-category')).not.toBeInTheDocument();
expect(screen.queryByTestId('column-selection-switch-tags')).not.toBeInTheDocument();
});

it('searching for text does not change the list of selected columns', async () => {
const onSelectedColumnsChange = jest.fn();
it('searching for text does not change the list of selected columns', async () => {
const onSelectedColumnsChange = jest.fn();

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);
appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Category');
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Category');

expect(onSelectedColumnsChange).not.toHaveBeenCalled();
});
expect(onSelectedColumnsChange).not.toHaveBeenCalled();
});

it('searching for text hides the drag and drop icons', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);
it('searching for text hides the drag and drop icons', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(await screen.findByTestId('column-selection-popover-button'));

expect(await screen.findAllByTestId('column-selection-popover-draggable-icon')).toHaveLength(3);
expect(await screen.findAllByTestId('column-selection-popover-draggable-icon')).toHaveLength(
3
);

userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Foobar');
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Foobar');

expect(
await screen.queryByTestId('column-selection-popover-draggable-icon')
).not.toBeInTheDocument();
});
expect(
await screen.queryByTestId('column-selection-popover-draggable-icon')
).not.toBeInTheDocument();
});

it('searching for text disables hideAll and showAll buttons', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);
it('searching for text disables hideAll and showAll buttons', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Foobar');
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Foobar');

expect(await screen.findByTestId('column-selection-popover-show-all-button')).toBeDisabled();
expect(await screen.findByTestId('column-selection-popover-hide-all-button')).toBeDisabled();
expect(await screen.findByTestId('column-selection-popover-show-all-button')).toBeDisabled();
expect(await screen.findByTestId('column-selection-popover-hide-all-button')).toBeDisabled();
});
});
});
}

0 comments on commit 644e95f

Please sign in to comment.