mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 18:34:02 +00:00
Sameh Khamis
1de4f635ca
createVoiceControl now returns a presenter instead of building the control with innerHTML: the session, cost, input, card and panel owners write its state by part and listen for interactions, and VoiceControl.vue renders it in the command dock, between the location bar and the visual presets as before. Focus moves wait for the render; the waveform's bars publish apart from the control and only when they change; the minutes field keeps a draft until its owner writes it. Owner tests use a real presenter on their own store, and view tests render the control.
40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { createApp, h, nextTick } from 'vue';
|
|
import { createPinia, storeToRefs } from 'pinia';
|
|
import { useVoiceStore } from '../ui/stores/voice.js';
|
|
import VoiceControl from '../ui/views/panels/VoiceControl.vue';
|
|
|
|
/**
|
|
* Render whichever voice control the store presents, as the command dock
|
|
* does, into the current document. Import registerDom.mjs first.
|
|
* @param {import('node:test').TestContext} t
|
|
* @returns {{pinia: import('pinia').Pinia, settle: () => Promise<void>}}
|
|
*/
|
|
export function mountVoiceView(t) {
|
|
const doc = globalThis.document;
|
|
// happy-dom lacks the browser's `[hidden]` rule, which visibility checks
|
|
// and focus moves rely on.
|
|
if (!doc.getElementById('test-ua-hidden')) {
|
|
const style = doc.head.appendChild(doc.createElement('style'));
|
|
style.id = 'test-ua-hidden';
|
|
style.textContent = '[hidden] { display: none; }';
|
|
}
|
|
doc.body.replaceChildren();
|
|
const host = doc.body.appendChild(doc.createElement('div'));
|
|
const pinia = createPinia();
|
|
const { view } = storeToRefs(useVoiceStore(pinia));
|
|
const app = createApp({
|
|
render: () =>
|
|
view.value
|
|
? h(VoiceControl, { key: view.value.id, view: view.value })
|
|
: null,
|
|
}).use(pinia);
|
|
app.mount(host);
|
|
t.after(() => app.unmount());
|
|
// Renders, then any focus the owners asked for after it.
|
|
const settle = async () => {
|
|
await nextTick();
|
|
await nextTick();
|
|
};
|
|
return { pinia, settle };
|
|
}
|