codemirror: Port relevant integration tests
Created by: fkling
Closes: #36044
NOTE: Review with whitespace difference turned off.
This PR parameterises some tests in search.test.ts to test both the Monaco and the CodeMirror implementation of the main search query input.
To make this work I introduced an interface (EditorAPI) that abstracts away the implementation details of accessing specific parts of the editor. This API object can be created by calling createEditorAPI with the name of the editor and a selector to its root (the intention behind this is to make it possible to test other instances (besides the main query input) in the future).
In order to execute a test for all editor implementations, the tests are wrapped in withSearchQueryInput (the callback function gets passed the editor name and query input selector).
Now, in order to "switch" implementations, the user settings need to be adjusted. This is a bit trickier to abstract away because we only allow to mock all responses or nothing. I considered extending our test context API to allow more granular specification of mocks, but ultimately decided for a more minimal approach. I added a helper function, createViewerSettingsGraphQLOverride, to make it easier to create the correct settings GraphQL response object (I still think something like testContext.addSettings(...) which would magically merge all settings specified this way and create the right mock would be useful in the future).
There are other tests in search.test.ts that wait until the Monaco editor is rendered but those don't seem to test query input specific behaviour so I didn't convert those.
The Monaco editor is also accessed in other integration tests. I'll investigate those and create another PR if it makes sense to parameterise those.
Test plan
Ran
ENTERPRISE=1 DISABLE_TYPECHECKING=true yarn run build-web
yarn _test-integration client/web/src/integration/search.test.tsApp preview:
Check out the client app preview documentation to learn more.