From 2a955d13910e1c3fe1168ed16ff1e4338f10d2e0 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Thu, 2 Mar 2023 20:00:56 -0600 Subject: [PATCH] feat: improve provider testing (#1280) --- apps/web/.env.local.template | 1 + apps/web/next.config.mjs | 1 + apps/web/preset.config.mjs | 1 + apps/web/src/blocksuite/logger.ts | 3 + .../providers/broad-cast-channel/index.ts | 11 ++- apps/web/src/blocksuite/providers/index.ts | 22 ++++-- apps/web/src/pages/_debug/README.md | 3 + apps/web/src/pages/_debug/broadcast.dev.tsx | 70 +++++++++++++++++++ apps/web/src/utils/index.ts | 1 + playwright.config.ts | 1 + tests/debug-page-broadcast.spec.ts | 22 ++++++ 11 files changed, 128 insertions(+), 8 deletions(-) create mode 100644 apps/web/src/blocksuite/logger.ts create mode 100644 apps/web/src/pages/_debug/README.md create mode 100644 apps/web/src/pages/_debug/broadcast.dev.tsx create mode 100644 tests/debug-page-broadcast.spec.ts diff --git a/apps/web/.env.local.template b/apps/web/.env.local.template index f7c16ce930..dc4f6101c2 100644 --- a/apps/web/.env.local.template +++ b/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= diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index 1e3753d3f9..d3fedd774f 100644 --- a/apps/web/next.config.mjs +++ b/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 ?? '/'; diff --git a/apps/web/preset.config.mjs b/apps/web/preset.config.mjs index b4e85e47a1..3f59a05675 100644 --- a/apps/web/preset.config.mjs +++ b/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; diff --git a/apps/web/src/blocksuite/logger.ts b/apps/web/src/blocksuite/logger.ts new file mode 100644 index 0000000000..51fc38af06 --- /dev/null +++ b/apps/web/src/blocksuite/logger.ts @@ -0,0 +1,3 @@ +import { DebugLogger } from '@affine/debug'; + +export const providerLogger = new DebugLogger('provider'); diff --git a/apps/web/src/blocksuite/providers/broad-cast-channel/index.ts b/apps/web/src/blocksuite/providers/broad-cast-channel/index.ts index 6c23d3a95b..1050df4bdb 100644 --- a/apps/web/src/blocksuite/providers/broad-cast-channel/index.ts +++ b/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(); diff --git a/apps/web/src/blocksuite/providers/index.ts b/apps/web/src/blocksuite/providers/index.ts index 7c6f673156..d08575f810 100644 --- a/apps/web/src/blocksuite/providers/index.ts +++ b/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; }, diff --git a/apps/web/src/pages/_debug/README.md b/apps/web/src/pages/_debug/README.md new file mode 100644 index 0000000000..d8055e6a43 --- /dev/null +++ b/apps/web/src/pages/_debug/README.md @@ -0,0 +1,3 @@ +# `_Debug` Pages + +These pages are only available in development mode. diff --git a/apps/web/src/pages/_debug/broadcast.dev.tsx b/apps/web/src/pages/_debug/broadcast.dev.tsx new file mode 100644 index 0000000000..8bdddee48a --- /dev/null +++ b/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( + 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 ( + + + Broadcast Provider Test + + { + toast('do nothing'); + }} + /> + + + ); +}; + +export default BroadcastPage; diff --git a/apps/web/src/utils/index.ts b/apps/web/src/utils/index.ts index 86605eeb88..dfde32aab9 100644 --- a/apps/web/src/utils/index.ts +++ b/apps/web/src/utils/index.ts @@ -30,6 +30,7 @@ export const createEmptyBlockSuiteWorkspace = ( ) => { return new BlockSuiteWorkspace({ room, + isSSR: typeof window === 'undefined', blobOptionsGetter, }) .register(builtInSchemas) diff --git a/playwright.config.ts b/playwright.config.ts index d2a1733145..9f8ada1ae2 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -38,6 +38,7 @@ const config: PlaywrightTestConfig = { reuseExistingServer: !process.env.CI, env: { COVERAGE: process.env.COVERAGE || 'false', + ENABLE_DEBUG_PAGE: '1', }, }, diff --git a/tests/debug-page-broadcast.spec.ts b/tests/debug-page-broadcast.spec.ts new file mode 100644 index 0000000000..a4cbc5f975 --- /dev/null +++ b/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); + }); +});