test(connections): add functional tests for CSFLE (#3113)

* test(connections): add functional tests for CSFLE

* fix tests

* address PR feedback

* add aws kms tests

* add gcp tests

* added rest of tests for CSFLE

* move to connection-form

* test bson values

* fix ace selector

* don't wrap editor without data-testid

* fix ace editor selector

* change test id

Author: mcasimir

package-lock.json

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useId } from '@react-aria/utils';
 
 if (typeof window === 'undefined' && typeof globalThis !== 'undefined') {
   // ace-builds wants to install itself on `window`, which
@@ -51,6 +52,7 @@ type EditorProps = {
   options?: Omit<IAceOptions, 'readOnly'>;
   readOnly?: boolean;
   completer?: unknown;
+  'data-testid'?: string;
   onChangeText?: (text: string, event?: any) => void;
 } & Omit<IAceEditorProps, 'onChange' | 'value'>;
 
@@ -62,6 +64,7 @@ function Editor({
   onChangeText,
   completer,
   onFocus,
+  'data-testid': dataTestId,
   ...aceProps
 }: EditorProps): React.ReactElement {
   const setOptions: IAceOptions = {
@@ -72,7 +75,9 @@ function Editor({
     ...(!!completer && { enableLiveAutocompletion: true }),
   };
 
-  return (
+  const editorId = useId();
+
+  const editor = (
     <AceEditor
       mode={
         variant === 'Generic'
@@ -88,6 +93,8 @@ function Editor({
       editorProps={{ $blockScrolling: Infinity }}
       setOptions={setOptions}
       readOnly={readOnly}
+      // name should be unique since it gets translated to an id
+      name={aceProps.name ?? editorId}
       {...aceProps}
       onFocus={(ev: any) => {
         if (completer) {
@@ -97,7 +104,28 @@ function Editor({
       }}
     />
   );
+
+  // NOTE: we wrap the editor in a div only to add data-testid.
+  // Doing so everywhere caused the styles to break in the query bar,
+  // and so we add the div conditionally based on the data-testid prop.
+  return dataTestId ? <div data-testid={dataTestId}>{editor}</div> : editor;
+}
+
+/**
+ * Sets the editor value, use this with RTL like this:
+ *
+ * ```
+ * render(<Editor data-testid='my-editor' />);
+ * setEditorValue(screen.getByTestId('editor-test-id'), 'my text');
+ * ```
+ */
+function setEditorValue(element: HTMLElement, value: string): void {
+  const container = element.querySelector('.ace_editor');
+  if (!container) {
+    throw new Error('Cannot find editor container');
+  }
+  (window as any).ace.edit(container.id).setValue(value);
 }
 
 const EditorTextCompleter = tools.textCompleter;
-export { Editor, EditorVariant, EditorTextCompleter };
+export { Editor, EditorVariant, EditorTextCompleter, setEditorValue };

packages/compass-components/src/components/editor.tsx

@@ -33,6 +33,7 @@ export {
   Editor,
   EditorVariant,
   EditorTextCompleter,
+  setEditorValue,
 } from './components/editor';
 export { FavoriteIcon } from './components/icons/favorite-icon';
 export { Variant as BadgeVariant } from '@leafygreen-ui/badge';

packages/compass-components/src/index.ts

@@ -498,7 +498,7 @@ export const ConfirmDeleteDocumentButton =
 export const InsertDialog = '.insert-document-dialog';
 export const InsertDialogErrorMessage =
   '[data-testid="insert_document_modal"] .document-footer.document-footer-is-error .document-footer-message';
-export const InsertJSONEditor = '.insert-document-dialog #ace-editor';
+export const InsertJSONEditor = '.insert-document-dialog .ace_editor';
 export const InsertConfirm =
   '.insert-document-dialog [role=dialog] > div:nth-child(2) button:first-child';
 export const InsertCancel =

packages/compass-e2e-tests/helpers/selectors.ts

@@ -379,7 +379,7 @@ FindIterable<Document> result = collection.find(filter);`);
     const newjson = JSON.stringify({ ...JSON.parse(json), j: 1234 });
 
     await browser.setAceValue(
-      '[data-test-id="editable-json"] #ace-editor',
+      '[data-test-id="editable-json"] .ace_editor',
       newjson
     );
 
@@ -426,7 +426,7 @@ FindIterable<Document> result = collection.find(filter);`);
     });
 
     await browser.setAceValue(
-      '[data-test-id="editable-json"] #ace-editor',
+      '[data-test-id="editable-json"] .ace_editor',
       newjson
     );
 

packages/compass-e2e-tests/tests/collection-documents-tab.test.ts

@@ -74,6 +74,7 @@
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.10",
     "@types/sinon-chai": "^3.2.5",
+    "bson": "^4.4.1",
     "chai": "^4.3.4",
     "depcheck": "^1.4.1",
     "eslint": "^7.25.0",