feat: improve provider testing (#1280)

apps/web/.env.local.template

@@ -14,3 +14,4 @@ ENABLE_IDB_PROVIDER=1
 PREFETCH_WORKSPACE=1
 ENABLE_BC_PROVIDER=1
 EXPOSE_INTERNAL=1
+ENABLE_DEBUG_PAGE=

apps/web/next.config.mjs

@@ -108,6 +108,7 @@ const nextConfig = {
     return profile;
   },
   basePath: process.env.NEXT_BASE_PATH,
+  pageExtensions: [...(preset.enableDebugPage ? ['tsx', 'dev.tsx'] : ['tsx'])],
 };
 
 const baseDir = process.env.LOCAL_BLOCK_SUITE ?? '/';

apps/web/preset.config.mjs

@@ -7,5 +7,6 @@ const config = {
   ),
   prefetchWorkspace: Boolean(process.env.PREFETCH_WORKSPACE ?? '1'),
   exposeInternal: Boolean(process.env.EXPOSE_INTERNAL ?? '1'),
+  enableDebugPage: Boolean(process.env.ENABLE_DEBUG_PAGE ?? false),
 };
 export default config;

apps/web/src/blocksuite/logger.ts

@@ -0,0 +1,3 @@
+import { DebugLogger } from '@affine/debug';
+
+export const providerLogger = new DebugLogger('provider');

apps/web/src/blocksuite/providers/broad-cast-channel/index.ts

@@ -6,6 +6,7 @@ import {
 } from 'y-protocols/awareness';
 
 import { BlockSuiteWorkspace, BroadCastChannelProvider } from '../../../shared';
+import { providerLogger } from '../../logger';
 import {
   AwarenessChanges,
   BroadcastChannelMessageEvent,
@@ -83,7 +84,10 @@ export const createBroadCastChannelProvider = (
           onmessage: handleBroadcastChannelMessage,
         }
       );
-      console.log('connect broadcast channel', blockSuiteWorkspace.room);
+      providerLogger.info(
+        'connect broadcast channel',
+        blockSuiteWorkspace.room
+      );
       const docDiff = Y.encodeStateVector(doc);
       broadcastChannel.postMessage(['doc:diff', docDiff, awareness.clientID]);
       const docUpdateV2 = Y.encodeStateAsUpdate(doc);
@@ -98,7 +102,10 @@ export const createBroadCastChannelProvider = (
     },
     disconnect: () => {
       assertExists(broadcastChannel);
-      console.log('disconnect broadcast channel', blockSuiteWorkspace.room);
+      providerLogger.info(
+        'disconnect broadcast channel',
+        blockSuiteWorkspace.room
+      );
       doc.off('update', handleDocUpdate);
       awareness.off('update', handleAwarenessUpdate);
       broadcastChannel.close();

apps/web/src/blocksuite/providers/index.ts

@@ -8,6 +8,7 @@ import {
   LocalIndexedDBProvider,
 } from '../../shared';
 import { apis } from '../../shared/apis';
+import { providerLogger } from '../logger';
 import { createBroadCastChannelProvider } from './broad-cast-channel';
 
 const createWebSocketProvider = (
@@ -18,7 +19,8 @@ const createWebSocketProvider = (
     flavour: 'affine-websocket',
     cleanup: () => {
       assertExists(webSocketProvider);
-      webSocketProvider?.destroy();
+      webSocketProvider.destroy();
+      webSocketProvider = null;
     },
     connect: () => {
       const wsUrl = `${
@@ -34,15 +36,17 @@ const createWebSocketProvider = (
           awareness: blockSuiteWorkspace.awarenessStore.awareness,
           // we maintain broadcast channel by ourselves
           disableBc: true,
+          connect: false,
         }
       );
-      console.log('connect', webSocketProvider.roomname);
+      providerLogger.info('connect', webSocketProvider.roomname);
       webSocketProvider.connect();
     },
     disconnect: () => {
       assertExists(webSocketProvider);
-      console.log('disconnect', webSocketProvider.roomname);
-      webSocketProvider?.disconnect();
+      providerLogger.info('disconnect', webSocketProvider.roomname);
+      webSocketProvider.destroy();
+      webSocketProvider = null;
     },
   };
 };
@@ -58,7 +62,10 @@ const createIndexedDBProvider = (
       indexdbProvider.clearData();
     },
     connect: () => {
-      console.info('connect indexeddb provider', blockSuiteWorkspace.room);
+      providerLogger.info(
+        'connect indexeddb provider',
+        blockSuiteWorkspace.room
+      );
       indexdbProvider = new IndexeddbPersistence(
         blockSuiteWorkspace.room as string,
         blockSuiteWorkspace.doc
@@ -66,7 +73,10 @@ const createIndexedDBProvider = (
     },
     disconnect: () => {
       assertExists(indexdbProvider);
-      console.info('disconnect indexeddb provider', blockSuiteWorkspace.room);
+      providerLogger.info(
+        'disconnect indexeddb provider',
+        blockSuiteWorkspace.room
+      );
       indexdbProvider.destroy();
       indexdbProvider = null;
     },

apps/web/src/pages/_debug/README.md

@@ -0,0 +1,3 @@
+# `_Debug` Pages
+
+These pages are only available in development mode.

apps/web/src/pages/_debug/broadcast.dev.tsx

@@ -0,0 +1,70 @@
+import { Button, toast } from '@affine/component';
+import { DebugLogger } from '@affine/debug';
+import { nanoid } from '@blocksuite/store';
+import { Typography } from '@mui/material';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { createBroadCastChannelProvider } from '../../blocksuite/providers';
+import PageList from '../../components/blocksuite/block-suite-page-list/page-list';
+import { StyledPage, StyledWrapper } from '../../layouts/styles';
+import { BroadCastChannelProvider } from '../../shared';
+import { createEmptyBlockSuiteWorkspace } from '../../utils';
+
+const logger = new DebugLogger('broadcast');
+
+declare global {
+  // eslint-disable-next-line no-var
+  var currentBroadCastChannel: BroadCastChannelProvider | undefined;
+}
+
+const BroadcastPage: React.FC = () => {
+  const blockSuiteWorkspace = useMemo(
+    () => createEmptyBlockSuiteWorkspace('broadcast-test'),
+    []
+  );
+  const [provider, setProvider] = useState<BroadCastChannelProvider | null>(
+    null
+  );
+  useEffect(() => {
+    globalThis.currentBlockSuiteWorkspace = blockSuiteWorkspace;
+  }, [blockSuiteWorkspace]);
+  useEffect(() => {
+    const provider = createBroadCastChannelProvider(blockSuiteWorkspace);
+    setProvider(provider);
+    globalThis.currentBroadCastChannel = provider;
+    provider.connect();
+    return () => {
+      provider.disconnect();
+      globalThis.currentBroadCastChannel = undefined;
+      setProvider(null);
+    };
+  }, [blockSuiteWorkspace]);
+  if (!provider) {
+    return null;
+  }
+  return (
+    <StyledPage>
+      <StyledWrapper>
+        <Typography variant="h5">Broadcast Provider Test</Typography>
+        <Button
+          type="primary"
+          data-testid="create-page"
+          onClick={() => {
+            logger.info('create page');
+            blockSuiteWorkspace.createPage(nanoid());
+          }}
+        >
+          Create Page
+        </Button>
+        <PageList
+          blockSuiteWorkspace={blockSuiteWorkspace}
+          onClickPage={() => {
+            toast('do nothing');
+          }}
+        />
+      </StyledWrapper>
+    </StyledPage>
+  );
+};
+
+export default BroadcastPage;

apps/web/src/utils/index.ts

@@ -30,6 +30,7 @@ export const createEmptyBlockSuiteWorkspace = (
 ) => {
   return new BlockSuiteWorkspace({
     room,
+    isSSR: typeof window === 'undefined',
     blobOptionsGetter,
   })
     .register(builtInSchemas)

playwright.config.ts

@@ -38,6 +38,7 @@ const config: PlaywrightTestConfig = {
     reuseExistingServer: !process.env.CI,
     env: {
       COVERAGE: process.env.COVERAGE || 'false',
+      ENABLE_DEBUG_PAGE: '1',
     },
   },
 

tests/debug-page-broadcast.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+
+import { test } from './libs/playwright';
+
+test.describe('Debug page broadcast', () => {
+  test('should broadcast a message to all debug pages', async ({
+    page,
+    context,
+  }) => {
+    await page.goto('http://localhost:8080/_debug/broadcast');
+    const page2 = await context.newPage();
+    await page2.goto('http://localhost:8080/_debug/broadcast');
+    await page.waitForSelector('#__next');
+    await page2.waitForSelector('#__next');
+    await page.click('[data-testid="create-page"]');
+    expect(await page.locator('tr').count()).toBe(2);
+    expect(await page2.locator('tr').count()).toBe(2);
+    await page2.click('[data-testid="create-page"]');
+    expect(await page.locator('tr').count()).toBe(3);
+    expect(await page2.locator('tr').count()).toBe(3);
+  });
+});