@memlab/e2e 1.0.2 → 1.0.5

package/README.md

@@ -3,5 +3,6 @@
 This is the memlab E2E testing framework for headless/headful Chromium. It is mainly responsible
 for controling/interacting with browser, recording heap snapshots, and logging other execution meta data.
 
-## Full documentation
-https://facebookincubator.github.io/memlab
+## Online Resources
+* [Official Website and Demo](https://facebookincubator.github.io/memlab)
+* [Documentation](https://facebookincubator.github.io/memlab/docs/intro)

package/dist/lib/operations/TestPlanner.d.ts

@@ -31,6 +31,7 @@ export declare class TestPlanner {
     private prepareSynthesizer;
     private generateVisitPlan;
     loadCookies(visitPlan: IE2EScenarioVisitPlan, synthesizer: IE2EScenarioSynthesizer): Cookies;
+    private populateDomainInCookiesFromScenario;
     private populateDomainInCookies;
     private setSnapshotMode;
     private assignSnapshotIds;

package/dist/lib/operations/TestPlanner.js

@@ -107,7 +107,8 @@ class TestPlanner {
     loadCookies(visitPlan, synthesizer) {
         var _a;
         if (this.scenario && this.scenario.cookies) {
-            return this.scenario.cookies();
+            const cookies = this.scenario.cookies();
+            return this.populateDomainInCookiesFromScenario(cookies, this.scenario);
         }
         let cookieFile = synthesizer.getCookieFile(visitPlan);
         // if no cookie file is specified
@@ -122,6 +123,20 @@ class TestPlanner {
         const cookies = JSON.parse(fs_1.default.readFileSync(cookieFile, 'UTF-8'));
         return this.populateDomainInCookies(cookies, synthesizer.getDomain(), synthesizer.getDomainPrefixes());
     }
+    populateDomainInCookiesFromScenario(cookies, scenario) {
+        const ret = [];
+        const url = new URL(scenario.url());
+        const domain = '.' + url.hostname.split('.').slice(1).join('.');
+        for (const cookie of cookies) {
+            if (cookie.domain) {
+                ret.push(Object.assign({}, cookie));
+            }
+            else {
+                ret.push(Object.assign(Object.assign({}, cookie), { domain }));
+            }
+        }
+        return ret;
+    }
     populateDomainInCookies(cookies, domain, domainPrefixes) {
         const cookiesTemplate = cookies;
         const ret = [];

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/dist/plugins/scenarios/test-databricks.js

@@ -36,6 +36,6 @@ function back(page) {
 }
 // specify the number of repeat for the action
 function repeat() {
-    return 15;
+    return 1;
 }
 module.exports = { action, back, repeat, url };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memlab/e2e",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "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/_app.js

@@ -6,6 +6,7 @@
  *
  * @emails oncall+ws_labs
  * @format
+ * @oncall ws_labs
  */
 
 import Layout from '../components/layout.jsx';

package/static/example/pages/_document.js

@@ -6,6 +6,7 @@
  *
  * @emails oncall+ws_labs
  * @format
+ * @oncall ws_labs
  */
 
 import {Head, Html, Main, NextScript} from 'next/document';

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

@@ -6,6 +6,7 @@
  *
  * @emails oncall+ws_labs
  * @format
+ * @oncall ws_labs
  */
 
 import Link from 'next/link';
@@ -24,7 +25,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/links/src/App.js

@@ -11,7 +11,7 @@
 
 import React from 'react';
 
-// Use the the window.injectHookForLink{n} hook to inject objects
+// Use the window.injectHookForLink{n} hook to inject objects
 // to memory when link-{n} is triggered, for example:
 //
 //  window.injectHookForLink4 = () => {

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 };