First-cut new session, connection, and testing model page E2E tests (#583)

* Add timeout for GitHub workflow.
* New session/page tests.
* Upgraded microbit-connection lib to latest.
* Sets up cookies for triggering mocking of devices for E2E.
* Mock of usb, bluetooth, and radio bridge connection
* Bluetooth connection E2E test - happy flow and device not selected flow.
* Radio bridge connection E2E test - happy flow and device not selected flow.
* Initial testing model page and MakeCode editor test.

Author: microbit-grace

.github/workflows/build.yml

@@ -13,6 +13,7 @@ concurrency:
 
 jobs:
   build:
+    timeout-minutes: 10
     runs-on: ubuntu-latest
     permissions:
       contents: read

package-lock.json

@@ -62,7 +62,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@microbit/makecode-embed": "^0.1.0",
-    "@microbit/microbit-connection": "^0.0.0-alpha.33",
+    "@microbit/microbit-connection": "^0.0.0-alpha.35",
     "@microbit/ml-header-generator": "^0.4.3",
     "@microbit/smoothie": "^1.37.0-microbit.2",
     "@tensorflow/tfjs": "^4.20.0",

package.json

@@ -7,15 +7,21 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { ChakraProvider, useToast } from "@chakra-ui/react";
 import { MakeCodeFrameDriver } from "@microbit/makecode-embed/react";
+import {
+  createRadioBridgeConnection,
+  createWebBluetoothConnection,
+  createWebUSBConnection,
+} from "@microbit/microbit-connection";
 import React, { ReactNode, useEffect, useMemo, useRef } from "react";
 import { useIntl } from "react-intl";
 import {
+  createBrowserRouter,
   Outlet,
   RouterProvider,
   ScrollRestoration,
-  createBrowserRouter,
   useNavigate,
 } from "react-router-dom";
+import "theme-package/fonts/fonts.css";
 import { BufferedDataProvider } from "./buffered-data-hooks";
 import EditCodeDialog from "./components/EditCodeDialog";
 import ErrorBoundary from "./components/ErrorBoundary";
@@ -25,9 +31,14 @@ import { ConnectProvider } from "./connect-actions-hooks";
 import { ConnectStatusProvider } from "./connect-status-hooks";
 import { ConnectionStageProvider } from "./connection-stage-hooks";
 import { deployment, useDeployment } from "./deployment";
+import { MockWebBluetoothConnection } from "./device/mockBluetooth";
+import { MockRadioBridgeConnection } from "./device/mockRadioBridge";
+import { MockWebUSBConnection } from "./device/mockUsb";
 import { ProjectProvider } from "./hooks/project-hooks";
 import { LoggingProvider } from "./logging/logging-hooks";
+import { hasMakeCodeMlExtension } from "./makecode/utils";
 import TranslationProvider from "./messages/TranslationProvider";
+import { PostImportDialogState } from "./model";
 import CodePage from "./pages/CodePage";
 import DataSamplesPage from "./pages/DataSamplesPage";
 import HomePage from "./pages/HomePage";
@@ -43,16 +54,29 @@ import {
   createNewPageUrl,
   createTestingModelPageUrl,
 } from "./urls";
-import { hasMakeCodeMlExtension } from "./makecode/utils";
-import { PostImportDialogState } from "./model";
-import "theme-package/fonts/fonts.css";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
 }
 
+const isMockDeviceMode = () =>
+  // We use a cookie set from the e2e tests. Avoids having separate test and live builds.
+  Boolean(
+    document.cookie.split("; ").find((row) => row.startsWith("mockDevice="))
+  );
+
 const logging = deployment.logging;
 
+const usb = isMockDeviceMode()
+  ? new MockWebUSBConnection()
+  : createWebUSBConnection({ logging });
+const bluetooth = isMockDeviceMode()
+  ? new MockWebBluetoothConnection()
+  : createWebBluetoothConnection({ logging });
+const radioBridge = isMockDeviceMode()
+  ? new MockRadioBridgeConnection(usb)
+  : createRadioBridgeConnection(usb, { logging });
+
 const Providers = ({ children }: ProviderLayoutProps) => {
   const deployment = useDeployment();
   const { ConsentProvider } = deployment.compliance;
@@ -63,7 +87,7 @@ const Providers = ({ children }: ProviderLayoutProps) => {
           <ConsentProvider>
             <TranslationProvider>
               <ConnectStatusProvider>
-                <ConnectProvider>
+                <ConnectProvider {...{ usb, bluetooth, radioBridge }}>
                   <BufferedDataProvider>
                     <ConnectionStageProvider>
                       {children}

src/App.tsx

@@ -32,17 +32,17 @@ const ConnectContext = createContext<ConnectContextValue | null>(null);
 
 interface ConnectProviderProps {
   children: ReactNode;
+  usb: MicrobitWebUSBConnection;
+  bluetooth: MicrobitWebBluetoothConnection;
+  radioBridge: MicrobitRadioBridgeConnection;
 }
 
-export const ConnectProvider = ({ children }: ConnectProviderProps) => {
-  const usb = useRef(new MicrobitWebUSBConnection()).current;
-  const logging = useRef(useLogging()).current;
-  const bluetooth = useRef(
-    new MicrobitWebBluetoothConnection({ logging })
-  ).current;
-  const radioBridge = useRef(
-    new MicrobitRadioBridgeConnection(usb, { logging })
-  ).current;
+export const ConnectProvider = ({
+  children,
+  usb,
+  bluetooth,
+  radioBridge,
+}: ConnectProviderProps) => {
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
 
   useEffect(() => {

src/connect-actions-hooks.tsx

@@ -0,0 +1,81 @@
+import {
+  BoardVersion,
+  ConnectionStatus,
+  ConnectionStatusEvent,
+  DeviceConnectionEventMap,
+  LedMatrix,
+  MicrobitWebBluetoothConnection,
+  ServiceConnectionEventMap,
+  TypedEventTarget,
+} from "@microbit/microbit-connection";
+
+export class MockWebBluetoothConnection
+  extends TypedEventTarget<DeviceConnectionEventMap & ServiceConnectionEventMap>
+  implements MicrobitWebBluetoothConnection
+{
+  status: ConnectionStatus = ConnectionStatus.NO_AUTHORIZED_DEVICE;
+  private connectResults: ConnectionStatus[] = [];
+
+  constructor() {
+    super();
+    // Make globally available to allow e2e tests to configure interactions.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+    (window as any).mockBluetooth = this;
+  }
+  private setStatus(newStatus: ConnectionStatus) {
+    this.status = newStatus;
+    this.dispatchTypedEvent("status", new ConnectionStatusEvent(newStatus));
+  }
+
+  async initialize(): Promise<void> {
+    this.setStatus(ConnectionStatus.NO_AUTHORIZED_DEVICE);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+
+  dispose(): void {}
+
+  mockConnectResults(results: ConnectionStatus[]) {
+    this.connectResults = results;
+  }
+
+  async connect(): Promise<ConnectionStatus> {
+    if (this.connectResults.length > 0) {
+      for (const result of this.connectResults) {
+        this.setStatus(result);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      return this.status;
+    }
+    this.setStatus(ConnectionStatus.CONNECTING);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    this.setStatus(ConnectionStatus.CONNECTED);
+    return this.status;
+  }
+
+  getBoardVersion(): BoardVersion | undefined {
+    return "V2";
+  }
+
+  async disconnect(): Promise<void> {}
+  async serialWrite(_data: string): Promise<void> {}
+  setNameFilter(_name: string): void {}
+
+  clearDevice(): void {
+    this.setStatus(ConnectionStatus.NO_AUTHORIZED_DEVICE);
+  }
+
+  async getAccelerometerData(): Promise<undefined> {}
+  async getAccelerometerPeriod(): Promise<undefined> {}
+  async setAccelerometerPeriod(_value: number): Promise<void> {}
+  async setLedText(_text: string): Promise<void> {}
+  async getLedScrollingDelay(): Promise<undefined> {}
+  async setLedScrollingDelay(_delayInMillis: number): Promise<void> {}
+  async getLedMatrix(): Promise<undefined> {}
+  async setLedMatrix(_matrix: LedMatrix): Promise<void> {}
+  async getMagnetometerData(): Promise<undefined> {}
+  async getMagnetometerBearing(): Promise<undefined> {}
+  async getMagnetometerPeriod(): Promise<undefined> {}
+  async setMagnetometerPeriod(_value: number): Promise<void> {}
+  async triggerMagnetometerCalibration(): Promise<void> {}
+  async uartWrite(_data: Uint8Array): Promise<void> {}
+}

src/device/mockBluetooth.ts

@@ -0,0 +1,57 @@
+import {
+  BoardVersion,
+  ConnectionStatus,
+  ConnectionStatusEvent,
+  DeviceConnectionEventMap,
+  MicrobitRadioBridgeConnection,
+  MicrobitWebUSBConnection,
+  ServiceConnectionEventMap,
+  TypedEventTarget,
+} from "@microbit/microbit-connection";
+
+export class MockRadioBridgeConnection
+  extends TypedEventTarget<DeviceConnectionEventMap & ServiceConnectionEventMap>
+  implements MicrobitRadioBridgeConnection
+{
+  status: ConnectionStatus;
+
+  constructor(private delegate: MicrobitWebUSBConnection) {
+    super();
+    this.status = this.statusFromDelegate();
+  }
+
+  private statusFromDelegate(): ConnectionStatus {
+    return this.delegate.status == ConnectionStatus.CONNECTED
+      ? ConnectionStatus.DISCONNECTED
+      : this.delegate.status;
+  }
+
+  async initialize(): Promise<void> {}
+  dispose(): void {}
+  setRemoteDeviceId(_deviceId: number): void {}
+  async disconnect(): Promise<void> {}
+
+  private setStatus(newStatus: ConnectionStatus) {
+    this.status = newStatus;
+    this.dispatchTypedEvent("status", new ConnectionStatusEvent(newStatus));
+  }
+
+  async connect(): Promise<ConnectionStatus> {
+    await this.delegate.connect();
+    this.setStatus(ConnectionStatus.CONNECTING);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    this.setStatus(ConnectionStatus.CONNECTED);
+    return this.status;
+  }
+
+  getBoardVersion(): BoardVersion | undefined {
+    return this.delegate.getBoardVersion();
+  }
+
+  serialWrite(data: string): Promise<void> {
+    return this.delegate.serialWrite(data);
+  }
+  async clearDevice(): Promise<void> {
+    await this.delegate.clearDevice();
+  }
+}

src/device/mockRadioBridge.ts

@@ -0,0 +1,89 @@
+import {
+  AfterRequestDevice,
+  BeforeRequestDevice,
+  BoardVersion,
+  ConnectionStatus,
+  ConnectionStatusEvent,
+  DeviceConnectionEventMap,
+  FlashDataSource,
+  FlashEvent,
+  FlashOptions,
+  MicrobitWebUSBConnection,
+  SerialConnectionEventMap,
+  TypedEventTarget,
+} from "@microbit/microbit-connection";
+
+/**
+ * A mock USB connection used during end-to-end testing.
+ */
+export class MockWebUSBConnection
+  extends TypedEventTarget<DeviceConnectionEventMap & SerialConnectionEventMap>
+  implements MicrobitWebUSBConnection
+{
+  status: ConnectionStatus = ConnectionStatus.NO_AUTHORIZED_DEVICE;
+
+  private fakeDeviceId: number | undefined = 123;
+
+  constructor() {
+    super();
+    // Make globally available to allow e2e tests to configure interactions.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+    (window as any).mockUsb = this;
+    this.fakeDeviceId = Math.round(Math.random() * 1000);
+  }
+  async initialize(): Promise<void> {}
+  dispose(): void {}
+
+  mockDeviceId(deviceId: number | undefined) {
+    this.fakeDeviceId = deviceId;
+  }
+
+  private setStatus(newStatus: ConnectionStatus) {
+    this.status = newStatus;
+    this.dispatchTypedEvent("status", new ConnectionStatusEvent(newStatus));
+  }
+
+  async connect(): Promise<ConnectionStatus> {
+    this.dispatchTypedEvent("beforerequestdevice", new BeforeRequestDevice());
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    this.dispatchTypedEvent("afterrequestdevice", new AfterRequestDevice());
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    this.setStatus(ConnectionStatus.CONNECTED);
+    return this.status;
+  }
+
+  getDeviceId(): number | undefined {
+    return this.fakeDeviceId;
+  }
+
+  getBoardVersion(): BoardVersion | undefined {
+    return "V2";
+  }
+
+  async flash(
+    _dataSource: FlashDataSource,
+    options: FlashOptions
+  ): Promise<void> {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    options.progress(50, options.partial);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    options.progress(undefined, options.partial);
+    this.dispatchTypedEvent("flash", new FlashEvent());
+  }
+
+  async disconnect(): Promise<void> {}
+  async serialWrite(_data: string): Promise<void> {}
+
+  clearDevice(): void {
+    this.fakeDeviceId = undefined;
+    this.setStatus(ConnectionStatus.NO_AUTHORIZED_DEVICE);
+  }
+
+  setRequestDeviceExclusionFilters(
+    _exclusionFilters: USBDeviceFilter[]
+  ): void {}
+  getDevice(): USBDevice | undefined {
+    return undefined;
+  }
+  async softwareReset(): Promise<void> {}
+}