The `fields-relationship` test suite is disorganized to the point of being unusable. This makes it very difficult to digest at a high level and add new tests. This PR cleans it up in the following ways: - Moves collection configs to their own standalone files - Moves the seed function to its own file - Consolidates collection slugs in their own file - Uses generated types instead of defining them statically - Wraps the `filterOptions` e2e tests within a describe block Related, there are three distinct test suites where we manage relationships: `relationships`, `fields-relationship`, and `fields > relationships`. In the future we ought to consolidate at least two of these. IMO the `fields > relationship` suite should remain in place for general _component level_ UI tests for the field itself, whereas the other suite could run the integration tests and test the more complex UI patterns that exist outside of the field component.
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
'use client'
|
|
import { useField } from '@payloadcms/ui'
|
|
import * as React from 'react'
|
|
|
|
import { collection1Slug } from '../slugs.js'
|
|
|
|
export const PrePopulateFieldUI: React.FC<{
|
|
hasMany?: boolean
|
|
hasMultipleRelations?: boolean
|
|
path?: string
|
|
targetFieldPath: string
|
|
}> = ({ hasMany = true, hasMultipleRelations = false, path, targetFieldPath }) => {
|
|
const { setValue } = useField({ path: targetFieldPath })
|
|
|
|
const addDefaults = React.useCallback(() => {
|
|
const fetchRelationDocs = async () => {
|
|
const res = await fetch(
|
|
`/api/${collection1Slug}?limit=20&where[name][contains]=relationship-test`,
|
|
)
|
|
const json = await res.json()
|
|
if (hasMany) {
|
|
const docIDs = json.docs.map((doc) => {
|
|
if (hasMultipleRelations) {
|
|
return {
|
|
relationTo: collection1Slug,
|
|
value: doc.id,
|
|
}
|
|
}
|
|
|
|
return doc.id
|
|
})
|
|
setValue(docIDs)
|
|
} else {
|
|
// value that does not appear in first 10 docs fetch
|
|
setValue(json.docs[6].id)
|
|
}
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
fetchRelationDocs()
|
|
}, [setValue, hasMultipleRelations, hasMany])
|
|
|
|
return (
|
|
<div
|
|
className="pre-populate-field-ui"
|
|
style={{
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<button onClick={addDefaults} style={{}} type="button">
|
|
Add default items
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|