add tests

Author: paula-stacho

packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx

@@ -328,7 +328,7 @@ const EditActionsFooter: React.FunctionComponent<{
               className={button}
               size="xsmall"
               onClick={() => onOpenErrorDetails?.(error.details!)}
-              data-testid="insert-document-error-details-button"
+              data-testid="edit-actions-footer-error-details-button"
             >
               VIEW ERROR DETAILS
             </Button>

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

@@ -43,7 +43,6 @@ const Document = (props: DocumentProps) => {
   }
 
   if (editable) {
-    console.log('PROP IS HERE', props.openErrorDetailsDialog);
     return <EditableDocument {...props} doc={doc} />;
   }
 

packages/compass-crud/src/stores/crud-store.ts

@@ -705,11 +705,6 @@ class CrudStoreImpl
           const nbsp = '\u00a0';
           error.message += ` (Updating fields whose names contain dots or start with $ require MongoDB${nbsp}5.0 or above.)`;
         }
-        console.log(
-          'updateDocument error',
-          error,
-          (error as MongoServerError).errInfo
-        );
         doc.onUpdateError(error as Error);
       } else if (d) {
         doc.onUpdateSuccess(d);
@@ -808,7 +803,6 @@ class CrudStoreImpl
         'replace'
       );
       if (error) {
-        console.log('replaceDocument error', error);
         doc.onUpdateError(error as Error);
       } else {
         doc.onUpdateSuccess(d);

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

@@ -593,6 +593,7 @@ export const DocumentListFetchingStopButton =
   '[data-testid="documents-content"] [data-testid="fetching-documents"] button';
 export const DocumentListError = '[data-testid="document-list-error-summary"]';
 export const AddDataButton = '[data-testid="crud-add-data-show-actions"]';
+export const EditDocumentButton = '[data-testid="edit-document-button"]';
 export const InsertDocumentOption =
   '[data-testid="crud-add-data-insert-document-action"]';
 export const ImportFileOption =
@@ -608,6 +609,8 @@ export const CloneDocumentButton = '[data-testid="clone-document-button"]';
 export const DeleteDocumentButton = '[data-testid="remove-document-button"]';
 export const DocumentFooter = '[data-testid="document-footer"]';
 export const DocumentFooterMessage = '[data-testid="document-footer-message"]';
+export const DocumentFooterErrorDetailsButton =
+  '[data-testid="edit-actions-footer-error-details-button"]';
 export const UpdateDocumentButton = `${DocumentFooter} [data-testid="update-button"]`;
 export const ConfirmDeleteDocumentButton = `${DocumentFooter} [data-testid="delete-button"]`;
 export const JSONDocumentCard = '[data-testid="editable-json"]';

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

@@ -20,6 +20,7 @@ import {
 import { context as testRunnerContext } from '../helpers/test-runner-context';
 import type { ChainablePromiseElement } from 'webdriverio';
 import { tryToInsertDocument } from '../helpers/commands/try-to-insert-document';
+import { isClickable } from 'webdriverio/build/commands/element';
 
 const { expect } = chai;
 
@@ -729,5 +730,156 @@ FindIterable<Document> result = collection.find(filter);`);
       await browser.clickVisible(Selectors.ErrorDetailsBackButton);
       await errorElement.waitForDisplayed();
     });
+
+    describe('Editing', function () {
+      beforeEach(async function () {
+        await browser.navigateWithinCurrentCollectionTabs('Documents');
+        await tryToInsertDocument(browser, `{ "phone": 12345 }`);
+        await browser.runFindOperation('Documents', '{ "phone": 12345 }');
+      });
+
+      it.only('shows error info when editing via list view', async function () {
+        const document = browser.$(Selectors.DocumentListEntry);
+        await document.waitForDisplayed();
+
+        // enter edit mode
+        await browser.hover(Selectors.DocumentListEntry);
+        await browser.clickVisible(Selectors.EditDocumentButton);
+
+        // delete the required field
+        await browser.hover(`${Selectors.HadronDocumentElement}:last-child`);
+        const deleteBtn = browser.$(
+          `${Selectors.HadronDocumentElement}:last-child ${Selectors.HadronDocumentRemoveElement}`
+        );
+        console.log({
+          isDisplayed: await deleteBtn.isDisplayed(),
+          isClickable: await deleteBtn.isClickable(),
+          isEnabled: await deleteBtn.isEnabled(),
+        });
+
+        await deleteBtn.waitForDisplayed();
+        console.log('I am displayed');
+        await deleteBtn.waitForClickable();
+        console.log('I am clickable');
+        await deleteBtn.click();
+
+        // confirm update
+        const footer = document.$(Selectors.DocumentFooterMessage);
+        expect(await footer.getText()).to.equal('Document modified.');
+
+        const button = document.$(Selectors.UpdateDocumentButton);
+        await button.click();
+
+        const errorMessage = browser.$(Selectors.DocumentFooterMessage);
+        await errorMessage.waitForDisplayed();
+        expect(await errorMessage.getText()).to.include(
+          'Document failed validation'
+        );
+
+        // enter details
+        const errorDetailsBtn = browser.$(
+          Selectors.DocumentFooterErrorDetailsButton
+        );
+        await errorDetailsBtn.waitForDisplayed();
+        console.log({ errorDetailsBtn });
+        await errorDetailsBtn.click();
+
+        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+        await errorDetailsJson.waitForDisplayed();
+
+        // exit details
+        await browser.clickVisible(Selectors.ErrorDetailsCloseButton);
+        await errorDetailsJson.waitForDisplayed({ reverse: true });
+      });
+
+      it('shows error info when editing via json view', async function () {
+        await browser.clickVisible(Selectors.SelectJSONView);
+
+        const document = browser.$(Selectors.DocumentJSONEntry);
+        await document.waitForDisplayed();
+
+        await waitForJSON(browser, document);
+
+        // enter edit mode
+        await browser.hover(Selectors.JSONDocumentCard);
+        await browser.clickVisible(Selectors.JSONEditDocumentButton);
+
+        // remove the required field
+        await browser.setCodemirrorEditorValue(
+          Selectors.DocumentJSONEntry,
+          `{}`
+        );
+
+        // confirm update
+        const footer = document.$(Selectors.DocumentFooterMessage);
+        expect(await footer.getText()).to.equal('Document modified.');
+
+        const button = document.$(Selectors.UpdateDocumentButton);
+        await button.click();
+
+        const errorMessage = browser.$(Selectors.DocumentFooterMessage);
+        await errorMessage.waitForDisplayed();
+        expect(await errorMessage.getText()).to.include(
+          'Document failed validation'
+        );
+
+        // enter details
+        const errorDetailsBtn = browser.$(
+          Selectors.DocumentFooterErrorDetailsButton
+        );
+        await errorDetailsBtn.waitForDisplayed();
+        await errorDetailsBtn.click();
+
+        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+        await errorDetailsJson.waitForDisplayed();
+
+        // exit details
+        await browser.clickVisible(Selectors.ErrorDetailsCloseButton);
+        await errorDetailsJson.waitForDisplayed({ reverse: true });
+      });
+
+      it('shows error info when editing via table view', async function () {
+        await browser.clickVisible(Selectors.SelectTableView);
+
+        const document = browser.$('.ag-center-cols-clipper .ag-row-first');
+        await document.waitForDisplayed();
+
+        // enter edit mode
+        const value = document.$('[col-id="phone"] .element-value');
+        await value.doubleClick();
+
+        // remove the required field
+        await browser.clickVisible(
+          '[data-testid="table-view-cell-editor-remove-field-button"]'
+        );
+
+        // confirm update
+        const footer = browser.$(Selectors.DocumentFooterMessage);
+        expect(await footer.getText()).to.equal('Document modified.');
+
+        const button = browser.$(Selectors.UpdateDocumentButton);
+        await button.click();
+
+        const errorMessage = browser.$(Selectors.DocumentFooterMessage);
+        await errorMessage.waitForDisplayed();
+        expect(await errorMessage.getText()).to.include(
+          'Document failed validation'
+        );
+
+        // enter details
+        const errorDetailsBtn = browser.$(
+          Selectors.DocumentFooterErrorDetailsButton
+        );
+        await errorDetailsBtn.waitForDisplayed();
+        await errorDetailsBtn.click();
+
+        const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
+        await errorDetailsJson.waitForDisplayed();
+
+        // exit details
+        await browser.clickVisible(Selectors.ErrorDetailsCloseButton);
+        await errorDetailsJson.waitForDisplayed({ reverse: true });
+      });
+    });
   });
 });