chore(compass-e2e-tests): Add e2e tests for running an aggregation (#3111)

* chore(compass-e2e-tests): Add e2e tests for running an aggregation

* chore(compass-e2e-tests): Only run cancel aggregation test for server 4.4+

* chore(compass-e2e-tests): Rename methods to describe behavior better; Remove unnneccessary last step from 'Run' tests

Author: gribnoysup

packages/compass-aggregations/src/components/pipeline-results-workspace/index.tsx

@@ -152,7 +152,7 @@ export const PipelineResultsWorkspace: React.FunctionComponent<PipelineResultsWo
       results = (
         <ResultsContainer center>
           <CancelLoader
-            dataTestId="pipeline-results-loader"
+            data-testid="pipeline-results-loader"
             progressText={
               isMergeOrOutPipeline
                 ? `Persisting documents${

packages/compass-components/src/components/cancel-loader.spec.tsx

@@ -9,7 +9,7 @@ import CancelLoader from './cancel-loader';
 function renderLoader(spy) {
   return render(
     <CancelLoader
-      dataTestId="my-test-id"
+      data-testid="my-test-id"
       progressText="Doing something"
       cancelText="Stop doing it"
       onCancel={spy}

packages/compass-components/src/components/cancel-loader.tsx

@@ -21,12 +21,12 @@ const textStyles = css({
 });
 
 function CancelLoader({
-  dataTestId,
+  ['data-testid']: dataTestId = 'cancel-loader',
   progressText,
   cancelText,
   onCancel,
 }: {
-  dataTestId: string;
+  'data-testid'?: string;
   progressText: string;
   cancelText: string;
   onCancel: () => void;
@@ -35,7 +35,11 @@ function CancelLoader({
     <div className={containerStyles} data-testid={dataTestId}>
       <SpinLoader size={`${spacing[4]}px`} />
       <Subtitle className={textStyles}>{progressText}</Subtitle>
-      <Button variant="primaryOutline" onClick={onCancel}>
+      <Button
+        variant="primaryOutline"
+        onClick={onCancel}
+        data-testid={`${dataTestId}-button`}
+      >
         {cancelText}
       </Button>
     </div>

packages/compass-crud/src/components/document-list.jsx

@@ -101,7 +101,7 @@ class DocumentList extends React.Component {
     return (
       <div className="loader">
         <CancelLoader
-          dataTestId="fetching-documents"
+          data-testid="fetching-documents"
           progressText="Fetching Documents"
           cancelText="Stop"
           onCancel={this.onCancelClicked.bind(this)}

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

@@ -592,6 +592,23 @@ export const AggregationAdditionalOptionsButton =
   '[data-testid="pipeline-toolbar-options-button"]';
 export const AggregationCollationInput = '[data-testid="collation-string"]';
 export const AggregationMaxTimeMSInput = '[data-testid="max-time-ms"]';
+export const AggregationBuilderWorkspace =
+  '[data-testid="pipeline-builder-workspace"]';
+export const AggregationResultsWorkspace =
+  '[data-testid="pipeline-results-workspace"]';
+export const AggregationResultsDocumentListSwitchButton =
+  '[aria-label="Document list"] button';
+export const AggregationResultsJSONListSwitchButton =
+  '[aria-label="JSON list"] button';
+export const AggregationRestultsPaginationDescription =
+  '[data-testid="pipeline-pagination-desc"]';
+export const AggregationRestultsNextPageButton =
+  '[data-testid="pipeline-pagination-next-action"]';
+export const AggregationRestultsPrevPageButton =
+  '[data-testid="pipeline-pagination-prev-action"]';
+export const AggregationResultsCancelButton =
+  '[data-testid="pipeline-results-loader-button"]';
+export const AggregationEmptyResults = '[data-testid="pipeline-empty-results"]';
 
 export const AggregationSettingsButton =
   '[data-testid="pipeline-toolbar-settings-button"]';
@@ -610,6 +627,7 @@ export const SavePipelineCreateViewAction =
 export const SavePipelineSaveAsAction = '[data-testid="save-menu-saveAs"]';
 
 export const RunPipelineButton = `[data-testid="pipeline-toolbar-run-button"]`;
+export const EditPipelineButton = `[data-testid="pipeline-toolbar-edit-button"]`;
 export const GoToCollectionButton = `[data-testid="pipeline-results-go-to-collection"]`;
 
 // Create view from pipeline modal

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

@@ -497,6 +497,154 @@ describe('Collection aggregations tab', function () {
     });
   });
 
+  async function goToRunAggregation() {
+    if (await browser.$(Selectors.AggregationBuilderWorkspace).isDisplayed()) {
+      await browser.clickVisible(Selectors.RunPipelineButton);
+    }
+    const resultsWorkspace = await browser.$(
+      Selectors.AggregationResultsWorkspace
+    );
+    await resultsWorkspace.waitForDisplayed();
+  }
+
+  async function goToEditPipeline() {
+    if (await browser.$(Selectors.AggregationResultsWorkspace).isDisplayed()) {
+      await browser.clickVisible(Selectors.EditPipelineButton);
+    }
+    const builderWorkspace = await browser.$(
+      Selectors.AggregationBuilderWorkspace
+    );
+    await builderWorkspace.waitForDisplayed();
+  }
+
+  async function getDocuments() {
+    // Switch to JSON view so it's easier to get document value
+    await browser.clickVisible(
+      Selectors.AggregationResultsJSONListSwitchButton
+    );
+    // Get all visible documents
+    const documents = await browser.$$(Selectors.DocumentJSONEntry);
+    // Get ace editor content and parse it
+    const parsed = await Promise.all(
+      documents.map(async (doc) => {
+        const aceEditor = await doc.$('.ace_content');
+        return JSON.parse(await aceEditor.getText());
+      })
+    );
+    return parsed;
+  }
+
+  it('supports running and editing aggregation', async function () {
+    // Set first stage to match
+    await browser.focusStageOperator(0);
+    await browser.selectStageOperator(0, '$match');
+    await browser.setAceValue(Selectors.stageEditor(0), '{ i: 5 }');
+
+    // Run and wait for results
+    await goToRunAggregation();
+
+    // Get all documents from the current results page
+    const docs = await getDocuments();
+
+    expect(docs).to.have.lengthOf(1);
+    expect(docs[0]).to.have.property('_id');
+    expect(docs[0]).to.have.property('i', 5);
+    expect(docs[0]).to.have.property('j', 0);
+
+    // Go back to the pipeline builder
+    await goToEditPipeline();
+
+    // Change match filter
+    await browser.setAceValue(
+      Selectors.stageEditor(0),
+      '{ i: { $gte: 5, $lte: 10 } }'
+    );
+
+    // Run and wait for results
+    await goToRunAggregation();
+
+    // Get all documents from the current results page
+    const updatedDocs = await getDocuments();
+
+    // Check that the documents are matching pipeline
+    expect(updatedDocs).to.have.lengthOf(6);
+    expect(updatedDocs[0]).to.have.property('i', 5);
+    expect(updatedDocs[1]).to.have.property('i', 6);
+    expect(updatedDocs[2]).to.have.property('i', 7);
+    expect(updatedDocs[3]).to.have.property('i', 8);
+    expect(updatedDocs[4]).to.have.property('i', 9);
+    expect(updatedDocs[5]).to.have.property('i', 10);
+  });
+
+  it('supports paginating aggregation results', async function () {
+    // Set first stage to $match
+    await browser.focusStageOperator(0);
+    await browser.selectStageOperator(0, '$match');
+    await browser.setAceValue(Selectors.stageEditor(0), '{ i: { $gte: 5 } }');
+
+    // Add second $limit stage
+    await browser.clickVisible(Selectors.AddStageButton);
+    await browser.focusStageOperator(1);
+    await browser.selectStageOperator(1, '$limit');
+    await browser.setAceValue(Selectors.stageEditor(1), '25');
+
+    // Run and wait for results
+    await goToRunAggregation();
+
+    const page1 = await getDocuments();
+    expect(page1).to.have.lengthOf(20);
+    expect(page1[0]).to.have.property('i', 5);
+
+    await browser.clickVisible(Selectors.AggregationRestultsNextPageButton);
+    await browser.waitUntil(async () => {
+      const paginationDescription = await browser.$(
+        Selectors.AggregationRestultsPaginationDescription
+      );
+      return (await paginationDescription.getText()) === 'Showing 21 – 25';
+    });
+
+    const page2 = await getDocuments();
+    expect(page2).to.have.lengthOf(5);
+    expect(page2[0]).to.have.property('i', 25);
+  });
+
+  it('supports cancelling long-running aggregations', async function () {
+    if (semver.lt(MONGODB_VERSION, '4.4.0')) {
+      // $function expression that we use to simulate slow aggregation is only
+      // supported since server 4.4
+      this.skip();
+    }
+
+    const slowQuery = `{
+      sleep: {
+        $function: {
+          body: function () {
+            return sleep(10000) || true;
+          },
+          args: [],
+          lang: "js",
+        },
+      },
+    }`;
+
+    // Set first stage to a very slow $addFields
+    await browser.focusStageOperator(0);
+    await browser.selectStageOperator(0, '$addFields');
+    await browser.setAceValue(Selectors.stageEditor(0), slowQuery);
+
+    // Run and wait for results
+    await goToRunAggregation();
+
+    // Cancel aggregation run
+    await browser.clickVisible(Selectors.AggregationResultsCancelButton);
+    // Wait for the empty results banner (this is our indicator that we didn't
+    // load anything and dismissed "Loading" banner)
+    const emptyResultsBanner = await browser.$(
+      Selectors.AggregationEmptyResults
+    );
+    await emptyResultsBanner.waitForDisplayed();
+  });
+
   // TODO: stages can be re-arranged by drag and drop and the preview is refreshed after rearranging them
   // TODO: test auto-preview and limit
   // TODO: save a pipeline, close compass, re-open compass, load the pipeline

packages/compass-schema/src/components/compass-schema/compass-schema.jsx

@@ -177,7 +177,7 @@ class Schema extends Component {
     return (
       <div className={styles.loader}>
         <CancelLoader
-          dataTestId="analyzing-documents"
+          data-testid="analyzing-documents"
           progressText="Analyzing Documents"
           cancelText="Stop"
           onCancel={this.onCancelClicked.bind(this)}