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,
|
||||
'',
|
||||
|
||||
+356
-1
@@ -2246,6 +2246,336 @@ const apiKeysStates: Record<string, VisualState> = {
|
||||
},
|
||||
}
|
||||
|
||||
const purgeSettingsPath = 'GET /v1/media/purge-settings'
|
||||
const purgePatchPath = 'PATCH /v1/media/purge-settings'
|
||||
const purgePreviewPath = 'GET /v1/media/purge-preview'
|
||||
const purgeRunPath = 'POST /v1/media/purge'
|
||||
const purgeStaleCopy =
|
||||
'The library changed, so nothing was purged. Check the new summary and try again.'
|
||||
|
||||
function purgeSettingsBody(overrides: Record<string, unknown> = {}) {
|
||||
return {
|
||||
auto_purge_enabled: false,
|
||||
auto_purge_interval_days: 30,
|
||||
last_purge_at: null,
|
||||
last_purge_merged: 0,
|
||||
last_purge_articles_updated: 0,
|
||||
enabled_at: null,
|
||||
next_purge_at: null,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
const purgeLastRun = {
|
||||
last_purge_at: '2026-06-14T09:00:00Z',
|
||||
last_purge_merged: 3,
|
||||
last_purge_articles_updated: 5,
|
||||
}
|
||||
|
||||
const purgeOnBody = purgeSettingsBody({
|
||||
...purgeLastRun,
|
||||
auto_purge_enabled: true,
|
||||
enabled_at: '2026-06-14T09:00:00Z',
|
||||
next_purge_at: '2026-07-14T09:00:00Z',
|
||||
})
|
||||
|
||||
const purgeDoneLast = {
|
||||
last_purge_at: '2026-10-05T09:00:00Z',
|
||||
last_purge_merged: 9,
|
||||
last_purge_articles_updated: 12,
|
||||
}
|
||||
|
||||
const purgeGroups = [
|
||||
{
|
||||
keep_id: 12,
|
||||
filename: 'floorboards.jpg',
|
||||
url: '/media/floorboards.jpg',
|
||||
used_in: 4,
|
||||
merged: 2,
|
||||
},
|
||||
{ keep_id: 7, filename: 'IMG_4471.jpg', url: '/media/IMG_4471.jpg', used_in: 2, merged: 1 },
|
||||
{
|
||||
keep_id: 2,
|
||||
filename: 'kitchen-after.webp',
|
||||
url: '/media/kitchen-after.webp',
|
||||
used_in: 3,
|
||||
merged: 3,
|
||||
},
|
||||
{ keep_id: 4, filename: 'logo-renew.svg', url: '/media/logo-renew.svg', used_in: 5, merged: 3 },
|
||||
{
|
||||
keep_id: 11,
|
||||
filename: 'lime-plaster.jpg',
|
||||
url: '/media/lime-plaster.jpg',
|
||||
used_in: 2,
|
||||
merged: 1,
|
||||
},
|
||||
]
|
||||
|
||||
function purgePreviewBody(overrides: Record<string, unknown> = {}) {
|
||||
return {
|
||||
groups: 4,
|
||||
copies: 9,
|
||||
articles: 12,
|
||||
list: purgeGroups.slice(0, 4),
|
||||
more: 0,
|
||||
fingerprint: 'ab12',
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
const purgePreviewMany = purgePreviewBody({
|
||||
groups: 8,
|
||||
copies: 15,
|
||||
articles: 24,
|
||||
list: purgeGroups,
|
||||
more: 3,
|
||||
})
|
||||
const purgePreviewOne = purgePreviewBody({
|
||||
groups: 1,
|
||||
copies: 1,
|
||||
articles: 2,
|
||||
list: [purgeGroups[1]],
|
||||
fingerprint: 'one',
|
||||
})
|
||||
const purgePreviewThree = purgePreviewBody({
|
||||
groups: 3,
|
||||
copies: 7,
|
||||
articles: 10,
|
||||
list: [purgeGroups[0], purgeGroups[2], purgeGroups[3]],
|
||||
fingerprint: 'cd34',
|
||||
})
|
||||
const purgePreviewNone = purgePreviewBody({
|
||||
groups: 0,
|
||||
copies: 0,
|
||||
articles: 0,
|
||||
list: [],
|
||||
fingerprint: 'none',
|
||||
})
|
||||
|
||||
const purgeRunPartial = {
|
||||
groups_total: 4,
|
||||
groups_purged: 3,
|
||||
merged: 8,
|
||||
articles_updated: 10,
|
||||
failed_groups: 1,
|
||||
}
|
||||
const purgeRunDone = {
|
||||
groups_total: 4,
|
||||
groups_purged: 4,
|
||||
merged: 9,
|
||||
articles_updated: 12,
|
||||
failed_groups: 0,
|
||||
}
|
||||
|
||||
function sessionWithRole(role: string): ApiMock {
|
||||
return { status: 200, body: { ...(verifiedSession.body as object), role } }
|
||||
}
|
||||
|
||||
function cleanupApi(
|
||||
settings: ApiMock,
|
||||
overrides: Record<string, ApiMock> = {},
|
||||
role = 'owner',
|
||||
): Record<string, ApiMock> {
|
||||
return {
|
||||
'GET /v1/auth/me': sessionWithRole(role),
|
||||
'GET /v1/settings/': { status: 200, body: { version: updateRunningVersion } },
|
||||
'GET /v1/system/update': { status: 200, hang: true },
|
||||
[purgeSettingsPath]: settings,
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
function settingsBody(body: unknown): ApiMock {
|
||||
return { status: 200, body }
|
||||
}
|
||||
|
||||
function cleanupState(
|
||||
api: Record<string, ApiMock>,
|
||||
steps?: (page: Page) => Promise<void>,
|
||||
): VisualState {
|
||||
return { path: '/settings', api, steps }
|
||||
}
|
||||
|
||||
async function openCleanupDialog(page: Page) {
|
||||
await page.getByRole('button', { name: 'Purge duplicates', exact: true }).click()
|
||||
await page.getByRole('alertdialog').waitFor()
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
|
||||
function confirmCleanupDialog(label: string, wait?: string) {
|
||||
return async (page: Page) => {
|
||||
await openCleanupDialog(page)
|
||||
await page
|
||||
.getByRole('alertdialog')
|
||||
.getByRole('button', { name: label, exact: true })
|
||||
.click()
|
||||
if (wait) {
|
||||
await page.getByText(wait, { exact: true }).first().waitFor()
|
||||
}
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
async function typeDays(page: Page, value: string) {
|
||||
const field = page.locator('#auto-purge-days')
|
||||
await field.fill(value)
|
||||
await field.press('Enter')
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
|
||||
function afterFirst(first: unknown, later: unknown): ApiMock {
|
||||
return { status: 200, bodyFor: (_url, call) => (call === 1 ? first : later) }
|
||||
}
|
||||
|
||||
function cleanupDialogApi(overrides: Record<string, ApiMock> = {}) {
|
||||
return cleanupApi(settingsBody(purgeSettingsBody()), {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
...overrides,
|
||||
})
|
||||
}
|
||||
|
||||
async function holdToast(page: Page) {
|
||||
await page.getByText('Duplicates purged', { exact: true }).hover()
|
||||
}
|
||||
|
||||
function successState(settings: ApiMock) {
|
||||
return cleanupState(
|
||||
cleanupApi(settings, {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
[purgeRunPath]: settingsBody(purgeRunDone),
|
||||
}),
|
||||
async (page) => {
|
||||
await confirmCleanupDialog('Purge 4 groups', 'Duplicates purged')(page)
|
||||
await holdToast(page)
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
const cleanupStates: Record<string, VisualState> = {
|
||||
'Default: off, never run': cleanupState(cleanupApi(settingsBody(purgeSettingsBody()))),
|
||||
'On: 30 days, last run': cleanupState(cleanupApi(settingsBody(purgeOnBody))),
|
||||
Saving: cleanupState(
|
||||
cleanupApi(settingsBody(purgeSettingsBody(purgeLastRun)), {
|
||||
[purgePatchPath]: { status: 200, hang: true },
|
||||
}),
|
||||
async (page) => {
|
||||
await page.getByRole('switch').click()
|
||||
await page.locator('#auto-purge-days').focus()
|
||||
await page.mouse.move(0, 0)
|
||||
},
|
||||
),
|
||||
Saved: cleanupState(
|
||||
cleanupApi(settingsBody(purgeSettingsBody(purgeLastRun)), {
|
||||
[purgePatchPath]: settingsBody(purgeOnBody),
|
||||
}),
|
||||
async (page) => {
|
||||
await page.getByRole('switch').click()
|
||||
await page.getByText('Saved', { exact: true }).waitFor()
|
||||
await page.mouse.move(0, 0)
|
||||
},
|
||||
),
|
||||
'Save failed': cleanupState(
|
||||
cleanupApi(settingsBody(purgeOnBody), { [purgePatchPath]: { status: 500 } }),
|
||||
async (page) => {
|
||||
await typeDays(page, '45')
|
||||
await page.getByText("Couldn't save. Try again in a moment.").waitFor()
|
||||
},
|
||||
),
|
||||
'Validation error': cleanupState(cleanupApi(settingsBody(purgeOnBody)), async (page) => {
|
||||
await typeDays(page, '400')
|
||||
await page.getByText('Enter a whole number of days between 1 and 365.').waitFor()
|
||||
}),
|
||||
'Read-only (non-admin)': cleanupState(cleanupApi(settingsBody(purgeOnBody), {}, 'member')),
|
||||
'Loading skeleton': cleanupState(cleanupApi({ status: 200, hang: true })),
|
||||
Offline: cleanupState(cleanupApi(settingsBody(purgeOnBody)), goOffline),
|
||||
'Loading preview': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, hang: true } }),
|
||||
openCleanupDialog,
|
||||
),
|
||||
Confirm: cleanupState(cleanupDialogApi(), openCleanupDialog),
|
||||
'Confirm: many groups': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, body: purgePreviewMany } }),
|
||||
openCleanupDialog,
|
||||
),
|
||||
'In progress': cleanupState(
|
||||
cleanupDialogApi({ [purgeRunPath]: { status: 200, hang: true } }),
|
||||
confirmCleanupDialog('Purge 4 groups'),
|
||||
),
|
||||
'Nothing to purge': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, body: purgePreviewNone } }),
|
||||
openCleanupDialog,
|
||||
),
|
||||
Error: cleanupState(
|
||||
cleanupDialogApi({ [purgeRunPath]: { status: 500 } }),
|
||||
confirmCleanupDialog(
|
||||
'Purge 4 groups',
|
||||
"Couldn't purge the duplicates. Nothing was changed. Try again in a moment.",
|
||||
),
|
||||
),
|
||||
'Partial failure': cleanupState(
|
||||
cleanupDialogApi({
|
||||
[purgePreviewPath]: afterFirst(purgePreviewBody(), purgePreviewOne),
|
||||
[purgeRunPath]: settingsBody(purgeRunPartial),
|
||||
}),
|
||||
confirmCleanupDialog(
|
||||
'Purge 4 groups',
|
||||
"Some groups couldn't be merged. 3 of 4 groups were purged. Try again to finish.",
|
||||
),
|
||||
),
|
||||
'Conflict (409)': cleanupState(
|
||||
cleanupDialogApi({
|
||||
[purgePreviewPath]: afterFirst(purgePreviewBody(), purgePreviewThree),
|
||||
[purgeRunPath]: { status: 409, body: purgeStaleCopy },
|
||||
}),
|
||||
confirmCleanupDialog('Purge 4 groups', purgeStaleCopy),
|
||||
),
|
||||
Success: successState(afterFirst(purgeSettingsBody(), purgeSettingsBody(purgeDoneLast))),
|
||||
'Success, automatic purge on': successState(
|
||||
afterFirst(
|
||||
purgeOnBody,
|
||||
purgeSettingsBody({
|
||||
...purgeDoneLast,
|
||||
auto_purge_enabled: true,
|
||||
next_purge_at: '2026-11-04T09:00:00Z',
|
||||
}),
|
||||
),
|
||||
),
|
||||
}
|
||||
|
||||
async function openMediaPurgeDialog(page: Page) {
|
||||
await page.getByRole('button', { name: 'Purge duplicates', exact: true }).click()
|
||||
await page.getByRole('alertdialog').waitFor()
|
||||
await page.mouse.move(0, 0)
|
||||
}
|
||||
|
||||
const mediaPurgeStates: Record<string, VisualState> = {
|
||||
'Duplicates: purge all': mediaState(
|
||||
mediaDuplicatesApi(undefined, {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
}),
|
||||
openMediaPurgeDialog,
|
||||
mediaDuplicatesPath,
|
||||
),
|
||||
'Duplicates tab with the button': mediaState(
|
||||
mediaDuplicatesApi(),
|
||||
undefined,
|
||||
mediaDuplicatesPath,
|
||||
),
|
||||
'Dialog from Media': mediaState(
|
||||
mediaDuplicatesApi(undefined, {
|
||||
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
|
||||
}),
|
||||
openMediaPurgeDialog,
|
||||
mediaDuplicatesPath,
|
||||
),
|
||||
'Member: button hidden': mediaState(
|
||||
mediaDuplicatesApi(undefined, { 'GET /v1/auth/me': sessionWithRole('member') }),
|
||||
undefined,
|
||||
mediaDuplicatesPath,
|
||||
),
|
||||
'Offline: button disabled': mediaState(mediaDuplicatesApi(), goOffline, mediaDuplicatesPath),
|
||||
}
|
||||
|
||||
export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
profile: {
|
||||
'Account menu': {
|
||||
@@ -2391,6 +2721,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
'Invite sent': { path: '/users', skip: 'clock-sensitive' },
|
||||
},
|
||||
settings: {
|
||||
...cleanupStates,
|
||||
'Up to date': { path: '/settings', skip: 'clock-sensitive' },
|
||||
Checking: {
|
||||
path: '/settings',
|
||||
@@ -3364,6 +3695,30 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
steps: submitAcceptInvite('lea', 'limewash2026'),
|
||||
},
|
||||
},
|
||||
media: mediaStates,
|
||||
media: { ...mediaStates, ...mediaPurgeStates },
|
||||
'media-picker': pickerStates,
|
||||
}
|
||||
|
||||
const hideCleanupCard = '[data-testid="media-cleanup-card"] { display: none !important }'
|
||||
|
||||
function withoutCleanupCard(state: VisualState): VisualState {
|
||||
if (state.skip) {
|
||||
return state
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
api: { ...state.api, [purgeSettingsPath]: { status: 200, hang: true } },
|
||||
steps: async (page) => {
|
||||
await page.addStyleTag({ content: hideCleanupCard })
|
||||
await state.steps?.(page)
|
||||
await page.addStyleTag({ content: hideCleanupCard })
|
||||
await page.mouse.move(0, 0)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
for (const [name, state] of Object.entries(visualStates.settings!)) {
|
||||
if (!(name in cleanupStates)) {
|
||||
visualStates.settings![name] = withoutCleanupCard(state)
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user