test(playwright-ct): simplify focusPath tests

sanity-io · Oct 23, 2023 · 25c7210 · 25c7210 · vercel · Oct 23, 2023
1 parent 601b187
commit 25c7210
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 62 deletions.
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTracking.spec.tsx
@@ -58,90 +58,88 @@ test.describe('Portable Text Input', () => {
   })
   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} />,
+        <FocusTrackingStory
+          document={document}
+          focusPath={['body', {_key: 'c'}, 'children', {_key: 'd'}, 'text']}
+        />,
       )
-      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')
+      await waitForFocusedNodeText(page, 'Bar')
+      await component.update(
+        <FocusTrackingStory
+          document={document}
+          focusPath={['body', {_key: 'e'}, 'children', {_key: 'f'}, 'text']}
+        />,
+      )
+      await waitForFocusedNodeText(page, '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} />,
+        <FocusTrackingStory
+          document={document}
+          focusPath={['body', {_key: 'c'}, 'children', {_key: 'd'}]}
+        />,
       )
-      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')
+      await waitForFocusedNodeText(page, 'Bar')
+      await component.update(
+        <FocusTrackingStory
+          document={document}
+          focusPath={['body', {_key: 'e'}, 'children', {_key: 'f'}]}
+        />,
+      )
+      await waitForFocusedNodeText(page, '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} />,
+        <FocusTrackingStory
+          document={document}
+          focusPath={['body', {_key: 'g'}, 'children', {_key: 'i'}, 'text']}
+        />,
       )
-      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 component.update(
+        <FocusTrackingStory
+          document={document}
+          focusPath={['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} />,
+        <FocusTrackingStory document={document} focusPath={['body', {_key: 'k'}, 'text']} />,
       )
-      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} />,
+        <FocusTrackingStory document={document} focusPath={['body', {_key: 'k'}]} />,
       )
-      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 component.update(
+        <FocusTrackingStory document={document} focusPath={['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)
+function waitForFocusedNodeText(page: Page, text: string) {
+  return page.waitForFunction((arg) => {
+    return window.getSelection()?.focusNode?.textContent === arg
+  }, text)
 }
diff --git a/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTrackingStory.tsx b/packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/FocusTrackingStory.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-bind */
 import {Path, defineArrayMember, defineField, defineType} from '@sanity/types'
-import React, {useEffect, useState} from 'react'
+import React from 'react'
 import {SanityDocument} from '@sanity/client'
 import {TestWrapper} from '../../utils/TestWrapper'
 import {TestForm} from '../../utils/TestForm'
@@ -56,27 +56,16 @@ const SCHEMA_TYPES = [
 ]
 
 export function FocusTrackingStory({
-  focusPath: focusPathFromProps,
+  focusPath,
   document,
 }: {
   focusPath?: Path
   document?: SanityDocument
 }) {
-  const [focusPath, setFocusPath] = useState<Path>(focusPathFromProps || [])
-  useEffect(() => {
-    ;(window as any).__setFocusPath = (path: Path) => {
-      setFocusPath(path)
-    }
-    return () => {
-      ;(window as any).__setFocusPath = undefined
-    }
-  }, [])
   return (
-    <div data-focus-path={JSON.stringify(focusPath)}>
-      <TestWrapper schemaTypes={SCHEMA_TYPES}>
-        <TestForm document={document} focusPath={focusPath} />
-      </TestWrapper>
-    </div>
+    <TestWrapper schemaTypes={SCHEMA_TYPES}>
+      <TestForm document={document} focusPath={focusPath} />
+    </TestWrapper>
   )
 }