shkim4
b50e95c325
- dropdown-consolidation, storybook-cleanup-stage1, detail-buttons, property-panel-comparison: assert their recorded state and accept today only the approved later Story changes (storybook-inventory.mjs helpers). - header-composition.browser.mjs + fixtures/header-composition.tsx: the removed Composition Story presets, hidden controls, invalid menuOrder / hiddenControls and live changes, on a test-only page using the public API only. - storybook-unused-removal: header comment lists which older scripts run on current Stories again.
205 lines
20 KiB
JavaScript
205 lines
20 KiB
JavaScript
// 2026-10-20 (test alignment): `capture`, `preservation`, `baseline` and `verify` are current regressions again. The checks of
|
|
// the Stories retired by the unused demo removal (5faa1f1) run on current public Stories: K Guide (the same fluid Header
|
|
// as Composition), Overview (btn_colorize, layer detail), Property Panel · 4개 비교 (editable Input) and Document Open
|
|
// (`controls` allowlist composition). No current Story sets hiddenControls / menuOrder presets, so the Composition preset
|
|
// loop is the historical `composition-history` mode, for a Storybook built at or before c8e5fbe (pass its base URL).
|
|
// The same presets run today on a test-only fixture in header-composition.browser.mjs.
|
|
import { mkdir, readFile, writeFile } from 'node:fs/promises'
|
|
import path from 'node:path'
|
|
import http from 'node:http'
|
|
import { swStoryEntries, retainedInventory, retiredPropertyPanelIds, retiredUnusedDemoIds, laterRetiredHeaderIds, approvedAddedHeaderIds, movedToPopupIds } from './storybook-inventory.mjs'
|
|
import { loadPlaywright } from './playwright-runtime.mjs'
|
|
|
|
// Usage: node packages/sw/tests/detail-buttons.browser.mjs baseline|verify <evidence-dir> [base-url]
|
|
// Run `baseline` into a new evidence directory at the reference state, then `verify` into the same directory.
|
|
const mode = process.argv[2] ?? 'verify'
|
|
const output = path.resolve(process.argv[3] ?? 'docs/sw/detail-button-qa')
|
|
let base = process.argv[4] ?? 'static'
|
|
let server
|
|
if (base === 'static') {
|
|
const root=path.resolve('storybook-static'),mime={'.html':'text/html','.js':'text/javascript','.css':'text/css','.json':'application/json','.svg':'image/svg+xml','.ttf':'font/ttf'}
|
|
server=http.createServer(async(req,res)=>{try{const p=new URL(req.url,'http://localhost').pathname,file=path.resolve(root,'.'+decodeURIComponent(p==='/'?'/index.html':p));if(path.relative(root,file).startsWith('..'))return res.writeHead(403).end();res.setHeader('Content-Type',mime[path.extname(file)]??'application/octet-stream');res.end(await readFile(file))}catch{res.writeHead(404).end()}})
|
|
await new Promise(resolve=>server.listen(0,'127.0.0.1',resolve));base=`http://127.0.0.1:${server.address().port}`
|
|
}
|
|
const { chromium } = loadPlaywright()
|
|
await mkdir(output, { recursive: true })
|
|
const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
|
|
const page = await browser.newPage({ viewport: { width: 1920, height: 1000 } })
|
|
const report = { mode, browser: browser.version(), checks: [], errors: [], styles: {} }
|
|
page.on('pageerror', e => report.errors.push(e.message))
|
|
page.on('console', m => { if (m.type() === 'error') report.errors.push(m.text()) })
|
|
const check = (name, ok, data) => { report.checks.push({ name, status: ok ? 'PASS' : 'FAIL', data }); if (!ok) console.error('FAIL', name, data) }
|
|
const goto = async id => {
|
|
await page.goto(`${base}/iframe.html?id=sw-header--${id}&viewMode=story`)
|
|
await page.locator('.hm-sw-header, .hm-sw-theme').first().waitFor()
|
|
await page.evaluate(() => document.fonts.ready)
|
|
await page.mouse.move(1, 1)
|
|
}
|
|
const style = e => {
|
|
const s = getComputedStyle(e), t = e.querySelector('[data-detail-label],span:last-child'), i = e.querySelector('img')
|
|
return { background:s.backgroundColor,color:s.color,opacity:s.opacity,border:s.border, radius:s.borderRadius,shadow:s.boxShadow,
|
|
textColor:getComputedStyle(t).color,textOpacity:getComputedStyle(t).opacity,textStroke:getComputedStyle(t).webkitTextStrokeWidth,
|
|
iconOpacity:i && getComputedStyle(i).opacity,iconContent:i && getComputedStyle(i).content,
|
|
height:e.getBoundingClientRect().height,width:e.getBoundingClientRect().width,outline:s.outline,disabled:e.disabled }
|
|
}
|
|
// Header height, overflow and the menus inside its fields in DOM order (configured controls or the default menus).
|
|
const composedMenus = h => ({height:h.getBoundingClientRect().height,overflow:h.scrollWidth-h.clientWidth,menus:[...h.querySelectorAll('.hm-sw-header__fields > *')].filter(e=>e.querySelector('.hm-sw-header__field')).map(e=>e.dataset.control??({layer:'layer',color:'color','line-style':'lineStyle','text-style':'textStyle','dimension-style':'dimensionStyle'}[e.dataset.menu]??(e.classList.contains('hm-sw-header__layer')?'layer':null)))})
|
|
const snapshots = {}
|
|
try {
|
|
if (mode === 'capture') {
|
|
await goto('detail-buttons')
|
|
await page.screenshot({path:path.join(output,'comparison-default.png'),fullPage:true})
|
|
await page.locator('[data-detail-row="문자스타일 상세"] [data-detail-case="hover"] button').hover()
|
|
await page.screenshot({path:path.join(output,'comparison-pointer-hover.png'),fullPage:true})
|
|
} else if (mode === 'preservation') {
|
|
// 2026-10-20: Composition, Colorize and Layer Detail · Input were removed (5faa1f1). K Guide renders the same fluid
|
|
// figmaArgs Header (window motion, K guide), Overview's Header the btn_colorize menu, the comparison the editable Input.
|
|
await goto('k-guide')
|
|
for(const width of [390,768,1280,1440]){
|
|
await page.setViewportSize({width,height:1000})
|
|
const layout=await page.locator('header.hm-sw-header').first().evaluate(h=>({height:h.getBoundingClientRect().height,overflow:h.scrollWidth-h.clientWidth,documentOverflow:document.documentElement.scrollWidth-document.documentElement.clientWidth}))
|
|
check(`required responsive width ${width}`,layout.height===49&&layout.overflow===0&&layout.documentOverflow===0,layout)
|
|
}
|
|
await page.setViewportSize({width:1920,height:1000})
|
|
await goto('property-panel-compare')
|
|
for(const [id,height] of [['none',256],['all',361],['circle',658],['expanded',754]]){
|
|
const box=await page.locator(`[data-compare="${id}"] .hm-sw-property`).boundingBox()
|
|
check(`preserve property panel ${id}`,box.width===314&&box.height===height,box)
|
|
}
|
|
await goto('k-guide')
|
|
const motion=page.locator('[data-sw-window-move]').first();await motion.hover()
|
|
check('preserve window motion 1400ms',await motion.evaluate(e=>e.getAnimations({subtree:true}).length===3&&e.getAnimations({subtree:true}).every(a=>a.effect.getTiming().duration===1400)))
|
|
await page.mouse.move(1,900);check('window motion leave clears animations',await motion.evaluate(e=>e.getAnimations({subtree:true}).length===0))
|
|
const guide=page.locator('.hm-sw-k-guide').first();await guide.locator('button').hover()
|
|
check('preserve K guide animation',await guide.locator('.hm-sw-k-guide__panel').isVisible()&&await guide.locator('.hm-sw-k-guide__panel').evaluate(e=>getComputedStyle(e).animationDuration==='0.511s'))
|
|
await page.mouse.move(1,900);check('K guide leave closes',await guide.locator('.hm-sw-k-guide__panel').count()===0)
|
|
await goto('overview');const colorHeader=page.locator('header.hm-sw-header').first();await colorHeader.getByRole('button',{name:'색상',exact:true}).click()
|
|
check('preserve Colorize size (Overview Header)',(await colorHeader.getByRole('button',{name:'색상 추출',exact:true}).boundingBox()).width===24)
|
|
await goto('property-panel-compare');const editing=page.locator('[data-compare="circle"] [data-property-id="radius"] input.hm-sw-header__input').first()
|
|
check('preserve editable Input (Property Panel · 4개 비교)',await editing.isEditable()&&await editing.evaluate(e=>getComputedStyle(e).caretColor==='rgb(230, 4, 3)'))
|
|
} else if (mode === 'composition-history') {
|
|
// Historical: the verify-mode Composition preset loop of 2026-10-19 on sw-header--composition (removed in 5faa1f1).
|
|
// Run it only against a Storybook built at or before c8e5fbe (base-url); the current Storybook has no such Story.
|
|
await goto('composition')
|
|
const presets=['기본 전체','구성 A','구성 B (레이어·선스타일)','구성 C (로고만)','파일 목록 제거','레이어 제거','색상 제거','스타일 그룹 제거','여러 메뉴 제거','순서 변경','숨김 + 순서 변경']
|
|
const all=['layer','color','lineStyle','textStyle','dimensionStyle']
|
|
const removed=[[],['textStyle','dimensionStyle'],['color','textStyle','dimensionStyle'],all,[],['layer'],['color'],['lineStyle','textStyle','dimensionStyle'],['color','textStyle'],[],['layer','textStyle']]
|
|
const orders=[...Array(9).fill(all),['color','layer','dimensionStyle','lineStyle','textStyle'],['dimensionStyle','textStyle','color','layer','lineStyle']]
|
|
for(let p=0;p<presets.length;p++)for(const width of [1920,1440,1080,900,768,640,390]){
|
|
await page.setViewportSize({width,height:1000});await page.getByRole('button',{name:presets[p],exact:true}).click()
|
|
const h=page.locator('[data-composition-demo] header.hm-sw-header')
|
|
const actual=await h.evaluate(composedMenus)
|
|
const expected=orders[p].filter(id=>!removed[p].includes(id))
|
|
check(`composition ${presets[p]} @${width}`,actual.height===49&&actual.overflow===0&&JSON.stringify(actual.menus)===JSON.stringify(expected),{actual,expected})
|
|
const more=h.locator('.hm-sw-header__more-trigger')
|
|
if(await more.isVisible()) {await more.click();const items=await h.locator('.hm-sw-header__more-item').allTextContents();check(`nonempty More ${presets[p]} @${width}`,items.length>0);await page.keyboard.press('Escape')}
|
|
}
|
|
} else {
|
|
const index = await (await fetch(`${base}/index.json`)).json()
|
|
const ids = swStoryEntries(index).map(e => e.id)
|
|
report.storyIds = ids
|
|
if (mode === 'baseline') await writeFile(path.join(output, 'baseline-story-ids.json'), JSON.stringify(ids))
|
|
// These retained examples cover fixed-width and fluid headers after the two Args demos were retired.
|
|
// 2026-10-20: Composition was removed (5faa1f1); K Guide renders the same fluid figmaArgs Header.
|
|
for (const story of ['overview', 'k-guide']) {
|
|
await goto(story)
|
|
for (const width of [1920,1800,1440,1180,1080,900,768,640,520,390]) {
|
|
await page.setViewportSize({ width, height:1000 })
|
|
// 2026-10-20: Overview sizes its 16:9 Stage through a ResizeObserver; wait until the Header box holds for three frames
|
|
// (without it a snapshot could catch the previous width, so baseline and verify differed on the same build).
|
|
await page.locator('header.hm-sw-header').first().evaluate(h => new Promise(resolve => { let last = '', stable = 0; const tick = () => { const r = h.getBoundingClientRect(), now = [r.x, r.y, r.width].join(); stable = now === last ? stable + 1 : 0; last = now; stable >= 3 ? resolve() : requestAnimationFrame(tick) }; requestAnimationFrame(tick) }))
|
|
snapshots[`${story}-${width}`] = await page.locator('header.hm-sw-header').first().evaluate(h => [h,...h.querySelectorAll('*')].map(e => {
|
|
const b=e.getBoundingClientRect(),s=getComputedStyle(e)
|
|
return {tag:e.tagName,class:e.getAttribute('class'),x:b.x,y:b.y,width:b.width,height:b.height,display:s.display,visibility:s.visibility,color:s.color,background:s.backgroundColor}
|
|
}))
|
|
}
|
|
}
|
|
await page.setViewportSize({ width:1920,height:1000 })
|
|
await goto('composed-controls')
|
|
await page.locator('[data-composed-controls]').getByRole('button',{name:'문자스타일',exact:true}).click()
|
|
const original = page.getByRole('button',{name:'문자스타일 상세',exact:true}).first()
|
|
snapshots.textDefault = await original.evaluate(style)
|
|
if (!(await original.isDisabled())) { await original.hover(); snapshots.textHover = await original.evaluate(style) }
|
|
else {
|
|
// Existing callback-enabled example supplies the effective text-style Hover reference.
|
|
const enabled = page.locator('button[data-detail="문자스타일 상세"]:not(:disabled)').first()
|
|
await enabled.hover(); snapshots.textHover = await enabled.evaluate(style)
|
|
}
|
|
if (mode === 'baseline') {
|
|
await writeFile(path.join(output,'baseline.json'),JSON.stringify(snapshots,null,2))
|
|
} else {
|
|
const before=JSON.parse(await readFile(path.join(output,'baseline.json'),'utf8'))
|
|
for(const key of Object.keys(snapshots).filter(k=>!k.startsWith('text'))) check(`unchanged header ${key} (capture a current baseline for replacement fixtures)`,JSON.stringify(before[key])===JSON.stringify(snapshots[key]))
|
|
const oldIds=JSON.parse(await readFile(path.join(output,'baseline-story-ids.json'),'utf8'))
|
|
const retiredIds=['default','controls','responsive','text-stroke','dynamic-data','layer-dropdown','color-dropdown','line-style-dropdown','text-dimension-style-dropdown'].map(id=>`sw-header--${id}`)
|
|
// 2026-10-19: the five duplicate property panel demos are retired as well (24 -> 19).
|
|
retiredIds.push(...retiredPropertyPanelIds)
|
|
// 2026-10-20: then the nine unused demos (5faa1f1) and the Popup move; the approved Header additions are listed in
|
|
// storybook-inventory.mjs. Expected from this run's baseline and from the list recorded on 2026-10-16 (which predates
|
|
// this suite's own sw-header--detail-buttons), so a fresh baseline cannot accept an unapproved Story.
|
|
retiredIds.push(...retiredUnusedDemoIds)
|
|
const expectedFrom=list=>{const retained=retainedInventory(list.map(id=>({id}))).map(e=>e.id).filter(id=>!laterRetiredHeaderIds.includes(id)&&!movedToPopupIds.includes(id));return {retained,ids:[...new Set([...retained,...approvedAddedHeaderIds,'sw-header--detail-buttons'])].sort()}}
|
|
const fromBaseline=expectedFrom(oldIds),fromRecorded=expectedFrom(JSON.parse(await readFile('docs/sw/detail-button-qa/baseline-story-ids.json','utf8')))
|
|
check('retained stories remain; only approved retirements are absent; only approved additions',JSON.stringify([...ids].sort())===JSON.stringify(fromBaseline.ids)&&JSON.stringify(fromBaseline.ids)===JSON.stringify(fromRecorded.ids)&&fromBaseline.retained.every(id=>ids.includes(id))&&retiredIds.every(id=>!ids.includes(id))&&movedToPopupIds.every(id=>index.entries[id]?.title==='SW/Popup'),{before:oldIds.length,after:ids.length,unexpected:ids.filter(id=>!fromRecorded.ids.includes(id)),missing:fromRecorded.ids.filter(id=>!ids.includes(id))})
|
|
for(const id of ids){await goto(id.replace('sw-header--',''));check(`render ${id}`,!(await page.locator('.sb-errordisplay').isVisible()))}
|
|
// 2026-10-20: the Composition presets (hiddenControls / menuOrder) are the `composition-history` mode. The configured
|
|
// composition that stays public is Document Open's `controls` allowlist, rendered at ten frame widths.
|
|
await goto('document-open')
|
|
for(const width of [1920,1800,1440,1180,1080,900,768,640,520,390]){
|
|
const h=page.locator(`[data-composed-responsive] [data-width="${width}"] header.hm-sw-header`)
|
|
const actual=await h.evaluate(composedMenus)
|
|
check(`controls allowlist composition @${width}`,actual.height===49&&actual.overflow===0&&JSON.stringify(actual.menus)===JSON.stringify(['layer','color']),actual)
|
|
const more=h.locator('.hm-sw-header__more-trigger')
|
|
if(await more.isVisible()) {await more.click();const items=await h.locator('.hm-sw-header__more-item').allTextContents();check(`nonempty More controls allowlist @${width}`,items.length>0,items);await page.keyboard.press('Escape')}
|
|
}
|
|
// Real dropdown integration, separate from the shared-button specimen.
|
|
await goto('composed-controls')
|
|
const host=page.locator('.sw-composed-controls')
|
|
for(const [name,callback] of [['색상','onColorDetail'],['선스타일','onLineStyleDetail'],['문자스타일','onTextStyleDetail'],['치수스타일','onDimensionStyleDetail']]){
|
|
const trigger=host.getByRole('button',{name,exact:true});await trigger.click()
|
|
const detail=host.getByRole('button',{name:`${name} 상세`,exact:true});await detail.hover()
|
|
check(`actual ${name} shared hover`,(await detail.evaluate(style)).textOpacity==='0.35')
|
|
if(name!=='색상'){
|
|
const row=host.locator('.hm-sw-header__menu-row').first();await row.locator('button').first().hover()
|
|
check(`unchanged ${name} list hover`,await row.evaluate(e=>getComputedStyle(e).backgroundColor)==='rgb(98, 83, 61)')
|
|
}
|
|
await detail.click();check(`actual ${name} callback / close / focus`,(await host.locator('[data-callback-log]').textContent()).includes(callback)&&await trigger.getAttribute('aria-expanded')==='false'&&await trigger.evaluate(e=>e===document.activeElement))
|
|
}
|
|
// Layer Detail · Input was removed (5faa1f1); Overview's Header connects onLayerDetail to its callback output.
|
|
await goto('overview')
|
|
const layerHost=page.locator('header.hm-sw-header').first()
|
|
const layerTrigger=layerHost.getByRole('button',{name:'레이어',exact:true});await layerTrigger.click()
|
|
await layerHost.getByRole('button',{name:'레이어 상세',exact:true}).click()
|
|
check('actual layer callback / close / focus (Overview)',(await page.locator('[data-preview-callback]').textContent()).includes('onLayerDetail')&&await layerTrigger.getAttribute('aria-expanded')==='false'&&await layerTrigger.evaluate(e=>e===document.activeElement))
|
|
await goto('detail-buttons')
|
|
const rows=page.locator('[data-detail-comparison] [data-detail-row]')
|
|
const names=['레이어 상세','색상 상세','선스타일 상세','문자스타일 상세','치수스타일 상세'], widths=[113,99,128,142,142]
|
|
for(let j=0;j<5;j++){
|
|
const row=rows.nth(j),button=row.locator('[data-detail-case="default"] button'),off=row.locator('[data-detail-case="disabled"] button'),empty=row.locator('[data-detail-case="no-callback"] button')
|
|
await page.mouse.move(1,1);const rest=await button.evaluate(style)
|
|
await button.hover();const hover=await button.evaluate(style)
|
|
await page.mouse.move(1,1);const leave=await button.evaluate(style)
|
|
await off.hover({force:true});const disabled=await off.evaluate(style)
|
|
report.styles[names[j]]={default:rest,hover,disabled}
|
|
for(const [state,s,ref] of [['default',rest,before.textDefault],['hover',hover,before.textHover]]){
|
|
check(`${names[j]} ${state} equals original text design`,['background','color','opacity','border','radius','shadow','textColor','textOpacity','textStroke','iconOpacity','iconContent'].every(k=>s[k]===ref[k]),{actual:s,reference:ref})
|
|
check(`${names[j]} ${state} dimensions`,s.width===widths[j]&&s.height===24,s)
|
|
}
|
|
check(`${names[j]} leave restores`,JSON.stringify(rest)===JSON.stringify(leave))
|
|
check(`${names[j]} disabled stays default`,disabled.disabled&&['background','textOpacity','iconContent','radius'].every(k=>disabled[k]===rest[k]))
|
|
const count=await row.locator('output').textContent();const box=await off.boundingBox();await page.mouse.click(box.x+box.width/2,box.y+box.height/2)
|
|
check(`${names[j]} disabled blocks callback`,await row.locator('output').textContent()===count)
|
|
await button.click();check(`${names[j]} callback once`,await row.locator('output').textContent()==='1')
|
|
await empty.hover();check(`${names[j]} callback-free hover`,!(await empty.isDisabled())&&(await empty.evaluate(style)).background===hover.background);await empty.click()
|
|
await page.mouse.move(1,1);await button.focus();await page.keyboard.press('Tab');await page.keyboard.press('Shift+Tab')
|
|
check(`${names[j]} keyboard focus visible`,await button.evaluate(e=>e.matches(':focus-visible')&&getComputedStyle(e).outlineStyle!=='none'))
|
|
await page.keyboard.press('Enter');check(`${names[j]} keyboard callback`,await row.locator('output').textContent()==='2')
|
|
}
|
|
await page.mouse.move(1,1);await page.screenshot({path:path.join(output,'comparison-default.png'),fullPage:true})
|
|
await rows.nth(3).locator('[data-detail-case="hover"] button').hover();await page.screenshot({path:path.join(output,'comparison-pointer-hover.png'),fullPage:true})
|
|
}
|
|
}
|
|
check('no browser errors',report.errors.length===0,report.errors)
|
|
} catch(e) { check('suite completed',false,e.stack) }
|
|
finally { report.status=report.checks.every(c=>c.status==='PASS')?'PASS':'FAIL';await writeFile(path.join(output,`${mode}-result.json`),JSON.stringify(report,null,2));await browser.close();if(server)await new Promise(resolve=>server.close(resolve));console.log(JSON.stringify({status:report.status,checks:report.checks.length,stories:report.storyIds?.length,errors:report.errors}));process.exitCode=report.status==='PASS'?0:1 }
|