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

feat: simplifies collapsible label API, adds e2e tests

Browse Source
This commit is contained in:
Jarrod Flesch
2022-11-16 12:57:54 -05:00
parent 999c8fc08b
commit d9df98ff22
11 changed files with 105 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -77,14 +77,11 @@ const CollapsibleFields: CollectionConfig = {
],
},
{
label: 'Collapsible Header Function',
label: ({ data }) => data.functionTitleField || 'Custom Collapsible Label',
type: 'collapsible',
admin: {
description: 'Collapsible label rendered from a function.',
initCollapsed: true,
components: {
CollapsibleLabel: ({ data }) => data.functionTitleField || 'Untitled',
},
},
fields: [
{
@@ -94,14 +91,10 @@ const CollapsibleFields: CollectionConfig = {
],
},
{
label: 'Collapsible Header Component',
label: ({ data }) => data?.componentTitleField || 'Untitled',
type: 'collapsible',
admin: {
description: 'Collapsible label rendered as a react component.',
initCollapsed: true,
components: {
CollapsibleLabel: CollapsibleLabelComponent,
},
},
fields: [
{
@@ -110,11 +103,26 @@ const CollapsibleFields: CollectionConfig = {
},
{
type: 'collapsible',
label: 'Nested Collapsible',
label: ({ data }) => data?.nestedTitle || 'Nested Collapsible',
fields: [
{
type: 'text',
name: 'nestedText',
name: 'nestedTitle',
},
],
},
],
},
{
type: 'row',
fields: [
{
label: CollapsibleLabelComponent,
type: 'collapsible',
fields: [
{
name: 'title',
type: 'text',
},
],
},

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

@@ -67,32 +67,29 @@ describe('fields', () => {
});
});
// describe('fields - collapsible', () => {
// let url: AdminUrlUtil;
// beforeAll(() => {
// url = new AdminUrlUtil(serverURL, collapsibleFieldsSlug);
// });
describe('fields - collapsible', () => {
let url: AdminUrlUtil;
beforeAll(() => {
url = new AdminUrlUtil(serverURL, collapsibleFieldsSlug);
});
// test('should render CollapsibleLabel using a function', async () => {
// await page.goto(url.create);
// await page.locator('#field-collapsibleLabelAsFunction >> .array-field__add-button-wrap >> button').click();
test('should render CollapsibleLabel using a function', async () => {
await page.goto(url.create);
await page.locator('#field-collapsible-3__1 >> #field-nestedTitle').fill('custom row label');
await wait(100);
const customCollapsibleLabel = await page.locator('#field-collapsible-3__1 >> .row-label');
await expect(customCollapsibleLabel).toContainText('custom row label');
});
// await page.locator('#field-collapsibleLabelAsFunction__0__title').fill('custom row label');
// await wait(100);
// const customCollapsibleLabel = await page.locator('#collapsibleLabelAsFunction-row-0 >> .row-label');
// await expect(customCollapsibleLabel).toContainText('custom row label');
// });
// test('should render CollapsibleLabel using a component', async () => {
// await page.goto(url.create);
// await page.locator('#field-collapsibleLabelAsComponent>> .array-field__add-button-wrap >> button').click();
// await page.locator('#field-collapsibleLabelAsComponent__0__title').fill('custom row label');
// await wait(100);
// const customCollapsibleLabel = await page.locator('#collapsibleLabelAsComponent-row-0 >> .row-label :text("custom row label")');
// await expect(customCollapsibleLabel).toHaveCSS('text-transform', 'uppercase');
// });
// });
test('should render CollapsibleLabel using a component', async () => {
const customLabel = 'custom row label as component';
await page.goto(url.create);
await page.locator('#field-collapsible-4__0 >> #field-title').fill(customLabel);
await wait(100);
const customCollapsibleLabel = await page.locator(`#field-collapsible-4__0 >> .row-label :text("${customLabel}")`);
await expect(customCollapsibleLabel).toHaveCSS('text-transform', 'uppercase');
});
});
describe('fields - array', () => {
let url: AdminUrlUtil;