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

feat: revises e2e field testing

Browse Source
This commit is contained in:
James
2022-07-14 16:35:35 -07:00
parent 4bb0d3994f
commit 31ca363982
24 changed files with 386 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/admin/customizing-css.mdx
View File

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

8
src/admin/components/elements/Collapsible/index.scss
View File

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

3
src/admin/components/elements/Pill/index.scss
View File

@@ -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 {

2
src/admin/components/elements/Popup/index.scss
View File

@@ -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 {

3
src/admin/components/forms/field-types/Array/index.scss
View File

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

7
src/admin/components/forms/field-types/Blocks/Blocks.tsx
View File

@@ -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}` : ''}`,

5
src/admin/components/forms/field-types/Blocks/SectionTitle/index.scss
View File

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

17
src/admin/components/forms/field-types/Blocks/index.scss
View File

@@ -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 {

7
src/admin/components/forms/field-types/RichText/elements/link/index.scss
View File

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

7
src/admin/components/forms/field-types/RichText/elements/ol/index.scss Normal file
View File

@@ -0,0 +1,7 @@
@import '../../../../../../scss/styles.scss';
.rich-text-ol {
&[data-slate-node=element] {
margin: base(.625) 0;
}
}

9
src/admin/components/forms/field-types/RichText/elements/ol/index.tsx
View File

@@ -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 = {

14
src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
View File

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

7
src/admin/components/forms/field-types/RichText/elements/ul/index.scss Normal file
View File

@@ -0,0 +1,7 @@
@import '../../../../../../scss/styles.scss';
.rich-text-ul {
&[data-slate-node=element] {
margin: base(.625) 0;
}
}

9
src/admin/components/forms/field-types/RichText/elements/ul/index.tsx
View File

@@ -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 = {

13
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
View File

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

10
src/admin/components/forms/field-types/RichText/index.scss
View File

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

5
src/admin/scss/app.scss
View File

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

44
test/e2e/fields/collections/Array/index.ts Normal file
View File

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

98
test/e2e/fields/collections/Blocks/index.ts Normal file
View File

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

27
test/e2e/fields/collections/Collapsible/index.ts Normal file
View File

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

69
test/e2e/fields/shared.ts → test/e2e/fields/collections/RichText/index.ts
View File

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

63
test/e2e/fields/collections/Select/index.ts Normal file
View File

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

22
test/e2e/fields/collections/Text/index.ts Normal file
View File

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

109
test/e2e/fields/config.ts
View File

@@ -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,