test(playwright-ct): add initialActive, initialFullscreen and hideToo…

…lbar stories
sanity-io · May 13, 2024 · 968f758 · 968f758
1 parent e016934
commit 968f758
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 54 deletions.
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Input.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Input.spec.tsx
@@ -26,6 +26,14 @@ test.describe('Portable Text Input', () => {
       await $activeOverlay.hover()
       await expect($activeOverlay).toHaveText('Click to activate')
     })
+
+    test(`Immediately activate on mount when 'initialActive' is true`, async ({mount}) => {
+      const component = await mount(<InputStory ptInputProps={{initialActive: true}} />)
+
+      const $portableTextInput = component.getByTestId('field-body')
+      const $activeOverlay = $portableTextInput.getByTestId('activate-overlay')
+      await expect($activeOverlay).not.toBeAttached()
+    })
   })
 
   test.describe('Placeholder', () => {
@@ -66,9 +74,17 @@ test.describe('Portable Text Input', () => {
       const {getFocusedPortableTextEditor} = testHelpers({page})
       const changes: EditorChange[] = []
       const pushChange = (change: EditorChange) => changes.push(change)
-      await mount(<InputStory onEditorChange={pushChange} />)
+      await mount(<InputStory ptInputProps={{onEditorChange: pushChange}} />)
       await getFocusedPortableTextEditor('field-body')
       expect(changes.length).toBeGreaterThan(0)
     })
   })
+
+  test.describe('Fullscreen', () => {
+    test(`Input is rendered as fullscreen`, async ({mount, page}) => {
+      await mount(<InputStory ptInputProps={{initialFullscreen: true}} />)
+      // Assertion: data-fullscreen attribute must be correctly set
+      await expect(page.locator('[data-testid="pt-editor"][data-fullscreen="true"]')).toBeVisible()
+    })
+  })
 })
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/InputStory.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/InputStory.tsx
@@ -1,20 +1,24 @@
-import {type EditorChange, type PortableTextEditor} from '@sanity/portable-text-editor'
+import {type PortableTextEditor} from '@sanity/portable-text-editor'
 import {defineArrayMember, defineField, defineType} from '@sanity/types'
 import {createRef, type RefObject, useMemo, useState} from 'react'
 import {type InputProps, type PortableTextInputProps} from 'sanity'
 
 import {TestForm} from '../../utils/TestForm'
 import {TestWrapper} from '../../utils/TestWrapper'
 
-export function InputStory(props: {
+interface InputStoryProps {
   getRef?: (editorRef: RefObject<PortableTextEditor | null>) => void
-  onEditorChange?: (change: EditorChange) => void
-}) {
+  ptInputProps?: Partial<PortableTextInputProps>
+}
+
+export function InputStory(props: InputStoryProps) {
+  const {getRef, ptInputProps} = props
+
   // Use a state as ref here to be make sure we are able to call the ref callback when
   // the ref is ready
   const [editorRef, setEditorRef] = useState<RefObject<PortableTextEditor | null>>({current: null})
-  if (props.getRef && editorRef.current) {
-    props.getRef(editorRef)
+  if (getRef && editorRef.current) {
+    getRef(editorRef)
   }
 
   const schemaTypes = useMemo(
@@ -36,7 +40,7 @@ export function InputStory(props: {
               input: (inputProps: InputProps) => {
                 const editorProps = {
                   ...inputProps,
-                  onEditorChange: props.onEditorChange,
+                  ...ptInputProps,
                   editorRef: createRef(),
                 } as PortableTextInputProps
                 if (editorProps.editorRef) {
@@ -53,7 +57,7 @@ export function InputStory(props: {
         ],
       }),
     ],
-    [props.onEditorChange],
+    [ptInputProps],
   )
 
   return (

diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx
@@ -92,5 +92,17 @@ test.describe('Portable Text Input', () => {
         })
       })
     })
+
+    test.describe('Hidden toolbar', () => {
+      test('Toolbar should be hidden after activation', async ({mount, page}) => {
+        const {getFocusedPortableTextInput} = testHelpers({page})
+        await mount(<ToolbarStory ptInputProps={{hideToolbar: true}} />)
+        const $portableTextInput = await getFocusedPortableTextInput('field-body')
+
+        const $toolbarCard = $portableTextInput.getByTestId('pt-editor__toolbar-card')
+        // Assertion: the toolbar should not be rendered in the DOM
+        await expect($toolbarCard).not.toBeAttached()
+      })
+    })
   })
 })
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ToolbarStory.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/ToolbarStory.tsx
@@ -1,64 +1,86 @@
 import {defineArrayMember, defineField, defineType} from '@sanity/types'
+import {useMemo} from 'react'
+import {type InputProps, type PortableTextInputProps} from 'sanity'
 
 import {TestForm} from '../../utils/TestForm'
 import {TestWrapper} from '../../utils/TestWrapper'
 
-const SCHEMA_TYPES = [
-  defineType({
-    type: 'document',
-    name: 'test',
-    title: 'Test',
-    fields: [
-      defineField({
-        type: 'array',
-        name: 'body',
-        of: [
-          defineArrayMember({
-            type: 'block',
+interface InputStoryProps {
+  id?: string
+  ptInputProps?: Partial<PortableTextInputProps>
+}
+
+export function ToolbarStory(props: InputStoryProps) {
+  const {id = 'root', ptInputProps} = props
+
+  const schemaTypes = useMemo(
+    () => [
+      defineType({
+        type: 'document',
+        name: 'test',
+        title: 'Test',
+        fields: [
+          defineField({
+            type: 'array',
+            name: 'body',
             of: [
               defineArrayMember({
-                type: 'object',
-                title: 'Inline Object',
-                fields: [
-                  defineField({
-                    type: 'string',
-                    name: 'title',
-                    title: 'Title',
+                type: 'block',
+                of: [
+                  defineArrayMember({
+                    type: 'object',
+                    title: 'Inline Object',
+                    fields: [
+                      defineField({
+                        type: 'string',
+                        name: 'title',
+                        title: 'Title',
+                      }),
+                    ],
                   }),
                 ],
               }),
+              defineArrayMember({
+                name: 'object',
+                type: 'object',
+                title: 'Object',
+                fields: [{type: 'string', name: 'title', title: 'Title'}],
+                preview: {
+                  select: {
+                    title: 'title',
+                  },
+                },
+              }),
+              defineArrayMember({
+                name: 'objectWithoutTitle',
+                type: 'object',
+                fields: [{type: 'string', name: 'title', title: 'Title'}],
+                preview: {
+                  select: {
+                    title: 'title',
+                  },
+                },
+              }),
             ],
-          }),
-          defineArrayMember({
-            name: 'object',
-            type: 'object',
-            title: 'Object',
-            fields: [{type: 'string', name: 'title', title: 'Title'}],
-            preview: {
-              select: {
-                title: 'title',
-              },
-            },
-          }),
-          defineArrayMember({
-            name: 'objectWithoutTitle',
-            type: 'object',
-            fields: [{type: 'string', name: 'title', title: 'Title'}],
-            preview: {
-              select: {
-                title: 'title',
+
+            components: {
+              input: (inputProps: InputProps) => {
+                const editorProps = {
+                  ...inputProps,
+                  ...ptInputProps,
+                } as PortableTextInputProps
+                return inputProps.renderDefault(editorProps)
               },
             },
           }),
         ],
       }),
     ],
-  }),
-]
+    [ptInputProps],
+  )
 
-export function ToolbarStory({id = 'root'}: {id?: string}) {
   return (
-    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+    <TestWrapper schemaTypes={schemaTypes}>
       <TestForm id={id} />
     </TestWrapper>
   )

diff --git a/packages/sanity/playwright-ct/tests/utils/testHelpers.tsx b/packages/sanity/playwright-ct/tests/utils/testHelpers.tsx
@@ -12,9 +12,7 @@ export function testHelpers({page}: {page: PlaywrightTestArgs['page']}) {
       await $overlay.focus()
       await page.keyboard.press('Space')
     }
-    await $pteField
-      .locator(`[data-testid='pt-editor__toolbar-card']`)
-      .waitFor({state: 'visible', timeout: 1000})
+    await $overlay.waitFor({state: 'detached', timeout: 1000})
   }
   return {
     /**