Files
payload/test/helpers/e2e/toggleColumn.ts
Jacob Fletcher f7172b5b2c fix(ui): refreshes column state during hmr and respects admin.disableListColumn despite preferences (#9846)
Partial fix for #9774. When `admin.disableListColumn` is set
retroactively, it continues to appear in column state, but shouldn't.
This was because the table column context was not refreshing after HMR
runs, and would instead hold onto these stale columns until the page
itself refreshes. Similarly, this was also a problem when the user had
saved any of these columns to their list preferences, where those prefs
would take precedence despite these properties being set on the
underlying fields. The fix is to filter these columns from all requests
that send them, and ensure local component state properly refreshes
itself.
2024-12-10 15:11:44 -05:00

75 lines
1.9 KiB
TypeScript

import type { Page } from '@playwright/test'
import { expect } from '@playwright/test'
import { exactText } from '../../helpers.js'
export const openListColumns = async (
page: Page,
{
togglerSelector = '.list-controls__toggle-columns',
columnContainerSelector = '.list-controls__columns',
}: {
columnContainerSelector?: string
togglerSelector?: string
},
): Promise<any> => {
const columnContainer = page.locator(columnContainerSelector).first()
const isAlreadyOpen = await columnContainer.isVisible()
if (!isAlreadyOpen) {
await page.locator(togglerSelector).first().click()
}
await expect(page.locator(`${columnContainerSelector}.rah-static--height-auto`)).toBeVisible()
return columnContainer
}
export const toggleColumn = async (
page: Page,
{
togglerSelector,
columnContainerSelector,
columnLabel,
targetState: targetStateFromArgs,
}: {
columnContainerSelector?: string
columnLabel: string
targetState?: 'off' | 'on'
togglerSelector?: string
},
): Promise<any> => {
const columnContainer = await openListColumns(page, { togglerSelector, columnContainerSelector })
const column = columnContainer.locator(`.column-selector .column-selector__column`, {
hasText: exactText(columnLabel),
})
const isActiveBeforeClick = await column.evaluate((el) =>
el.classList.contains('column-selector__column--active'),
)
const targetState =
targetStateFromArgs !== undefined ? targetStateFromArgs : isActiveBeforeClick ? 'off' : 'on'
await expect(column).toBeVisible()
if (
(isActiveBeforeClick && targetState === 'off') ||
(!isActiveBeforeClick && targetState === 'on')
) {
await column.click()
}
if (targetState === 'off') {
// no class
await expect(column).not.toHaveClass(/column-selector__column--active/)
} else {
// has class
await expect(column).toHaveClass(/column-selector__column--active/)
}
return column
}