Merge pull request #97 from GoogleChromeLabs/update/postMessage-all

update all workloads

README.md

@@ -31,7 +31,6 @@ This repo is set up as a monorepo with the following folder structure:
       - [News Site CSS](#news-site-css)
       - [TodoMVC CSS](#todomvc-css)
     - [Tools](#tools)
-      - [Benchmark Connector](#benchmark-connector)
       - [Workloads Manager](#workloads-manager)
   - [Assets Licenses](#assets-licenses)
 
@@ -110,8 +109,7 @@ pnpm -F news-site-next start:static
 
 ### Workload-Benchmark communication
 
-To enable communication between the workloads and a benchmark using postMessage, the [benchmark-connector](#benchmark-connector) package is used.
-Each workload that opts into this feature has the benchmark-connector package installed.
+To enable communication between the workloads and a benchmark using postMessage, a BenchmarkConnector class is used.
 Some workloads use a `prepare` script to copy the relevant JavaScript file to the appropriate directory.
 
 ### How to build all workloads
@@ -247,18 +245,6 @@ pnpm -F app-build-scripts format
 pnpm -F app-build-scripts build
 ```
 
-#### benchmark-connector
-
-Enables communication between benchmarks and workloads.
-
--   benchmark-connector.min.js: communication between benchmark and workload.
--   prepare.min.js: script to copy benchmark-connector.min.js file to the public folder of workload.
-
-```bash
-pnpm -F benchmark-connector format
-pnpm -F benchmark-connector build
-```
-
 #### workloads-manager
 
 Manages all workloads, by using the following commands:

apps/news-site/news-site-next-app-router/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "prepare": "node node_modules/benchmark-connector/dist/prepare.min.js & node node_modules/workload-testing-utils/dist/prepare.min.js",
+        "prepare": "node node_modules/workload-testing-utils/dist/prepare.min.js",
         "dev": "npm run prepare && next dev",
         "build": "npm run prepare && next build",
         "start": "next start",
@@ -22,7 +22,6 @@
         "@babel/eslint-parser": "^7.22.5",
         "@babel/plugin-proposal-decorators": "^7.22.5",
         "@typescript-eslint/eslint-plugin": "^5.60.1",
-        "benchmark-connector": "workspace: *",
         "classnames": "^2.3.2",
         "eslint": "8.39.0",
         "eslint-config-next": "13.3.4",

apps/news-site/news-site-next-app-router/src/app/layout.js

@@ -1,5 +1,4 @@
 import { DataContextProvider } from "@/context/data-context";
-import Script from "next/script";
 
 import "news-site-css/dist/variables.css";
 import "news-site-css/dist/global.css";
@@ -23,8 +22,6 @@ export default function RootLayout({ children }) {
                 <div id="notifications-container"></div>
                 <div id="sitemap-container"></div>
                 <div id="login-container"></div>
-                <Script src="./benchmark-connector.min.js" strategy="lazyOnload"/>
-                <Script src="./workload-test.js" type="module"/>
             </body>
         </html>
     );

apps/news-site/news-site-next-app-router/src/partials/page/page.jsx

@@ -10,6 +10,9 @@ import Ad from "@/components/atoms/ad/ad";
 import { useDataContext } from "@/context/data-context";
 import { useLocalStorage } from "@/hooks/use-local-storage";
 
+import { BenchmarkConnector } from "workload-testing-utils/dist/benchmark.mjs";
+import suites, { appName, appVersion } from "@/workload-test.mjs";
+
 export default function Page({ id }) {
     const [showPortal, setShowPortal] = useState(false);
     const { content, alerts, config } = useDataContext();
@@ -20,6 +23,18 @@ export default function Page({ id }) {
 
     const ads = config?.ads?.[id].sections;
 
+    useEffect(() => {
+        /*
+            Paste below into dev console for manual testing:
+            window.addEventListener("message", (event) => console.log(event.data));
+            window.postMessage({ id: "news-site-next-app-router-1.0.0", key: "benchmark-connector", type: "benchmark-suite", name: "default" }, "*");
+        */
+        const benchmarkConnector = new BenchmarkConnector(suites, appName, appVersion);
+        benchmarkConnector.connect();
+
+        return () => benchmarkConnector.disconnect();
+    }, []);
+
     useEffect(() => {
         if (reduceMotion)
             document.documentElement.classList.add("reduced-motion");

apps/news-site/news-site-next-app-router/public/workload-test.js → apps/news-site/news-site-next-app-router/src/workload-test.mjs

@@ -1,8 +1,12 @@
-import { BenchmarkTestStep, BenchmarkTestSuite, BenchmarkTestManager, forceLayout, getElement } from "./workload-testing-utils.min.js";
+import { BenchmarkStep, BenchmarkSuite } from "workload-testing-utils/dist/benchmark.mjs";
+import { forceLayout, getElement } from "workload-testing-utils/dist/helpers.mjs";
 
-window.benchmarkTestManager = new BenchmarkTestManager(window.name, [
-    new BenchmarkTestSuite("Navigation", [
-        new BenchmarkTestStep("Navigate-to-US-page", () => {
+export const appName = "news-site-next-app-router";
+export const appVersion = "1.0.0";
+
+const suites = {
+    default: new BenchmarkSuite("default", [
+        new BenchmarkStep("Navigate-to-US-page", () => {
             for (let i = 0; i < 25; i++) {
                 getElement("#navbar-dropdown-toggle").click();
                 forceLayout();
@@ -13,7 +17,7 @@ window.benchmarkTestManager = new BenchmarkTestManager(window.name, [
             getElement("#navbar-navlist-us-link").click();
             forceLayout();
         }),
-        new BenchmarkTestStep("Navigate-to-World-page", () => {
+        new BenchmarkStep("Navigate-to-World-page", () => {
             for (let i = 0; i < 25; i++) {
                 getElement("#navbar-dropdown-toggle").click();
                 forceLayout();
@@ -24,7 +28,7 @@ window.benchmarkTestManager = new BenchmarkTestManager(window.name, [
             getElement("#navbar-navlist-world-link").click();
             forceLayout();
         }),
-        new BenchmarkTestStep("Navigate-to-Politics-page", () => {
+        new BenchmarkStep("Navigate-to-Politics-page", () => {
             for (let i = 0; i < 25; i++) {
                 getElement("#navbar-dropdown-toggle").click();
                 forceLayout();
@@ -36,14 +40,16 @@ window.benchmarkTestManager = new BenchmarkTestManager(window.name, [
             forceLayout();
         }),
     ]),
-    new BenchmarkTestSuite("Dropdown", [
-        new BenchmarkTestStep("Toggle-More-Dropdown", () => {
+    Dropdown: new BenchmarkSuite("Dropdown", [
+        new BenchmarkStep("Toggle-More-Dropdown", () => {
             getElement("#navbar-dropdown-toggle").click();
             forceLayout();
         }),
-        new BenchmarkTestStep("Toggle-More-Dropdown", () => {
+        new BenchmarkStep("Toggle-More-Dropdown", () => {
             getElement("#navbar-dropdown-toggle").click();
             forceLayout();
         }),
     ]),
-]);
+};
+
+export default suites;

apps/news-site/news-site-next-pages-router/package.json

@@ -8,7 +8,7 @@
     },
     "private": true,
     "scripts": {
-        "prepare": "node node_modules/benchmark-connector/dist/prepare.min.js & node node_modules/workload-testing-utils/dist/prepare.min.js",
+        "prepare": "node node_modules/workload-testing-utils/dist/prepare.min.js",
         "dev": "npm run prepare && next dev",
         "build": "npm run prepare && next build",
         "start": "next start",
@@ -22,7 +22,6 @@
         "@babel/eslint-parser": "^7.22.5",
         "@babel/plugin-proposal-decorators": "^7.22.5",
         "@typescript-eslint/eslint-plugin": "^5.60.1",
-        "benchmark-connector": "workspace: *",
         "classnames": "^2.3.2",
         "eslint": "8.39.0",
         "eslint-config-next": "13.3.4",

apps/news-site/news-site-next-pages-router/src/pages/business.js

@@ -2,7 +2,6 @@ import React from "react";
 import Page from "@/partials/page/page";
 import Head from "next/head";
 import { DataContextProvider } from "@/context/data-context";
-import Script from "next/script";
 
 export default function App() {
     return (
@@ -14,8 +13,6 @@ export default function App() {
             <DataContextProvider>
                 <Page id="business" />
             </DataContextProvider>
-            <Script src="./benchmark-connector.min.js" strategy="lazyOnload"/>
-            <Script src="./workload-test.js" type="module"/>
         </>
     );
 }

apps/news-site/news-site-next-pages-router/src/pages/health.js

@@ -2,7 +2,6 @@ import React from "react";
 import Page from "@/partials/page/page";
 import Head from "next/head";
 import { DataContextProvider } from "@/context/data-context";
-import Script from "next/script";
 
 export default function App() {
     return (
@@ -14,8 +13,6 @@ export default function App() {
             <DataContextProvider>
                 <Page id="health" />
             </DataContextProvider>
-            <Script src="./benchmark-connector.min.js" strategy="lazyOnload"/>
-            <Script src="./workload-test.js" type="module"/>
         </>
     );
 }

apps/news-site/news-site-next-pages-router/src/pages/index.js

@@ -2,7 +2,6 @@ import React from "react";
 import Page from "@/partials/page/page";
 import Head from "next/head";
 import { DataContextProvider } from "@/context/data-context";
-import Script from "next/script";
 
 export default function App() {
     return (
@@ -14,8 +13,6 @@ export default function App() {
             <DataContextProvider>
                 <Page id="home" />
             </DataContextProvider>
-            <Script src="./benchmark-connector.min.js" strategy="lazyOnload"/>
-            <Script src="./workload-test.js" type="module"/>
         </>
     );
 }