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:
Check out the client app preview documentation to learn more.