feat: media duplicate purge, part 3 of 3: the SPA (Settings "Media cleanup" card, PurgeDuplicatesDialog, Media Duplicates toolbar button)
This commit is contained in:
fsylvain committed
1 parent
1a55a39425
commit
2303b12377
26 files changed
+3856
-83
No files matched your search
+164
-69
@@ -11,11 +11,80 @@ import { visualStates, type ApiMock, type VisualState } from './states'
|
||||
type Viewport = 'desktop' | 'mobile'
|
||||
type Theme = 'light' | 'dark'
|
||||
|
||||
interface Source {
|
||||
board: string
|
||||
group: string
|
||||
states: string[]
|
||||
alias: Record<string, string>
|
||||
}
|
||||
|
||||
interface Screen {
|
||||
name: string
|
||||
board: string
|
||||
group: string
|
||||
states: string[]
|
||||
sources: Source[]
|
||||
}
|
||||
|
||||
const cleanupBoard = 'RenewCMS Screens Media cleanup.dc.html'
|
||||
|
||||
const extraSources: Record<string, Source[]> = {
|
||||
settings: [
|
||||
{
|
||||
board: cleanupBoard,
|
||||
group: 'Settings',
|
||||
states: [
|
||||
'Default: off, never run',
|
||||
'On: 30 days, last run',
|
||||
'Saving',
|
||||
'Saved',
|
||||
'Save failed',
|
||||
'Validation error',
|
||||
'Read-only (non-admin)',
|
||||
'Loading skeleton',
|
||||
'Offline',
|
||||
],
|
||||
alias: {},
|
||||
},
|
||||
{
|
||||
board: cleanupBoard,
|
||||
group: 'Dialog',
|
||||
states: [
|
||||
'Loading preview',
|
||||
'Confirm',
|
||||
'Confirm: many groups',
|
||||
'In progress',
|
||||
'Nothing to purge',
|
||||
'Error',
|
||||
'Partial failure',
|
||||
'Conflict (409)',
|
||||
],
|
||||
alias: {},
|
||||
},
|
||||
{
|
||||
board: cleanupBoard,
|
||||
group: 'Results',
|
||||
states: ['Success', 'Success, automatic purge on'],
|
||||
alias: {},
|
||||
},
|
||||
],
|
||||
media: [
|
||||
{
|
||||
board: cleanupBoard,
|
||||
group: 'Media',
|
||||
states: [
|
||||
'Duplicates tab with the button',
|
||||
'Dialog from Media',
|
||||
'Member: button hidden',
|
||||
'Offline: button disabled',
|
||||
],
|
||||
alias: { 'Offline: button disabled': 'Offline' },
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const boardAlias: Record<string, Record<string, string>> = {
|
||||
media: { 'Duplicates: purge all': 'Purge duplicates: confirm' },
|
||||
}
|
||||
|
||||
const webRoot = resolve(import.meta.dirname, '..')
|
||||
@@ -95,25 +164,42 @@ async function readScreen(name: string): Promise<Screen> {
|
||||
throw new Error(`docs/design/screens/${name}.md has no visual reference line`)
|
||||
}
|
||||
const statesStart = markdown.search(/^## States$/m)
|
||||
const statesMarkdown = statesStart === -1 ? markdown : markdown.slice(statesStart)
|
||||
const afterStates = statesStart === -1 ? markdown : markdown.slice(statesStart)
|
||||
const nextSection = afterStates.slice(1).search(/^## /m)
|
||||
const statesMarkdown = nextSection === -1 ? afterStates : afterStates.slice(0, nextSection + 1)
|
||||
const headingStates = [...statesMarkdown.matchAll(/^### (.+)$/gm)].map((match) =>
|
||||
match[1]!.trim(),
|
||||
)
|
||||
const states = headingStates.length ? headingStates : tableStates(statesMarkdown)
|
||||
return { name, board: reference[1]!, group: reference[2]!, states }
|
||||
const primary: Source = {
|
||||
board: reference[1]!,
|
||||
group: reference[2]!,
|
||||
states,
|
||||
alias: boardAlias[name] ?? {},
|
||||
}
|
||||
return {
|
||||
name,
|
||||
board: primary.board,
|
||||
group: primary.group,
|
||||
states,
|
||||
sources: [primary, ...(extraSources[name] ?? [])],
|
||||
}
|
||||
}
|
||||
|
||||
function pickStates(screen: Screen, wanted?: string) {
|
||||
function pickSources(screen: Screen, wanted?: string) {
|
||||
if (!wanted) {
|
||||
return screen.states
|
||||
return screen.sources
|
||||
}
|
||||
const match = screen.states.find(
|
||||
(state) => state.toLowerCase() === wanted.toLowerCase() || slug(state) === slug(wanted),
|
||||
)
|
||||
if (!match) {
|
||||
throw new Error(`Unknown state "${wanted}". Known: ${screen.states.join(', ')}`)
|
||||
const matches = (state: string) =>
|
||||
state.toLowerCase() === wanted.toLowerCase() || slug(state) === slug(wanted)
|
||||
const picked = screen.sources
|
||||
.map((source) => ({ ...source, states: source.states.filter(matches) }))
|
||||
.filter((source) => source.states.length > 0)
|
||||
if (picked.length === 0) {
|
||||
const known = screen.sources.flatMap((source) => source.states)
|
||||
throw new Error(`Unknown state "${wanted}". Known: ${known.join(', ')}`)
|
||||
}
|
||||
return [match]
|
||||
return picked
|
||||
}
|
||||
|
||||
async function serveDesign() {
|
||||
@@ -444,7 +530,7 @@ async function diff(browser: Browser, designPath: string, appPath: string, diffP
|
||||
async function main() {
|
||||
const args = parseArgs(process.argv.slice(2))
|
||||
const screen = await readScreen(args.screen)
|
||||
const states = pickStates(screen, args.state)
|
||||
const sources = pickSources(screen, args.state)
|
||||
const setups = visualStates[screen.name] ?? {}
|
||||
|
||||
const design = await serveDesign()
|
||||
@@ -458,67 +544,76 @@ async function main() {
|
||||
try {
|
||||
for (const viewport of args.viewports) {
|
||||
for (const theme of args.themes) {
|
||||
const board = await openBoard(browser, design.origin, screen, theme)
|
||||
for (const state of states) {
|
||||
const skip = setups[state]?.skip
|
||||
if (skip === 'pending') {
|
||||
pending++
|
||||
lines.push(`PENDING ${state} · ${viewport} · ${theme}: slice B2`)
|
||||
continue
|
||||
}
|
||||
if (skip) {
|
||||
skipped++
|
||||
lines.push(`SKIP ${state} · ${viewport} · ${theme}: ${skip}`)
|
||||
continue
|
||||
}
|
||||
const directory = join(outRoot, screen.name, slug(state))
|
||||
await mkdir(directory, { recursive: true })
|
||||
const suffix = `${viewport}-${theme}.png`
|
||||
const designPath = join(directory, `design-${suffix}`)
|
||||
await captureDesign(board, screen, state, viewport, designPath)
|
||||
|
||||
const setup = setups[state]
|
||||
if (!setup) {
|
||||
failures++
|
||||
lines.push(
|
||||
`FAIL ${state} · ${viewport} · ${theme}: no setup in web/visual/states.ts → ${relative(repoRoot, designPath)}`,
|
||||
for (const source of sources) {
|
||||
const sourceScreen = { ...screen, board: source.board, group: source.group }
|
||||
const board = await openBoard(browser, design.origin, sourceScreen, theme)
|
||||
for (const state of source.states) {
|
||||
const skip = setups[state]?.skip
|
||||
if (skip === 'pending') {
|
||||
pending++
|
||||
lines.push(`PENDING ${state} · ${viewport} · ${theme}: slice B2`)
|
||||
continue
|
||||
}
|
||||
if (skip) {
|
||||
skipped++
|
||||
lines.push(`SKIP ${state} · ${viewport} · ${theme}: ${skip}`)
|
||||
continue
|
||||
}
|
||||
const directory = join(outRoot, screen.name, slug(state))
|
||||
await mkdir(directory, { recursive: true })
|
||||
const suffix = `${viewport}-${theme}.png`
|
||||
const designPath = join(directory, `design-${suffix}`)
|
||||
await captureDesign(
|
||||
board,
|
||||
sourceScreen,
|
||||
source.alias[state] ?? state,
|
||||
viewport,
|
||||
designPath,
|
||||
)
|
||||
continue
|
||||
}
|
||||
|
||||
const appPath = join(directory, `app-${suffix}`)
|
||||
const diffPath = join(directory, `diff-${suffix}`)
|
||||
const unmocked = await captureApp(
|
||||
browser,
|
||||
app.origin,
|
||||
setup,
|
||||
viewport,
|
||||
theme,
|
||||
appPath,
|
||||
)
|
||||
const result = await diff(browser, designPath, appPath, diffPath)
|
||||
const percent = result.ratio * 100
|
||||
const budget = setup.exception?.maxPercent ?? maxDiffPercent
|
||||
const problems = [
|
||||
...(percent > budget
|
||||
? [`${percent.toFixed(2)}% exceeds ${budget}% budget`]
|
||||
: []),
|
||||
...(result.sizes.split(' vs ')[0] !== result.sizes.split(' vs ')[1]
|
||||
? [`size mismatch ${result.sizes}`]
|
||||
: []),
|
||||
...unmocked.map((key) => `unmocked ${key}`),
|
||||
]
|
||||
if (problems.length) {
|
||||
failures++
|
||||
const setup = setups[state]
|
||||
if (!setup) {
|
||||
failures++
|
||||
lines.push(
|
||||
`FAIL ${state} · ${viewport} · ${theme}: no setup in web/visual/states.ts → ${relative(repoRoot, designPath)}`,
|
||||
)
|
||||
continue
|
||||
}
|
||||
|
||||
const appPath = join(directory, `app-${suffix}`)
|
||||
const diffPath = join(directory, `diff-${suffix}`)
|
||||
const unmocked = await captureApp(
|
||||
browser,
|
||||
app.origin,
|
||||
setup,
|
||||
viewport,
|
||||
theme,
|
||||
appPath,
|
||||
)
|
||||
const result = await diff(browser, designPath, appPath, diffPath)
|
||||
const percent = result.ratio * 100
|
||||
const budget = setup.exception?.maxPercent ?? maxDiffPercent
|
||||
const problems = [
|
||||
...(percent > budget
|
||||
? [`${percent.toFixed(2)}% exceeds ${budget}% budget`]
|
||||
: []),
|
||||
...(result.sizes.split(' vs ')[0] !== result.sizes.split(' vs ')[1]
|
||||
? [`size mismatch ${result.sizes}`]
|
||||
: []),
|
||||
...unmocked.map((key) => `unmocked ${key}`),
|
||||
]
|
||||
if (problems.length) {
|
||||
failures++
|
||||
}
|
||||
const exception = setup.exception
|
||||
? ` [exception ${setup.exception.maxPercent}% approved by ${setup.exception.approvedBy}: ${setup.exception.reason}]`
|
||||
: ''
|
||||
lines.push(
|
||||
`${problems.length ? 'FAIL' : 'PASS'} ${state} · ${viewport} · ${theme}: ${percent.toFixed(2)}% pixels differ → ${relative(repoRoot, directory)}${problems.length ? ` (${problems.join('; ')})` : ''}${exception}`,
|
||||
)
|
||||
}
|
||||
const exception = setup.exception
|
||||
? ` [exception ${setup.exception.maxPercent}% approved by ${setup.exception.approvedBy}: ${setup.exception.reason}]`
|
||||
: ''
|
||||
lines.push(
|
||||
`${problems.length ? 'FAIL' : 'PASS'} ${state} · ${viewport} · ${theme}: ${percent.toFixed(2)}% pixels differ → ${relative(repoRoot, directory)}${problems.length ? ` (${problems.join('; ')})` : ''}${exception}`,
|
||||
)
|
||||
await board.context().close()
|
||||
}
|
||||
await board.context().close()
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
@@ -535,7 +630,7 @@ async function main() {
|
||||
: `PASS: all ${checked} captures within budget (${maxDiffPercent}% unless an approved exception is listed${skippedNote})`
|
||||
const report = [
|
||||
`# Visual check: ${screen.name}`,
|
||||
`Board: ${screen.board}, group "${screen.group}"`,
|
||||
`Boards: ${sources.map((source) => `${source.board} / ${source.group}`).join('; ')}`,
|
||||
'',
|
||||
verdict,
|
||||
'',
|
||||
|
||||
Reference in new issue
Block a user