Skip to content

Commit

Permalink
remove loop
Browse files Browse the repository at this point in the history
  • Loading branch information
js-jankisalvi committed Jan 30, 2024
1 parent 3562e3e commit 39efa1c
Showing 1 changed file with 145 additions and 149 deletions.
294 changes: 145 additions & 149 deletions x-pack/plugins/cases/public/components/all_cases/columns_popover.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,186 +14,182 @@ import type { AppMockRenderer } from '../../common/mock';
import { createAppMockRenderer } from '../../common/mock';
import { ColumnsPopover } from './columns_popover';

for (let i = 0; i < 500; i++) {
describe('ColumnsPopover', () => {
let appMockRenderer: AppMockRenderer;
describe('ColumnsPopover', () => {
let appMockRenderer: AppMockRenderer;

beforeEach(() => {
appMockRenderer = createAppMockRenderer();
jest.clearAllMocks();
});

const selectedColumns = [
{ field: 'title', name: 'Title', isChecked: true },
{ field: 'category', name: 'Category', isChecked: false },
{ field: 'tags', name: 'Tags', isChecked: false },
];

it('renders correctly a list of selected columns', async () => {
appMockRenderer.render(
<ColumnsPopover selectedColumns={selectedColumns} onSelectedColumnsChange={() => {}} />
);

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
beforeEach(() => {
appMockRenderer = createAppMockRenderer();
jest.clearAllMocks();
});

await waitForEuiPopoverOpen();
const selectedColumns = [
{ field: 'title', name: 'Title', isChecked: true },
{ field: 'category', name: 'Category', isChecked: false },
{ field: 'tags', name: 'Tags', isChecked: false },
];

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

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

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

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);
expect(await screen.findByTestId('column-selection-popover')).toBeInTheDocument();

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(
await screen.findByTestId(`column-selection-switch-${selectedColumns[0].field}`),
undefined,
{ skipPointerEventsCheck: true }
selectedColumns.forEach(({ field, name, isChecked }) => {
expect(screen.getByTestId(`column-selection-switch-${field}`)).toHaveAttribute(
'aria-checked',
isChecked.toString()
);

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

it('clicking Show All 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-popover-show-all-button'),
undefined,
{
skipPointerEventsCheck: true,
}
);

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

await waitFor(() => {
expect(onSelectedColumnsChange).toHaveBeenCalledWith(onSelectedColumnsChangeCallParams);
});
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 Hide All calls onSelectedColumnsChange with the right params', async () => {
const onSelectedColumnsChange = jest.fn();

appMockRenderer.render(
<ColumnsPopover
selectedColumns={selectedColumns}
onSelectedColumnsChange={onSelectedColumnsChange}
/>
);
it('clicking Show All 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-popover-show-all-button'),
undefined,
{
skipPointerEventsCheck: true,
}
);

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

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

userEvent.click(await screen.findByTestId('column-selection-popover-button'));
userEvent.click(
await screen.findByTestId('column-selection-popover-hide-all-button'),
undefined,
{
skipPointerEventsCheck: true,
}
it('clicking Hide All 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-popover-hide-all-button'),
undefined,
{
skipPointerEventsCheck: true,
}
);

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

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'));
await waitForEuiPopoverOpen();
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Title');
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
await waitForEuiPopoverOpen();
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'));
await waitForEuiPopoverOpen();
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Category');
userEvent.click(await screen.findByTestId('column-selection-popover-button'));
await waitForEuiPopoverOpen();
userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Category');

await waitFor(() => {
expect(onSelectedColumnsChange).not.toHaveBeenCalled();
});
await waitFor(() => {
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.click(await screen.findByTestId('column-selection-popover-button'));

await waitForEuiPopoverOpen();
await waitForEuiPopoverOpen();

userEvent.paste(await screen.findByTestId('column-selection-popover-search'), 'Foobar');
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 39efa1c

Please sign in to comment.