Feat/comments mvi 1 testing

packages/@sanity/portable-text-editor/src/editor/plugins/createWithEditableAPI.ts

@@ -30,9 +30,24 @@ export function createWithEditableAPI(
   types: PortableTextMemberSchemaTypes,
   keyGenerator: () => string,
 ) {
+  let focusTimerHandle: NodeJS.Timeout
   return function withEditableAPI(editor: PortableTextSlateEditor): PortableTextSlateEditor {
     portableTextEditor.setEditable({
       focus: (): void => {
+        // If the editor has pending operations, focus should be requested after
+        // those changes are applied. Retry in the next tick if this is the case.
+        // Relevant: https://github.com/ianstormtaylor/slate/pull/5516#issuecomment-1768359239
+        if (editor.operations.length > 0) {
+          if (focusTimerHandle) {
+            clearTimeout(focusTimerHandle)
+          }
+          focusTimerHandle = setTimeout(() => {
+            // Make sure everything is applied
+            editor.onChange()
+            PortableTextEditor.focus(portableTextEditor)
+          })
+          return
+        }
         // Make a selection if missing
         if (!editor.selection) {
           const point = {path: [0, 0], offset: 0}
@@ -349,6 +364,10 @@ export function createWithEditableAPI(
       delete: (selection: EditorSelection, options?: EditableAPIDeleteOptions): void => {
         if (selection) {
           const range = toSlateRange(selection, editor)
+          const hasRange = range && range.anchor.path.length > 0 && range.focus.path.length > 0
+          if (!hasRange) {
+            throw new Error('Invalid range')
+          }
           if (range) {
             if (!options?.mode || options?.mode === 'selected') {
               debug(`Deleting content in selection`)
@@ -388,6 +407,14 @@ export function createWithEditableAPI(
                 hanging: true,
               })
             })
+            // If the editor was emptied, insert a placeholder block
+            // directly into the editor's children. We don't want to do this
+            // through a Transform (because that would trigger a change event
+            // that would insert the placeholder into the actual value
+            // which should remain empty)
+            if (editor.children.length === 0) {
+              editor.children = [editor.createPlaceholderBlock()]
+            }
             editor.onChange()
           }
         }

packages/sanity/playwright-ct/tests/comments/CommentInput.spec.tsx

@@ -0,0 +1,31 @@
+import {expect, test} from '@playwright/experimental-ct-react'
+import React from 'react'
+import {testHelpers} from '../utils/testHelpers'
+import {CommentsInputStory} from './CommentInputStory'
+
+test.describe('Comments', () => {
+  test.describe('CommentInput', () => {
+    test('Should render', async ({mount, page}) => {
+      await mount(<CommentsInputStory />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeVisible()
+    })
+
+    test('Should be able to type into', async ({mount, page}) => {
+      const {insertPortableText} = testHelpers({page})
+      await mount(<CommentsInputStory />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeEditable()
+      await insertPortableText('My first comment!', $editable)
+      await expect($editable).toHaveText('My first comment!')
+    })
+
+    test('Should bring up mentions menu when typing @', async ({mount, page}) => {
+      await mount(<CommentsInputStory />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeEditable()
+      await page.keyboard.type(`@`)
+      await expect(page.getByTestId('comments-mentions-menu')).toBeVisible()
+    })
+  })
+})

packages/sanity/playwright-ct/tests/comments/CommentInputStory.tsx

@@ -0,0 +1,38 @@
+import React, {useState} from 'react'
+import {CurrentUser, PortableTextBlock} from '@sanity/types'
+import {noop} from 'lodash'
+import {CommentInput} from '../../../src/desk/comments/src/components/pte/comment-input/CommentInput'
+import {TestWrapper} from '../formBuilder/utils/TestWrapper'
+
+const currentUser: CurrentUser = {
+  email: '',
+  id: '',
+  name: '',
+  role: '',
+  roles: [],
+  profileImage: '',
+  provider: '',
+}
+
+const SCHEMA_TYPES: [] = []
+
+export function CommentsInputStory() {
+  const [value, setValue] = useState<PortableTextBlock[] | null>(null)
+
+  return (
+    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+      <CommentInput
+        focusOnMount
+        placeholder="Your comment..."
+        focusLock
+        currentUser={currentUser}
+        onChange={setValue}
+        value={value}
+        mentionOptions={{data: [], error: null, loading: false}}
+        onDiscardConfirm={noop}
+        onDiscardCancel={noop}
+        onSubmit={noop}
+      />
+    </TestWrapper>
+  )
+}

packages/sanity/playwright-ct/tests/formBuilder/ArrayInputStory.tsx

@@ -1,6 +1,7 @@
 import {defineField, defineType} from '@sanity/types'
 import React from 'react'
 import {TestWrapper} from './utils/TestWrapper'
+import {TestForm} from './utils/TestForm'
 
 const SCHEMA_TYPES = [
   defineType({
@@ -20,7 +21,11 @@ const SCHEMA_TYPES = [
 ]
 
 export function ArrayInputStory() {
-  return <TestWrapper schemaTypes={SCHEMA_TYPES} />
+  return (
+    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+      <TestForm />
+    </TestWrapper>
+  )
 }
 
 export default ArrayInputStory

packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/AnnotationsStory.tsx

@@ -1,6 +1,7 @@
 import {defineArrayMember, defineField, defineType} from '@sanity/types'
 import React from 'react'
 import {TestWrapper} from '../../utils/TestWrapper'
+import {TestForm} from '../../utils/TestForm'
 
 const SCHEMA_TYPES = [
   defineType({
@@ -22,7 +23,11 @@ const SCHEMA_TYPES = [
 ]
 
 export function AnnotationsStory() {
-  return <TestWrapper schemaTypes={SCHEMA_TYPES} />
+  return (
+    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+      <TestForm />
+    </TestWrapper>
+  )
 }
 
 export default AnnotationsStory

packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/DecoratorsStory.tsx

@@ -2,6 +2,7 @@ import {defineArrayMember, defineField, defineType} from '@sanity/types'
 import React from 'react'
 import {BulbOutlineIcon} from '@sanity/icons'
 import {TestWrapper} from '../../utils/TestWrapper'
+import {TestForm} from '../../utils/TestForm'
 
 const SCHEMA_TYPES = [
   defineType({
@@ -35,7 +36,11 @@ const SCHEMA_TYPES = [
 ]
 
 export function DecoratorsStory() {
-  return <TestWrapper schemaTypes={SCHEMA_TYPES} />
+  return (
+    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+      <TestForm />
+    </TestWrapper>
+  )
 }
 
 export default DecoratorsStory

packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable max-nested-callbacks */
+import {expect, test} from '@playwright/experimental-ct-react'
+import React from 'react'
+import {Path, SanityDocument} from '@sanity/types'
+import {Page} from '@playwright/test'
+import FocusTrackingStory from './FocusTrackingStory'
+
+export type UpdateFn = () => {focusPath: Path; document: SanityDocument}
+
+const document: SanityDocument = {
+  _id: '123',
+  _type: 'test',
+  _createdAt: new Date().toISOString(),
+  _updatedAt: new Date().toISOString(),
+  _rev: '123',
+  body: [
+    {
+      _type: 'block',
+      _key: 'a',
+      children: [{_type: 'span', _key: 'b', text: 'Foo'}],
+      markDefs: [],
+    },
+    {
+      _type: 'block',
+      _key: 'c',
+      children: [{_type: 'span', _key: 'd', text: 'Bar'}],
+      markDefs: [],
+    },
+    {
+      _type: 'block',
+      _key: 'e',
+      children: [{_type: 'span', _key: 'f', text: 'Baz'}],
+      markDefs: [],
+    },
+    {
+      _type: 'block',
+      _key: 'g',
+      children: [
+        {_type: 'span', _key: 'h', text: 'Hello '},
+        {_type: 'inlineObjectWithTextProperty', _key: 'i', text: 'there'},
+        {_type: 'span', _key: 'j', text: ' playwright'},
+      ],
+      markDefs: [],
+    },
+    {
+      _type: 'testObjectBlock',
+      _key: 'k',
+      text: 'Hello world',
+    },
+  ],
+}
+
+test.describe('Portable Text Input', () => {
+  test.beforeEach(async ({page}) => {
+    await page.evaluate(() => {
+      window.localStorage.debug = 'sanity-pte:*'
+    })
+  })
+  test.describe('Should track focusPath', () => {
+    test(`for span .text`, async ({mount, page}) => {
+      const initialPath = ['body', {_key: 'c'}, 'children', {_key: 'd'}, 'text']
+      const component = await mount(
+        <FocusTrackingStory document={document} focusPath={initialPath} />,
+      )
+      await waitForFocusPath(page, initialPath)
+      const $portableTextInput = component.getByTestId('field-body')
+      const $pteTextbox = $portableTextInput.getByRole('textbox')
+      await expect($pteTextbox).toBeFocused()
+      expect(await getFocusedNodeText(page)).toEqual('Bar')
+      await setFocusPathFromOutside(page, ['body', {_key: 'e'}, 'children', {_key: 'f'}, 'text'])
+      expect(await getFocusedNodeText(page)).toEqual('Baz')
+    })
+    test(`for span child root`, async ({mount, page}) => {
+      const initialPath = ['body', {_key: 'c'}, 'children', {_key: 'd'}]
+      const component = await mount(
+        <FocusTrackingStory document={document} focusPath={initialPath} />,
+      )
+      await waitForFocusPath(page, initialPath)
+      const $portableTextInput = component.getByTestId('field-body')
+      const $pteTextbox = $portableTextInput.getByRole('textbox')
+      await expect($pteTextbox).toBeFocused()
+      expect(await getFocusedNodeText(page)).toEqual('Bar')
+      await setFocusPathFromOutside(page, ['body', {_key: 'e'}, 'children', {_key: 'f'}])
+      expect(await getFocusedNodeText(page)).toEqual('Baz')
+    })
+    test(`for inline objects with .text prop`, async ({mount, page}) => {
+      const initialPath = ['body', {_key: 'g'}, 'children', {_key: 'i'}, 'text']
+      const component = await mount(
+        <FocusTrackingStory document={document} focusPath={initialPath} />,
+      )
+      await waitForFocusPath(page, initialPath)
+      const $portableTextInput = component.getByTestId('field-body')
+      const $pteTextbox = $portableTextInput.getByRole('textbox')
+      await expect($pteTextbox).not.toBeFocused()
+      const inlineObjectTextInput = page.getByTestId('inlineTextInputField').getByRole('textbox')
+      await expect(inlineObjectTextInput).toBeFocused()
+      await setFocusPathFromOutside(page, ['body', {_key: 'e'}, 'children', {_key: 'f'}])
+      await expect($pteTextbox).toBeFocused()
+    })
+    test(`for object blocks with .text prop`, async ({mount, page}) => {
+      const initialPath = ['body', {_key: 'k'}, 'text']
+      const component = await mount(
+        <FocusTrackingStory document={document} focusPath={initialPath} />,
+      )
+      await waitForFocusPath(page, initialPath)
+      const $portableTextInput = component.getByTestId('field-body')
+      const $pteTextbox = $portableTextInput.getByRole('textbox')
+      await expect($pteTextbox).not.toBeFocused()
+      const blockObjectInput = page.getByTestId('objectBlockInputField').getByRole('textbox')
+      await expect(blockObjectInput).toBeFocused()
+    })
+    test(`for block paths`, async ({mount, page}) => {
+      const initialPath = ['body', {_key: 'k'}]
+      const component = await mount(
+        <FocusTrackingStory document={document} focusPath={initialPath} />,
+      )
+      await waitForFocusPath(page, initialPath)
+      const $portableTextInput = component.getByTestId('field-body')
+      const $pteTextbox = $portableTextInput.getByRole('textbox')
+      await expect($pteTextbox).not.toBeFocused()
+      const blockObjectInput = page.getByTestId('objectBlockInputField').getByRole('textbox')
+      await expect(blockObjectInput).toBeVisible()
+      await setFocusPathFromOutside(page, ['body', {_key: 'g'}])
+      await expect($pteTextbox).toBeFocused()
+      await expect(blockObjectInput).not.toBeVisible()
+    })
+  })
+})
+
+async function setFocusPathFromOutside(page: Page, path: Path) {
+  await page.evaluate(
+    ({_path}) => {
+      ;(window as any).__setFocusPath(_path)
+    },
+    {_path: path},
+  )
+  await waitForFocusPath(page, path)
+}
+
+// Make sure the focusPath is propagated before we start testing on it
+async function waitForFocusPath(page: Page, path: Path) {
+  await page.waitForSelector(`[data-focus-path='${JSON.stringify(path)}']`)
+}
+
+function getFocusedNodeText(page: Page) {
+  return page.evaluate(() => window.getSelection()?.focusNode?.textContent)
+}