From 304525cb50ceb17f14fcbe262de9779eb159a6e3 Mon Sep 17 00:00:00 2001 From: pyh Date: Fri, 9 Oct 2026 08:52:16 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20test:=20=E9=92=89=E4=BD=8F=E8=BD=BB?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=E9=A6=96=E8=A1=8C=E4=B8=AD=E7=BA=BF=EF=BC=8C?= =?UTF-8?q?=E9=81=BF=E5=85=8D=E6=8C=89=E9=92=AE=E5=86=8D=E4=BD=8E=203px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/unit/styles.test.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/tests/unit/styles.test.js b/tests/unit/styles.test.js index 1262721..2d1e26c 100644 --- a/tests/unit/styles.test.js +++ b/tests/unit/styles.test.js @@ -64,6 +64,27 @@ test('the three popup glyphs stay distinguishable through state tokens', () => { assert.ok(CSS.includes('.dsn-toast-icon.is-question{color:var(--dsw-alias-state-business-primary)}')) }) +test('the popup first line is one band, because top-aligning it was the 3px bug', () => { + const rule = (name) => CSS.match(new RegExp(`\\.${name}\\{([^}]*)\\}`))?.[1] ?? '' + + // The band is the title's line box. A control is 28px and the line box 22px, so + // top-aligning them (which `align-items:flex-start` alone did) drops the two + // buttons 3px below the text they sit next to. + assert.equal(/--dsn-toast-line:(\d+px)/.exec(rule('dsn-toast'))?.[1], '22px', 'the popup must declare its first-line band') + for (const name of ['dsn-toast', 'dsn-toast-title', 'dsn-toast-icon', 'dsn-toast-actions']) { + assert.ok(rule(name).includes('var(--dsn-toast-line)'), `.${name} must take its first-line height from the band`) + } + + // The actions row has to BE the band and centre its contents on it; stretching + // it to its own content would put the controls back to top-aligned. + const actions = rule('dsn-toast-actions') + assert.ok(actions.includes('height:var(--dsn-toast-line)'), 'the actions row must be the band, not its buttons') + assert.ok(actions.includes('align-items:center'), 'the controls must centre on the band') + for (const control of ['dsn-toast-action', 'dsn-toast-close']) { + assert.ok(rule(control).includes('height:28px'), `.${control} must keep its own 28px hit area`) + } +}) + test('every class the components render has a rule, so nothing falls back to defaults', () => { // Guards the redesign: a renamed class that the sheet no longer styles would // render as an unstyled block instead of failing loudly.