test(playwrigh-ct): add test for comment submission

sanity-io · Oct 25, 2023 · 85f23a9 · 85f23a9
1 parent add670c
commit 85f23a9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/packages/sanity/playwright-ct/tests/comments/CommentInput.spec.tsx b/packages/sanity/playwright-ct/tests/comments/CommentInput.spec.tsx
@@ -23,9 +23,27 @@ test.describe('Comments', () => {
     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 $editable.waitFor({state: 'visible'})
+      await page.keyboard.type('@')
       await expect(page.getByTestId('comments-mentions-menu')).toBeVisible()
     })
+
+    test('Should be able to submit', async ({mount, page}) => {
+      const {insertPortableText} = testHelpers({page})
+      let submitted = false
+      const onSubmit = () => {
+        submitted = true
+      }
+      await mount(<CommentsInputStory onSubmit={onSubmit} />)
+      const $editable = page.getByTestId('comment-input-editable')
+      await expect($editable).toBeEditable()
+      // Test that blank comments can't be submitted
+      await page.keyboard.press('Enter')
+      expect(submitted).toBe(false)
+      await insertPortableText('This is a comment!', $editable)
+      await expect($editable).toHaveText('This is a comment!')
+      await page.keyboard.press('Enter')
+      expect(submitted).toBe(true)
+    })
   })
 })
diff --git a/packages/sanity/playwright-ct/tests/comments/CommentInputStory.tsx b/packages/sanity/playwright-ct/tests/comments/CommentInputStory.tsx
@@ -16,22 +16,31 @@ const currentUser: CurrentUser = {
 
 const SCHEMA_TYPES: [] = []
 
-export function CommentsInputStory() {
-  const [value, setValue] = useState<PortableTextBlock[] | null>(null)
-
+export function CommentsInputStory({
+  onDiscardCancel = noop,
+  onDiscardConfirm = noop,
+  onSubmit = noop,
+  value = null,
+}: {
+  onDiscardCancel?: () => void
+  onDiscardConfirm?: () => void
+  onSubmit?: () => void
+  value?: PortableTextBlock[] | null
+}) {
+  const [valueState, setValueState] = useState<PortableTextBlock[] | null>(value)
   return (
     <TestWrapper schemaTypes={SCHEMA_TYPES}>
       <CommentInput
         focusOnMount
         placeholder="Your comment..."
         focusLock
         currentUser={currentUser}
-        onChange={setValue}
-        value={value}
+        onChange={setValueState}
+        value={valueState}
         mentionOptions={{data: [], error: null, loading: false}}
-        onDiscardConfirm={noop}
-        onDiscardCancel={noop}
-        onSubmit={noop}
+        onDiscardConfirm={onDiscardConfirm}
+        onDiscardCancel={onDiscardCancel}
+        onSubmit={onSubmit}
       />
     </TestWrapper>
   )