chore(saved-aggregations-queries): Use proxyquire to mock dependencies that cause misc issues for running tests in the package (#2745)

* chore(mocha-config-compass): Use tsconfig-patch package as a way to automatically mock dependencies

This configuration will resolve anything with the matching path in the __mocks__ folder first before trying to do a real import

* test(saved-aggregations-queries): Add a simple test that checks that connected list renders items from the store

* chore(saved-aggregations-queries): Change test setup to use proxyquire

* test(saved-aggregations-queries): Increase test timeout

* chore: Prettier

Author: gribnoysup

package-lock.json

@@ -1,9 +1 @@
-const base = require('@mongodb-js/mocha-config-compass/compass-plugin');
-const path = require('path');
-
-module.exports = {
-  ...base,
-  require: (base.require || []).concat(
-    [path.resolve(__dirname, 'tests', 'setup.ts')].filter(Boolean)
-  ),
-};
+module.exports = require('@mongodb-js/mocha-config-compass/compass-plugin');

packages/compass-saved-aggregations-queries/.mocharc.js

@@ -46,7 +46,7 @@
     "test-electron": "xvfb-maybe electron-mocha --no-sandbox",
     "test-cov": "nyc -x \"**/*.spec.*\" --reporter=lcov --reporter=text --reporter=html npm run test",
     "test-watch": "npm run test -- --watch",
-    "test-ci": "npm run test-electron",
+    "test-ci": "npm run test-cov && npm run test-electron",
     "reformat": "npm run prettier -- --write ."
   },
   "peerDependencies": {
@@ -78,6 +78,7 @@
     "@types/chai": "^4.2.21",
     "@types/chai-dom": "^0.0.10",
     "@types/mocha": "^9.0.0",
+    "@types/proxyquire": "^1.3.28",
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.10",
     "@types/sinon-chai": "^3.2.5",
@@ -90,6 +91,7 @@
     "mongodb-instance-model": "^11.18.0",
     "nyc": "^15.1.0",
     "prettier": "2.3.2",
+    "proxyquire": "^2.1.3",
     "rimraf": "^3.0.2",
     "sinon": "^9.2.3",
     "xvfb-maybe": "^0.2.1"

packages/compass-saved-aggregations-queries/package.json

@@ -61,11 +61,11 @@ const row = css({
 const AggregationsQueriesList = ({
   loading,
   items,
-  fetchItems,
+  onMount,
 }: AggregationsQueriesListProps) => {
   useEffect(() => {
-    void fetchItems();
-  }, [fetchItems]);
+    void onMount();
+  }, [onMount]);
 
   if (loading) {
     return null;
@@ -102,7 +102,7 @@ const mapState = ({ savedItems: { items, loading } }: RootState) => ({
   loading,
 });
 
-const mapDispatch = { fetchItems };
+const mapDispatch = { onMount: fetchItems };
 
 const connector = connect(mapState, mapDispatch);
 

packages/compass-saved-aggregations-queries/src/components/aggregations-queries-list.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import { expect } from 'chai';
+import proxyquire from 'proxyquire';
+import { createProxyquireMockForQueriesAndAggregationsPlugins } from '../../test/mock';
+
+describe('AggregationsQueriesList', function () {
+  // Even though we are mocking dependencies, the code is still processed by
+  // ts-node (we're just not running it) so running this suite takes more time
+  // than is allowed by our default configuration
+  this.timeout(30000);
+
+  afterEach(cleanup);
+
+  it('should load queries and display them in the list', async function () {
+    const { default: ConnectedList }: any = proxyquire.load('./index', {
+      ...(createProxyquireMockForQueriesAndAggregationsPlugins(
+        [],
+        [
+          {
+            _id: '123',
+            _name: 'Query',
+            _ns: 'bar.foo',
+            _dateSaved: 0,
+          },
+        ]
+      ) as any),
+      // XXX: It's important that the proxyquire required module has the same
+      // instance of react that the code in this scope has, otherwise we will
+      // get a "multiple React instances" error while trying to render the
+      // component
+      react: Object.assign(React, {
+        '@global': true,
+        '@noCallThru': true,
+      }),
+    });
+
+    render(<ConnectedList></ConnectedList>);
+
+    expect(await screen.findByText('Query')).to.exist;
+  });
+
+  it('should load aggregations and display them in the list', async function () {
+    const { default: ConnectedList }: any = proxyquire.load('./index', {
+      ...(createProxyquireMockForQueriesAndAggregationsPlugins(
+        [
+          {
+            id: '123',
+            name: 'Aggregation',
+            namespace: 'foo.bar',
+            lastModified: 0,
+          },
+        ],
+        []
+      ) as any),
+      // XXX: It's important that the proxyquire required module has the same
+      // instance of react that the code in this scope has, otherwise we will
+      // get a "multiple React instances" error while trying to render the
+      // component
+      react: Object.assign(React, {
+        '@global': true,
+        '@noCallThru': true,
+      }),
+    });
+
+    render(<ConnectedList></ConnectedList>);
+
+    expect(await screen.findByText('Aggregation')).to.exist;
+  });
+});

packages/compass-saved-aggregations-queries/src/components/index.test.tsx

@@ -1,5 +1,11 @@
 import { expect } from 'chai';
-import * as CompassPlugin from './index';
+import proxyquire from 'proxyquire';
+import { createProxyquireMockForQueriesAndAggregationsPlugins } from '../test/mock';
+
+const CompassPlugin: any = proxyquire.load(
+  './index',
+  createProxyquireMockForQueriesAndAggregationsPlugins([], [])
+);
 
 describe('Compass Plugin', function () {
   it('exports activate, deactivate, and metadata', function () {

packages/compass-saved-aggregations-queries/src/index.spec.ts

@@ -0,0 +1,45 @@
+export function createCompassAggregationsMock(pipelines: unknown[]): {
+  readPipelinesFromStorage(): Promise<typeof pipelines>;
+} {
+  return {
+    readPipelinesFromStorage(): Promise<typeof pipelines> {
+      return Promise.resolve(pipelines);
+    },
+  };
+}
+
+interface FavoriteQueryStorageClass<T> {
+  new (): {
+    loadAll(): Promise<T>;
+  };
+}
+
+export function createCompassQueryHistoryMock(queries: unknown[]): {
+  FavoriteQueryStorage: FavoriteQueryStorageClass<typeof queries>;
+} {
+  return {
+    FavoriteQueryStorage: class FavoriteQueryStorage {
+      loadAll(): Promise<typeof queries> {
+        return Promise.resolve(queries);
+      }
+    },
+  };
+}
+
+export function createProxyquireMockForQueriesAndAggregationsPlugins(
+  pipelines: unknown[],
+  queries: unknown[]
+): unknown {
+  return {
+    '@mongodb-js/compass-query-history': {
+      ...createCompassQueryHistoryMock(queries),
+      '@global': true,
+      '@noCallThru': true,
+    },
+    '@mongodb-js/compass-aggregations': {
+      ...createCompassAggregationsMock(pipelines),
+      '@global': true,
+      '@noCallThru': true,
+    },
+  };
+}