Amos
cd789c11b1
- A pending quiz/ask now REPLACES the chat composer: one persistent rounded-2xl shell in the transcript overlay swaps contents (composer ↔ question ↔ collapsed bar), never remounting — the structure a future grow-morph animation needs. - Unified bottom row inside the question: the note field (select modes), the answer field (text-mode asks), or the Other text — one field, one 'Submit answer' button, Enter submits. - Collapse on scroll: uses useStickToBottomContext — scroll up and the dock folds to a slim bar (kind chip + LaTeX-flattened question teaser + 'tap to answer'); click scrolls to bottom and re-expands. The expanded form stays mounted-hidden so a half-made selection survives. - Pending/streaming tool parts no longer render inline; answered parts land in the transcript as graded cards on submit. Question generation shows a shimmer in the shell. - Composer back to pure chat (no mode machinery); quiz-card.tsx and the pendingText/registerSubmit bridge deleted; render tests re-pointed at the dock (wrapped in StickToBottom). Verified live: docked quiz submit (note+selection), ask-text Enter submit, collapse/expand with selection survival, bar teaser text.
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
/**
|
||
* Composer render tests — the chat input row (content only; the persistent
|
||
* rounded shell lives in the chat view's overlay so it can morph into the
|
||
* question dock without remounting).
|
||
*
|
||
* Same tsx classic-JSX shim as render-cards.test.tsx.
|
||
*/
|
||
import React from "react";
|
||
(globalThis as Record<string, unknown>).React = React;
|
||
|
||
import assert from "node:assert/strict";
|
||
import { describe, it } from "node:test";
|
||
import { renderToStaticMarkup } from "react-dom/server";
|
||
import { Composer } from "../components/composer.tsx";
|
||
|
||
function render(opts: { busy?: boolean; canSend?: boolean } = {}) {
|
||
return renderToStaticMarkup(
|
||
<Composer
|
||
busy={opts.busy ?? false}
|
||
value=""
|
||
onChange={() => {}}
|
||
onSend={() => {}}
|
||
onStop={() => {}}
|
||
canSend={opts.canSend ?? true}
|
||
/>,
|
||
);
|
||
}
|
||
|
||
describe("Composer", () => {
|
||
it("chat placeholder + send button", () => {
|
||
const html = render();
|
||
assert.match(html, /Ask, answer, or steer the lesson/);
|
||
assert.ok(html.includes('aria-label="Send"'), "send button present");
|
||
});
|
||
|
||
it("busy: send button becomes stop", () => {
|
||
const html = render({ busy: true });
|
||
assert.ok(html.includes('aria-label="Stop"'), "stop replaces send while streaming");
|
||
});
|
||
|
||
it("send button radius is 10px = 25% of the 40px button (concentric with the shell)", () => {
|
||
const html = render();
|
||
assert.ok(html.includes("rounded-[10px]"), "send radius = shell radius − row padding");
|
||
assert.ok(html.includes("size-10"), "40px send button (10px = 25%)");
|
||
});
|
||
|
||
it("disabled when nothing to send", () => {
|
||
const html = render({ canSend: false });
|
||
assert.ok(/aria-label="Send"[^>]*disabled|disabled[^>]*aria-label="Send"/.test(html), "send disabled");
|
||
});
|
||
});
|