fix(useTrackerSuspense): fix performance issues when multiple useTracker with suspense exist and rebuild test cases. Closes #454

Author: welkinwong

packages/react-meteor-data/suspense/useTracker.tests.js

@@ -0,0 +1,325 @@
+/* global Meteor, Tinytest */
+import React, { Suspense } from 'react';
+import { renderToString } from 'react-dom/server';
+import { Mongo } from 'meteor/mongo';
+import { render } from '@testing-library/react';
+import { useTracker, cacheMap } from './useTracker';
+
+const clearCache = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  cacheMap.clear();
+};
+
+/**
+ * Test for useTracker with Suspense
+ */
+Tinytest.addAsync(
+  'suspense/useTracker - Data query validation',
+  async (test) => {
+    const TestDocs = new Mongo.Collection(null);
+
+    TestDocs.insertAsync({ id: 0, updated: 0 });
+
+    let returnValue;
+
+    const Test = () => {
+      returnValue = useTracker('TestDocs', () => TestDocs.find().fetchAsync());
+
+      return null;
+    };
+    const TestSuspense = () => {
+      return (
+        <Suspense fallback={<div>Loading...</div>}>
+          <Test />
+        </Suspense>
+      );
+    };
+
+    // first return promise
+    renderToString(<TestSuspense />);
+    test.isUndefined(
+      returnValue,
+      'Return value should be undefined as find promise unresolved'
+    );
+    // wait promise
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // return data
+    renderToString(<TestSuspense />);
+
+    test.equal(
+      returnValue.length,
+      1,
+      'Return value should be an array with one document'
+    );
+
+    await clearCache();
+  }
+);
+
+Tinytest.addAsync(
+  'suspense/useTracker - Test proper cache invalidation',
+  async function (test) {
+    const TestDocs = new Mongo.Collection(null);
+
+    TestDocs.insertAsync({ id: 0, updated: 0 });
+
+    let returnValue;
+
+    const Test = () => {
+      returnValue = useTracker('TestDocs', () => TestDocs.find().fetchAsync());
+      return null;
+    };
+    const TestSuspense = () => {
+      return (
+        <Suspense fallback={<div>Loading...</div>}>
+          <Test />
+        </Suspense>
+      );
+    };
+
+    // first return promise
+    renderToString(<TestSuspense />);
+    // wait promise
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // return data
+    renderToString(<TestSuspense />);
+
+    test.equal(
+      returnValue[0].updated,
+      0,
+      'Return value should be an array with initial value as find promise resolved'
+    );
+
+    TestDocs.updateAsync({ id: 0 }, { $inc: { updated: 1 } });
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // second return promise
+    renderToString(<TestSuspense />);
+
+    test.equal(
+      returnValue[0].updated,
+      0,
+      'Return value should still not updated as second find promise unresolved'
+    );
+
+    // wait promise
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // return data
+    renderToString(<TestSuspense />);
+    renderToString(<TestSuspense />);
+    renderToString(<TestSuspense />);
+
+    test.equal(
+      returnValue[0].updated,
+      1,
+      'Return value should be an array with one document with value updated'
+    );
+
+    await clearCache();
+  }
+);
+
+if (Meteor.isClient) {
+  Tinytest.addAsync(
+    'suspense/useTracker - Test useTracker with skipUpdate',
+    async function (test) {
+      const TestDocs = new Mongo.Collection(null);
+
+      TestDocs.insertAsync({ id: 0, updated: 0, other: 0 });
+
+      let returnValue;
+
+      const Test = () => {
+        returnValue = useTracker(
+          'TestDocs',
+          () => TestDocs.find().fetchAsync(),
+          (prev, next) => {
+            // Skip update if the document has not changed
+            return prev[0].updated === next[0].updated;
+          }
+        );
+
+        return null;
+      };
+      const TestSuspense = () => {
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <Test />
+          </Suspense>
+        );
+      };
+
+      // first return promise
+      renderToString(<TestSuspense />);
+      // wait promise
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      // return data
+      renderToString(<TestSuspense />);
+
+      test.equal(
+        returnValue[0].updated,
+        0,
+        'Return value should be an array with initial value as find promise resolved'
+      );
+
+      TestDocs.updateAsync({ id: 0 }, { $inc: { other: 1 } });
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // second return promise
+      renderToString(<TestSuspense />);
+      // wait promise
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      // return data
+      renderToString(<TestSuspense />);
+
+      test.equal(
+        returnValue[0].other,
+        0,
+        'Return value should still not updated as skipUpdate returned true'
+      );
+
+      await clearCache();
+    }
+  );
+}
+
+// https://github.com/meteor/react-packages/issues/454
+if (Meteor.isClient) {
+  Tinytest.addAsync(
+    'suspense/useTracker - Testing performance with multiple Trackers',
+    async (test) => {
+      const TestCollections = [];
+      let returnDocs = new Map();
+
+      for (let i = 0; i < 100; i++) {
+        const collection = new Mongo.Collection(null);
+
+        for (let i = 0; i < 100; i++) {
+          collection.insertAsync({ id: i });
+        }
+
+        TestCollections.push(collection);
+      }
+
+      const Test = ({ collection, index }) => {
+        const docsCount = useTracker(`TestDocs${index}`, () =>
+          collection.find().fetchAsync()
+        ).length;
+
+        returnDocs.set(`TestDocs${index}`, docsCount);
+
+        return null;
+      };
+      const TestSuspense = () => {
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            {TestCollections.map((collection, index) => (
+              <Test key={index} collection={collection} index={index} />
+            ))}
+          </Suspense>
+        );
+      };
+
+      // first return promise
+      renderToString(<TestSuspense />);
+      // wait promise
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      // return data
+      renderToString(<TestSuspense />);
+
+      test.equal(returnDocs.size, 100, 'should return 100 collections');
+
+      const docsCount = Array.from(returnDocs.values()).reduce((a, b) => a + b, 0);
+
+      test.equal(docsCount, 10000, 'should return 10000 documents');
+
+      await clearCache();
+    }
+  );
+}
+
+if (Meteor.isServer) {
+  Tinytest.addAsync(
+    'suspense/useTracker - Test no memory leaks',
+    async function (test) {
+      const TestDocs = new Mongo.Collection(null);
+
+      TestDocs.insertAsync({ id: 0, updated: 0 });
+
+      let returnValue;
+
+      const Test = () => {
+        returnValue = useTracker('TestDocs', () =>
+          TestDocs.find().fetchAsync()
+        );
+
+        return null;
+      };
+      const TestSuspense = () => {
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <Test />
+          </Suspense>
+        );
+      };
+
+      // first return promise
+      renderToString(<TestSuspense />);
+      // wait promise
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      // return data
+      renderToString(<TestSuspense />);
+      // wait cleanup
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      test.equal(
+        cacheMap.size,
+        0,
+        'Cache map should be empty as server cache should be cleared after render'
+      );
+    }
+  );
+} else {
+  Tinytest.addAsync(
+    'suspense/useTracker - Test no memory leaks',
+    async function (test) {
+      const TestDocs = new Mongo.Collection(null);
+
+      TestDocs.insertAsync({ id: 0, name: 'a' });
+
+      const Test = () => {
+        const docs = useTracker('TestDocs', () => TestDocs.find().fetchAsync());
+
+        return <div>{docs[0]?.name}</div>;
+      };
+      const TestSuspense = () => {
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <Test />
+          </Suspense>
+        );
+      };
+
+      const { queryByText, findByText, unmount } = render(<TestSuspense />, {
+        container: document.createElement('container'),
+      });
+
+      test.isNotNull(
+        queryByText('Loading...'),
+        'Throw Promise as needed to trigger the fallback.'
+      );
+
+      test.isTrue(await findByText('a'), 'Need to return data');
+
+      unmount();
+      // wait cleanup
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      test.equal(
+        cacheMap.size,
+        0,
+        'Cache map should be empty as component unmounted and cache cleared'
+      );
+    }
+  );
+}