ZDDC
8ba029612e
Promote classifier's local toast (classifier/css/base.css + showToast
in classifier/js/excel.js) into shared/toast.{js,css}. Every tool's
build.sh now concatenates them, so window.zddc.toast(msg, level, opts)
is callable from any tool.
API:
window.zddc.toast('Saved.', 'success');
window.zddc.toast('Could not load: ' + err.message, 'error');
window.zddc.toast('Note', 'info', { durationMs: 3000 });
Levels: info (default) | success | warning | error. Single-toast
policy — a second call replaces the first. Click anywhere on the
toast to dismiss. ARIA: error → role=alert/aria-live=assertive,
others → role=status/aria-live=polite.
Class prefix is .zddc-toast (BEM-ish) to avoid colliding with any
tool-local .toast rules. Classifier's existing showToast now
delegates to window.zddc.toast — call sites in excel.js +
selection.js are unchanged. Classifier's local .toast CSS block
deleted in favor of the shared one.
This commit only EXPOSES the API. Replacing the ~25 alert() call
sites scattered across archive/transmittal/mdedit/classifier with
toast calls is left as follow-up — each alert needs per-call review
to decide if it's truly non-blocking.
Five Playwright tests in tests/toast.spec.js lock the contract:
API exposure, level mapping, ARIA roles, single-toast replace,
click-to-dismiss.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
67 lines
2.5 KiB
JavaScript
67 lines
2.5 KiB
JavaScript
// Tests for shared/toast.js — the cross-tool notification helper
|
|
// available as window.zddc.toast(msg, level, opts). Loaded into every
|
|
// tool's bundle by build.sh.
|
|
//
|
|
// Strategy: load any tool's dist HTML over file:// (browse is the
|
|
// smallest), trigger the helper, and assert DOM + ARIA shape.
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import * as path from 'path';
|
|
|
|
const HTML_PATH = path.resolve('browse/dist/browse.html');
|
|
|
|
test.describe('shared/toast.js', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto(`file://${HTML_PATH}`, { waitUntil: 'load' });
|
|
});
|
|
|
|
test('exposes window.zddc.toast(msg, level)', async ({ page }) => {
|
|
const exposed = await page.evaluate(
|
|
() => typeof window.zddc?.toast === 'function'
|
|
);
|
|
expect(exposed).toBe(true);
|
|
});
|
|
|
|
test('renders a single toast with the level class and ARIA role', async ({ page }) => {
|
|
const after = await page.evaluate(() => {
|
|
window.zddc.toast('Saved.', 'success');
|
|
const el = document.querySelector('.zddc-toast');
|
|
return el && {
|
|
text: el.textContent,
|
|
level: [...el.classList].find(c => c.startsWith('zddc-toast--')),
|
|
role: el.getAttribute('role'),
|
|
live: el.getAttribute('aria-live'),
|
|
};
|
|
});
|
|
expect(after).toEqual({
|
|
text: 'Saved.',
|
|
level: 'zddc-toast--success',
|
|
role: 'status',
|
|
live: 'polite',
|
|
});
|
|
});
|
|
|
|
test('error level uses role=alert + aria-live=assertive', async ({ page }) => {
|
|
const probe = await page.evaluate(() => {
|
|
window.zddc.toast('Boom', 'error');
|
|
const el = document.querySelector('.zddc-toast');
|
|
return { role: el.getAttribute('role'), live: el.getAttribute('aria-live') };
|
|
});
|
|
expect(probe).toEqual({ role: 'alert', live: 'assertive' });
|
|
});
|
|
|
|
test('a second toast replaces the first (single-toast policy)', async ({ page }) => {
|
|
const count = await page.evaluate(() => {
|
|
window.zddc.toast('one', 'info');
|
|
window.zddc.toast('two', 'info');
|
|
return document.querySelectorAll('.zddc-toast').length;
|
|
});
|
|
expect(count).toBe(1);
|
|
});
|
|
|
|
test('clicking dismisses immediately', async ({ page }) => {
|
|
await page.evaluate(() => window.zddc.toast('click me', 'info'));
|
|
await page.locator('.zddc-toast').click();
|
|
await expect(page.locator('.zddc-toast')).toHaveCount(0);
|
|
});
|
|
});
|