[Cases] Fix flaky tests in the create case form

[cnasikas]

Summary

This PR fixes a number of issues with the same error: TestingLibraryElementError: Unable to find an element by: [data-test-subj="caseTitle"]. The PR:

• Clears unnecessary act
• Wait for the form to render before trying to fill the form
• Wait for the component to update all states to eliminate warnings
• Fill tags when necessary to improve tests execution time
• Replace userEvent.type with userEvent.aste when possible to improve execution time
• Add skipPointerEventsCheck: true when necessary

I run the test file 100 times locally without any errors.

Fixes: #142287, #142288, #142285, #142286, #142284, #142283, #142282, #142281, #143407, #143406, #143405, #143408, #143403

Checklist

Delete any items that are not applicable to this PR.

• Unit or functional tests were updated or added to match the most common scenarios

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/response-ops (Team:ResponseOps)

[elasticmachine]

Pinging @elastic/response-ops-cases (Feature:Cases)

[jonathan-buttner]

Looks good, just left a few nits

[jonathan-buttner]

nit: do we need a counter in the for-loop? Could we switch this to a for-of-loop:

for (const tag of sampleTags) {
  ...
}

[jonathan-buttner]

Oh sorry, I didn't look at the previous version 🤦‍♂️ that's the way it was before. Ignore me.

[cnasikas]

No worries! It is a good opportunity to improve it

[jonathan-buttner]

nit: It sounds like the general advice is to start using screen. Using screen would also avoid having to pass in the renderResult parameter too

https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen

[cnasikas]

You are right!

[jonathan-buttner]

super nit: I try not to have functions take booleans because it makes it difficult to know what the parameter means when you just look at the function call like this:

fillFormReactTestingLib(renderResult, true);

One option would be to pass an object so it's descriptive (I'm not sure how annoying that'd be to have to update throughout this whole file though)

const fillFormReactTestingLib = async ({renderResult, withTags = false}: {renderResult: RenderResult, withTags: boolean})

Or another option would be to create a new function that wraps this one with descriptive name indicating that it is filling the form with tags:

const fillFormIncludeTags = async () => {
   await fillFormReactTestingLib(renderResult, true);
}

[cnasikas]

I was lazy, you are right!

[jonathan-buttner]

🙌

[jonathan-buttner]

nit:

Suggested change

	const longTitle = `${'a'.repeat(161)}`;
	const longTitle = 'a'.repeat(161);

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 7021751

Metrics [docs]

Unknown metric groups

ESLint disabled in files

id	before	after	diff
osquery	1	2	+1

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
fleet	59	65	+6
osquery	108	113	+5
securitySolution	441	447	+6
total			+19

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
fleet	67	73	+6
osquery	109	115	+6
securitySolution	518	524	+6
total			+20

History

• 💚 Build #88083 succeeded 6a0e541
• 💔 Build #87943 failed 4a4b9e5
• 💔 Build #87898 failed abd9e0f
• 💔 Build #87882 failed 8db699c

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @cnasikas

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.6

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation