@clary-so/measure 0.4.2

package/src/__tests__/measure.test.tsx

@@ -0,0 +1,141 @@
+import "@clary-so/e2e/src/utils/test/mockChildProcess";
+import {
+  emitMeasures,
+  perfProfilerMock,
+  aTraceMock,
+} from "@clary-so/e2e/src/utils/test/mockEmitMeasures";
+import { fireEvent, render as webRender, screen, waitFor, act } from "@testing-library/react";
+import { render as cliRender } from "ink-testing-library";
+import React from "react";
+import { ServerApp } from "../server/ServerApp";
+import { open } from "@clary-so/shell";
+import { matchSnapshot } from "@clary-so/web-reporter-ui/utils/testUtils";
+import { removeCLIColors } from "./utils/removeCLIColors";
+import { LogLevel, Logger } from "@clary-so/logger";
+import { DEFAULT_PORT } from "../server/constants";
+
+jest.mock("@clary-so/shell", () => ({
+  open: jest.fn(),
+}));
+
+Math.random = () => 0.5;
+
+// Set me to LogLevel.DEBUG to see the debug logs
+Logger.setLogLevel(LogLevel.SILENT);
+
+let originalWindow: Window & typeof globalThis;
+let MeasureWebApp: React.FC;
+
+describe("flashlight measure interactive", () => {
+  beforeAll(async () => {
+    originalWindow = global.window;
+
+    global.window = Object.create(window);
+    Object.defineProperty(window, "__FLASHLIGHT_DATA__", {
+      value: { socketServerUrl: `http://localhost:${DEFAULT_PORT}` },
+      writable: true,
+    });
+
+    MeasureWebApp = (await import("../webapp/MeasureWebApp")).MeasureWebApp;
+  });
+
+  afterAll(() => {
+    global.window = originalWindow;
+  });
+
+  const expectWebAppToBeOpened = () =>
+    waitFor(() => expect(open).toHaveBeenCalledWith(`http://localhost:${DEFAULT_PORT}`));
+
+  const setupCli = (customPort = DEFAULT_PORT) => {
+    const { lastFrame, unmount } = cliRender(<ServerApp port={customPort} />);
+    const closeCli = async () => {
+      unmount();
+      // Seems like we need to wait for the useEffect cleanup to happen
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    };
+
+    return {
+      closeCli,
+      expectCliOutput: () => expect(removeCLIColors(lastFrame())),
+    };
+  };
+
+  const setupWebApp = () => {
+    const view = webRender(<MeasureWebApp />);
+
+    return {
+      closeWebApp: view.unmount,
+      expectWebAppToMatchSnapshot: (snapshotName: string) => matchSnapshot(view, snapshotName),
+    };
+  };
+
+  test("it displays measures", async () => {
+    const { closeCli, expectCliOutput } = setupCli();
+    const { closeWebApp, expectWebAppToMatchSnapshot } = setupWebApp();
+    await expectWebAppToBeOpened();
+
+    expectCliOutput().toMatchInlineSnapshot(`
+      "
+       Flashlight web app running on: http://localhost:${DEFAULT_PORT}
+      "
+    `);
+
+    // Autodetect app id com.example
+    await screen.findByText("Auto-Detect");
+    fireEvent.click(screen.getByText("Auto-Detect"));
+    await screen.findByDisplayValue("com.example");
+
+    // Start measuring
+    fireEvent.click(screen.getByText("Start Measuring"));
+
+    // Initial report screen with no measures
+    await screen.findByText("Average Test Runtime");
+    expectWebAppToMatchSnapshot("Web app with no measures yet");
+
+    // Simulate measures being emitted on the device
+    act(() => emitMeasures());
+
+    // We should now see 1000ms of measures: 3 measures at 0/500/1000ms
+    await screen.findByText("1000 ms");
+    // Find the score!
+    screen.getByText("47");
+
+    // expand threads
+    await screen.findByText("Other threads");
+    fireEvent.click(screen.getByText("Other threads"));
+
+    expectWebAppToMatchSnapshot("Web app with measures and threads opened");
+
+    // Stop measuring
+    fireEvent.click(screen.getByText("Stop Measuring"));
+    await waitFor(() => expect(aTraceMock.kill).toHaveBeenCalled());
+    await waitFor(() => expect(perfProfilerMock.kill).toHaveBeenCalled());
+
+    // Close apps
+
+    await closeCli();
+    closeWebApp();
+  });
+
+  test("it handles the --port flag correctly", async () => {
+    const customPort = 1001;
+
+    const { closeCli, expectCliOutput } = setupCli(customPort);
+
+    const { closeWebApp } = setupWebApp();
+
+    const expectWebAppToBeOpenedOnCustomPort = () =>
+      waitFor(() => expect(open).toHaveBeenCalledWith(`http://localhost:${customPort}`));
+    await expectWebAppToBeOpenedOnCustomPort();
+
+    expectCliOutput().toMatchInlineSnapshot(`
+    "
+     Flashlight web app running on: http://localhost:${customPort}
+    "
+  `);
+
+    // Close apps
+    await closeCli();
+    closeWebApp();
+  });
+});

package/src/__tests__/server/ServerApp.test.ts

@@ -0,0 +1,49 @@
+import supertest from "supertest";
+import express from "express";
+import fs from "fs";
+
+import { createExpressApp } from "../../server/ServerApp";
+
+jest.mock("fs", () => ({
+  promises: {
+    readFile: jest.fn(),
+  },
+}));
+
+describe("ServerApp", () => {
+  let app: express.Express;
+
+  beforeAll(() => {
+    jest.spyOn(express, "static").mockImplementation(() => (req, res, next) => next());
+  });
+
+  const FLASHLIGHT_DATA_PLACEHOLDER =
+    'window.__FLASHLIGHT_DATA__ = { socketServerUrl: "http://localhost:4000" };';
+
+  beforeEach(() => {
+    (fs.promises.readFile as jest.Mock).mockResolvedValue(
+      `<html><script>${FLASHLIGHT_DATA_PLACEHOLDER}</script></html>`
+    );
+
+    app = createExpressApp({
+      port: 9999,
+    });
+  });
+
+  describe("GET /", () => {
+    it("injects FlashlightData into index.html", async () => {
+      const response = await supertest(app).get("/");
+
+      expect(response.statusCode).toBe(200);
+      expect(response.text).toContain(
+        `window.__FLASHLIGHT_DATA__ = { socketServerUrl: "http://localhost:9999" };`
+      );
+    });
+  });
+
+  test("index.html contains the FlashlightData placeholder", async () => {
+    const fsPromises = jest.requireActual("fs").promises;
+    const fileContent = await fsPromises.readFile(`${__dirname}/../../webapp/index.html`, "utf8");
+    expect(fileContent).toContain(FLASHLIGHT_DATA_PLACEHOLDER);
+  });
+});

package/src/__tests__/utils/removeCLIColors.ts

@@ -0,0 +1,5 @@
+// from https://stackoverflow.com/questions/17998978/removing-colors-from-output
+// Remove colors so that snapshots are not polluted
+export const removeCLIColors = (str?: string) =>
+  // eslint-disable-next-line no-control-regex
+  str?.replace(/\x1B\[([0-9]{1,3}(;[0-9]{1,2};?)?)?[mGK]/g, "");

package/src/__tests__/webapp/socket.test.ts

@@ -0,0 +1,37 @@
+import { io } from "socket.io-client";
+
+jest.mock("socket.io-client", () => {
+  return {
+    ...jest.requireActual("socket.io-client"),
+    io: jest.fn().mockImplementation(() => {
+      return {
+        on: jest.fn(),
+        close: jest.fn(),
+      };
+    }),
+  };
+});
+
+let originalWindow: Window & typeof globalThis;
+
+describe("socket", () => {
+  beforeAll(async () => {
+    originalWindow = global.window;
+
+    global.window = Object.create(window);
+    Object.defineProperty(window, "__FLASHLIGHT_DATA__", {
+      value: { socketServerUrl: "http://localhost:9999" },
+      writable: true,
+    });
+  });
+
+  afterAll(() => {
+    // Restore the original window object
+    global.window = originalWindow;
+  });
+
+  it("sets the expected socket server URL", async () => {
+    await import("../../webapp/socket");
+    expect(io).toHaveBeenCalledWith("http://localhost:9999");
+  });
+});

package/src/common/types/index.d.ts

@@ -0,0 +1,3 @@
+export interface FlashlightData {
+  socketServerUrl: string;
+}

package/src/common/useLogSocketEvents.ts

@@ -0,0 +1,17 @@
+import { Logger } from "@clary-so/logger";
+import { useEffect } from "react";
+import type { Socket } from "socket.io";
+import type { Socket as ClientSocket } from "socket.io-client";
+
+export const useLogSocketEvents = (socket: Socket | ClientSocket) => {
+  useEffect(() => {
+    function onSocketEvent(event: string, ...args: unknown[]) {
+      Logger.debug(`Received socket event: ${event} with ${JSON.stringify(args)}`);
+    }
+    socket.onAny(onSocketEvent);
+
+    return () => {
+      socket.offAny(onSocketEvent);
+    };
+  }, [socket]);
+};

package/src/server/ServerApp.tsx

@@ -0,0 +1,103 @@
+import express from "express";
+import http from "http";
+import { promises as fs } from "fs";
+import path from "path";
+import cors from "cors";
+import { Server } from "socket.io";
+import { open } from "@clary-so/shell";
+import React, { useEffect, useState } from "react";
+import { SocketType, SocketServer } from "./socket/socketInterface";
+import { HostAndPortInfo } from "./components/HostAndPortInfo";
+import { getWebAppUrl } from "./constants";
+import { ServerSocketConnectionApp } from "./ServerSocketConnectionApp";
+import { render, useInput } from "ink";
+import { profiler } from "@clary-so/profiler";
+
+const pathToDist = path.join(__dirname, "../../dist");
+
+export const createExpressApp = ({ port }: { port: number }) => {
+  const app = express();
+  app.use(cors({ origin: true }));
+
+  app.get("/", async (_, res) => {
+    try {
+      const indexHtml = path.join(pathToDist, "index.html");
+      let data = await fs.readFile(indexHtml, "utf8");
+      data = data.replace("localhost:4000", `localhost:${port}`);
+
+      res.send(data);
+    } catch (err) {
+      res.status(500).send("Error loading the page");
+    }
+  });
+
+  // Serve the webapp folder built by parcel
+  app.use(express.static(pathToDist));
+  return app;
+};
+
+const allowOnlyOneSocketClient = (io: SocketServer, onConnect: (socket: SocketType) => void) => {
+  let currentSocketClient: SocketType | null = null;
+  io.on("connection", (socket) => {
+    currentSocketClient?.disconnect(true);
+    onConnect(socket);
+    currentSocketClient = socket;
+  });
+};
+
+const useCleanupOnManualExit = () => {
+  useInput(async (input) => {
+    switch (input) {
+      case "q":
+      case "c":
+        profiler.cleanup();
+        process.exit();
+    }
+  });
+};
+
+interface ServerAppProps {
+  port: number;
+}
+
+export const ServerApp = ({ port }: ServerAppProps) => {
+  const [socket, setSocket] = useState<SocketType | null>(null);
+  const webAppUrl = getWebAppUrl(port);
+  useEffect(() => {
+    const app = createExpressApp({ port });
+
+    const server = http.createServer(app);
+    const io: SocketServer = new Server(server, {
+      cors: {
+        origin: [webAppUrl],
+        methods: ["GET", "POST"],
+      },
+    });
+
+    allowOnlyOneSocketClient(io, setSocket);
+
+    server.listen(port, () => {
+      open(webAppUrl);
+    });
+
+    return () => {
+      server.close();
+      io.close();
+    };
+  }, [port, webAppUrl]);
+  useCleanupOnManualExit();
+
+  return socket ? (
+    <ServerSocketConnectionApp socket={socket} url={webAppUrl} />
+  ) : (
+    <HostAndPortInfo url={webAppUrl} />
+  );
+};
+
+export const runServerApp = (port: number) => {
+  render(
+    <ServerApp port={port} />,
+    // handle it ourselves in the profiler to kill child processes thanks to useCleanupOnManualExit
+    { exitOnCtrlC: false }
+  );
+};

package/src/server/ServerSocketConnectionApp.tsx

@@ -0,0 +1,82 @@
+import { PerformanceMeasurer } from "@clary-so/e2e";
+import { Logger } from "@clary-so/logger";
+import { profiler } from "@clary-so/profiler";
+import { Measure } from "@clary-so/types";
+import React, { useCallback, useEffect } from "react";
+import { HostAndPortInfo } from "./components/HostAndPortInfo";
+import { SocketType, SocketEvents } from "./socket/socketInterface";
+import { useSocketState, updateMeasuresReducer, addNewResultReducer } from "./socket/socketState";
+import { useBundleIdControls } from "./useBundleIdControls";
+import { useLogSocketEvents } from "../common/useLogSocketEvents";
+
+export const ServerSocketConnectionApp = ({ socket, url }: { socket: SocketType; url: string }) => {
+  useLogSocketEvents(socket);
+  const [state, setState] = useSocketState(socket);
+  const performanceMeasureRef = React.useRef<PerformanceMeasurer | null>(null);
+
+  const stop = useCallback(async () => {
+    performanceMeasureRef.current?.forceStop();
+    setState({
+      isMeasuring: false,
+    });
+  }, [setState]);
+
+  useBundleIdControls(socket, setState, stop);
+
+  useEffect(() => {
+    const updateMeasures = (measures: Measure[]) =>
+      setState((state) => updateMeasuresReducer(state, measures));
+    const addNewResult = (bundleId: string) =>
+      setState((state) =>
+        addNewResultReducer(
+          state,
+          `${bundleId}${state.results.length > 0 ? ` (${state.results.length + 1})` : ""}`,
+          profiler.detectDeviceRefreshRate()
+        )
+      );
+
+    socket.on(SocketEvents.START, async () => {
+      setState({
+        isMeasuring: true,
+      });
+
+      if (!state.bundleId) {
+        Logger.error("No bundle id provided");
+        return;
+      }
+
+      profiler.installProfilerOnDevice();
+      performanceMeasureRef.current = new PerformanceMeasurer(state.bundleId, {
+        recordOptions: {
+          record: false,
+        },
+      });
+
+      addNewResult(state.bundleId);
+      performanceMeasureRef.current?.start(() =>
+        updateMeasures(performanceMeasureRef.current?.measures || [])
+      );
+    });
+
+    socket.on(SocketEvents.STOP, stop);
+
+    socket.on(SocketEvents.RESET, () => {
+      stop();
+      setState({
+        results: [],
+      });
+    });
+
+    return () => {
+      socket.removeAllListeners(SocketEvents.START);
+      socket.removeAllListeners(SocketEvents.STOP);
+      socket.removeAllListeners(SocketEvents.RESET);
+    };
+  }, [setState, socket, state.bundleId, stop]);
+
+  return (
+    <>
+      <HostAndPortInfo url={url} />
+    </>
+  );
+};

package/src/server/bin.tsx

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+import { program } from "commander";
+import { DEFAULT_PORT } from "./constants";
+
+program
+  .command("measure")
+  .summary("Measure performance of an Android app")
+  .description(
+    `Measure performance of an Android app. Display the results live in a web app.
+
+Main usage:
+flashlight measure`
+  )
+  .option("-p, --port [port]", "Specify the port number for the server")
+  .action(async (options) => {
+    const port = Number(options.port) || DEFAULT_PORT;
+    // measure command can be a bit slow to load since we run ink, express and socket.io, so lazy load it
+    const { runServerApp } = await import("./ServerApp");
+    runServerApp(port);
+  });
+
+program.parse();

package/src/server/components/HostAndPortInfo.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export const HostAndPortInfo = ({ url }: { url: string }) => (
+  <Box padding={1} flexDirection="column">
+    <Text>
+      <Text bold>Flashlight web app running on: </Text>
+      <Text color={"blue"}>{url}</Text>
+    </Text>
+  </Box>
+);

package/src/server/constants.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_PORT = 4000;
+
+export const getWebAppUrl = (port: number = DEFAULT_PORT) => {
+  if (process.env.DEVELOPMENT_MODE === "true") {
+    return "http://localhost:1234";
+  }
+  return `http://localhost:${port}`;
+};

package/src/server/socket/socketInterface.ts

@@ -0,0 +1,53 @@
+import { TestCaseResult } from "@clary-so/types";
+import { Server, Socket } from "socket.io";
+
+export interface SocketData {
+  isMeasuring: boolean;
+  bundleId: string | null;
+  results: TestCaseResult[];
+}
+
+export interface ServerToClientEvents {
+  updateState: (state: SocketData) => void;
+  sendError(error: unknown): void;
+}
+
+export interface ClientToServerEvents {
+  start: () => void;
+  stop: () => void;
+  reset: () => void;
+  autodetectBundleId: () => void;
+  setBundleId: (bundleId: string) => void;
+  autodetectRefreshRate: () => void;
+}
+
+interface InterServerEvents {
+  ping: () => void;
+}
+
+export type SocketServer = Server<
+  ClientToServerEvents,
+  ServerToClientEvents,
+  InterServerEvents,
+  SocketData
+>;
+
+export type SocketType = Socket<
+  ClientToServerEvents,
+  ServerToClientEvents,
+  InterServerEvents,
+  SocketData
+>;
+
+export enum SocketEvents {
+  START = "start",
+  STOP = "stop",
+  RESET = "reset",
+  AUTODETECT_BUNDLE_ID = "autodetectBundleId",
+  SET_BUNDLE_ID = "setBundleId",
+  UPDATE_STATE = "updateState",
+  SEND_ERROR = "sendError",
+  PING = "ping",
+  CONNECT = "connect",
+  DISCONNECT = "disconnect",
+}

package/src/server/socket/socketState.ts

@@ -0,0 +1,66 @@
+import { Measure, POLLING_INTERVAL } from "@clary-so/types";
+import { useState, useEffect } from "react";
+import { SocketType, SocketData, SocketEvents } from "./socketInterface";
+
+export const useSocketState = (socket: SocketType) => {
+  const [state, _setState] = useState<SocketData>({
+    isMeasuring: false,
+    bundleId: null,
+    results: [],
+  });
+
+  const setState = (
+    newState: Partial<SocketData> | ((previousState: SocketData) => SocketData)
+  ) => {
+    _setState(
+      typeof newState === "function"
+        ? newState
+        : (previousState) => ({
+            ...previousState,
+            ...newState,
+          })
+    );
+  };
+
+  useEffect(() => {
+    socket.emit(SocketEvents.UPDATE_STATE, state);
+  }, [state, socket]);
+
+  return [state, setState] as const;
+};
+
+export const updateMeasuresReducer = (state: SocketData, measures: Measure[]): SocketData => ({
+  ...state,
+  results: [
+    ...state.results.slice(0, state.results.length - 1),
+    {
+      ...state.results[state.results.length - 1],
+      iterations: [
+        {
+          measures,
+          time: (measures.length || 0) * POLLING_INTERVAL,
+          status: "SUCCESS",
+        },
+      ],
+    },
+  ],
+});
+
+export const addNewResultReducer = (
+  state: SocketData,
+  name: string,
+  refreshRate: number
+): SocketData => ({
+  ...state,
+  results: [
+    ...state.results,
+    {
+      name,
+      iterations: [],
+      status: "SUCCESS",
+      specs: {
+        refreshRate,
+      },
+    },
+  ],
+});

package/src/server/useBundleIdControls.ts

@@ -0,0 +1,38 @@
+import { profiler } from "@clary-so/profiler";
+import { useEffect } from "react";
+import { SocketType, SocketData, SocketEvents } from "./socket/socketInterface";
+
+export const useBundleIdControls = (
+  socket: SocketType,
+  setState: (state: Partial<SocketData>) => void,
+  stop: () => void
+) => {
+  useEffect(() => {
+    socket.on(SocketEvents.SET_BUNDLE_ID, (bundleId) => {
+      setState({
+        bundleId,
+      });
+    });
+
+    socket.on(SocketEvents.AUTODETECT_BUNDLE_ID, () => {
+      stop();
+
+      try {
+        const bundleId = profiler.detectCurrentBundleId();
+        setState({
+          bundleId,
+        });
+      } catch (error) {
+        socket.emit(
+          SocketEvents.SEND_ERROR,
+          error instanceof Error ? error.message : "unknown error"
+        );
+      }
+    });
+
+    return () => {
+      socket.removeAllListeners(SocketEvents.SET_BUNDLE_ID);
+      socket.removeAllListeners(SocketEvents.AUTODETECT_BUNDLE_ID);
+    };
+  }, [setState, socket, stop]);
+};

package/src/webapp/MeasureWebApp.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  Button,
+  setThemeAtRandom,
+  IterationsReporterView,
+  getThemeColorPalette,
+} from "@clary-so/web-reporter-ui";
+
+import { BundleIdSelector } from "./components/BundleIdSelector";
+import { StartButton } from "./components/StartButton";
+import { Delete } from "@mui/icons-material";
+import { AppBar } from "./components/AppBar";
+import { useMeasures } from "./useMeasures";
+import { SocketState } from "./components/SocketState";
+
+setThemeAtRandom();
+
+export const MeasureWebApp = () => {
+  const { autodetect, bundleId, start, stop, results, isMeasuring, reset, setBundleId } =
+    useMeasures();
+
+  return (
+    <div className="bg-light-charcoal h-full text-black">
+      <SocketState />
+      <AppBar>
+        <BundleIdSelector autodetect={autodetect} bundleId={bundleId} onChange={setBundleId} />
+        {bundleId ? (
+          <div className="flex flex-row gap-2">
+            <StartButton start={start} stop={stop} isMeasuring={isMeasuring} />
+            {/* It's assumed that the color palette is fixed randomly by setThemeAtRandom
+             and is an array of >= 4 colors */}
+            <div data-theme={getThemeColorPalette()[1]}>
+              <Button onClick={reset} icon={<Delete />}>
+                Reset
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </AppBar>
+      <IterationsReporterView results={results} />
+    </div>
+  );
+};