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

feat: adds playwright tests for array fields

Browse Source
This commit is contained in:
Jarrod Flesch
2022-11-16 09:00:50 -05:00
parent e458087a55
commit 57a8c352e4
5 changed files with 85 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/admin/components/forms/field-types/Collapsible/index.tsx
View File

@@ -65,7 +65,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
if (typeof collapsedOnMount !== 'boolean') return null;
return (
<React.Fragment>
<div id={fieldPreferencesKey}>
<Collapsible
initCollapsed={collapsedOnMount}
className={[
@@ -96,7 +96,7 @@ const CollapsibleField: React.FC<Props> = (props) => {
<FieldDescription
description={description}
/>
</React.Fragment>
</div>
);
};

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

@@ -3,5 +3,5 @@ import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLab
export const ArrayRowLabel: RowLabelComponent = (props) => {
const { data, fallback } = props;
return <div style={{ color: 'hotpink' }}>{data.title || fallback}</div>;
return <div style={{ textTransform: 'uppercase' }}>{data.title || fallback}</div>;
};

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

@@ -3,5 +3,5 @@ import { RowLabelComponent } from '../../../../src/admin/components/forms/RowLab
export const CollapsibleLabelComponent: RowLabelComponent = (props) => {
const { data, fallback } = props;
return <div style={{ color: 'coral' }}>{data.componentTitleField || fallback}</div>;
return <div style={{ textTransform: 'uppercase' }}>{data.componentTitleField || fallback}</div>;
};

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

@@ -1,8 +1,10 @@
import type { CollectionConfig } from '../../../../src/collections/config/types';
import { CollapsibleLabelComponent } from './LabelComponent';
export const collapsibleFieldsSlug = 'collapsible-fields';
const CollapsibleFields: CollectionConfig = {
slug: 'collapsible-fields',
slug: collapsibleFieldsSlug,
versions: true,
fields: [
{
@@ -106,6 +108,36 @@ const CollapsibleFields: CollectionConfig = {
name: 'componentTitleField',
type: 'text',
},
{
type: 'collapsible',
label: 'Nested Collapsible',
fields: [
{
type: 'text',
name: 'nestedText',
},
],
},
],
},
{
name: 'arrayWithCollapsibles',
type: 'array',
fields: [
{
type: 'collapsible',
label: 'Collapsible In Array',
fields: [
{
type: 'text',
name: 'title',
},
{
type: 'text',
name: 'description',
},
],
},
],
},
],

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

@@ -7,6 +7,7 @@ import { textDoc } from './collections/Text';
import { arrayFieldsSlug } from './collections/Array';
import { pointFieldsSlug } from './collections/Point';
import { tabsSlug } from './collections/Tabs';
import { collapsibleFieldsSlug } from './collections/Collapsible';
import wait from '../../src/utilities/wait';
const { beforeAll, describe } = test;
@@ -65,6 +66,33 @@ describe('fields', () => {
});
});
// 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();
// 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');
// });
// });
describe('fields - array', () => {
let url: AdminUrlUtil;
beforeAll(() => {
@@ -84,6 +112,26 @@ describe('fields', () => {
await expect(field)
.toHaveValue('defaultValue');
});
test('should render RowLabel using a function', async () => {
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 wait(100);
const customRowLabel = await page.locator('#rowLabelAsFunction-row-0 >> .row-label');
await expect(customRowLabel).toContainText('custom row label');
});
test('should render RowLabel using a component', async () => {
await page.goto(url.create);
await page.locator('#field-rowLabelAsComponent>> .array-field__add-button-wrap >> button').click();
await page.locator('#field-rowLabelAsComponent__0__title').fill('custom row 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');
});
});
describe('fields - tabs', () => {