search: Refactor integration tests editor API

Created by: fkling

I split out the changes to fix the integration tests for #38584 into this PR.

This commit refactors the integration test editor helper API to be easier to use and converts remaining tests that explicitly refer to Monaco to use this API instead.

The problem with the current API was that you'd have to know which editor is currently used to create an API object. But the developer shouldn't have to know that.

This commit adds a data-editor attribute, the test-query-input class and test-editor class to the DOM elements created by the editor implementations (where needed). This allows tests to target the query input (or editor) in a generic way (via classes) and the API can figure out which editor is used via the data-editor attribute.

Before:

const editor = createEditorAPI(driver, editorToUse, selector)

After:

const editor = await createEditorAPI(driver, selector)

This also removes the "default selector" provided by withSearchQueryInput, which was also a bit awkward. Instead the selector to the editor component has to be provided by the developer, which makes it much clearer which component is tested.

Note: test-* classes where chosen simply because the Monaco query input already uses test-query-input and it's easier to add multiple classes than multiple data-* attributes.

Note 2: Because the CodeMirror editor doesn't produce an element on its own, those classes and data-editor are added by the CodeMirrorQueryInput component. This is not ideal but not a problem either since it's only used for testing. Once CodeMirror is more used (and tested) throughout the app this should be addressed somehow.

Fixes #38633 (closed) too (see comment below).

Test plan

Integration tests pass.

App preview:

• Web
• Storybook

Check out the client app preview documentation to learn more.