@memlab/e2e 1.0.2 → 1.0.3

package/dist/plugins/DefaultScenarioSynthesizer.js

@@ -53,7 +53,10 @@ class DefaultScenarioSynthesizer extends BaseSynthesizer_1.default {
     getPageLoadChecker() {
         return (page) => __awaiter(this, void 0, void 0, function* () {
             yield InteractionUtils_1.default.waitFor(500);
-            yield page.waitForNavigation({ waitUntil: 'networkidle0' });
+            yield page.waitForNavigation({
+                waitUntil: 'networkidle0',
+                timeout: this.config.waitForNetworkInDefaultScenario,
+            });
             return true;
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memlab/e2e",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "memlab browser E2E interaction libraries",
   "author": "Liang Gong <lgong@fb.com>",
@@ -48,6 +48,7 @@
   },
   "scripts": {
     "build-pkg": "tsc",
+    "publish-patch": "npm version patch --force && npm publish",
     "clean-pkg": "rm -rf ./dist && rm -rf ./node_modules && rm -f ./tsconfig.tsbuildinfo"
   },
   "bugs": {

package/static/example/pages/examples/{unbound-object.jsx → oversized-object.jsx}

@@ -2,14 +2,17 @@
 import Link from 'next/link';
 import React, {useEffect} from 'react';
 
-export default function UnboundObject() {
+export default function OversizedObject() {
   const bigArray = Array(1024 * 1024 * 2).fill(0);
 
   const eventHandler = () => {
-    console.log('Does something with with hugeObject', bigArray);
+    // the eventHandler closure keeps a reference
+    // to the bigArray in the outter scope
+    console.log('Using hugeObject', bigArray);
   };
 
   useEffect(() => {
+    // eventHandler is never unregistered
     window.addEventListener('custom-click', eventHandler);
   }, []);
 
@@ -18,7 +21,7 @@ export default function UnboundObject() {
       <div className="row">
         <Link href="/">Go back</Link>
       </div>
-      <br />
+      <br/>
       <div className="row">
         Object<code>bigArray</code>is leaked. Please check <code>Memory</code>{' '}
         tab in devtools

package/static/example/pages/index.js

@@ -24,7 +24,7 @@ export default function Home() {
           <p>Detached DOM element</p>
         </div>
         <div className="col-md-3">
-          <Link href="/examples/unbound-object">
+          <Link href="/examples/oversized-object">
             <a>
               <h2>Example 2 &rarr;</h2>
             </a>

package/static/example/scenarios/detached-dom.js

@@ -11,28 +11,30 @@ function url() {
  * Specify how memlab should perform action that you want
  * to test whether the action is causing memory leak.
  *
- * @param page - Puppeteer's [page object](https://pptr.dev/api/puppeteer.page/).
+ * @param page - Puppeteer's page object:
+ * https://pptr.dev/api/puppeteer.page/
  */
 async function action(page) {
-  const [button] = await page.$x(
+  const elements = await page.$x(
     "//button[contains(., 'Create detached DOMs')]"
   );
+  const [button] = elements;
   if (button) {
     await button.click();
   }
+  // clean up external references from memlab
+  await Promise.all(elements.map(e => e.dispose()));
 }
 
 /**
  * Specify how memlab should perform action that would
  * reset the action you performed above.
  *
- * @param page - Puppeteer's [page object](https://pptr.dev/api/puppeteer.page/).
+ * @param page - Puppeteer's page object:
+ * https://pptr.dev/api/puppeteer.page/
  */
 async function back(page) {
-  const [button] = await page.$x('a[href="/"]');
-  if (button) {
-    await button.click();
-  }
+  await page.click('a[href="/"]');
 }
 
 module.exports = { action, back, url };

package/static/example/scenarios/oversized-leak-filter.js

@@ -0,0 +1,9 @@
+/* @nolint */
+
+// leakFilter is called with each object (node) in browser
+// allocated by `action` but not released after the `back` call
+function leakFilter(node, _snapshot, _leakedNodeIds) {
+  return node.retainedSize > 1000 * 1000;
+}
+
+module.exports = { leakFilter };

package/static/example/scenarios/oversized-object-with-filter.js

@@ -0,0 +1,23 @@
+/* @nolint */
+
+function url() {
+  return 'http://localhost:3000/';
+}
+
+// action where you suspect the memory leak might be happening
+async function action(page) {
+  await page.click('a[href="/examples/oversized-object"]');
+}
+
+// how to go back to the state before actionw
+async function back(page) {
+  await page.click('a[href="/"]');
+}
+
+// leakFilter is called with each object (node) in browser
+// allocated by `action` but not released after the `back` call
+function leakFilter(node, _snapshot, _leakedNodeIds) {
+  return node.retainedSize > 1000 * 1000;
+}
+
+module.exports = { action, back, leakFilter, url };

package/static/example/scenarios/oversized-object.js

@@ -0,0 +1,17 @@
+/* @nolint */
+
+function url() {
+  return 'http://localhost:3000/';
+}
+
+// action where you suspect the memory leak might be happening
+async function action(page) {
+  await page.click('a[href="/examples/oversized-object"]');
+}
+
+// how to go back to the state before actionw
+async function back(page) {
+  await page.click('a[href="/"]');
+}
+
+module.exports = { action, back, url };

package/static/example/scenarios/unbound-object.js

@@ -1,22 +0,0 @@
-// @nolint
-
-// memlab/packages/e2e/static/example/scenario/unbound-object.js
-function url() {
-  return "http://localhost:3000/";
-}
-
-// action where you suspect the memory leak might be happening
-async function action(page) {
-  await page.click('a[href="/examples/unbound-object"]');
-}
-
-// how to go back to the state before actionw
-async function back(page) {
-  await page.click('a[href="/"]');
-}
-
-// function leakFilter(node, _snapshot, _leakedNodeIds) {
-//   return node.retainedSize > 1000 * 1000;
-// };
-
-module.exports = { action, back, url };