` markup. It answers
* with the text now, because paragraph boundaries are a *reading* decision — see
* `server/src/indexer/formats/text.ts`. Every assertion below is written against
* this shape, because this is the shape the reader actually receives.
*/
const serverChapter = ['第二章 落雨', ' 雨来了。', '他走在雨里。'].join('\n');
it('typesets the text the server sends, and drops the leading spaces it carried', async () => {
// The whole point of moving the typography to the client: the server hands over
// characters, and one of the characters a scraper wrote is the full-width space
// that was standing in for an indent. Left in, it is indent added to whatever the
// reader chose, and the setting looks broken on the files that need it most.
const container = document.createElement('div');
document.body.append(container);
const view = make(container, txtDoc(serverChapter));
await view.open(0, 0);
const body = shadowOf(container).querySelector('.txt-body');
expect(body).not.toBeNull();
const paragraphs = [...body!.querySelectorAll('p')].map((p) => p.textContent);
expect(paragraphs).toEqual(['雨来了。', '他走在雨里。']);
// The chapter's first line is its title, and the *client* promotes it now —
// otherwise it renders as `第二章 落雨雨来了。`, the title and the first sentence
// glued together, which is what a reader reports as "格式乱了".
expect(body!.querySelector('h3')?.textContent).toBe('第二章 落雨');
});
it('escapes a chapter whose own text contains markup', async () => {
// The server sends `text/plain` now and for exactly this reason: served as HTML,
// a chapter containing `` would be parsed as markup by anything that trusted
// the label, and the escaping that makes a TXT safe would be sidestepped. The
// assertion is on the *absence* of an element, not on the presence of the words.
const container = document.createElement('div');
document.body.append(container);
const view = make(container, txtDoc('\n\n粗'));
await view.open(0, 0);
const shadow = shadowOf(container);
expect(shadow.querySelector('.txt-body img')).toBeNull();
expect(shadow.querySelector('.txt-body b')).toBeNull();
const paragraphs = [...shadow.querySelectorAll('.txt-body > p')].map((p) => p.textContent);
expect(paragraphs).toEqual(['
', '粗']);
});
it('re-typesets a chapter an older server sent as markup', async () => {
// A window may have been cached against a server that still rendered `
`s (or // a proxy may re-wrap one). The blocks are read back as text and re-split, so an // old response cannot be rendered as if it were a new one — and the heading it // carried is kept rather than re-derived, because a heuristic run twice is two // copies of the heuristic. const container = document.createElement('div'); document.body.append(container); const legacy = [ '
第二章 落雨
', '雨来了。
', '他走在雨里。
', '正文
', 'epub')); await view.open(0, 0); const shadow = shadowOf(container); expect(shadow.querySelector('.txt-body')).toBeNull(); expect(shadow.querySelector('p')?.getAttribute('data-authored')).toBe('1'); }); }); /** * A link *inside* a chapter that points at another chapter. * * An EPUB ships its own table of contents as a spine item, so a reader who opens it * and taps 第三章 is asking for a chapter change. The href they tap has already been * rewritten by the server to point at the asset endpoint — left unhandled, the tap * downloads another chapter's document and the reader sees a broken page instead of * the chapter they asked for. */ describe('ReaderView chapter links', () => { let container: HTMLDivElement; beforeEach(() => { container = document.createElement('div'); document.body.append(container); }); afterEach(() => { container.remove(); }); /** A chapter document whose body contains one link the server rewrote. */ function docWithLink(href: string, id = 'nav.xhtml'): BookDoc { const doc = reflowableDoc(1); return { ...doc, sections: [{ id, label: '目录', html: ``, depth: 0 }], }; } function clickLink(view: ReaderView): boolean { const anchor = view.elementHost.shadow.querySelector('a'); if (!anchor) throw new Error('no anchor rendered'); return anchor.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true })); } it('routes a chapter link to the screen instead of letting the browser fetch it', async () => { // The marker is in the URL, so the sanitiser keeps it — that is the point of // the pair (marker + same origin). `document.baseURI` is jsdom's about:blank, // so the URL is built against it rather than against a made-up origin. const origin = document.baseURI; const href = new URL( `/api/v1/books/b1/assets?__reader-book-resource__=1&ref=OEBPS/ch3.xhtml`, origin, ).href; const seen: string[] = []; const view = new ReaderView({ container, doc: docWithLink(href), onChapterLink: (ref) => { seen.push(ref); return true; }, }); await view.open(0, 0); // The click is *not* dispatched by default: a consumed chapter link must not // also be a navigation. expect(clickLink(view)).toBe(false); expect(seen).toEqual(['xhtml:OEBPS/ch3.xhtml']); view.dispose(); }); it('refuses a link that would leave the reader', async () => { // An outbound link in a book must not be able to replace the app with a web // page: in a WebView shell there is no way back to the book at all. The // sanitiser drops the attribute outright, which is stronger than refusing the // tap — there is no href left for the browser to follow, and no listener that // has to be correct for the rule to hold. const view = new ReaderView({ container, doc: docWithLink('https://example.com/'), }); await view.open(0, 0); const anchor = view.elementHost.shadow.querySelector('a'); expect(anchor?.hasAttribute('href')).toBe(false); expect(clickLink(view)).toBe(true); view.dispose(); }); it('lets the browser perform an in-document footnote link', async () => { const view = new ReaderView({ container, doc: docWithLink('#note3') }); await view.open(0, 0); expect(clickLink(view)).toBe(true); view.dispose(); }); });