tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more tests and better implementation

Browse Source
This commit is contained in:
Bruno Crosier
2024-08-31 23:58:20 +01:00
parent efe17ff5e4
commit 053256d5ce
6 changed files with 92 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
test/fields/collections/Row/index.ts
View File

@@ -47,6 +47,35 @@ const RowFields: CollectionConfig = {
},
],
},
{
type: 'row',
fields: [
{
name: 'field_with_width_30_percent',
label: 'Field with 30% width',
type: 'text',
admin: {
width: '30%',
},
},
{
name: 'field_with_width_60_percent',
label: 'Field with 60% width',
type: 'text',
admin: {
width: '60%',
},
},
{
name: 'field_with_width_20_percent',
label: 'Field with 20% width',
type: 'text',
admin: {
width: '20%',
},
},
],
},
{
type: 'row',
fields: [
@@ -60,6 +89,9 @@ const RowFields: CollectionConfig = {
type: 'text',
},
],
admin: {
width: '30%',
},
},
{
label: 'Collapsible within a row',

53
test/fields/e2e.spec.ts
View File

@@ -376,32 +376,47 @@ describe('fields', () => {
const fieldA = page.locator('input#field-field_with_width_a')
const fieldB = page.locator('input#field-field_with_width_b')
const fieldAGrandprent = fieldA.locator('..').locator('..')
const fieldBGrandprent = fieldB.locator('..').locator('..')
await expect(fieldA).toBeVisible()
await expect(fieldB).toBeVisible()
const hasCorrectCSS = async (el: Locator) => {
return await el.evaluate((el) => {
return el.style.width === '' && el.style.maxWidth === '50%'
})
}
expect(hasCorrectCSS(fieldAGrandprent)).toBeTruthy()
expect(hasCorrectCSS(fieldBGrandprent)).toBeTruthy()
const fieldABox = await fieldA.boundingBox()
const fieldBBox = await fieldB.boundingBox()
// Check that the top value of the fields are the same
// Give it some wiggle room of like 2px to account for differences in rendering
const tolerance = 2
expect(fieldABox.y).toBeLessThanOrEqual(fieldBBox.y + tolerance)
await expect(() => {
expect(fieldABox.y).toEqual(fieldBBox.y)
expect(fieldABox.width).toEqual(fieldBBox.width)
}).toPass()
// Check that the widths of the fields are the same
const difference = Math.abs(fieldABox.width - fieldBBox.width)
expect(difference).toBeLessThanOrEqual(tolerance)
const field_30_percent = page.locator(
'.field-type.text:has(input#field-field_with_width_30_percent)',
)
const field_60_percent = page.locator(
'.field-type.text:has(input#field-field_with_width_60_percent)',
)
const field_20_percent = page.locator(
'.field-type.text:has(input#field-field_with_width_20_percent)',
)
const collapsible_30_percent = page.locator(
'.collapsible-field:has(#field-field_within_collapsible_a)',
)
await expect(field_30_percent).toBeVisible()
await expect(field_60_percent).toBeVisible()
await expect(field_20_percent).toBeVisible()
await expect(collapsible_30_percent).toBeVisible()
const field_30_boundingBox = await field_30_percent.boundingBox()
const field_60_boundingBox = await field_60_percent.boundingBox()
const field_20_boundingBox = await field_20_percent.boundingBox()
const collapsible_30_boundingBox = await collapsible_30_percent.boundingBox()
await expect(() => {
expect(field_30_boundingBox.y).toEqual(field_60_boundingBox.y)
expect(field_30_boundingBox.x).toEqual(field_20_boundingBox.x)
expect(field_30_boundingBox.y).not.toEqual(field_20_boundingBox.y)
expect(field_30_boundingBox.height).toEqual(field_60_boundingBox.height)
expect(collapsible_30_boundingBox.width).toEqual(field_30_boundingBox.width)
}).toPass()
})
test('should render nested row fields in the correct position', async () => {