|
| 1 | +/** |
| 2 | + * ContentSettingsPanel — custom (non-built-in) field rendering. |
| 3 | + * |
| 4 | + * Regression for GH-163: fields the user adds to a post type must be |
| 5 | + * editable from the Content page's settings sidebar. The built-ins keep |
| 6 | + * their dedicated inputs; everything else renders generically through |
| 7 | + * `CellEditorRenderer`. |
| 8 | + */ |
| 9 | +import { afterEach, describe, expect, it, mock } from 'bun:test' |
| 10 | +import { act, cleanup, fireEvent, render, screen } from '@testing-library/react' |
| 11 | +import { buildPostTypeDefaultFields } from '@core/data/fields' |
| 12 | +import type { DataRow, DataTable } from '@core/data/schemas' |
| 13 | +import { ContentSettingsPanel } from './ContentSettingsPanel' |
| 14 | + |
| 15 | +afterEach(cleanup) |
| 16 | + |
| 17 | +function fakeCollection(): DataTable { |
| 18 | + return { |
| 19 | + id: 'tbl_posts', |
| 20 | + name: 'Posts', |
| 21 | + slug: 'posts', |
| 22 | + kind: 'postType', |
| 23 | + singularLabel: 'Post', |
| 24 | + pluralLabel: 'Posts', |
| 25 | + routeBase: '/blog', |
| 26 | + primaryFieldId: 'title', |
| 27 | + fields: [ |
| 28 | + ...buildPostTypeDefaultFields(), |
| 29 | + { type: 'text', id: 'subtitle', label: 'Subtitle', description: 'Shown under the title' }, |
| 30 | + { |
| 31 | + type: 'select', |
| 32 | + id: 'category', |
| 33 | + label: 'Category', |
| 34 | + options: [{ id: 'opt_news', label: 'News', value: 'news' }], |
| 35 | + }, |
| 36 | + { type: 'boolean', id: 'featured', label: 'Featured' }, |
| 37 | + ], |
| 38 | + system: true, |
| 39 | + createdByUserId: null, |
| 40 | + updatedByUserId: null, |
| 41 | + createdAt: '2026-01-01T00:00:00.000Z', |
| 42 | + updatedAt: '2026-01-01T00:00:00.000Z', |
| 43 | + } |
| 44 | +} |
| 45 | + |
| 46 | +function fakeEntry(): DataRow { |
| 47 | + return { |
| 48 | + id: 'row_1', |
| 49 | + tableId: 'tbl_posts', |
| 50 | + cells: { title: 'Hello', slug: 'hello', subtitle: 'World' }, |
| 51 | + slug: 'hello', |
| 52 | + status: 'draft', |
| 53 | + authorUserId: null, |
| 54 | + createdByUserId: null, |
| 55 | + updatedByUserId: null, |
| 56 | + publishedByUserId: null, |
| 57 | + author: null, |
| 58 | + createdBy: null, |
| 59 | + updatedBy: null, |
| 60 | + publishedBy: null, |
| 61 | + createdAt: '2026-01-01T00:00:00.000Z', |
| 62 | + updatedAt: '2026-01-01T00:00:00.000Z', |
| 63 | + publishedAt: null, |
| 64 | + scheduledPublishAt: null, |
| 65 | + deletedAt: null, |
| 66 | + } |
| 67 | +} |
| 68 | + |
| 69 | +async function renderPanel(overrides: Partial<Parameters<typeof ContentSettingsPanel>[0]> = {}) { |
| 70 | + const collection = fakeCollection() |
| 71 | + const onCustomCellChange = mock(() => {}) |
| 72 | + render( |
| 73 | + <ContentSettingsPanel |
| 74 | + selectedEntry={fakeEntry()} |
| 75 | + authors={[]} |
| 76 | + authorsLoading={false} |
| 77 | + collections={[collection]} |
| 78 | + tables={[collection]} |
| 79 | + selectedCollection={collection} |
| 80 | + loading={false} |
| 81 | + slug="hello" |
| 82 | + slugId="slug-id" |
| 83 | + seoTitle="" |
| 84 | + seoTitleId="seo-title-id" |
| 85 | + seoDescription="" |
| 86 | + seoDescriptionId="seo-description-id" |
| 87 | + publicPath="/blog/hello" |
| 88 | + mediaError={null} |
| 89 | + featuredMediaId={null} |
| 90 | + featuredMediaAsset={null} |
| 91 | + customCells={{ subtitle: 'World' }} |
| 92 | + canEditEntry |
| 93 | + canMoveEntry |
| 94 | + canPublishEntry |
| 95 | + canChangeAuthor={false} |
| 96 | + onCollectionChange={mock(() => {})} |
| 97 | + onAuthorChange={mock(() => {})} |
| 98 | + onSlugChange={mock(() => {})} |
| 99 | + onSeoTitleChange={mock(() => {})} |
| 100 | + onSeoDescriptionChange={mock(() => {})} |
| 101 | + onCustomCellChange={onCustomCellChange} |
| 102 | + onStatusChange={mock(() => {})} |
| 103 | + onChooseFeaturedMedia={mock(() => {})} |
| 104 | + onClearFeaturedMedia={mock(() => {})} |
| 105 | + onEditFeaturedMedia={mock(() => {})} |
| 106 | + {...overrides} |
| 107 | + />, |
| 108 | + ) |
| 109 | + // Wait for the lazy ContentCustomFields chunk to mount, then flush the |
| 110 | + // closed RelationPickerDialog's async no-op row load so its setState lands |
| 111 | + // inside act() instead of warning after the test body. |
| 112 | + await screen.findByTestId('content-custom-field-subtitle') |
| 113 | + await act(async () => {}) |
| 114 | + return { onCustomCellChange } |
| 115 | +} |
| 116 | + |
| 117 | +describe('ContentSettingsPanel custom fields', () => { |
| 118 | + it('renders an editor for every custom field, none for built-ins', async () => { |
| 119 | + await renderPanel() |
| 120 | + |
| 121 | + expect(screen.getByTestId('content-custom-field-subtitle')).toBeTruthy() |
| 122 | + expect(screen.getByTestId('content-custom-field-category')).toBeTruthy() |
| 123 | + expect(screen.getByTestId('content-custom-field-featured')).toBeTruthy() |
| 124 | + // Built-ins keep their dedicated inputs — no generic editor for them. |
| 125 | + expect(screen.queryByTestId('content-custom-field-title')).toBeNull() |
| 126 | + expect(screen.queryByTestId('content-custom-field-body')).toBeNull() |
| 127 | + }) |
| 128 | + |
| 129 | + it('shows the draft value and the field description', async () => { |
| 130 | + await renderPanel() |
| 131 | + |
| 132 | + const subtitleInput = screen.getByLabelText('Subtitle') as HTMLInputElement |
| 133 | + expect(subtitleInput.value).toBe('World') |
| 134 | + expect(screen.getByText('Shown under the title')).toBeTruthy() |
| 135 | + }) |
| 136 | + |
| 137 | + it('propagates edits through onCustomCellChange', async () => { |
| 138 | + const { onCustomCellChange } = await renderPanel() |
| 139 | + |
| 140 | + fireEvent.change(screen.getByLabelText('Subtitle'), { target: { value: 'Universe' } }) |
| 141 | + |
| 142 | + expect(onCustomCellChange).toHaveBeenCalledWith('subtitle', 'Universe') |
| 143 | + }) |
| 144 | + |
| 145 | + it('renders custom fields read-only when the user cannot edit the entry', async () => { |
| 146 | + await renderPanel({ canEditEntry: false }) |
| 147 | + |
| 148 | + const subtitleInput = screen.getByLabelText('Subtitle') as HTMLInputElement |
| 149 | + expect(subtitleInput.readOnly).toBe(true) |
| 150 | + }) |
| 151 | +}) |
0 commit comments