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

chore: increases live preview testing coverage

Browse Source
This commit is contained in:
Jacob Fletcher
2023-11-20 12:58:27 -05:00
parent 0672e864f3
commit 8a7b41721a
10 changed files with 419 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
test/live-preview/collections/Pages.ts
View File

@@ -71,46 +71,72 @@ export const Pages: CollectionConfig = {
},
],
},
// Hidden fields for testing purposes
{
name: 'relationshipPolyHasMany',
name: 'relationshipInRichText',
type: 'richText',
},
{
name: 'relationshipAsUpload',
type: 'upload',
relationTo: 'media',
},
{
name: 'relationshipMonoHasOne',
type: 'relationship',
relationTo: ['posts'],
hasMany: true,
admin: {
hidden: true,
},
relationTo: 'posts',
},
{
name: 'relationshipMonoHasMany',
type: 'relationship',
relationTo: 'posts',
hasMany: true,
admin: {
hidden: true,
},
},
{
name: 'relationshipMonoHasOne',
name: 'relationshipPolyHasOne',
type: 'relationship',
relationTo: 'posts',
admin: {
hidden: true,
},
relationTo: ['posts'],
},
{
name: 'relationshipPolyHasMany',
type: 'relationship',
relationTo: ['posts'],
hasMany: true,
},
{
name: 'arrayOfRelationships',
type: 'array',
admin: {
hidden: true,
disabled: true,
},
fields: [
{
name: 'relationshipWithinArray',
name: 'uploadInArray',
type: 'upload',
relationTo: 'media',
},
{
name: 'richTextInArray',
type: 'richText',
},
{
name: 'relationshipInArrayMonoHasOne',
type: 'relationship',
relationTo: 'posts',
},
{
name: 'relationshipInArrayMonoHasMany',
type: 'relationship',
relationTo: 'posts',
hasMany: true,
},
{
name: 'relationshipInArrayPolyHasOne',
type: 'relationship',
relationTo: ['posts'],
},
{
name: 'relationshipInArrayPolyHasMany',
type: 'relationship',
relationTo: ['posts'],
hasMany: true,
},
],
},
],

79
test/live-preview/int.spec.ts
View File

@@ -200,6 +200,7 @@ describe('Collections - Live Preview', () => {
...initialData,
relationshipMonoHasOne: testPost.id,
relationshipMonoHasMany: [testPost.id],
relationshipPolyHasOne: { value: testPost.id, relationTo: postsSlug },
relationshipPolyHasMany: [{ value: testPost.id, relationTo: postsSlug }],
},
initialData,
@@ -207,9 +208,15 @@ describe('Collections - Live Preview', () => {
returnNumberOfRequests: true,
})
expect(merge1._numberOfRequests).toEqual(3)
expect(merge1._numberOfRequests).toEqual(4)
expect(merge1.relationshipMonoHasOne).toMatchObject(testPost)
expect(merge1.relationshipMonoHasMany).toMatchObject([testPost])
expect(merge1.relationshipPolyHasOne).toMatchObject({
value: testPost,
relationTo: postsSlug,
})
expect(merge1.relationshipPolyHasMany).toMatchObject([
{ value: testPost, relationTo: postsSlug },
])
@@ -222,6 +229,7 @@ describe('Collections - Live Preview', () => {
...merge1,
relationshipMonoHasOne: null,
relationshipMonoHasMany: [],
relationshipPolyHasOne: null,
relationshipPolyHasMany: [],
},
initialData,
@@ -232,9 +240,11 @@ describe('Collections - Live Preview', () => {
expect(merge2._numberOfRequests).toEqual(0)
expect(merge2.relationshipMonoHasOne).toBeFalsy()
expect(merge2.relationshipMonoHasMany).toEqual([])
expect(merge2.relationshipPolyHasOne).toBeFalsy()
expect(merge2.relationshipPolyHasMany).toEqual([])
// Now populate the relationships again
// This will ensure that the first merge wasn't just initial state
const merge3 = await mergeData({
depth: 1,
fieldSchema: schemaJSON,
@@ -242,6 +252,7 @@ describe('Collections - Live Preview', () => {
...merge2,
relationshipMonoHasOne: testPost.id,
relationshipMonoHasMany: [testPost.id],
relationshipPolyHasOne: { value: testPost.id, relationTo: postsSlug },
relationshipPolyHasMany: [{ value: testPost.id, relationTo: postsSlug }],
},
initialData,
@@ -249,9 +260,12 @@ describe('Collections - Live Preview', () => {
returnNumberOfRequests: true,
})
expect(merge3._numberOfRequests).toEqual(3)
expect(merge3._numberOfRequests).toEqual(4)
expect(merge3.relationshipMonoHasOne).toMatchObject(testPost)
expect(merge3.relationshipMonoHasMany).toMatchObject([testPost])
expect(merge3.relationshipPolyHasOne).toMatchObject({ value: testPost, relationTo: postsSlug })
expect(merge3.relationshipPolyHasMany).toMatchObject([
{ value: testPost, relationTo: postsSlug },
])
@@ -270,7 +284,18 @@ describe('Collections - Live Preview', () => {
arrayOfRelationships: [
{
id: '123',
relationshipWithinArray: testPost.id,
relationshipInArrayMonoHasOne: testPost.id,
relationshipInArrayMonoHasMany: [testPost.id],
relationshipInArrayPolyHasOne: {
value: testPost.id,
relationTo: postsSlug,
},
relationshipInArrayPolyHasMany: [
{
value: testPost.id,
relationTo: postsSlug,
},
],
},
],
},
@@ -279,12 +304,23 @@ describe('Collections - Live Preview', () => {
returnNumberOfRequests: true,
})
expect(merge1._numberOfRequests).toEqual(1)
expect(merge1._numberOfRequests).toEqual(4)
expect(merge1.arrayOfRelationships).toHaveLength(1)
expect(merge1.arrayOfRelationships).toMatchObject([
{
id: '123',
relationshipWithinArray: testPost,
relationshipInArrayMonoHasOne: testPost,
relationshipInArrayMonoHasMany: [testPost],
relationshipInArrayPolyHasOne: {
value: testPost,
relationTo: postsSlug,
},
relationshipInArrayPolyHasMany: [
{
value: testPost,
relationTo: postsSlug,
},
],
},
])
@@ -297,11 +333,25 @@ describe('Collections - Live Preview', () => {
arrayOfRelationships: [
{
id: '456',
relationshipWithinArray: undefined,
relationshipInArrayMonoHasOne: undefined,
relationshipInArrayMonoHasMany: [],
relationshipInArrayPolyHasOne: undefined,
relationshipInArrayPolyHasMany: [],
},
{
id: '123',
relationshipWithinArray: testPost.id,
relationshipInArrayMonoHasOne: testPost.id,
relationshipInArrayMonoHasMany: [testPost.id],
relationshipInArrayPolyHasOne: {
value: testPost.id,
relationTo: postsSlug,
},
relationshipInArrayPolyHasMany: [
{
value: testPost.id,
relationTo: postsSlug,
},
],
},
],
},
@@ -310,7 +360,7 @@ describe('Collections - Live Preview', () => {
returnNumberOfRequests: true,
})
expect(merge2._numberOfRequests).toEqual(1)
expect(merge2._numberOfRequests).toEqual(4)
expect(merge2.arrayOfRelationships).toHaveLength(2)
expect(merge2.arrayOfRelationships).toMatchObject([
{
@@ -318,7 +368,18 @@ describe('Collections - Live Preview', () => {
},
{
id: '123',
relationshipWithinArray: testPost,
relationshipInArrayMonoHasOne: testPost,
relationshipInArrayMonoHasMany: [testPost],
relationshipInArrayPolyHasOne: {
value: testPost,
relationTo: postsSlug,
},
relationshipInArrayPolyHasMany: [
{
value: testPost,
relationTo: postsSlug,
},
],
},
])
})

10
test/live-preview/next-app/app/(pages)/[slug]/page.client.tsx
View File

@@ -6,6 +6,7 @@ import React from 'react'
import { PAYLOAD_SERVER_URL } from '@/app/_api/serverURL'
import { Hero } from '@/app/_components/Hero'
import { Blocks } from '@/app/_components/Blocks'
import { RelationshipsBlock } from '@/app/_blocks/Relationships'
export const PageClient: React.FC<{
page: PageType
@@ -20,7 +21,14 @@ export const PageClient: React.FC<{
<React.Fragment>
<Hero {...data?.hero} />
<Blocks
blocks={data?.layout}
blocks={[
...(data?.layout ?? []),
{
blockType: 'relationships',
blockName: 'Relationships',
data: data,
},
]}
disableTopPadding={
!data?.hero || data?.hero?.type === 'none' || data?.hero?.type === 'lowImpact'
}

17
test/live-preview/next-app/app/_blocks/Relationships/index.module.scss Normal file
View File

@@ -0,0 +1,17 @@
@import '../../_css/common';
.relationshipsBlock {
}
.array {
border: 1px solid var(--color-base-100);
padding: var(--base);
& > *:first-child {
margin-top: 0;
}
& > *:last-child {
margin-bottom: 0;
}
}

112
test/live-preview/next-app/app/_blocks/Relationships/index.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React, { Fragment } from 'react'
import { Page } from '../../../payload-types'
import classes from './index.module.scss'
import { Gutter } from '@/app/_components/Gutter'
import RichText from '@/app/_components/RichText'
export type RelationshipsBlockProps = {
blockType: 'relationships'
blockName: string
data: Page
}
export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) => {
const { data } = props
return (
<div className={classes.relationshipsBlock}>
<Gutter>
<p>
This block is for testing purposes only. It renders every possible type of relationship.
</p>
<p>Upload:</p>
{data?.relationshipAsUpload && (
<div>
{typeof data?.relationshipAsUpload === 'string'
? data?.relationshipAsUpload
: data?.relationshipAsUpload.filename}
</div>
)}
<p>Rich Text:</p>
{data?.relationshipInRichText && <RichText content={data.relationshipInRichText} />}
<p>Monomorphic Has One:</p>
{data?.relationshipMonoHasOne && (
<div>
{typeof data?.relationshipMonoHasOne === 'string'
? data?.relationshipMonoHasOne
: data?.relationshipMonoHasOne.title}
</div>
)}
<p>Monomorphic Has Many:</p>
{data?.relationshipMonoHasMany?.map(
(item, index) =>
item && <div key={index}>{typeof item === 'string' ? item : item.title}</div>,
)}
<p>Polymorphic Has One:</p>
{data?.relationshipPolyHasOne && (
<div>
{typeof data?.relationshipPolyHasOne.value === 'string'
? data?.relationshipPolyHasOne.value
: data?.relationshipPolyHasOne.value.title}
</div>
)}
<p>Polymorphic Has Many:</p>
{data?.relationshipPolyHasMany?.map(
(item, index) =>
item.value && (
<div key={index}>
{typeof item.value === 'string' ? item.value : item.value.title}
</div>
),
)}
<p>Array of Relationships:</p>
{data?.arrayOfRelationships?.map((item, index) => (
<div className={classes.array} key={index}>
<p>Upload:</p>
{item?.uploadInArray && (
<div>
{typeof item?.uploadInArray === 'string'
? item?.uploadInArray
: item?.uploadInArray.filename}
</div>
)}
<p>Rich Text:</p>
{item?.richTextInArray && <RichText content={item.richTextInArray} />}
<p>Monomorphic Has One:</p>
{item?.relationshipInArrayMonoHasOne && (
<div>
{typeof item?.relationshipInArrayMonoHasOne === 'string'
? item?.relationshipInArrayMonoHasOne
: item?.relationshipInArrayMonoHasOne.title}
</div>
)}
<p>Monomorphic Has Many:</p>
{item?.relationshipInArrayMonoHasMany?.map(
(rel, relIndex) =>
rel && <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div>,
)}
<p>Polymorphic Has One:</p>
{item?.relationshipInArrayPolyHasOne && (
<div>
{typeof item?.relationshipInArrayPolyHasOne.value === 'string'
? item?.relationshipInArrayPolyHasOne.value
: item?.relationshipInArrayPolyHasOne.value.title}
</div>
)}
<p>Polymorphic Has Many:</p>
{item?.relationshipInArrayPolyHasMany?.map(
(rel, relIndex) =>
rel.value && (
<div key={relIndex}>
{typeof rel.value === 'string' ? rel.value : rel.value.title}
</div>
),
)}
</div>
))}
</Gutter>
</div>
)
}

4
test/live-preview/next-app/app/_components/Blocks/index.tsx
View File

@@ -9,6 +9,7 @@ import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts
import { toKebabCase } from '../../_utilities/toKebabCase'
import { BackgroundColor } from '../BackgroundColor'
import { VerticalPadding, VerticalPaddingOptions } from '../VerticalPadding'
import { RelationshipsBlock, RelationshipsBlockProps } from '../../_blocks/Relationships'
const blockComponents = {
cta: CallToActionBlock,
@@ -16,12 +17,13 @@ const blockComponents = {
mediaBlock: MediaBlock,
archive: ArchiveBlock,
relatedPosts: RelatedPosts,
relationships: RelationshipsBlock,
}
type Block = NonNullable<Page['layout']>[number]
export const Blocks: React.FC<{
blocks?: (Block | RelatedPostsProps)[] | null
blocks?: (Block | RelatedPostsProps | RelationshipsBlockProps)[] | null
disableTopPadding?: boolean
}> = (props) => {
const { disableTopPadding, blocks } = props

11
test/live-preview/next-app/app/_components/RichText/serialize.tsx
View File

@@ -8,10 +8,7 @@ type Children = Leaf[]
type Leaf = {
type: string
value?: {
url: string
alt: string
}
value?: any
children?: Children
url?: string
[key: string]: unknown
@@ -78,6 +75,12 @@ const serialize = (children?: Children): React.ReactNode[] =>
return <ol key={i}>{serialize(node.children)}</ol>
case 'li':
return <li key={i}>{serialize(node.children)}</li>
case 'relationship':
return (
<span key={i}>
{node.value && typeof node.value === 'object' ? node.value.title : node.value}
</span>
)
case 'link':
return (
<Link

123
test/live-preview/next-app/payload-types.ts
View File

@@ -61,10 +61,15 @@ export interface Page {
link: {
type?: ('reference' | 'custom') | null
newTab?: boolean | null
reference?: {
relationTo: 'pages'
value: string | Page
} | null
reference?:
| ({
relationTo: 'posts'
value: string | Post
} | null)
| ({
relationTo: 'pages'
value: string | Page
} | null)
url?: string | null
label: string
appearance?: ('primary' | 'secondary') | null
@@ -90,10 +95,15 @@ export interface Page {
link?: {
type?: ('reference' | 'custom') | null
newTab?: boolean | null
reference?: {
relationTo: 'pages'
value: string | Page
} | null
reference?:
| ({
relationTo: 'posts'
value: string | Post
} | null)
| ({
relationTo: 'pages'
value: string | Page
} | null)
url?: string | null
label: string
appearance?: ('default' | 'primary' | 'secondary') | null
@@ -147,17 +157,44 @@ export interface Page {
description?: string | null
image?: string | Media | null
}
relationshipInRichText?:
| {
[k: string]: unknown
}[]
| null
relationshipAsUpload?: string | Media | null
relationshipMonoHasOne?: (string | null) | Post
relationshipMonoHasMany?: (string | Post)[] | null
relationshipPolyHasOne?: {
relationTo: 'posts'
value: string | Post
} | null
relationshipPolyHasMany?:
| {
relationTo: 'posts'
value: string | Post
}[]
| null
relationshipMonoHasMany?: (string | Post)[] | null
relationshipMonoHasOne?: (string | null) | Post
arrayOfRelationships?:
| {
relationshipWithinArray?: (string | null) | Post
uploadInArray?: string | Media | null
richTextInArray?:
| {
[k: string]: unknown
}[]
| null
relationshipInArrayMonoHasOne?: (string | null) | Post
relationshipInArrayMonoHasMany?: (string | Post)[] | null
relationshipInArrayPolyHasOne?: {
relationTo: 'posts'
value: string | Post
} | null
relationshipInArrayPolyHasMany?:
| {
relationTo: 'posts'
value: string | Post
}[]
| null
id?: string | null
}[]
| null
@@ -181,12 +218,6 @@ export interface Media {
width?: number | null
height?: number | null
}
export interface Category {
id: string
title?: string | null
updatedAt: string
createdAt: string
}
export interface Post {
id: string
slug: string
@@ -214,10 +245,15 @@ export interface Post {
link: {
type?: ('reference' | 'custom') | null
newTab?: boolean | null
reference?: {
relationTo: 'pages'
value: string | Page
} | null
reference?:
| ({
relationTo: 'posts'
value: string | Post
} | null)
| ({
relationTo: 'pages'
value: string | Page
} | null)
url?: string | null
label: string
appearance?: ('primary' | 'secondary') | null
@@ -243,10 +279,15 @@ export interface Post {
link?: {
type?: ('reference' | 'custom') | null
newTab?: boolean | null
reference?: {
relationTo: 'pages'
value: string | Page
} | null
reference?:
| ({
relationTo: 'posts'
value: string | Post
} | null)
| ({
relationTo: 'pages'
value: string | Page
} | null)
url?: string | null
label: string
appearance?: ('default' | 'primary' | 'secondary') | null
@@ -304,6 +345,12 @@ export interface Post {
updatedAt: string
createdAt: string
}
export interface Category {
id: string
title?: string | null
updatedAt: string
createdAt: string
}
export interface PayloadPreference {
id: string
user: {
@@ -337,10 +384,15 @@ export interface Header {
link: {
type?: ('reference' | 'custom') | null
newTab?: boolean | null
reference?: {
relationTo: 'pages'
value: string | Page
} | null
reference?:
| ({
relationTo: 'posts'
value: string | Post
} | null)
| ({
relationTo: 'pages'
value: string | Page
} | null)
url?: string | null
label: string
appearance?: ('default' | 'primary' | 'secondary') | null
@@ -358,10 +410,15 @@ export interface Footer {
link: {
type?: ('reference' | 'custom') | null
newTab?: boolean | null
reference?: {
relationTo: 'pages'
value: string | Page
} | null
reference?:
| ({
relationTo: 'posts'
value: string | Post
} | null)
| ({
relationTo: 'pages'
value: string | Page
} | null)
url?: string | null
label: string
appearance?: ('default' | 'primary' | 'secondary') | null

33
test/live-preview/payload-types.ts
View File

@@ -157,17 +157,44 @@ export interface Page {
description?: string | null
image?: string | Media | null
}
relationshipInRichText?:
| {
[k: string]: unknown
}[]
| null
relationshipAsUpload?: string | Media | null
relationshipMonoHasOne?: (string | null) | Post
relationshipMonoHasMany?: (string | Post)[] | null
relationshipPolyHasOne?: {
relationTo: 'posts'
value: string | Post
} | null
relationshipPolyHasMany?:
| {
relationTo: 'posts'
value: string | Post
}[]
| null
relationshipMonoHasMany?: (string | Post)[] | null
relationshipMonoHasOne?: (string | null) | Post
arrayOfRelationships?:
| {
relationshipWithinArray?: (string | null) | Post
uploadInArray?: string | Media | null
richTextInArray?:
| {
[k: string]: unknown
}[]
| null
relationshipInArrayMonoHasOne?: (string | null) | Post
relationshipInArrayMonoHasMany?: (string | Post)[] | null
relationshipInArrayPolyHasOne?: {
relationTo: 'posts'
value: string | Post
} | null
relationshipInArrayPolyHasMany?:
| {
relationTo: 'posts'
value: string | Post
}[]
| null
id?: string | null
}[]
| null

36
test/live-preview/seed/home.ts
View File

@@ -93,12 +93,46 @@ export const home: Omit<Page, 'createdAt' | 'id' | 'updatedAt'> = {
],
},
],
relationshipAsUpload: '{{MEDIA_ID}}',
relationshipInRichText: [
{
children: [
{
text: ' ',
},
],
relationTo: 'posts',
type: 'relationship',
value: {
id: '{{POST_1_ID}}',
},
},
],
relationshipMonoHasMany: ['{{POST_1_ID}}'],
relationshipMonoHasOne: '{{POST_1_ID}}',
relationshipPolyHasMany: [{ relationTo: 'posts', value: '{{POST_1_ID}}' }],
relationshipPolyHasOne: { relationTo: 'posts', value: '{{POST_1_ID}}' },
arrayOfRelationships: [
{
relationshipWithinArray: '{{POST_1_ID}}',
uploadInArray: '{{MEDIA_ID}}',
richTextInArray: [
{
children: [
{
text: ' ',
},
],
relationTo: 'posts',
type: 'relationship',
value: {
id: '{{POST_1_ID}}',
},
},
],
relationshipInArrayMonoHasMany: ['{{POST_1_ID}}'],
relationshipInArrayMonoHasOne: '{{POST_1_ID}}',
relationshipInArrayPolyHasMany: [{ relationTo: 'posts', value: '{{POST_1_ID}}' }],
relationshipInArrayPolyHasOne: { relationTo: 'posts', value: '{{POST_1_ID}}' },
},
],
}