4e2e4d2aed
#11769 improved the lexical version view diff component. This PR improves the rest of the version view. ## What changed - Column layout when selecting a version: - Previously: Selected version on the left, latest version on the left - Now: Previous version on the left, previous version on the right (mimics behavior of GitHub) - Locale selector now displayed in pill selector, rather than react-select - Smoother, more reliable locale, modifiedOnly and version selection. Now uses clean event callbacks rather than useEffects - React-diff-viewer-continued has been replaced with the html differ we use in lexical - Updated Design for all field diffs - Version columns now have a clearly defined separator line - Fixed collapsibles showing in version view despite having no modified fields if modifiedOnly is true - New, redesigned header ## Screenshots ### Before   ### After    
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import type { Locator, Page } from '@playwright/test'
|
|
|
|
import { expect } from '@playwright/test'
|
|
|
|
import { exactText } from '../../helpers.js'
|
|
import { openListColumns } from './openListColumns.js'
|
|
|
|
export const toggleColumn = async (
|
|
page: Page,
|
|
{
|
|
togglerSelector,
|
|
columnContainerSelector,
|
|
columnLabel,
|
|
targetState: targetStateFromArgs,
|
|
columnName,
|
|
expectURLChange = true,
|
|
}: {
|
|
columnContainerSelector?: string
|
|
columnLabel: string
|
|
columnName?: string
|
|
expectURLChange?: boolean
|
|
targetState?: 'off' | 'on'
|
|
togglerSelector?: string
|
|
},
|
|
): Promise<{
|
|
columnContainer: Locator
|
|
}> => {
|
|
const { columnContainer } = await openListColumns(page, {
|
|
togglerSelector,
|
|
columnContainerSelector,
|
|
})
|
|
|
|
const column = columnContainer.locator(`.pill-selector .pill-selector__pill`, {
|
|
hasText: exactText(columnLabel),
|
|
})
|
|
|
|
const isActiveBeforeClick = await column.evaluate((el) =>
|
|
el.classList.contains('pill-selector__pill--selected'),
|
|
)
|
|
|
|
const targetState =
|
|
targetStateFromArgs !== undefined ? targetStateFromArgs : isActiveBeforeClick ? 'off' : 'on'
|
|
|
|
await expect(column).toBeVisible()
|
|
|
|
const requiresToggle =
|
|
(isActiveBeforeClick && targetState === 'off') || (!isActiveBeforeClick && targetState === 'on')
|
|
|
|
if (requiresToggle) {
|
|
await column.click()
|
|
}
|
|
|
|
if (targetState === 'off') {
|
|
// no class
|
|
await expect(column).not.toHaveClass(/pill-selector__pill--selected/)
|
|
} else {
|
|
// has class
|
|
await expect(column).toHaveClass(/pill-selector__pill--selected/)
|
|
}
|
|
|
|
if (expectURLChange && columnName && requiresToggle) {
|
|
await waitForColumnInURL({ page, columnName, state: targetState })
|
|
}
|
|
|
|
return { columnContainer }
|
|
}
|
|
|
|
export const waitForColumnInURL = async ({
|
|
page,
|
|
columnName,
|
|
state,
|
|
}: {
|
|
columnName: string
|
|
page: Page
|
|
state: 'off' | 'on'
|
|
}): Promise<void> => {
|
|
await page.waitForURL(/.*\?.*/)
|
|
|
|
const identifier = `${state === 'off' ? '-' : ''}${columnName}`
|
|
|
|
// Test that the identifier is in the URL
|
|
// It must appear in the `columns` query parameter, i.e. after `columns=...` and before the next `&`
|
|
// It must also appear in it entirety to prevent partially matching other values, i.e. between quotation marks
|
|
const regex = new RegExp(`columns=([^&]*${encodeURIComponent(`"${identifier}"`)}[^&]*)`)
|
|
|
|
await page.waitForURL(regex)
|
|
}
|