add e2e test

Author: paula-stacho

packages/compass-components/src/components/modals/error-details-modal.tsx

@@ -36,11 +36,13 @@ function ErrorDetailsModal({
     <Modal setOpen={onClose} {...modalProps}>
       <ModalHeader title={title} subtitle={subtitle} />
       <ModalBody>
-        <Code language="json">{prettyDetails}</Code>
+        <Code language="json" data-testid="error-details-json">
+          {prettyDetails}
+        </Code>
       </ModalBody>
       <ModalFooter>
         <Button
-          data-testid="close-button"
+          data-testid={`error-details-${closeAction}-button`}
           onClick={() => {
             console.log('onClick');
             onClose();

packages/compass-crud/src/components/insert-document-dialog.tsx

@@ -344,6 +344,7 @@ const InsertDocumentDialog: React.FC<InsertDocumentDialogProps> = ({
               size="xsmall"
               className={errorDetailsBtnStyles}
               onClick={showErrorDetails}
+              data-testid="insert-document-error-details-button"
             >
               VIEW ERROR DETAILS
             </Button>

packages/compass-e2e-tests/helpers/commands/try-to-insert-document.ts

@@ -0,0 +1,34 @@
+import type { CompassBrowser } from '../compass-browser';
+import * as Selectors from '../selectors';
+import { expect } from 'chai';
+
+export async function tryToInsertDocument(
+  browser: CompassBrowser,
+  document?: string
+) {
+  // browse to the "Insert to Collection" modal
+  await browser.clickVisible(Selectors.AddDataButton);
+  const insertDocumentOption = browser.$(Selectors.InsertDocumentOption);
+  await insertDocumentOption.waitForDisplayed();
+  await browser.clickVisible(Selectors.InsertDocumentOption);
+
+  // wait for the modal to appear
+  const insertDialog = browser.$(Selectors.InsertDialog);
+  await insertDialog.waitForDisplayed();
+
+  if (document) {
+    // set the text in the editor
+    await browser.setCodemirrorEditorValue(
+      Selectors.InsertJSONEditor,
+      document
+    );
+  }
+
+  // confirm
+  const insertConfirm = browser.$(Selectors.InsertConfirm);
+  // this selector is very brittle, so just make sure it works
+  expect(await insertConfirm.isDisplayed()).to.be.true;
+  expect(await insertConfirm.getText()).to.equal('Insert');
+  await insertConfirm.waitForEnabled();
+  await browser.clickVisible(Selectors.InsertConfirm);
+}

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

@@ -615,12 +615,19 @@ export const JSONEditDocumentButton = `${JSONDocumentCard} [data-testid="editor-
 export const ShowMoreFieldsButton = '[data-testid="show-more-fields-button"]';
 export const OpenBulkUpdateButton = '[data-testid="crud-update"]';
 export const OpenBulkDeleteButton = '[data-testid="crud-bulk-delete"]';
+export const ErrorDetailsJson = '[data-testid="error-details-json"]';
+export const ErrorDetailsBackButton =
+  '[data-testid="error-details-back-button"]';
+export const ErrorDetailsCloseButton =
+  '[data-testid="error-details-close-button"]';
 
 // Insert Document modal
 
 export const InsertDialog = '[data-testid="insert-document-modal"]';
 export const InsertDialogErrorMessage =
   '[data-testid="insert-document-banner"][data-variant="danger"]';
+export const InsertDialogErrorDetailsBtn =
+  'button[data-testid="insert-document-error-details-button"]';
 export const InsertJSONEditor = '[data-testid="insert-document-json-editor"]';
 export const InsertConfirm =
   '[data-testid="insert-document-modal"] [data-testid="submit-button"]';

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

@@ -17,8 +17,9 @@ import {
   createNestedDocumentsCollection,
   createNumbersCollection,
 } from '../helpers/insert-data';
-import { context } from '../helpers/test-runner-context';
+import { context as testRunnerContext } from '../helpers/test-runner-context';
 import type { ChainablePromiseElement } from 'webdriverio';
+import { tryToInsertDocument } from '../helpers/commands/try-to-insert-document';
 
 const { expect } = chai;
 
@@ -553,7 +554,7 @@ FindIterable<Document> result = collection.find(filter);`);
   });
 
   it('can copy a document from the contextual toolbar', async function () {
-    if (context.disableClipboardUsage) {
+    if (testRunnerContext.disableClipboardUsage) {
       this.skip();
     }
 
@@ -685,4 +686,48 @@ FindIterable<Document> result = collection.find(filter);`);
       expect(numExpandedHadronElementsPostSwitch).to.equal(14);
     });
   });
+
+  context('with existing validation rule', function () {
+    const REQUIRE_PHONE_VALIDATOR =
+      '{ $jsonSchema: { bsonType: "object", required: [ "phone" ] } }';
+    beforeEach(async function () {
+      await browser.navigateToCollectionTab(
+        DEFAULT_CONNECTION_NAME_1,
+        'test',
+        'numbers',
+        'Validation'
+      );
+      await browser.clickVisible(Selectors.AddRuleButton);
+      const element = browser.$(Selectors.ValidationEditor);
+      await element.waitForDisplayed();
+      await browser.setValidation(REQUIRE_PHONE_VALIDATOR);
+    });
+
+    it('Shows error info when inserting', async function () {
+      await browser.navigateToCollectionTab(
+        DEFAULT_CONNECTION_NAME_1,
+        'test',
+        'numbers',
+        'Documents'
+      );
+      await tryToInsertDocument(browser, '{}');
+
+      const errorElement = browser.$(Selectors.InsertDialogErrorMessage);
+      await errorElement.waitForDisplayed();
+      expect(await errorElement.getText()).to.include(
+        'Document failed validation'
+      );
+      // enter details
+      const errorDetailsBtn = browser.$(Selectors.InsertDialogErrorDetailsBtn);
+      await errorElement.waitForDisplayed();
+      await errorDetailsBtn.click();
+
+      const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+      await errorDetailsJson.waitForDisplayed();
+
+      // exit details
+      await browser.clickVisible(Selectors.ErrorDetailsBackButton);
+      await errorElement.waitForDisplayed();
+    });
+  });
 });

packages/compass-e2e-tests/tests/connection.test.ts

@@ -24,6 +24,7 @@ import {
   DEFAULT_CONNECTION_NAMES,
   isTestingWeb,
 } from '../helpers/test-runner-context';
+import { tryToInsertDocument } from '../helpers/commands/try-to-insert-document';
 
 async function disconnect(browser: CompassBrowser) {
   try {
@@ -162,25 +163,8 @@ async function assertCannotInsertData(
     'Documents'
   );
 
-  // browse to the "Insert to Collection" modal
-  await browser.clickVisible(Selectors.AddDataButton);
-  const insertDocumentOption = browser.$(Selectors.InsertDocumentOption);
-  await insertDocumentOption.waitForDisplayed();
-  await browser.clickVisible(Selectors.InsertDocumentOption);
-
-  // wait for the modal to appear
-  const insertDialog = browser.$(Selectors.InsertDialog);
-  await insertDialog.waitForDisplayed();
-
   // go with the default text which should just be a random new id and therefore valid
-
-  // confirm
-  const insertConfirm = browser.$(Selectors.InsertConfirm);
-  // this selector is very brittle, so just make sure it works
-  expect(await insertConfirm.isDisplayed()).to.be.true;
-  expect(await insertConfirm.getText()).to.equal('Insert');
-  await insertConfirm.waitForEnabled();
-  await browser.clickVisible(Selectors.InsertConfirm);
+  await tryToInsertDocument(browser);
 
   // make sure that there's an error and that the insert button is disabled
   const errorElement = browser.$(Selectors.InsertDialogErrorMessage);
@@ -190,6 +174,7 @@ async function assertCannotInsertData(
   );
 
   // cancel and wait for the modal to go away
+  const insertDialog = browser.$(Selectors.InsertDialog);
   await browser.clickVisible(Selectors.InsertCancel);
   await insertDialog.waitForDisplayed({ reverse: true });
 }
@@ -521,7 +506,7 @@ describe('Connection string', function () {
     );
   });
 
-  it('can connect with readAnyDatabase builtin role', async function () {
+  it.only('can connect with readAnyDatabase builtin role', async function () {
     if (!hasAtlasEnvironmentVariables()) {
       return this.skip();
     }