Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions __tests__/components/NotionCollectionGallery.test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,95 @@
/** @jest-environment node */

import NotionCollection from '@/components/NotionCollection'
import { galleryVisibilityClassName } from '@/lib/notion/galleryVisibilityClassName'
import { execFileSync } from 'child_process'
import React from 'react'
import { renderToStaticMarkup } from 'react-dom/server'

jest.mock('react-notion-x/build/third-party/collection', () => {
const React = require('react')

return {
Collection: props =>
React.createElement('div', {
'data-collection-class-name': props.className || ''
})
}
})

const galleryView = format => ({ type: 'gallery', format })

const galleryRecordMap = {
block: {
collection_view: {
value: {
id: 'collection_view',
type: 'collection_view',
collection_id: 'collection',
view_ids: ['gallery_view']
}
}
},
collection: {},
collection_view: {
gallery_view: {
value: galleryView({
gallery_properties: [{ property: 'title', visible: false }]
})
}
},
collection_query: {},
signed_urls: {}
}

const renderCollectionPropsScript = `
const React = (await import('react')).default
const { renderToStaticMarkup } = await import('react-dom/server')
const { NotionRenderer } = await import('react-notion-x')
const recordMap = ${JSON.stringify(galleryRecordMap)}
const ProbeCollection = props => {
const viewId = props.block?.view_ids?.[0]
const collectionView = props.ctx?.recordMap?.collection_view?.[viewId]?.value
return React.createElement('output', {
'data-prop-keys': Object.keys(props).sort().join(','),
'data-context-view-type': collectionView?.type || 'missing'
})
}
process.stdout.write(
renderToStaticMarkup(
React.createElement(NotionRenderer, {
recordMap,
components: { Collection: ProbeCollection }
})
)
)
`

describe('Notion Gallery visibility settings', () => {
it('receives block and renderer context instead of a collectionView prop', () => {
const markup = execFileSync(
process.execPath,
['--input-type=module', '-e', renderCollectionPropsScript],
{ encoding: 'utf8' }
)

expect(markup).toContain('data-prop-keys="block,ctx"')
expect(markup).toContain('data-context-view-type="gallery"')
})

it('reads the Gallery view from the Collection override renderer context', () => {
const markup = renderToStaticMarkup(
React.createElement(NotionCollection, {
block: galleryRecordMap.block.collection_view.value,
ctx: { recordMap: galleryRecordMap }
})
)

expect(markup).toContain(
'class="notion-gallery-hide-page-icons notion-gallery-hide-titles"'
)
})

it('hides omitted page icons and an explicitly hidden title', () => {
expect(
galleryVisibilityClassName(
Expand Down
5 changes: 4 additions & 1 deletion components/NotionCollection.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import { galleryVisibilityClassName } from '@/lib/notion/galleryVisibilityClassN
import { Collection } from 'react-notion-x/build/third-party/collection'

export default function NotionCollection(props) {
const className = galleryVisibilityClassName(props.collectionView)
const viewId = props.block?.view_ids?.[0]
const collectionViewRecord = props.ctx?.recordMap?.collection_view?.[viewId]
const collectionView = collectionViewRecord?.value || collectionViewRecord
const className = galleryVisibilityClassName(collectionView)

if (!className) return <Collection {...props} />

Expand Down
Loading