Plain HTML, CSS and JavaScript modules, with no build step. Hash routes and relative URLs make it work under any path. The job list is polled: every 2 seconds while a job runs, and less often otherwise.
42 lines
1.7 KiB
JavaScript
42 lines
1.7 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import { test } from 'node:test';
|
|
import { Element, install, nodes, server, settle } from './flow-helpers.mjs';
|
|
|
|
install();
|
|
const { storyPage } = await import('../../bindery/static/js/story.js');
|
|
|
|
const details = (cover) => ({
|
|
story: { id: 1, title: 'Story', author: 'Writer', url: 'https://example.com/story', site: 'example.com',
|
|
locked_fields: [], pinned: {}, site_values: {}, auto_update: true, status: 'ok', cover },
|
|
chapters: [],
|
|
recent_chapters: 0,
|
|
});
|
|
const rules = { rules: [], paragraphs: null, global_paragraphs: false };
|
|
|
|
async function render(t, cover) {
|
|
const backend = server(t);
|
|
backend.on('GET', 'stories/1', details(cover));
|
|
backend.on('GET', 'stories/1/rules', rules);
|
|
backend.on('GET', 'jobs?story_id=1', []);
|
|
const main = new Element('main');
|
|
const cleanup = storyPage(main, { storyId: '1' }, { metadata_fields: {}, mode_labels: {} });
|
|
await settle();
|
|
cleanup?.();
|
|
const summary = nodes(main).find((el) => el.className === 'card story-summary');
|
|
return summary.children.filter((el) => el instanceof Element);
|
|
}
|
|
|
|
test('the cover comes first in the story summary, with its version in the URL', async (t) => {
|
|
const [cover, heading] = await render(t, 'abc123');
|
|
assert.equal(cover.tagName, 'img');
|
|
assert.equal(cover.className, 'cover');
|
|
assert.equal(cover.attributes.src, 'api/stories/1/cover?v=abc123');
|
|
assert.equal(heading.className, 'story-heading');
|
|
assert.equal(heading.children[0].textContent, 'Story');
|
|
});
|
|
|
|
test('a story without a cover shows only its heading', async (t) => {
|
|
const children = await render(t, null);
|
|
assert.deepEqual(children.map((el) => el.className), ['story-heading']);
|
|
});
|