test: Add e2e tests for insert, edit and query on the FLE2 collection COMPASS-5861 (#3143)

* test: create FLE2 collection and check badge COMPASS-5850 COMPASS-5851

* refactor: remove encryptedFieldsMap from connect in e2e

* refactor: update test ids

* refactor: reformat

* test: set fle feature flag

* test: e2e to insert documents

* refactor: move icon to a separate test

* test: e2e for querying the encrypted field

* test: find by the encrypted field

* refactor: fix typos

Author: alenakhineika

packages/compass-crud/src/components/insert-csfle-warning-banner.jsx

@@ -38,7 +38,7 @@ function InsertCSFLEWarningBanner({ csfleState }) {
 
     case 'has-known-schema':
       return (
-        <Banner variant={BannerVariant.Info}>
+        <Banner data-test-id="insert-csfle-has-known-schema" variant={BannerVariant.Info}>
           This insert operation will encrypt all fields that are specified in the schema
           or In-Use Encryption configuration associated with the collection.
 

packages/compass-e2e-tests/helpers/read-first-document-content.ts

@@ -0,0 +1,29 @@
+import chai from 'chai';
+const { expect } = chai;
+
+import type { CompassBrowser } from '../helpers/compass-browser';
+import * as Selectors from '../helpers/selectors';
+
+export async function getFirstListDocument(browser: CompassBrowser) {
+  // We check the total from the header area so it is probably good enough to
+  // just check the first document on screen to make sure the included fields
+  // and their values are what we expected.
+
+  const fieldNameElements = await browser.$$(
+    Selectors.documentListDocumentKey(1)
+  );
+  const fieldNames = await Promise.all(
+    fieldNameElements.map((el) => el.getText())
+  );
+
+  const fieldValueElements = await browser.$$(
+    Selectors.documentListDocumentValue(1)
+  );
+  const fieldValues = await Promise.all(
+    fieldValueElements.map((el) => el.getText())
+  );
+
+  expect(fieldValues).to.have.lengthOf(fieldNames.length);
+
+  return Object.fromEntries(fieldNames.map((k, i) => [k, fieldValues[i]]));
+}

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

@@ -511,6 +511,8 @@ export const InsertConfirm =
   '.insert-document-dialog [role=dialog] > div:nth-child(2) button:first-child';
 export const InsertCancel =
   '.insert-document-dialog [role=dialog] > div:nth-child(2) button:last-child';
+export const insertCSFLEHasKnownSchemaMsg =
+  '[data-test-id="insert-csfle-has-known-schema"]';
 
 // Import File modal
 
@@ -562,6 +564,8 @@ export const HadronDocumentRevertElement =
   '[data-testid="hadron-document-revert"]';
 export const HadronDocumentRemoveElement =
   '[data-testid="hadron-document-remove"]';
+export const HadronDocumentElementDecryptedIcon =
+  '[data-test-id="hadron-document-element-decrypted-icon"]';
 
 // Document list view
 
@@ -575,6 +579,9 @@ export const documentListDocumentKey = (n: number): string => {
 export const documentListDocumentValue = (n: number): string => {
   return `${DocumentListItem}:nth-child(${n}) ${HadronDocumentValue}`;
 };
+export const documentListDecryptedIcon = (n: number): string => {
+  return `${DocumentListItem}:nth-child(${n}) ${HadronDocumentElementDecryptedIcon}`;
+};
 
 // Query bar history
 

packages/compass-e2e-tests/tests/collection-import.test.ts

@@ -2,6 +2,7 @@ import path from 'path';
 import chai from 'chai';
 import type { CompassBrowser } from '../helpers/compass-browser';
 import { beforeTests, afterTests, afterTest } from '../helpers/compass';
+import { getFirstListDocument } from '../helpers/read-first-document-content';
 import type { Compass } from '../helpers/compass';
 import * as Selectors from '../helpers/selectors';
 import {
@@ -64,30 +65,6 @@ async function unselectFieldName(browser: CompassBrowser, fieldName: string) {
   expect(await checkboxElement.isSelected()).to.be.false;
 }
 
-async function getFirstListDocument(browser: CompassBrowser) {
-  // We check the total from the header area so it is probably good enough to
-  // just check the first document on screen to make sure the included fields
-  // and their values are what we expected.
-
-  const fieldNameElements = await browser.$$(
-    Selectors.documentListDocumentKey(1)
-  );
-  const fieldNames = await Promise.all(
-    fieldNameElements.map((el) => el.getText())
-  );
-
-  const fieldValueElements = await browser.$$(
-    Selectors.documentListDocumentValue(1)
-  );
-  const fieldValues = await Promise.all(
-    fieldValueElements.map((el) => el.getText())
-  );
-
-  expect(fieldValues).to.have.lengthOf(fieldNames.length);
-
-  return Object.fromEntries(fieldNames.map((k, i) => [k, fieldValues[i]]));
-}
-
 describe('Collection import', function () {
   let compass: Compass;
   let browser: CompassBrowser;

packages/compass-e2e-tests/tests/in-use-encryption.test.ts

@@ -6,6 +6,7 @@ import type { Compass } from '../helpers/compass';
 import { MONGODB_VERSION } from '../helpers/compass';
 import * as Selectors from '../helpers/selectors';
 import { createDummyCollections } from '../helpers/insert-data';
+import { getFirstListDocument } from '../helpers/read-first-document-content';
 
 describe('FLE2', function () {
   let initialEnvVars: NodeJS.ProcessEnv;
@@ -96,15 +97,17 @@ describe('FLE2', function () {
   });
 
   describe('when fleEncryptedFieldsMap is specified while connecting', function () {
-    const databaseName = 'test';
+    const databaseName = 'fle-test';
     const collectionName = 'my-another-collection';
     let compass: Compass;
     let browser: CompassBrowser;
 
     before(async function () {
       compass = await beforeTests();
       browser = compass.browser;
+    });
 
+    beforeEach(async function () {
       await browser.connectWithConnectionForm({
         hosts: ['localhost:27091'],
         fleKeyVaultNamespace: `${databaseName}.keyvault`,
@@ -114,13 +117,26 @@ describe('FLE2', function () {
             fields: [
               {
                 path: 'phoneNumber',
-                keyId: UUID("fd6275d7-9260-4e6c-a86b-68ec5240814a"),
-                bsonType: 'string'
+                keyId: UUID("28bbc608-524e-4717-9246-33633361788e"),
+                bsonType: 'string',
+                queries: { queryType: 'equality' }
               }
             ]
           }
         }`,
       });
+      await browser.shellEval(`use ${databaseName}`);
+      await browser.shellEval(
+        'db.keyvault.insertOne({' +
+          '"_id": UUID("28bbc608-524e-4717-9246-33633361788e"),' +
+          '"keyMaterial": BinData(0, "/yeYyj8IxowIIZGOs5iUcJaUm7KHhoBDAAzNxBz8c5mr2hwBIsBWtDiMU4nhx3fCBrrN3cqXG6jwPgR22gZDIiMZB5+xhplcE9EgNoEEBtRufBE2VjtacpXoqrMgW0+m4Dw76qWUCsF/k1KxYBJabM35KkEoD6+BI1QxU0rwRsR1rE/OLuBPKOEq6pmT5x74i+ursFlTld+5WiOySRDcZg=="),' +
+          '"creationDate": ISODate("2022-05-27T18:28:33.925Z"),' +
+          '"updateDate": ISODate("2022-05-27T18:28:33.925Z"),' +
+          '"status": 0,' +
+          '"masterKey": { "provider" : "local" }' +
+          '})'
+      );
+      await browser.clickVisible(Selectors.SidebarInstanceRefreshButton);
     });
 
     after(async function () {
@@ -129,13 +145,27 @@ describe('FLE2', function () {
       }
     });
 
+    afterEach(async function () {
+      await browser.shellEval(
+        `db.getMongo().getDB('${databaseName}').dropDatabase()`
+      );
+    });
+
     it('can create a fle2 collection without encryptedFields', async function () {
       await browser.navigateToDatabaseTab(databaseName, 'Collections');
-
-      // open the create collection modal from the button at the top
       await browser.clickVisible(Selectors.DatabaseCreateCollectionButton);
       await browser.addCollection(collectionName);
 
+      const selector = Selectors.collectionCard(databaseName, collectionName);
+      await browser.scrollToVirtualItem(
+        Selectors.CollectionsGrid,
+        selector,
+        'grid'
+      );
+
+      const collectionCard = await browser.$(selector);
+      await collectionCard.waitForDisplayed();
+
       const collectionListFLE2BadgeElement = await browser.$(
         Selectors.CollectionListFLE2Badge
       );
@@ -160,5 +190,131 @@ describe('FLE2', function () {
         'QUERYABLE ENCRYPTION'
       );
     });
+
+    it('can insert a document with an encrypted field and a non-encrypted field', async function () {
+      await browser.shellEval(`db.createCollection('${collectionName}')`);
+
+      await browser.clickVisible(Selectors.SidebarInstanceRefreshButton);
+
+      await browser.navigateToCollectionTab(
+        databaseName,
+        collectionName,
+        'Documents'
+      );
+
+      // browse to the "Insert to Collection" modal
+      await browser.clickVisible(Selectors.AddDataButton);
+      const insertDocumentOption = await browser.$(
+        Selectors.InsertDocumentOption
+      );
+      await insertDocumentOption.waitForDisplayed();
+      await browser.clickVisible(Selectors.InsertDocumentOption);
+
+      // wait for the modal to appear
+      const insertDialog = await browser.$(Selectors.InsertDialog);
+      await insertDialog.waitForDisplayed();
+
+      // set the text in the editor
+      await browser.setAceValue(
+        Selectors.InsertJSONEditor,
+        '{ "phoneNumber": "30303030", "name": "Person X" }'
+      );
+
+      const insertCSFLEHasKnownSchemaMsg = await browser.$(
+        Selectors.insertCSFLEHasKnownSchemaMsg
+      );
+      const insertCSFLEHasKnownSchemaMsgText =
+        await insertCSFLEHasKnownSchemaMsg.getText();
+      expect(insertCSFLEHasKnownSchemaMsgText).to.include('phoneNumber');
+
+      // confirm
+      const insertConfirm = await browser.$(Selectors.InsertConfirm);
+      await insertConfirm.waitForEnabled();
+      await browser.clickVisible(Selectors.InsertConfirm);
+
+      // wait for the modal to go away
+      await insertDialog.waitForDisplayed({ reverse: true });
+      await browser.clickVisible(Selectors.SidebarInstanceRefreshButton);
+
+      const result = await getFirstListDocument(browser);
+
+      expect(result._id).to.exist;
+      expect(result.__safeContent__).to.exist;
+      delete result._id;
+      delete result.__safeContent__;
+
+      expect(result).to.deep.equal({
+        phoneNumber: '"30303030"',
+        name: '"Person X"',
+      });
+    });
+
+    it('shows decrypted field icon', async function () {
+      await browser.shellEval(`db.createCollection('${collectionName}')`);
+      await browser.shellEval(
+        `db['${collectionName}'].insertOne({ "phoneNumber": "30303030", "name": "Person X" })`
+      );
+
+      await browser.navigateToCollectionTab(
+        databaseName,
+        collectionName,
+        'Documents'
+      );
+
+      const decryptedIconElements = await browser.$$(
+        Selectors.documentListDecryptedIcon(1)
+      );
+      const decryptedIcons = await Promise.all(
+        decryptedIconElements.map((el) => el.getAttribute('title'))
+      );
+
+      expect(decryptedIcons).to.have.lengthOf(1);
+      expect(decryptedIcons[0]).to.be.equal('Encrypted Field');
+    });
+
+    it('can edit and query the encrypted field', async function () {
+      await browser.shellEval(`db.createCollection('${collectionName}')`);
+      await browser.shellEval(
+        `db['${collectionName}'].insertOne({ "phoneNumber": "30303030", "name": "Person X" })`
+      );
+
+      await browser.navigateToCollectionTab(
+        databaseName,
+        collectionName,
+        'Documents'
+      );
+
+      const result = await getFirstListDocument(browser);
+      expect(result.phoneNumber).to.be.equal('"30303030"');
+
+      const document = await browser.$(Selectors.DocumentListEntry);
+      const value = await document.$(
+        `${Selectors.HadronDocumentElement}:nth-child(2) ${Selectors.HadronDocumentClickableValue}`
+      );
+      await value.doubleClick();
+
+      const input = await document.$(
+        `${Selectors.HadronDocumentElement}:nth-child(2) ${Selectors.HadronDocumentValueEditor}`
+      );
+      await input.setValue('10101010');
+
+      const footer = await document.$(Selectors.DocumentFooterMessage);
+      expect(await footer.getText()).to.equal('Document Modified.');
+
+      const button = await document.$(
+        '[data-test-id="update-document-button"]'
+      );
+      await button.click();
+      await footer.waitForDisplayed({ reverse: true });
+
+      await browser.runFindOperation(
+        'Documents',
+        "{ phoneNumber: '10101010' }"
+      );
+
+      const modifiedResult = await getFirstListDocument(browser);
+      expect(modifiedResult.phoneNumber).to.be.equal('"10101010"');
+      expect(modifiedResult._id).to.be.equal(result._id);
+    });
   });
 });