From 31ca3639828ddf572033023bd6a350f5b4a2eb9a Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Thu, 14 Jul 2022 16:35:35 -0700
Subject: [PATCH] feat: revises e2e field testing

---
 docs/admin/customizing-css.mdx                |   2 +-
 .../elements/Collapsible/index.scss           |   8 +-
 src/admin/components/elements/Pill/index.scss |   3 +
 .../components/elements/Popup/index.scss      |   2 +-
 .../forms/field-types/Array/index.scss        |   3 +-
 .../forms/field-types/Blocks/Blocks.tsx       |   7 +-
 .../Blocks/SectionTitle/index.scss            |   5 +-
 .../forms/field-types/Blocks/index.scss       |  17 ++-
 .../RichText/elements/link/index.scss         |   7 +-
 .../RichText/elements/ol/index.scss           |   7 ++
 .../RichText/elements/ol/index.tsx            |   9 +-
 .../elements/relationship/Element/index.scss  |  14 ++-
 .../RichText/elements/ul/index.scss           |   7 ++
 .../RichText/elements/ul/index.tsx            |   9 +-
 .../elements/upload/Element/index.scss        |  13 ++-
 .../forms/field-types/RichText/index.scss     |  10 +-
 src/admin/scss/app.scss                       |   5 +-
 test/e2e/fields/collections/Array/index.ts    |  44 +++++++
 test/e2e/fields/collections/Blocks/index.ts   |  98 ++++++++++++++++
 .../fields/collections/Collapsible/index.ts   |  27 +++++
 .../RichText/index.ts}                        |  69 +++++------
 test/e2e/fields/collections/Select/index.ts   |  63 ++++++++++
 test/e2e/fields/collections/Text/index.ts     |  22 ++++
 test/e2e/fields/config.ts                     | 109 +++---------------
 24 files changed, 386 insertions(+), 174 deletions(-)
 create mode 100644 src/admin/components/forms/field-types/RichText/elements/ol/index.scss
 create mode 100644 src/admin/components/forms/field-types/RichText/elements/ul/index.scss
 create mode 100644 test/e2e/fields/collections/Array/index.ts
 create mode 100644 test/e2e/fields/collections/Blocks/index.ts
 create mode 100644 test/e2e/fields/collections/Collapsible/index.ts
 rename test/e2e/fields/{shared.ts => collections/RichText/index.ts} (61%)
 create mode 100644 test/e2e/fields/collections/Select/index.ts
 create mode 100644 test/e2e/fields/collections/Text/index.ts

diff --git a/docs/admin/customizing-css.mdx b/docs/admin/customizing-css.mdx
index a370d7da5..f8aad2935 100644
--- a/docs/admin/customizing-css.mdx
+++ b/docs/admin/customizing-css.mdx
@@ -30,7 +30,7 @@ To make it as easy as possible for you to override our styles, Payload uses [BEM
 
 In addition to adding your own style definitions, you can also override Payload's built-in CSS variables. We use as much as possible behind the scenes, and you can override any of them that you'd like to.
 
-You can find the built-in Payload CSS variables within [`./src/admin/scss/app.scss`](https://github.com/payloadcms/payload/blob/master/src/admin/scss/app.scss). The following variables are defined and can be overridden:
+You can find the built-in Payload CSS variables within [`./src/admin/scss/app.scss`](https://github.com/payloadcms/payload/blob/master/src/admin/scss/app.scss) and [`./src/admin/scss/colors.scss`](https://github.com/payloadcms/payload/blob/master/src/admin/scss/colors.scss). The following variables are defined and can be overridden:
 
 - Breakpoints
 - Base color shades (white to black by default)
diff --git a/src/admin/components/elements/Collapsible/index.scss b/src/admin/components/elements/Collapsible/index.scss
index 14c3f29a8..8b0d3cf32 100644
--- a/src/admin/components/elements/Collapsible/index.scss
+++ b/src/admin/components/elements/Collapsible/index.scss
@@ -16,11 +16,11 @@
   }
 
   &--hovered {
-    .collapsible__drag {
+    >.collapsible__toggle-wrap>.collapsible__drag {
       opacity: 1;
     }
 
-    .collapsible__toggle {
+    >.collapsible__toggle-wrap>.collapsible__toggle {
       background: var(--theme-elevation-100);
     }
   }
@@ -106,10 +106,6 @@
   }
 
   @include small-break {
-    header {
-      padding: base(.75) var(--gutter-h);
-    }
-
     &__content {
       padding: var(--gutter-h);
     }
diff --git a/src/admin/components/elements/Pill/index.scss b/src/admin/components/elements/Pill/index.scss
index 534c6db33..2e25b7c84 100644
--- a/src/admin/components/elements/Pill/index.scss
+++ b/src/admin/components/elements/Pill/index.scss
@@ -12,6 +12,9 @@
   padding: 0 base(.25);
   padding-left: base(.0875 + .25);
   cursor: default;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:active,
   &:focus {
diff --git a/src/admin/components/elements/Popup/index.scss b/src/admin/components/elements/Popup/index.scss
index 9e62669ca..ad6c46273 100644
--- a/src/admin/components/elements/Popup/index.scss
+++ b/src/admin/components/elements/Popup/index.scss
@@ -42,7 +42,7 @@
 
   &--size-small {
     .popup__scroll {
-      padding: base(.75);
+      padding: base(.75) calc(var(--scrollbar-width) + #{base(.75)}) base(.75) base(.75);
     }
 
     .popup__content {
diff --git a/src/admin/components/forms/field-types/Array/index.scss b/src/admin/components/forms/field-types/Array/index.scss
index 3f193157a..3b56605cc 100644
--- a/src/admin/components/forms/field-types/Array/index.scss
+++ b/src/admin/components/forms/field-types/Array/index.scss
@@ -1,7 +1,7 @@
 @import '../../../../scss/styles.scss';
 
 .array-field {
-  margin: base(2) 0;
+  margin: 0 0 base(2);
 
   &__header {
     h3 {
@@ -28,7 +28,6 @@
     @extend %btn-reset;
     cursor: pointer;
     margin-left: base(.5);
-    font-weight: 600;
 
     &:hover {
       text-decoration: underline;
diff --git a/src/admin/components/forms/field-types/Blocks/Blocks.tsx b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
index 696a706b8..bc29d29ac 100644
--- a/src/admin/components/forms/field-types/Blocks/Blocks.tsx
+++ b/src/admin/components/forms/field-types/Blocks/Blocks.tsx
@@ -290,7 +290,10 @@ const Blocks: React.FC<Props> = (props) => {
                                 <span className={`${baseClass}__block-number`}>
                                   {rowNumber >= 10 ? rowNumber : `0${rowNumber}`}
                                 </span>
-                                <Pill className={`${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`}>
+                                <Pill
+                                  pillStyle="white"
+                                  className={`${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`}
+                                >
                                   {blockToRender.labels.singular}
                                 </Pill>
                                 <SectionTitle
@@ -332,7 +335,7 @@ const Blocks: React.FC<Props> = (props) => {
                               forceRender
                               readOnly={readOnly}
                               fieldTypes={fieldTypes}
-                              permissions={permissions.fields}
+                              permissions={permissions?.fields}
                               fieldSchema={blockToRender.fields.map((field) => ({
                                 ...field,
                                 path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
diff --git a/src/admin/components/forms/field-types/Blocks/SectionTitle/index.scss b/src/admin/components/forms/field-types/Blocks/SectionTitle/index.scss
index 192e4a287..ea753de82 100644
--- a/src/admin/components/forms/field-types/Blocks/SectionTitle/index.scss
+++ b/src/admin/components/forms/field-types/Blocks/SectionTitle/index.scss
@@ -3,18 +3,17 @@
 .section-title {
   margin-left: base(.375);
   position: relative;
-  display: inline-grid;
 
   &:after {
+    display: block;
     content: attr(data-value) ' ';
     visibility: hidden;
-    white-space: pre-wrap;
+    white-space: nowrap;
     min-width: base(3);
   }
 
   &:after,
   &__input {
-    grid-area: 2 / 1;
     font-family: var(--font-body);
     font-weight: 600;
     font-size: base(.625);
diff --git a/src/admin/components/forms/field-types/Blocks/index.scss b/src/admin/components/forms/field-types/Blocks/index.scss
index 802d8418a..5a7341590 100644
--- a/src/admin/components/forms/field-types/Blocks/index.scss
+++ b/src/admin/components/forms/field-types/Blocks/index.scss
@@ -1,7 +1,7 @@
 @import '../../../../scss/styles.scss';
 
 .blocks-field {
-  margin: base(2) 0;
+  margin: 0 0 base(2);
 
   &__header {
     h3 {
@@ -28,7 +28,6 @@
     @extend %btn-reset;
     cursor: pointer;
     margin-left: base(.5);
-    font-weight: 600;
 
     &:hover {
       text-decoration: underline;
@@ -37,10 +36,22 @@
 
   &__block-header {
     display: inline-flex;
+    max-width: 100%;
+    overflow: hidden;
   }
 
   &__block-number {
-    margin-right: base(.375)
+    margin-right: base(.375);
+    flex-shrink: 0;
+  }
+
+  &__block-pill {
+    flex-shrink: 0;
+    display: block;
+  }
+
+  .section-title {
+    min-width: 0;
   }
 
   &__row {
diff --git a/src/admin/components/forms/field-types/RichText/elements/link/index.scss b/src/admin/components/forms/field-types/RichText/elements/link/index.scss
index 55dc29d87..fb22a9ba4 100644
--- a/src/admin/components/forms/field-types/RichText/elements/link/index.scss
+++ b/src/admin/components/forms/field-types/RichText/elements/link/index.scss
@@ -62,15 +62,14 @@
   padding-right: base(1.75);
   min-width: base(12);
   width: 100%;
-  background: var(--theme-elevation-100);
-  border: 0;
+  background: var(--theme-input-bg);
   color: var(--theme-elevation-1000);
 }
 
 .rich-text-link__new-tab {
   svg {
-    @include color-svg(var(--theme-elevation-0));
-    background: var(--theme-elevation-750);
+    @include color-svg(var(--theme-elevation-900));
+    background: var(--theme-elevation-100);
     margin-right: base(.5);
   }
 
diff --git a/src/admin/components/forms/field-types/RichText/elements/ol/index.scss b/src/admin/components/forms/field-types/RichText/elements/ol/index.scss
new file mode 100644
index 000000000..ba1799e5e
--- /dev/null
+++ b/src/admin/components/forms/field-types/RichText/elements/ol/index.scss
@@ -0,0 +1,7 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-ol {
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+}
diff --git a/src/admin/components/forms/field-types/RichText/elements/ol/index.tsx b/src/admin/components/forms/field-types/RichText/elements/ol/index.tsx
index 9aeb40206..39f432b2e 100644
--- a/src/admin/components/forms/field-types/RichText/elements/ol/index.tsx
+++ b/src/admin/components/forms/field-types/RichText/elements/ol/index.tsx
@@ -2,8 +2,15 @@ import React from 'react';
 import ListButton from '../ListButton';
 import OLIcon from '../../../../../icons/OrderedList';
 
+import './index.scss';
+
 const OL = ({ attributes, children }) => (
-  <ol {...attributes}>{children}</ol>
+  <ol
+    className="rich-text-ol"
+    {...attributes}
+  >
+    {children}
+  </ol>
 );
 
 const ol = {
diff --git a/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss b/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
index 40cecbf9e..5b60526af 100644
--- a/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
+++ b/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
@@ -2,15 +2,23 @@
 
 .rich-text-relationship {
   @extend %body;
-  @include inputShadow;
+  @include shadow-sm;
   padding: base(.5);
   display: flex;
   align-items: flex-start;
-  background: var(--theme-elevation-50);
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
   max-width: base(15);
-  margin-bottom: base(.5);
   font-family: var(--font-body);
 
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+
   svg {
     width: base(1.25);
     height: base(1.25);
diff --git a/src/admin/components/forms/field-types/RichText/elements/ul/index.scss b/src/admin/components/forms/field-types/RichText/elements/ul/index.scss
new file mode 100644
index 000000000..4e05e1f77
--- /dev/null
+++ b/src/admin/components/forms/field-types/RichText/elements/ul/index.scss
@@ -0,0 +1,7 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-ul {
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+}
diff --git a/src/admin/components/forms/field-types/RichText/elements/ul/index.tsx b/src/admin/components/forms/field-types/RichText/elements/ul/index.tsx
index 1b38869b6..b2be29ff4 100644
--- a/src/admin/components/forms/field-types/RichText/elements/ul/index.tsx
+++ b/src/admin/components/forms/field-types/RichText/elements/ul/index.tsx
@@ -2,8 +2,15 @@ import React from 'react';
 import ULIcon from '../../../../../icons/UnorderedList';
 import ListButton from '../ListButton';
 
+import './index.scss';
+
 const UL = ({ attributes, children }) => (
-  <ul {...attributes}>{children}</ul>
+  <ul
+    className="rich-text-ul"
+    {...attributes}
+  >
+    {children}
+  </ul>
 );
 
 const ul = {
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
index 34db79a7b..5834f9f8b 100644
--- a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
+++ b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
@@ -2,14 +2,23 @@
 
 .rich-text-upload {
   @extend %body;
-  @include inputShadow;
+  @include shadow-sm;
   max-width: base(15);
   display: flex;
   align-items: center;
-  background: var(--theme-elevation-50);
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
   position: relative;
   font-family: var(--font-body);
 
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+
   &__card {
     @include soft-shadow-bottom;
     display: flex;
diff --git a/src/admin/components/forms/field-types/RichText/index.scss b/src/admin/components/forms/field-types/RichText/index.scss
index 5bcee352a..4b7bc2b86 100644
--- a/src/admin/components/forms/field-types/RichText/index.scss
+++ b/src/admin/components/forms/field-types/RichText/index.scss
@@ -38,10 +38,6 @@
     font-family: var(--font-serif);
     font-size: base(.625);
 
-    [data-slate-node=element] {
-      margin-bottom: base(0.25);
-    }
-
     h1,
     h2,
     h3,
@@ -123,8 +119,6 @@
   }
 }
 
-.field-type.blocks {
-  .rich-text__toolbar {
-    top: base(7);
-  }
+[data-slate-node=element] {
+  margin-bottom: base(0.25);
 }
diff --git a/src/admin/scss/app.scss b/src/admin/scss/app.scss
index 3db0a521a..a90ca5a34 100644
--- a/src/admin/scss/app.scss
+++ b/src/admin/scss/app.scss
@@ -14,7 +14,6 @@
   --theme-bg: var(--theme-elevation-0);
   --theme-input-bg: var(--theme-elevation-0);
   --theme-text: var(--theme-elevation-800);
-
   --font-body: 'Suisse Intl', system-ui;
   --font-mono: monospace;
   --font-serif: 'Merriweather', serif;
@@ -53,11 +52,11 @@ html {
     --theme-input-bg: var(--theme-elevation-50);
 
     ::selection {
-      color: var(--theme-base-1000);
+      color: var(--color-base-1000);
     }
 
     ::-moz-selection {
-      color: var(--theme-base-1000);
+      color: var(--color-base-1000);
     }
   }
 
diff --git a/test/e2e/fields/collections/Array/index.ts b/test/e2e/fields/collections/Array/index.ts
new file mode 100644
index 000000000..52f312443
--- /dev/null
+++ b/test/e2e/fields/collections/Array/index.ts
@@ -0,0 +1,44 @@
+import type { CollectionConfig } from '../../../../../src/collections/config/types';
+
+const ArrayFields: CollectionConfig = {
+  slug: 'array-fields',
+  fields: [
+    {
+      name: 'items',
+      type: 'array',
+      required: true,
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+  ],
+};
+
+export const arrayDoc = {
+  items: [
+    {
+      text: 'first row',
+    },
+    {
+      text: 'second row',
+    },
+    {
+      text: 'third row',
+    },
+    {
+      text: 'fourth row',
+    },
+    {
+      text: 'fifth row',
+    },
+    {
+      text: 'sixth row',
+    },
+  ],
+};
+
+export default ArrayFields;
diff --git a/test/e2e/fields/collections/Blocks/index.ts b/test/e2e/fields/collections/Blocks/index.ts
new file mode 100644
index 000000000..9f7fcdbaa
--- /dev/null
+++ b/test/e2e/fields/collections/Blocks/index.ts
@@ -0,0 +1,98 @@
+import type { CollectionConfig } from '../../../../../src/collections/config/types';
+
+const BlockFields: CollectionConfig = {
+  slug: 'block-fields',
+  fields: [
+    {
+      name: 'blocks',
+      type: 'blocks',
+      required: true,
+      blocks: [
+        {
+          slug: 'text',
+          fields: [
+            {
+              name: 'text',
+              type: 'text',
+              required: true,
+            },
+          ],
+        },
+        {
+          slug: 'number',
+          fields: [
+            {
+              name: 'number',
+              type: 'number',
+              required: true,
+            },
+          ],
+        },
+        {
+          slug: 'subBlocks',
+          fields: [
+            {
+              name: 'subBlocks',
+              type: 'blocks',
+              blocks: [
+                {
+                  slug: 'text',
+                  fields: [
+                    {
+                      name: 'text',
+                      type: 'text',
+                      required: true,
+                    },
+                  ],
+                },
+                {
+                  slug: 'number',
+                  fields: [
+                    {
+                      name: 'number',
+                      type: 'number',
+                      required: true,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const blocksDoc = {
+  blocks: [
+    {
+      blockName: 'First block',
+      blockType: 'text',
+      text: 'first block',
+    },
+    {
+      blockName: 'Second block',
+      blockType: 'number',
+      number: 342,
+    },
+    {
+      blockName: 'Sub-block demonstration',
+      blockType: 'subBlocks',
+      subBlocks: [
+        {
+          blockName: 'First sub block',
+          blockType: 'number',
+          number: 123,
+        },
+        {
+          blockName: 'Second sub block',
+          blockType: 'text',
+          text: 'second sub block',
+        },
+      ],
+    },
+  ],
+};
+
+export default BlockFields;
diff --git a/test/e2e/fields/collections/Collapsible/index.ts b/test/e2e/fields/collections/Collapsible/index.ts
new file mode 100644
index 000000000..956fdd43e
--- /dev/null
+++ b/test/e2e/fields/collections/Collapsible/index.ts
@@ -0,0 +1,27 @@
+import type { CollectionConfig } from '../../../../../src/collections/config/types';
+
+const CollapsibleFields: CollectionConfig = {
+  slug: 'collapsible-fields',
+  fields: [
+    {
+      label: 'Collapsible Field',
+      type: 'collapsible',
+      admin: {
+        description: 'This is a collapsible field.',
+      },
+      fields: [
+        {
+          name: 'text',
+          type: 'text',
+          required: true,
+        },
+      ],
+    },
+  ],
+};
+
+export const collapsibleDoc = {
+  text: 'Seeded collapsible doc',
+};
+
+export default CollapsibleFields;
diff --git a/test/e2e/fields/shared.ts b/test/e2e/fields/collections/RichText/index.ts
similarity index 61%
rename from test/e2e/fields/shared.ts
rename to test/e2e/fields/collections/RichText/index.ts
index 820d53a2a..da9f7d41c 100644
--- a/test/e2e/fields/shared.ts
+++ b/test/e2e/fields/collections/RichText/index.ts
@@ -1,45 +1,16 @@
-export const arrayDoc = {
-  items: [
+import type { CollectionConfig } from '../../../../../src/collections/config/types';
+
+const RichTextFields: CollectionConfig = {
+  slug: 'rich-text-fields',
+  fields: [
     {
-      text: 'first row',
-    },
-    {
-      text: 'second row',
-    },
-    {
-      text: 'third row',
-    },
-    {
-      text: 'fourth row',
-    },
-    {
-      text: 'fifth row',
-    },
-    {
-      text: 'sixth row',
+      name: 'richText',
+      type: 'richText',
+      required: true,
     },
   ],
 };
 
-export const blocksDoc = {
-  blocks: [
-    {
-      blockName: 'First block',
-      blockType: 'text',
-      text: 'first block',
-    },
-    {
-      blockName: 'Second block',
-      blockType: 'number',
-      number: 342,
-    },
-  ],
-};
-
-export const collapsibleDoc = {
-  text: 'Seeded collapsible doc',
-};
-
 export const richTextDoc = {
   richText: [
     {
@@ -53,7 +24,20 @@ export const richTextDoc = {
     {
       children: [
         {
-          text: 'I can do all kinds of fun stuff like render links and store nested relationship fields:',
+          text: 'I can do all kinds of fun stuff like ',
+        },
+        {
+          type: 'link',
+          url: 'test.com',
+          newTab: true,
+          children: [
+            {
+              text: 'render links',
+            },
+          ],
+        },
+        {
+          text: ' and store nested relationship fields:',
         },
       ],
     },
@@ -64,7 +48,9 @@ export const richTextDoc = {
         },
       ],
       type: 'relationship',
-      value: { id: '' },
+      value: {
+        id: '',
+      },
       relationTo: 'text-fields',
     },
     {
@@ -113,6 +99,5 @@ export const richTextDoc = {
   ],
 };
 
-export const textDoc = {
-  text: 'Seeded text document',
-};
+
+export default RichTextFields;
diff --git a/test/e2e/fields/collections/Select/index.ts b/test/e2e/fields/collections/Select/index.ts
new file mode 100644
index 000000000..c090c411f
--- /dev/null
+++ b/test/e2e/fields/collections/Select/index.ts
@@ -0,0 +1,63 @@
+import type { CollectionConfig } from '../../../../../src/collections/config/types';
+
+const SelectFields: CollectionConfig = {
+  slug: 'select-fields',
+  fields: [
+    {
+      name: 'select',
+      type: 'select',
+      options: [
+        {
+          label: 'Value One',
+          value: 'one',
+        },
+        {
+          label: 'Value Two',
+          value: 'two',
+        },
+        {
+          label: 'Value Three',
+          value: 'three',
+        },
+      ],
+    },
+    {
+      name: 'selectHasMany',
+      hasMany: true,
+      type: 'select',
+      options: [
+        {
+          label: 'Value One',
+          value: 'one',
+        },
+        {
+          label: 'Value Two',
+          value: 'two',
+        },
+        {
+          label: 'Value Three',
+          value: 'three',
+        },
+        {
+          label: 'Value Four',
+          value: 'four',
+        },
+        {
+          label: 'Value Five',
+          value: 'five',
+        },
+        {
+          label: 'Value Six',
+          value: 'six',
+        },
+      ],
+    },
+  ],
+};
+
+export const selectsDoc = {
+  select: 'one',
+  selectHasMany: ['two', 'four'],
+};
+
+export default SelectFields;
diff --git a/test/e2e/fields/collections/Text/index.ts b/test/e2e/fields/collections/Text/index.ts
new file mode 100644
index 000000000..10adc4875
--- /dev/null
+++ b/test/e2e/fields/collections/Text/index.ts
@@ -0,0 +1,22 @@
+import type { CollectionConfig } from '../../../../../src/collections/config/types';
+
+const TextFields: CollectionConfig = {
+  slug: 'text-fields',
+  admin: {
+    useAsTitle: 'text',
+  },
+  fields: [
+    {
+      name: 'text',
+      type: 'text',
+      required: true,
+    },
+  ],
+};
+
+export const textDoc = {
+  text: 'Seeded text document',
+};
+
+
+export default TextFields;
diff --git a/test/e2e/fields/config.ts b/test/e2e/fields/config.ts
index 92388f3bb..e2e0c49a4 100644
--- a/test/e2e/fields/config.ts
+++ b/test/e2e/fields/config.ts
@@ -1,100 +1,20 @@
 import { buildConfig } from '../buildConfig';
 import { devUser } from '../../credentials';
-import { arrayDoc, blocksDoc, collapsibleDoc, richTextDoc, textDoc } from './shared';
+import ArrayFields, { arrayDoc } from './collections/Array';
+import BlockFields, { blocksDoc } from './collections/Blocks';
+import CollapsibleFields, { collapsibleDoc } from './collections/Collapsible';
+import RichTextFields, { richTextDoc } from './collections/RichText';
+import SelectFields, { selectsDoc } from './collections/Select';
+import TextFields, { textDoc } from './collections/Text';
 
 export default buildConfig({
   collections: [
-    {
-      slug: 'array-fields',
-      fields: [
-        {
-          name: 'items',
-          type: 'array',
-          required: true,
-          fields: [
-            {
-              name: 'text',
-              type: 'text',
-              required: true,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      slug: 'block-fields',
-      fields: [
-        {
-          name: 'blocks',
-          type: 'blocks',
-          required: true,
-          blocks: [
-            {
-              slug: 'text',
-              fields: [
-                {
-                  name: 'text',
-                  type: 'text',
-                  required: true,
-                },
-              ],
-            },
-            {
-              slug: 'number',
-              fields: [
-                {
-                  name: 'number',
-                  type: 'number',
-                  required: true,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      slug: 'collapsible-fields',
-      fields: [
-        {
-          label: 'Collapsible Field',
-          type: 'collapsible',
-          admin: {
-            description: 'This is a collapsible field.',
-          },
-          fields: [
-            {
-              name: 'text',
-              type: 'text',
-              required: true,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      slug: 'rich-text-fields',
-      fields: [
-        {
-          name: 'richText',
-          type: 'richText',
-          required: true,
-        },
-      ],
-    },
-    {
-      slug: 'text-fields',
-      admin: {
-        useAsTitle: 'text',
-      },
-      fields: [
-        {
-          name: 'text',
-          type: 'text',
-          required: true,
-        },
-      ],
-    },
+    ArrayFields,
+    BlockFields,
+    CollapsibleFields,
+    RichTextFields,
+    SelectFields,
+    TextFields,
   ],
   onInit: async (payload) => {
     await payload.create({
@@ -120,6 +40,11 @@ export default buildConfig({
       data: collapsibleDoc,
     });
 
+    await payload.create({
+      collection: 'select-fields',
+      data: selectsDoc,
+    });
+
     const createdTextDoc = await payload.create({
       collection: 'text-fields',
       data: textDoc,