Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Cases] Fix edit tags flaky tests #175763

Merged
merged 3 commits into from
Jan 29, 2024
Merged

[Cases] Fix edit tags flaky tests #175763

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0dbb4f7
Add for-loop
cnasikas Jan 29, 2024
26389a4
PR feedback
cnasikas Jan 29, 2024
fd094db
Remove for loop
cnasikas Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 72 additions & 88 deletions x-pack/plugins/cases/public/components/case_view/components/edit_tags.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import userEvent from '@testing-library/user-event';

import type { EditTagsProps } from './edit_tags';
import { EditTags } from './edit_tags';
import { readCasesPermissions, TestProviders, createAppMockRenderer } from '../../../common/mock';
import { readCasesPermissions, createAppMockRenderer } from '../../../common/mock';
import type { AppMockRenderer } from '../../../common/mock';
import { useGetTags } from '../../../containers/use_get_tags';
import { MAX_LENGTH_PER_TAG } from '../../../../common/constants';
Expand All @@ -25,15 +25,7 @@ const defaultProps: EditTagsProps = {
tags: [],
};

// The suite is skipped for having several flaky tests
// See:
// https://github.com/elastic/kibana/issues/175618
// https://github.com/elastic/kibana/issues/175619
// https://github.com/elastic/kibana/issues/175621
// https://github.com/elastic/kibana/issues/175622
// https://github.com/elastic/kibana/issues/175623
// https://github.com/elastic/kibana/issues/175655
describe.skip('EditTags ', () => {
describe('EditTags ', () => {
let appMockRender: AppMockRenderer;

const sampleTags = ['coke', 'pepsi'];
Expand All @@ -46,129 +38,121 @@ describe.skip('EditTags ', () => {
data: sampleTags,
refetch: fetchTags,
}));

appMockRender = createAppMockRenderer();
});

it('renders no tags, and then edit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);
for (let index = 0; index < 200; index++) {
it('renders no tags, and then edit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);

expect(await screen.findByTestId('no-tags')).toBeInTheDocument();

expect(screen.getByTestId('no-tags')).toBeInTheDocument();
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

userEvent.click(screen.getByTestId('tag-list-edit-button'));
await waitFor(() => {
expect(screen.queryByTestId('no-tags')).not.toBeInTheDocument();
});

await waitFor(() => {
expect(screen.queryByTestId('no-tags')).not.toBeInTheDocument();
expect(screen.getByTestId('edit-tags')).toBeInTheDocument();
expect(await screen.findByTestId('edit-tags')).toBeInTheDocument();
});
});

it('edit tag from options on submit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);
it('edit tag from options on submit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);

userEvent.click(screen.getByTestId('tag-list-edit-button'));
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

userEvent.type(screen.getByRole('combobox'), `${sampleTags[0]}{enter}`);
userEvent.type(screen.getByRole('combobox'), `${sampleTags[0]}{enter}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
userEvent.type(screen.getByRole('combobox'), `${sampleTags[0]}{enter}`);
userEvent.type(await screen.findByRole('combobox'), `${sampleTags[0]}{enter}`);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot them, thanks!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!


userEvent.click(screen.getByTestId('edit-tags-submit'));
userEvent.click(await screen.findByTestId('edit-tags-submit'));

await waitFor(() => expect(onSubmit).toBeCalledWith([sampleTags[0]]));
});
await waitFor(() => expect(onSubmit).toBeCalledWith([sampleTags[0]]));
});

it('add new tags on submit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);
it('add new tags on submit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);

userEvent.click(screen.getByTestId('tag-list-edit-button'));
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

await waitFor(() => {
expect(screen.getByTestId('edit-tags')).toBeInTheDocument();
});
expect(await screen.findByTestId('edit-tags')).toBeInTheDocument();

userEvent.type(screen.getByRole('combobox'), 'dude{enter}');
userEvent.type(screen.getByRole('combobox'), 'dude{enter}');

userEvent.click(screen.getByTestId('edit-tags-submit'));
userEvent.click(await screen.findByTestId('edit-tags-submit'));

await waitFor(() => expect(onSubmit).toBeCalledWith(['dude']));
});
await waitFor(() => expect(onSubmit).toBeCalledWith(['dude']));
});

it('trims the tags on submit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);
it('trims the tags on submit', async () => {
appMockRender.render(<EditTags {...defaultProps} />);

userEvent.click(screen.getByTestId('tag-list-edit-button'));
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

await waitFor(() => {
expect(screen.getByTestId('edit-tags')).toBeInTheDocument();
});
expect(await screen.findByTestId('edit-tags')).toBeInTheDocument();

userEvent.type(screen.getByRole('combobox'), 'dude {enter}');
userEvent.type(screen.getByRole('combobox'), 'dude {enter}');

userEvent.click(screen.getByTestId('edit-tags-submit'));
userEvent.click(await screen.findByTestId('edit-tags-submit'));

await waitFor(() => expect(onSubmit).toBeCalledWith(['dude']));
});
await waitFor(() => expect(onSubmit).toBeCalledWith(['dude']));
});

it('cancels on cancel', async () => {
appMockRender.render(<EditTags {...defaultProps} />);
it('cancels on cancel', async () => {
appMockRender.render(<EditTags {...defaultProps} />);

userEvent.click(screen.getByTestId('tag-list-edit-button'));
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

userEvent.type(screen.getByRole('combobox'), 'new{enter}');
userEvent.type(screen.getByRole('combobox'), 'new{enter}');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

findByRole


await waitFor(() => {
expect(screen.getByTestId('comboBoxInput')).toHaveTextContent('new');
});
expect(await screen.findByTestId('comboBoxInput')).toHaveTextContent('new');

userEvent.click(await screen.findByTestId('edit-tags-cancel'));

userEvent.click(screen.getByTestId('edit-tags-cancel'));
await waitFor(() => {
expect(onSubmit).not.toBeCalled();
});

await waitFor(() => {
expect(onSubmit).not.toBeCalled();
expect(screen.getByTestId('no-tags')).toBeInTheDocument();
expect(await screen.findByTestId('no-tags')).toBeInTheDocument();
});
});

it('shows error when tag is empty', async () => {
appMockRender.render(<EditTags {...defaultProps} />);
it('shows error when tag is empty', async () => {
appMockRender.render(<EditTags {...defaultProps} />);

userEvent.click(screen.getByTestId('tag-list-edit-button'));
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

await waitFor(() => {
expect(screen.getByTestId('edit-tags')).toBeInTheDocument();
});
expect(await screen.findByTestId('edit-tags')).toBeInTheDocument();

userEvent.type(screen.getByRole('combobox'), ' {enter}');
userEvent.type(screen.getByRole('combobox'), ' {enter}');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

findByRole


await waitFor(() => {
expect(screen.getByText('A tag must contain at least one non-space character.'));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
expect(screen.getByText('A tag must contain at least one non-space character.'));
expect(await screen.findByText('A tag must contain at least one non-space character.'));

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

});
});

it('shows error when tag is too long', async () => {
const longTag = 'z'.repeat(MAX_LENGTH_PER_TAG + 1);
it('shows error when tag is too long', async () => {
const longTag = 'z'.repeat(MAX_LENGTH_PER_TAG + 1);

appMockRender.render(<EditTags {...defaultProps} />);
appMockRender.render(<EditTags {...defaultProps} />);

userEvent.click(screen.getByTestId('tag-list-edit-button'));
userEvent.click(await screen.findByTestId('tag-list-edit-button'));

await waitFor(() => {
expect(screen.getByTestId('edit-tags')).toBeInTheDocument();
});
expect(await screen.findByTestId('edit-tags')).toBeInTheDocument();

userEvent.paste(screen.getByRole('combobox'), `${longTag}`);
userEvent.keyboard('{enter}');
userEvent.paste(screen.getByRole('combobox'), `${longTag}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

findByRole

userEvent.keyboard('{enter}');

await waitFor(() => {
expect(
screen.getByText('The length of the tag is too long. The maximum length is 256 characters.')
);
await waitFor(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the await waitFor(... still necessary?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this. I forgot them. I fixed it in 26389a4 (#175763)

expect(
screen.getByText(
'The length of the tag is too long. The maximum length is 256 characters.'
)
);
});
});
});

it('does not render when the user does not have update permissions', () => {
appMockRender.render(
<TestProviders permissions={readCasesPermissions()}>
<EditTags {...defaultProps} />
</TestProviders>
);
it('does not render when the user does not have update permissions', () => {
appMockRender = createAppMockRenderer({ permissions: readCasesPermissions() });
appMockRender.render(<EditTags {...defaultProps} />);

expect(screen.queryByTestId('tag-list-edit')).not.toBeInTheDocument();
});
expect(screen.queryByTestId('tag-list-edit')).not.toBeInTheDocument();
});
}
});
Loading