mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 10:53:59 +00:00
feat(ui): render the page toast from the status store
ShellFeedback and the scene director show toasts through createToast(), each on its own timer as before, and the scene chrome renders the toast. Every show rewrites the text, so a repeated message is announced again.
This commit is contained in:
1 parent
3c391482f6
commit
f846aaed4c
13 files changed
+203
-43
No files matched your search
@@ -0,0 +1,79 @@
|
||||
// src/ui/toastView.test.mjs — the page toast renders what its owners'
|
||||
// createToast() publish, each owner on its own timer.
|
||||
import '../testSupport/registerDom.mjs';
|
||||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { createApp, nextTick } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import { useStatusStore } from './stores/status.js';
|
||||
import { createToast } from './toast.js';
|
||||
import SceneChromeView from './views/SceneChromeView.vue';
|
||||
|
||||
function fixture(t) {
|
||||
t.mock.timers.enable({ apis: ['setTimeout'] });
|
||||
document.body.replaceChildren();
|
||||
const pinia = createPinia();
|
||||
const app = createApp(SceneChromeView).use(pinia);
|
||||
app.mount(document.body.appendChild(document.createElement('div')));
|
||||
t.after(() => app.unmount());
|
||||
const store = useStatusStore(pinia);
|
||||
const toast = () => document.getElementById('toast');
|
||||
return { store, toast };
|
||||
}
|
||||
|
||||
test('a toast shows its message, then fades out keeping its text', async (t) => {
|
||||
const { store, toast } = fixture(t);
|
||||
assert.equal(toast().textContent, '');
|
||||
assert.equal(toast().classList.contains('visible'), false);
|
||||
const owner = createToast({ durationMs: 2000, store });
|
||||
owner.show('Link copied');
|
||||
await nextTick();
|
||||
assert.equal(toast().textContent, 'Link copied');
|
||||
assert.equal(toast().classList.contains('visible'), true);
|
||||
assert.equal(toast().getAttribute('role'), 'status');
|
||||
t.mock.timers.tick(1999);
|
||||
await nextTick();
|
||||
assert.equal(toast().classList.contains('visible'), true);
|
||||
t.mock.timers.tick(1);
|
||||
await nextTick();
|
||||
assert.equal(toast().classList.contains('visible'), false);
|
||||
assert.equal(toast().textContent, 'Link copied');
|
||||
});
|
||||
|
||||
test('a newer toast restarts the time, and another owner hides it on its own time', async (t) => {
|
||||
const { store, toast } = fixture(t);
|
||||
const shell = createToast({ durationMs: 2000, store });
|
||||
const scenes = createToast({ durationMs: 2600, store });
|
||||
scenes.show('Scene not saved');
|
||||
t.mock.timers.tick(1000);
|
||||
shell.show('Saved');
|
||||
t.mock.timers.tick(1600);
|
||||
await nextTick();
|
||||
assert.equal(toast().textContent, 'Saved');
|
||||
assert.equal(toast().classList.contains('visible'), false);
|
||||
shell.show('Again');
|
||||
scenes.cancel();
|
||||
shell.hide();
|
||||
await nextTick();
|
||||
assert.equal(toast().classList.contains('visible'), false);
|
||||
assert.equal(toast().textContent, 'Again');
|
||||
t.mock.timers.tick(5000);
|
||||
assert.equal(store.toast.text, 'Again');
|
||||
assert.equal(store.toast.visible, false);
|
||||
});
|
||||
|
||||
test('a repeated message is written again so the live region announces it', async (t) => {
|
||||
const { store, toast } = fixture(t);
|
||||
const owner = createToast({ durationMs: 2000, store });
|
||||
owner.show('Fly to a POI first');
|
||||
await nextTick();
|
||||
const first = toast().firstChild;
|
||||
t.mock.timers.tick(2000);
|
||||
await nextTick();
|
||||
assert.ok(toast().firstChild === first, 'fading out leaves the text alone');
|
||||
owner.show('Fly to a POI first');
|
||||
await nextTick();
|
||||
assert.equal(toast().textContent, 'Fly to a POI first');
|
||||
assert.ok(toast().firstChild !== first, 'the repeat is a new text node');
|
||||
assert.equal(toast().classList.contains('visible'), true);
|
||||
});
|
||||
Reference in new issue
Block a user