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 { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types';
export const ArrayRowLabel: RowLabelComponent = (props) => {
const { data } = props;
return <div style={{ textTransform: 'uppercase' }}>{data.title || 'Untitled'}</div>;
export const ArrayRowLabel: RowLabelComponent = ({ data }) => {
return <div style={{ textTransform: 'uppercase', color: 'coral' }}>{data.title || 'Untitled'}</div>;
};

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

@@ -1,7 +1,6 @@
import React from 'react';
import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLabel/types';
export const CollapsibleLabelComponent: RowLabelComponent = (props) => {
const { data } = props;
return <div style={{ textTransform: 'uppercase' }}>{data.title || 'Untitled'}</div>;
export const CollapsibleLabelComponent: RowLabelComponent = ({ data }) => {
return <div style={{ textTransform: 'uppercase', color: 'hotpink' }}>{data.innerCollapsible || '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: [
{
label: CollapsibleLabelComponent,
type: 'collapsible',
fields: [
{
name: 'title',
name: 'innerCollapsible',
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',
},
},
arrayWithCollapsibles: [
{
innerCollapsible: '',
},
],
};
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 () => {
const label = 'custom row label';
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);
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 () => {
const customLabel = 'custom row label as component';
const label = 'custom row label as component';
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);
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');
});
});
@@ -112,20 +115,22 @@ describe('fields', () => {
});
test('should render RowLabel using a function', async () => {
const label = 'custom row label as function';
await page.goto(url.create);
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);
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 () => {
const label = 'custom row label as component';
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);
const customRowLabel = await page.locator('#rowLabelAsComponent-row-0 >> .row-label :text("custom row label")');
await expect(customRowLabel).toHaveCSS('text-transform', 'uppercase');