test(playwright-ct): add tests for CommentInput

Add some basic tests for the comment input. More to come.

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,40 @@
+import React, {useState} from 'react'
+import {CurrentUser, PortableTextBlock} from '@sanity/types'
+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}}
+        onEditDiscard={() => {
+          // ...
+        }}
+        onSubmit={() => {
+          // ...
+        }}
+      />
+    </TestWrapper>
+  )
+}