109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { TldrawWhiteboard } from './TldrawWhiteboard'
|
|
|
|
interface MockTldrawProps {
|
|
assetUrls: MockAssetUrls
|
|
}
|
|
|
|
interface MockAssetUrls {
|
|
embedIcons: Record<string, string>
|
|
fonts: Record<string, string>
|
|
icons: Record<string, string>
|
|
translations: Record<string, string>
|
|
}
|
|
|
|
const tldrawMock = vi.hoisted(() => ({
|
|
Tldraw: vi.fn(),
|
|
}))
|
|
|
|
const assetImportMock = vi.hoisted(() => ({
|
|
getAssetUrlsByImport: vi.fn((formatAssetUrl: (assetUrl?: string) => string) => ({
|
|
embedIcons: {},
|
|
fonts: {
|
|
tldraw_draw: formatAssetUrl('/assets/Shantell_Sans-Informal_Regular.woff2'),
|
|
},
|
|
icons: {
|
|
'tool-pencil': `${formatAssetUrl('/assets/0_merged.svg')}#tool-pencil`,
|
|
},
|
|
translations: {
|
|
en: formatAssetUrl(undefined),
|
|
},
|
|
})),
|
|
}))
|
|
|
|
vi.mock('@tldraw/assets/imports.vite', () => assetImportMock)
|
|
|
|
vi.mock('tldraw', async () => {
|
|
const { createElement } = await import('react')
|
|
|
|
tldrawMock.Tldraw.mockImplementation(({ assetUrls }: MockTldrawProps) =>
|
|
createElement('div', {
|
|
'data-testid': 'mock-tldraw',
|
|
'data-draw-font-url': assetUrls.fonts.tldraw_draw,
|
|
})
|
|
)
|
|
|
|
return {
|
|
Box: class Box {
|
|
x: number
|
|
y: number
|
|
w: number
|
|
h: number
|
|
|
|
constructor(x: number, y: number, w: number, h: number) {
|
|
this.x = x
|
|
this.y = y
|
|
this.w = w
|
|
this.h = h
|
|
}
|
|
},
|
|
Tldraw: tldrawMock.Tldraw,
|
|
createTLStore: vi.fn(() => ({
|
|
listen: vi.fn(() => vi.fn()),
|
|
})),
|
|
getSnapshot: vi.fn(() => ({ document: {} })),
|
|
loadSnapshot: vi.fn(),
|
|
}
|
|
})
|
|
|
|
function renderedTldrawAssetUrls(): MockAssetUrls {
|
|
const props = tldrawMock.Tldraw.mock.calls[0]?.[0] as MockTldrawProps
|
|
expect(props.assetUrls).toBeDefined()
|
|
return props.assetUrls
|
|
}
|
|
|
|
function expectNoCdnUrls(urls: Record<string, string>) {
|
|
Object.values(urls).forEach((url) => {
|
|
expect(url).not.toContain('cdn.tldraw.com')
|
|
})
|
|
}
|
|
|
|
function expectBundledTldrawAssetUrls(assetUrls: MockAssetUrls) {
|
|
expect(assetUrls.fonts.tldraw_draw).toContain('Shantell_Sans-Informal_Regular.woff2')
|
|
expect(assetUrls.icons['tool-pencil']).toContain('0_merged.svg#tool-pencil')
|
|
expect(assetUrls.translations.en).toBe('data:application/json;base64,e30K')
|
|
expectNoCdnUrls(assetUrls.fonts)
|
|
expectNoCdnUrls(assetUrls.icons)
|
|
expectNoCdnUrls(assetUrls.translations)
|
|
}
|
|
|
|
describe('TldrawWhiteboard', () => {
|
|
it('uses bundled tldraw assets instead of CDN URLs', () => {
|
|
render(
|
|
<TldrawWhiteboard
|
|
boardId="board-1"
|
|
height="520"
|
|
snapshot=""
|
|
width=""
|
|
onSizeChange={vi.fn()}
|
|
onSnapshotChange={vi.fn()}
|
|
/>
|
|
)
|
|
|
|
expect(screen.getByTestId('mock-tldraw')).toHaveAttribute('data-draw-font-url')
|
|
expect(assetImportMock.getAssetUrlsByImport).toHaveBeenCalledWith(expect.any(Function))
|
|
expectBundledTldrawAssetUrls(renderedTldrawAssetUrls())
|
|
})
|
|
})
|