146 lines
3.6 KiB
TypeScript
146 lines
3.6 KiB
TypeScript
import { render, screen, waitFor } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
|
|
import type { OneNotePageDto } from '../onenote/model/dto.js';
|
|
import { PageReader } from './PageReader.js';
|
|
|
|
const page: OneNotePageDto = {
|
|
id: 'page-1',
|
|
title: 'Visual page',
|
|
text: 'Styled link\nA\tB',
|
|
textPreview: 'Styled link A B',
|
|
blocks: [
|
|
{
|
|
kind: 'text',
|
|
id: 'text-1',
|
|
sourceText: 'Styled link',
|
|
text: 'Styled link',
|
|
paragraphStyle: {},
|
|
layout: {},
|
|
runs: [
|
|
{
|
|
start: 0,
|
|
end: 7,
|
|
text: 'Styled ',
|
|
style: {
|
|
bold: true,
|
|
highlight: { kind: 'rgb', red: 255, green: 255, blue: 0 },
|
|
},
|
|
},
|
|
{
|
|
start: 7,
|
|
end: 11,
|
|
text: 'link',
|
|
style: { underline: true },
|
|
href: 'https://example.com/',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
kind: 'table',
|
|
id: 'table-1',
|
|
rows: [
|
|
{
|
|
id: 'row-1',
|
|
cells: [
|
|
{ id: 'cell-a', blocks: [textBlock('A', 'text-a')] },
|
|
{ id: 'cell-b', blocks: [textBlock('B', 'text-b')] },
|
|
],
|
|
},
|
|
],
|
|
columnWidths: [2, 3],
|
|
lockedColumns: [false, false],
|
|
bordersVisible: true,
|
|
layout: {},
|
|
},
|
|
{
|
|
kind: 'image',
|
|
id: 'image-1',
|
|
resourceId: 'resource-image',
|
|
altText: 'Embedded diagram',
|
|
isBackground: false,
|
|
layout: {},
|
|
},
|
|
{
|
|
kind: 'attachment',
|
|
id: 'attachment-1',
|
|
resourceId: 'resource-file',
|
|
filename: 'notes.txt',
|
|
size: 12,
|
|
layout: {},
|
|
},
|
|
],
|
|
diagnostics: [],
|
|
};
|
|
|
|
describe('PageReader structured content', () => {
|
|
beforeEach(() => {
|
|
vi.stubGlobal('URL', {
|
|
...URL,
|
|
createObjectURL: vi.fn(() => 'blob:local-image'),
|
|
revokeObjectURL: vi.fn(),
|
|
});
|
|
});
|
|
|
|
it('renders semantic formatting, links, tables, and a signed image resource', async () => {
|
|
const loadResource = vi.fn(async () => ({
|
|
id: 'resource-image',
|
|
kind: 'image' as const,
|
|
mediaType: 'image/png',
|
|
browserRenderable: true,
|
|
size: 8,
|
|
bytes: Uint8Array.of(0x89, 0x50, 0x4e, 0x47, 13, 10, 26, 10).buffer,
|
|
}));
|
|
|
|
render(
|
|
<PageReader page={page} loading={false} loadResource={loadResource} />
|
|
);
|
|
|
|
expect(screen.getByText('Styled').parentElement).toHaveStyle({
|
|
fontWeight: '700',
|
|
});
|
|
expect(screen.getByRole('link', { name: 'link' })).toHaveAttribute(
|
|
'href',
|
|
'https://example.com/'
|
|
);
|
|
expect(screen.getByRole('table')).toHaveTextContent('AB');
|
|
await waitFor(() =>
|
|
expect(
|
|
screen.getByRole('img', { name: 'Embedded diagram' })
|
|
).toHaveAttribute('src', 'blob:local-image')
|
|
);
|
|
});
|
|
|
|
it('downloads an attachment only after an explicit user action', async () => {
|
|
const downloadResource = vi.fn(async () => undefined);
|
|
render(
|
|
<PageReader
|
|
page={page}
|
|
loading={false}
|
|
loadResource={async () => {
|
|
throw new Error('not renderable');
|
|
}}
|
|
downloadResource={downloadResource}
|
|
/>
|
|
);
|
|
|
|
await userEvent.click(
|
|
screen.getByRole('button', { name: 'Download attachment' })
|
|
);
|
|
expect(downloadResource).toHaveBeenCalledWith('resource-file', 'notes.txt');
|
|
});
|
|
});
|
|
|
|
function textBlock(text: string, id: string) {
|
|
return {
|
|
kind: 'text' as const,
|
|
id,
|
|
sourceText: text,
|
|
text,
|
|
runs: [{ start: 0, end: text.length, text, style: {} }],
|
|
paragraphStyle: {},
|
|
layout: {},
|
|
};
|
|
}
|