diff --git a/src/components/board-header/__tests__/board-header.test.tsx b/src/components/board-header/__tests__/board-header.test.tsx index 590ab5c2..e90f4a42 100644 --- a/src/components/board-header/__tests__/board-header.test.tsx +++ b/src/components/board-header/__tests__/board-header.test.tsx @@ -19,6 +19,7 @@ const testState = vi.hoisted(() => ({ offlineIconClass: 'offline', offlineTitle: 'Board offline', resolvedAddress: 'music-posting.eth' as string | undefined, + resolvedAddressListeners: [] as Array<() => void>, shouldShowSnow: false, stableCommunity: { address: 'music-posting.eth', @@ -89,7 +90,17 @@ vi.mock('../../../hooks/use-community-identifiers', () => ({ })); vi.mock('../../../hooks/use-resolved-community-address', () => ({ - useResolvedCommunityAddress: () => testState.resolvedAddress, + useResolvedCommunityAddress: () => + React.useSyncExternalStore( + (listener) => { + testState.resolvedAddressListeners.push(listener); + return () => { + testState.resolvedAddressListeners = testState.resolvedAddressListeners.filter((candidate) => candidate !== listener); + }; + }, + () => testState.resolvedAddress, + () => testState.resolvedAddress, + ), })); vi.mock('../../../hooks/use-is-mobile', () => ({ @@ -136,6 +147,7 @@ describe('BoardHeader', () => { testState.offlineIconClass = 'offline'; testState.offlineTitle = 'Board offline'; testState.resolvedAddress = 'music-posting.eth'; + testState.resolvedAddressListeners = []; testState.shouldShowSnow = false; testState.stableCommunity = { address: 'music-posting.eth', @@ -203,6 +215,21 @@ describe('BoardHeader', () => { expect(container.querySelector('img')?.getAttribute('src')).toBe('banner-a.png'); }); + it('keeps the banner stable while a directory route resolves different board candidates', async () => { + mathRandomSpy.mockReturnValueOnce(0).mockReturnValue(0.75); + + await renderHeader('/biz'); + expect(container.querySelector('img')?.getAttribute('src')).toBe('banner-a.png'); + + await act(async () => { + testState.resolvedAddress = 'bizraelis.bso'; + testState.resolvedAddressListeners.forEach((listener) => listener()); + }); + + expect(container.querySelector('img')?.getAttribute('src')).toBe('banner-a.png'); + expect(mathRandomSpy).toHaveBeenCalledTimes(1); + }); + it('renders hidden special board metadata without a directory entry', async () => { testState.directories = []; testState.resolvedAddress = TRASH_BOARD_ADDRESS; diff --git a/src/components/board-header/board-header.tsx b/src/components/board-header/board-header.tsx index dee97aed..63951095 100644 --- a/src/components/board-header/board-header.tsx +++ b/src/components/board-header/board-header.tsx @@ -55,6 +55,7 @@ const BoardHeader = memo(() => { const isInModView = isModView(location.pathname); const isInArchiveView = isArchiveRoute(location.pathname); const isInDirectoryListView = isDirectoryListRoute(location.pathname); + const bannerKey = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : isInModView ? 'mod' : params.boardIdentifier || 'board'; const accountComment = useAccountComment({ commentIndex: normalizeAccountCommentIndex(params?.accountCommentIndex) }); const resolvedAddress = useResolvedCommunityAddress(); const communityAddress = resolvedAddress || accountComment?.communityAddress; @@ -98,7 +99,7 @@ const BoardHeader = memo(() => {
{!useIsMobile() && (
- +
)}