fix: design harmonization on last features
This commit is contained in:
fsylvain committed
1 parent
953be7342d
commit
70c8492f4f
23 files changed
+526
-840
No files matched your search
+69
-122
@@ -165,11 +165,6 @@ const verifiedSession: ApiMock = {
|
||||
}
|
||||
|
||||
const updateRunningVersion = 'v2.2.0-beta'
|
||||
const newCardAbsentReason = 'new card absent from board frame (dashed placeholder)'
|
||||
const homeActivityMock: ApiMock = {
|
||||
status: 200,
|
||||
body: { items: [], total: 0, page: 1, size: 5 },
|
||||
}
|
||||
const workspaceSettingsBody = {
|
||||
version: updateRunningVersion,
|
||||
activity_retention_days: 90,
|
||||
@@ -304,6 +299,7 @@ function updateApi(
|
||||
return {
|
||||
'GET /v1/auth/me': role === 'owner' ? verifiedSession : adminSession,
|
||||
'GET /v1/settings/': { status: 200, body: workspaceSettingsBody },
|
||||
[purgeSettingsPath]: settingsBody(purgeSettingsBody()),
|
||||
'GET /v1/system/update': { status: 200, body: status },
|
||||
'POST /v1/system/update/check': check,
|
||||
}
|
||||
@@ -2392,7 +2388,10 @@ function cleanupApi(
|
||||
return {
|
||||
'GET /v1/auth/me': sessionWithRole(role),
|
||||
'GET /v1/settings/': { status: 200, body: workspaceSettingsBody },
|
||||
'GET /v1/system/update': { status: 200, hang: true },
|
||||
'GET /v1/system/update': {
|
||||
status: 200,
|
||||
body: updateStatusBody({ checked_at: '2026-09-10T09:41:00Z', can_apply: true }),
|
||||
},
|
||||
[purgeSettingsPath]: settings,
|
||||
...overrides,
|
||||
}
|
||||
@@ -2402,12 +2401,47 @@ function settingsBody(body: unknown): ApiMock {
|
||||
return { status: 200, body }
|
||||
}
|
||||
|
||||
async function scrollSettingsToCleanup(page: Page) {
|
||||
const top = (page.viewportSize()?.width ?? 1440) < 768 ? 480 : 300
|
||||
await page.evaluate((top) => {
|
||||
const card = document.querySelector<HTMLElement>('[data-testid="settings-card"]')
|
||||
if (card?.parentElement && !card.parentElement.querySelector('[data-scroll-room]')) {
|
||||
const room = document.createElement('div')
|
||||
room.setAttribute('data-scroll-room', '')
|
||||
room.style.cssText = 'flex-shrink:0;height:1200px'
|
||||
card.parentElement.append(room)
|
||||
}
|
||||
let node: HTMLElement | null = card
|
||||
while (node) {
|
||||
if (
|
||||
node.scrollHeight > node.clientHeight &&
|
||||
/auto|scroll/.test(getComputedStyle(node).overflowY)
|
||||
) {
|
||||
node.scrollTop = top
|
||||
return
|
||||
}
|
||||
node = node.parentElement
|
||||
}
|
||||
window.scrollTo(0, top)
|
||||
}, top)
|
||||
}
|
||||
|
||||
function cleanupState(
|
||||
api: Record<string, ApiMock>,
|
||||
steps?: (page: Page) => Promise<void>,
|
||||
exception?: DiffException,
|
||||
): VisualState {
|
||||
return { path: '/settings', api, steps, exception }
|
||||
return {
|
||||
path: '/settings',
|
||||
now: boardNow,
|
||||
api,
|
||||
exception,
|
||||
steps: async (page) => {
|
||||
await scrollSettingsToCleanup(page)
|
||||
await steps?.(page)
|
||||
await scrollSettingsToCleanup(page)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
async function openCleanupDialog(page: Page) {
|
||||
@@ -2500,11 +2534,7 @@ const cleanupStates: Record<string, VisualState> = {
|
||||
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 }), undefined, {
|
||||
maxPercent: 17.5,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
}),
|
||||
'Loading skeleton': cleanupState(cleanupApi({ status: 200, hang: true })),
|
||||
Offline: cleanupState(cleanupApi(settingsBody(purgeOnBody)), goOffline),
|
||||
'Loading preview': cleanupState(
|
||||
cleanupDialogApi({ [purgePreviewPath]: { status: 200, hang: true } }),
|
||||
@@ -2579,19 +2609,7 @@ const mediaPurgeStates: Record<string, VisualState> = {
|
||||
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),
|
||||
'Duplicates tab: offline': mediaState(mediaDuplicatesApi(), goOffline, mediaDuplicatesPath),
|
||||
}
|
||||
|
||||
const activityOwnerSession: ApiMock = {
|
||||
@@ -2869,6 +2887,25 @@ const activityBoardEvents = [
|
||||
),
|
||||
]
|
||||
|
||||
const homeActivityTimes = [
|
||||
'2026-09-10T08:58:00Z',
|
||||
'2026-09-10T08:31:00Z',
|
||||
'2026-09-10T07:55:00Z',
|
||||
'2026-09-10T06:55:00Z',
|
||||
'2026-09-10T02:00:00Z',
|
||||
]
|
||||
const homeActivityMock: ApiMock = {
|
||||
status: 200,
|
||||
body: {
|
||||
items: activityBoardEvents
|
||||
.slice(0, 5)
|
||||
.map((event, index) => ({ ...event, created_at: homeActivityTimes[index] })),
|
||||
total: 5,
|
||||
page: 1,
|
||||
size: 5,
|
||||
},
|
||||
}
|
||||
|
||||
function activityPage(items: unknown[], total: number) {
|
||||
return { items, total, page: 1, size: 25 }
|
||||
}
|
||||
@@ -3121,11 +3158,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
'Up to date': { path: '/settings', skip: 'clock-sensitive' },
|
||||
Checking: {
|
||||
path: '/settings',
|
||||
exception: {
|
||||
maxPercent: 11.3,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
api: updateApi('owner', updateNeverChecked(), updateCheckHangs),
|
||||
},
|
||||
'Check failed': { path: '/settings', skip: 'clock-sensitive' },
|
||||
@@ -3134,20 +3166,10 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
Downloading: {
|
||||
path: '/settings',
|
||||
api: updateApi('owner', updateDownloading()),
|
||||
exception: {
|
||||
maxPercent: 10.6,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
},
|
||||
Verifying: {
|
||||
path: '/settings',
|
||||
api: updateApi('owner', updateJob('verifying')),
|
||||
exception: {
|
||||
maxPercent: 10.8,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
},
|
||||
'Ready to install': { path: '/settings', api: updateApi('owner', updateJob('ready')) },
|
||||
'Restart: confirm': {
|
||||
@@ -3188,29 +3210,14 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
},
|
||||
'Download failed': {
|
||||
path: '/settings',
|
||||
exception: {
|
||||
maxPercent: 10.9,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
api: updateApi('owner', updateJob('failed', { error: 'download' })),
|
||||
},
|
||||
'Verification failed': {
|
||||
path: '/settings',
|
||||
exception: {
|
||||
maxPercent: 10.5,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
api: updateApi('owner', updateJob('failed', { error: 'verification' })),
|
||||
},
|
||||
'Too many requests (429)': {
|
||||
path: '/settings',
|
||||
exception: {
|
||||
maxPercent: 11.3,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
api: updateApi('owner', updateNeverChecked(), {
|
||||
status: 429,
|
||||
headers: { 'Retry-After': '42' },
|
||||
@@ -3218,22 +3225,14 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
},
|
||||
'Not prepared': {
|
||||
path: '/settings',
|
||||
exception: {
|
||||
maxPercent: 11.9,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
api: updateApi('owner', updateAvailable()),
|
||||
now: boardNow,
|
||||
api: updateApi('owner', { ...updateAvailable(), checked_at: '2026-09-10T09:41:00Z' }),
|
||||
},
|
||||
'Not prepared: command copied': {
|
||||
path: '/settings',
|
||||
exception: {
|
||||
maxPercent: 11.9,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
origin: integrationOrigin,
|
||||
api: updateApi('owner', updateAvailable()),
|
||||
now: boardNow,
|
||||
api: updateApi('owner', { ...updateAvailable(), checked_at: '2026-09-10T09:41:00Z' }),
|
||||
steps: async (page) => {
|
||||
await page.getByRole('button', { name: 'Copy', exact: true }).click()
|
||||
await page.mouse.move(0, 0)
|
||||
@@ -3556,11 +3555,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
home: {
|
||||
Default: {
|
||||
path: '/home',
|
||||
exception: {
|
||||
maxPercent: 13.5,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
now: boardNow,
|
||||
api: {
|
||||
'GET /v1/auth/me': verifiedSession,
|
||||
@@ -3571,26 +3565,16 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
},
|
||||
Loading: {
|
||||
path: '/home',
|
||||
exception: {
|
||||
maxPercent: 18.6,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
now: boardNow,
|
||||
api: {
|
||||
'GET /v1/auth/me': verifiedSession,
|
||||
'GET /v1/activity': homeActivityMock,
|
||||
'GET /v1/activity': { ...homeActivityMock, hang: true },
|
||||
'GET /v1/system/update': { status: 200, body: updateStatusBody() },
|
||||
'GET /v1/article/': { status: 200, body: sixArticlesFixture, hang: true },
|
||||
},
|
||||
},
|
||||
'Empty, first run': {
|
||||
path: '/home',
|
||||
exception: {
|
||||
maxPercent: 11.4,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
now: boardNow,
|
||||
api: {
|
||||
'GET /v1/auth/me': verifiedSession,
|
||||
@@ -3601,11 +3585,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
},
|
||||
Error: {
|
||||
path: '/home',
|
||||
exception: {
|
||||
maxPercent: 25.3,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
now: boardNow,
|
||||
api: {
|
||||
'GET /v1/auth/me': verifiedSession,
|
||||
@@ -3616,11 +3595,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
},
|
||||
'Update available (owner)': {
|
||||
path: '/home',
|
||||
exception: {
|
||||
maxPercent: 11.9,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
now: boardNow,
|
||||
api: {
|
||||
'GET /v1/auth/me': verifiedSession,
|
||||
'GET /v1/activity': homeActivityMock,
|
||||
@@ -3630,11 +3605,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
},
|
||||
'Update ready to install (owner)': {
|
||||
path: '/home',
|
||||
exception: {
|
||||
maxPercent: 11.9,
|
||||
reason: newCardAbsentReason,
|
||||
approvedBy: 'fallen',
|
||||
},
|
||||
now: boardNow,
|
||||
api: {
|
||||
'GET /v1/auth/me': verifiedSession,
|
||||
'GET /v1/activity': homeActivityMock,
|
||||
@@ -4176,27 +4147,3 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
|
||||
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