diff --git a/src/builders/buildDocumentReader.ts b/src/builders/buildDocumentReader.ts index 5497528..3df76e8 100644 --- a/src/builders/buildDocumentReader.ts +++ b/src/builders/buildDocumentReader.ts @@ -24,6 +24,7 @@ export default function buildDocumentReader(blocks: const useBlock = (id: string) => useDocument()[id]; return { + useDocument, useBlock, Block: ({ id }: { id: string }) => { const block = useBlock(id); diff --git a/tests/builder/buildDocumentEditor.spec.tsx b/tests/builder/buildDocumentEditor.spec.tsx index 061d7af..4fd14fb 100644 --- a/tests/builder/buildDocumentEditor.spec.tsx +++ b/tests/builder/buildDocumentEditor.spec.tsx @@ -6,7 +6,7 @@ import { act, render } from '@testing-library/react'; import buildDocumentEditor from '../../src/builders/buildDocumentEditor'; describe('builders/buildDocumentEditor', () => { - const { useBlockState, Block, DocumentEditorProvider } = buildDocumentEditor({ + const { useDocumentState, useBlockState, Block, DocumentEditorProvider } = buildDocumentEditor({ SampleBlock: { schema: z.object({ text: z.string() }), Component: ({ text }) =>
{text.toUpperCase()}
, @@ -21,50 +21,81 @@ describe('builders/buildDocumentEditor', () => { }, }; - describe('#useBlockState', () => { + describe('#useDocumentState', () => { it('returns a getter and a setter tuple', () => { - let value: any; - let setValue: any; - const ViewBlockConfig = ({ id }: { id: string }) => { - const tuple = useBlockState(id); - value = tuple[0]; - setValue = tuple[1]; - return ( -
-            {tuple[0].type} - {tuple[0].data.text}
-          
- ); + let tuple: any; + const ViewBlockConfig = () => { + tuple = useDocumentState(); + return
{JSON.stringify(tuple[0])}
; }; - expect( - render( - - - - ).queryAllByText('SampleBlock - Test text!') - ).toHaveLength(1); + const NODE = ( + + + + ); + const { rerender } = render(NODE); + expect(tuple[0]).toEqual({ + 'my id': { + id: 'my id', + type: 'SampleBlock', + data: { text: 'Test text!' }, + }, + }); act(() => { - setValue({ - id: 'my id', + tuple[1]({ + 'another id': { + id: 'another id', + type: 'SampleBlock', + data: { text: 'changed text?' }, + }, + }); + }); + + rerender(NODE); + expect(tuple[0]).toEqual({ + 'another id': { + id: 'another id', type: 'SampleBlock' as const, data: { text: 'changed text?' }, + }, + }); + }); + }); + + describe('#useBlockState', () => { + it('returns a getter and a setter tuple', () => { + let tuple: any; + const ViewBlockConfig = () => { + tuple = useBlockState('my id'); + return
{JSON.stringify(tuple[0])}
; + }; + + const NODE = ( + + + + ); + const { rerender } = render(NODE); + expect(tuple[0]).toEqual({ + id: 'my id', + type: 'SampleBlock', + data: { text: 'Test text!' }, + }); + + act(() => { + tuple[1]({ + ...tuple[0], + data: { text: 'changed text?' }, }); }); - expect( - render( - - - - ).queryAllByText('SampleBlock - changed text?') - ).toHaveLength(1); - expect(value).toEqual({ + rerender(NODE); + expect(tuple[0]).toEqual({ id: 'my id', type: 'SampleBlock', - data: { - text: 'Test text!', - }, + data: { text: 'changed text?' }, }); }); }); diff --git a/tests/builder/buildDocumentReader.spec.tsx b/tests/builder/buildDocumentReader.spec.tsx index 3d3af12..35d7dee 100644 --- a/tests/builder/buildDocumentReader.spec.tsx +++ b/tests/builder/buildDocumentReader.spec.tsx @@ -6,7 +6,7 @@ import { render } from '@testing-library/react'; import buildDocumentReader from '../../src/builders/buildDocumentReader'; describe('builders/buildDocumentReader', () => { - const { DocumentReaderProvider, Block, useBlock } = buildDocumentReader({ + const { DocumentReaderProvider, Block, useBlock, useDocument } = buildDocumentReader({ SampleBlock: { schema: z.object({ text: z.string() }), Component: ({ text }) =>
{text.toUpperCase()}
, @@ -21,19 +21,45 @@ describe('builders/buildDocumentReader', () => { }, }; + describe('#useDocument', () => { + it('gets the configurations dictionary', () => { + let RESULT; + const ViewBlockConfig = () => { + RESULT = useDocument(); + return
{JSON.stringify(RESULT)}
; + }; + render( + + + + ); + expect(RESULT).toEqual({ + 'my id': { + id: 'my id', + type: 'SampleBlock', + data: { text: 'Test text!' }, + }, + }); + }); + }); + describe('#useBlock', () => { it('gets the value given an id', () => { - const ViewBlockConfig = ({ id }: { id: string }) => { - const c = useBlock(id); - return
{JSON.stringify(c)}
; + let RESULT; + const ViewBlockConfig = () => { + RESULT = useBlock('my id'); + return
{JSON.stringify(RESULT)}
; }; - expect( - render( - - - - ).queryAllByText('{"id":"my id","type":"SampleBlock","data":{"text":"Test text!"}}') - ).toHaveLength(1); + render( + + + + ); + expect(RESULT).toEqual({ + id: 'my id', + type: 'SampleBlock', + data: { text: 'Test text!' }, + }); }); });