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

chore: adds visualization to test examples, reduces collapsibles in test file

Browse Source
This commit is contained in:
Jarrod Flesch
2022-11-16 14:54:36 -05:00
parent 8d827933f3
commit 402b1e4615
4 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
test/fields/collections/Array/LabelComponent.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types'; import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types';
export const ArrayRowLabel: RowLabelComponent = (props) => { export const ArrayRowLabel: RowLabelComponent = ({ data }) => {
const { data } = props; return <div style={{ textTransform: 'uppercase', color: 'coral' }}>{data.title || 'Untitled'}</div>;
return <div style={{ textTransform: 'uppercase' }}>{data.title || 'Untitled'}</div>;
}; };

5
test/fields/collections/Collapsible/LabelComponent.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types'; import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types';
export const CollapsibleLabelComponent: RowLabelComponent = (props) => { export const CollapsibleLabelComponent: RowLabelComponent = ({ data }) => {
const { data } = props; return <div style={{ textTransform: 'uppercase', color: 'hotpink' }}>{data.innerCollapsible || 'Untitled'}</div>;
return <div style={{ textTransform: 'uppercase' }}>{data.title || 'Untitled'}</div>;
}; };

30
test/fields/collections/Collapsible/index.ts
View File

@@ -114,40 +114,21 @@ const CollapsibleFields: CollectionConfig = {
], ],
}, },
{ {
type: 'row', name: 'arrayWithCollapsibles',
type: 'array',
fields: [ fields: [
{ {
label: CollapsibleLabelComponent, label: CollapsibleLabelComponent,
type: 'collapsible', type: 'collapsible',
fields: [ fields: [
{ {
name: 'title', name: 'innerCollapsible',
type: 'text', type: 'text',
}, },
], ],
}, },
], ],
}, },
{
name: 'arrayWithCollapsibles',
type: 'array',
fields: [
{
type: 'collapsible',
label: 'Collapsible In Array',
fields: [
{
type: 'text',
name: 'title',
},
{
type: 'text',
name: 'description',
},
],
},
],
},
], ],
}; };
@@ -159,6 +140,11 @@ export const collapsibleDoc = {
textWithinSubGroup: 'hello, get out', textWithinSubGroup: 'hello, get out',
}, },
}, },
arrayWithCollapsibles: [
{
innerCollapsible: '',
},
],
}; };
export default CollapsibleFields; export default CollapsibleFields;

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

@@ -74,19 +74,22 @@ describe('fields', () => {
}); });
test('should render CollapsibleLabel using a function', async () => { test('should render CollapsibleLabel using a function', async () => {
const label = 'custom row label';
await page.goto(url.create); await page.goto(url.create);
await page.locator('#field-collapsible-3__1 >> #field-nestedTitle').fill('custom row label'); await page.locator('#field-collapsible-3__1 >> #field-nestedTitle').fill(label);
await wait(100); await wait(100);
const customCollapsibleLabel = await page.locator('#field-collapsible-3__1 >> .row-label'); const customCollapsibleLabel = await page.locator('#field-collapsible-3__1 >> .row-label');
await expect(customCollapsibleLabel).toContainText('custom row label'); await expect(customCollapsibleLabel).toContainText(label);
}); });
test('should render CollapsibleLabel using a component', async () => { test('should render CollapsibleLabel using a component', async () => {
const customLabel = 'custom row label as component'; const label = 'custom row label as component';
await page.goto(url.create); await page.goto(url.create);
await page.locator('#field-collapsible-4__0 >> #field-title').fill(customLabel); await page.locator('#field-arrayWithCollapsibles >> .array-field__add-button-wrap >> button').click();
await page.locator('#field-collapsible-4__0-arrayWithCollapsibles__0 >> #field-arrayWithCollapsibles__0__innerCollapsible').fill(label);
await wait(100); await wait(100);
const customCollapsibleLabel = await page.locator(`#field-collapsible-4__0 >> .row-label :text("${customLabel}")`); const customCollapsibleLabel = await page.locator(`#field-collapsible-4__0-arrayWithCollapsibles__0 >> .row-label :text("${label}")`);
await expect(customCollapsibleLabel).toHaveCSS('text-transform', 'uppercase'); await expect(customCollapsibleLabel).toHaveCSS('text-transform', 'uppercase');
}); });
}); });
@@ -112,20 +115,22 @@ describe('fields', () => {
}); });
test('should render RowLabel using a function', async () => { test('should render RowLabel using a function', async () => {
const label = 'custom row label as function';
await page.goto(url.create); await page.goto(url.create);
await page.locator('#field-rowLabelAsFunction >> .array-field__add-button-wrap >> button').click(); await page.locator('#field-rowLabelAsFunction >> .array-field__add-button-wrap >> button').click();
await page.locator('#field-rowLabelAsFunction__0__title').fill('custom row label'); await page.locator('#field-rowLabelAsFunction__0__title').fill(label);
await wait(100); await wait(100);
const customRowLabel = await page.locator('#rowLabelAsFunction-row-0 >> .row-label'); const customRowLabel = await page.locator('#rowLabelAsFunction-row-0 >> .row-label');
await expect(customRowLabel).toContainText('custom row label'); await expect(customRowLabel).toContainText(label);
}); });
test('should render RowLabel using a component', async () => { test('should render RowLabel using a component', async () => {
const label = 'custom row label as component';
await page.goto(url.create); await page.goto(url.create);
await page.locator('#field-rowLabelAsComponent>> .array-field__add-button-wrap >> button').click(); await page.locator('#field-rowLabelAsComponent >> .array-field__add-button-wrap >> button').click();
await page.locator('#field-rowLabelAsComponent__0__title').fill('custom row label'); await page.locator('#field-rowLabelAsComponent__0__title').fill(label);
await wait(100); await wait(100);
const customRowLabel = await page.locator('#rowLabelAsComponent-row-0 >> .row-label :text("custom row label")'); const customRowLabel = await page.locator('#rowLabelAsComponent-row-0 >> .row-label :text("custom row label")');
await expect(customRowLabel).toHaveCSS('text-transform', 'uppercase'); await expect(customRowLabel).toHaveCSS('text-transform', 'uppercase');