From aa2cbbde5b0761d826063b9f2a0ab6fdbb9b37fd Mon Sep 17 00:00:00 2001 From: b12f Date: Wed, 9 Oct 2024 14:43:40 +0200 Subject: [PATCH] rich-text: improve tests --- .gitignore | 2 + .../paragraph/__tests__/paragraph.test.ts | 16 +- packages/rich-text/lib/component/index.ts | 28 +- packages/rich-text/lib/create.ts | 16 +- .../test/__snapshots__/to-dom.test.ts.snap | 303 ------------------ packages/rich-text/lib/test/create.test.ts | 2 +- packages/rich-text/lib/test/to-dom.test.ts | 5 - .../rich-text/lib/test/to-html-string.test.ts | 88 ++--- test/with-setup.ts | 25 +- vitest.config.ts | 1 + 10 files changed, 105 insertions(+), 381 deletions(-) delete mode 100644 packages/rich-text/lib/test/__snapshots__/to-dom.test.ts.snap diff --git a/.gitignore b/.gitignore index 6cb99a7..e3ac1cf 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ tags .cache docs/.vitepress/cache docs/.vitepress/dist +__screenshots__ +__snapshots__ diff --git a/packages/paragraph/__tests__/paragraph.test.ts b/packages/paragraph/__tests__/paragraph.test.ts index e49bf6c..c512db3 100644 --- a/packages/paragraph/__tests__/paragraph.test.ts +++ b/packages/paragraph/__tests__/paragraph.test.ts @@ -1,7 +1,15 @@ -'use strict'; - -const paragraph = require('..'); +import { describe, expect, it } from 'vitest' +import { mount } from '@vue/test-utils'; +import { withSetup } from '../../../test'; +import SbParagraph from '../lib'; describe('@schlechtenburg/paragraph', () => { - it('needs tests'); + it('edit should render', () => { + const edit = mount(SbParagraph.edit); + expect(edit.find('p')).toContain(); + edit.element + }); + it('view should render', () => { + mount(SbParagraph.view); + }); }); diff --git a/packages/rich-text/lib/component/index.ts b/packages/rich-text/lib/component/index.ts index 600fc0f..278591d 100644 --- a/packages/rich-text/lib/component/index.ts +++ b/packages/rich-text/lib/component/index.ts @@ -1,13 +1,3 @@ -/** - * WordPress dependencies - */ -import { useRef, useLayoutEffect, useReducer } from '@wordpress/element'; -import { useMergeRefs, useRefEffect } from '@wordpress/compose'; -import { useRegistry } from '@wordpress/data'; - -/** - * Internal dependencies - */ import { create, RichTextData } from '../create'; import { apply } from '../to-dom'; import { toHTMLString } from '../to-html-string'; @@ -15,7 +5,7 @@ import { useDefaultStyle } from './use-default-style'; import { useBoundaryStyle } from './use-boundary-style'; import { useEventListeners } from './event-listeners'; -export function useRichText( { +export function useRichText({ value = '', selectionStart, selectionEnd, @@ -29,7 +19,21 @@ export function useRichText( { __unstableAfterParse, __unstableBeforeSerialize, __unstableAddInvisibleFormats, -} ) { +}, { + value = '', + selectionStart, + selectionEnd, + placeholder, + onSelectionChange, + preserveWhiteSpace, + onChange, + __unstableDisableFormats: disableFormats, + __unstableIsSelected: isSelected, + __unstableDependencies = [], + __unstableAfterParse, + __unstableBeforeSerialize, + __unstableAddInvisibleFormats, +}) { const registry = useRegistry(); const [ , forceRender ] = useReducer( () => ( {} ) ); const ref = useRef(); diff --git a/packages/rich-text/lib/create.ts b/packages/rich-text/lib/create.ts index 7dca870..0f4cc5a 100644 --- a/packages/rich-text/lib/create.ts +++ b/packages/rich-text/lib/create.ts @@ -133,11 +133,13 @@ export function create({ text, html, range, + isEditableTree = false, }: { - element?: Element, + element?: Element|Node, text?: string, html?: string, range?: SimpleRange, + isEditableTree?: boolean, } = {} ): RichTextValue { if ( typeof text === 'string' && text.length > 0 ) { return { @@ -353,8 +355,16 @@ export function removeReservedCharacters( string: string ): string { * @return {RichTextValue} A rich text value. */ function createFromElement( - { element, range, isEditableTree }: - { element?:Element, range?:SimpleRange, isEditableTree?: boolean } + { + element, + range, + isEditableTree, + }: + { + element?:Element|Node, + range?:SimpleRange, + isEditableTree?: boolean, + } ): RichTextValue { const accumulator = createEmptyValue(); diff --git a/packages/rich-text/lib/test/__snapshots__/to-dom.test.ts.snap b/packages/rich-text/lib/test/__snapshots__/to-dom.test.ts.snap deleted file mode 100644 index b7bb73f..0000000 --- a/packages/rich-text/lib/test/__snapshots__/to-dom.test.ts.snap +++ /dev/null @@ -1,303 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`recordToDom should create a value with formatting 1`] = ` - - - test - - - -`; - -exports[`recordToDom should create a value with formatting for split tags 1`] = ` - - - test - - - -`; - -exports[`recordToDom should create a value with formatting with attributes 1`] = ` - - - test - - - -`; - -exports[`recordToDom should create a value with image object 1`] = ` - - - - - -`; - -exports[`recordToDom should create a value with image object and formatting 1`] = ` - - - - - - - - -`; - -exports[`recordToDom should create a value with image object and text after 1`] = ` - - - - - te - - st - -`; - -exports[`recordToDom should create a value with image object and text before 1`] = ` - - te - - st - - - - - -`; - -exports[`recordToDom should create a value with nested formatting 1`] = ` - - - - test - - - - -`; - -exports[`recordToDom should create a value without formatting 1`] = ` - - test - -`; - -exports[`recordToDom should create an empty value 1`] = ` - - -  - -`; - -exports[`recordToDom should create an empty value from empty tags 1`] = ` - - -  - -`; - -exports[`recordToDom should disarm on* attribute 1`] = ` - - - - - -`; - -exports[`recordToDom should disarm script 1`] = ` - - -