feat: adds playwright tests for array fields

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

@@ -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>
   );
 };
 

test/fields/collections/Array/LabelComponent.tsx

@@ -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>;
 };

test/fields/collections/Collapsible/LabelComponent.tsx

@@ -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>;
 };

test/fields/collections/Collapsible/index.ts

@@ -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',
+            },
+          ],
+        },
       ],
     },
   ],

test/fields/e2e.spec.ts

@@ -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', () => {