test(desk-tool): port document actions tests to playwright

dev/test-studio/parts/deskStructure.js

@@ -93,7 +93,7 @@ const DEBUG_INPUT_TYPES = [
   'withDocumentTest',
 ]
 
-const CI_INPUT_TYPES = ['conditionalFieldset', 'validationCI']
+const CI_INPUT_TYPES = ['conditionalFieldset', 'validationCI', 'documentActionsCI']
 const FIELD_GROUP_TYPES = [
   'fieldGroups',
   'fieldGroupsDefault',

dev/test-studio/schema/ci/documentActionsCI.js

@@ -0,0 +1,12 @@
+export default {
+  name: 'documentActionsCI',
+  title: 'Document Actions CI',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    },
+  ],
+}

dev/test-studio/schema/index.js

@@ -90,6 +90,7 @@ import species from './species'
 // CI documents
 import conditionalFieldset from './ci/conditionalFieldset'
 import validationTest from './ci/validationCI'
+import documentActionsCI from './ci/documentActionsCI'
 
 export default createSchema({
   name: 'test-examples',
@@ -180,5 +181,6 @@ export default createSchema({
     fieldGroupsDefault,
     fieldGroupsMany,
     fieldGroupsWithValidation,
+    documentActionsCI,
   ]),
 })

packages/@sanity/desk-tool/src/components/ConfirmDelete.tsx

@@ -43,6 +43,7 @@ export const ConfirmDelete = enhanceWithReferringDocuments(function ConfirmDelet
           onClick={onConfirm}
           text={hasReferringDocuments ? 'Delete anyway' : 'Delete now'}
           tone="critical"
+          data-testid="confirm-delete"
         />
       )}
     </Grid>

packages/@sanity/desk-tool/src/components/ConfirmUnpublish.tsx

@@ -42,6 +42,7 @@ export const ConfirmUnpublish = enhanceWithReferringDocuments(function ConfirmUn
           onClick={onConfirm}
           text={hasReferringDocuments ? 'Try to unpublish anyway' : 'Unpublish now'}
           tone="critical"
+          data-testid="confirm-unpublish"
         />
       )}
     </Grid>

packages/@sanity/desk-tool/src/components/paneItem/PaneItem.tsx

@@ -89,10 +89,11 @@ export function PaneItem(props: PaneItemProps) {
         pressed={pressed}
         selected={selected || clicked}
         tone="inherit"
+        data-testid={`pane-item-${id}`}
       >
         {preview}
       </PreviewCard>
     ),
-    [clicked, handleClick, LinkComponent, pressed, preview, selected]
+    [clicked, handleClick, LinkComponent, pressed, preview, selected, id]
   )
 }

playwright/helpers/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_DATASET = 'test'
+export const STUDIO_PROJECT_ID = 'ppsg7ml5'

playwright/helpers/createUniqueDocument.ts

@@ -0,0 +1,18 @@
+import {SanityDocument, SanityDocumentStub} from '@sanity/client'
+import {uuid} from '@sanity/uuid'
+import {testSanityClient} from '.'
+
+export async function createUniqueDocument({
+  _type,
+  _id,
+  ...restProps
+}: SanityDocumentStub): Promise<Partial<SanityDocument>> {
+  const doc = {
+    _type,
+    _id: _id || uuid(),
+    ...restProps,
+  }
+
+  await testSanityClient.create(doc)
+  return doc
+}

playwright/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './sanityClient'
+export * from './createUniqueDocument'
+export * from './constants'

playwright/helpers/sanityClient.ts

@@ -0,0 +1,13 @@
+import sanityClient from '@sanity/client'
+import {DEFAULT_DATASET, STUDIO_PROJECT_ID} from '.'
+
+export const testSanityClient = sanityClient({
+  projectId: 'ppsg7ml5',
+  dataset: 'test',
+  token: process.env.PLAYWRIGHT_SANITY_SESSION_TOKEN,
+  useCdn: false,
+})
+
+export async function deleteDocument(payload) {
+  return testSanityClient.delete(payload)
+}

playwright/tests/desk-tool/documentActions.spec.ts

@@ -0,0 +1,113 @@
+import {test, expect} from '@playwright/test'
+import {createUniqueDocument, DEFAULT_DATASET, deleteDocument} from '../../helpers'
+
+/* 
+  **NOTE**
+  In these tests, we are not testing input events, so to speed up the tests we will use use `page.fill()` instead of `page.type()` to populate the document title field 
+*/
+
+const DOC_TITLE = 'Document actions [Playwright]'
+const inputSelector = 'data-testid=input-title >> input'
+
+// The path of the network request we want to wait for
+const documentActionPath = (action) =>
+  `*/**/mutate/${DEFAULT_DATASET}?tag=sanity.studio.document.${action}*`
+
+// Helper to generate path to document created in a test
+const generateDocumentUri = (docId) =>
+  `/${DEFAULT_DATASET}/desk/input-ci;documentActionsCI;${docId}`
+
+// Helper to get the path to the document the client creates for a test
+async function getDocumentUri(_type: string, title?: string) {
+  const testDoc = await createUniqueDocument({_type, title})
+  return [generateDocumentUri(testDoc?._id), testDoc?._id]
+}
+
+test.describe('@sanity/desk-tool: document actions', () => {
+  // Before we run our tests, delete all previously created test documents to avoid clutter
+  test.beforeAll(async () => {
+    await deleteDocument({query: `*[_type == "documentActionsCI"]`})
+  })
+
+  test('edit and publish document', async ({page}) => {
+    const publishButton = page.locator('data-testid=action-Publish')
+
+    await getDocumentUri('documentActionsCI').then(([path]) => {
+      page.goto(path)
+    })
+    await page.fill(inputSelector, DOC_TITLE)
+    expect(page.locator(inputSelector)).toHaveValue(DOC_TITLE)
+    expect(publishButton).toBeEnabled()
+    expect(publishButton).toHaveAttribute('data-disabled', 'false')
+
+    await Promise.all([page.waitForResponse(documentActionPath('publish')), publishButton.click()])
+    await expect(publishButton).toBeDisabled()
+    await expect(publishButton).toHaveAttribute('data-disabled', 'true')
+  })
+
+  test('unpublish document', async ({page}) => {
+    const publishButton = page.locator('data-testid=action-Publish')
+
+    await getDocumentUri('documentActionsCI', DOC_TITLE).then(([path]) => {
+      page.goto(path)
+    })
+
+    expect(page.locator(inputSelector)).toHaveValue(DOC_TITLE)
+    expect(publishButton).toBeDisabled()
+    expect(publishButton).toHaveAttribute('data-disabled', 'true')
+    page.locator('data-testid=action-menu-button').click()
+    page.locator('data-testid=action-Unpublish').click()
+
+    await Promise.all([
+      page.waitForResponse(documentActionPath('unpublish')),
+      page.locator('data-testid=confirm-unpublish').click(),
+    ])
+
+    await expect(publishButton).toBeEnabled()
+    await expect(publishButton).toHaveAttribute('data-disabled', 'false')
+  })
+
+  test('duplicate document', async ({page}) => {
+    let documentPath
+
+    await getDocumentUri('documentActionsCI', DOC_TITLE).then(([path]) => {
+      documentPath = path
+      page.goto(path)
+    })
+
+    expect(page.locator(inputSelector)).toHaveValue(DOC_TITLE)
+    page.locator('data-testid=action-menu-button').click()
+
+    await Promise.all([
+      page.waitForResponse(documentActionPath('duplicate')),
+      page.locator('data-testid=action-Duplicate').click(),
+    ])
+    // Check if we are viewing a new document and not the one created for this test
+    await expect(page.url()).not.toMatch(`*${documentPath}`)
+  })
+
+  test('delete document', async ({page}) => {
+    // Store the document ID so that we can assert that it's been removed from the pane content
+    let documentId
+    const publishButton = page.locator('data-testid=action-Publish')
+
+    await getDocumentUri('documentActionsCI', DOC_TITLE).then(([path, id]) => {
+      documentId = id
+      page.goto(path)
+    })
+
+    expect(page.locator(inputSelector)).toHaveValue(DOC_TITLE)
+    page.locator('data-testid=action-menu-button').click()
+    page.locator('data-testid=action-Delete').click()
+
+    await Promise.all([
+      page.waitForResponse(documentActionPath('delete')),
+      page.locator('data-testid=confirm-delete').click(),
+    ])
+    await expect(publishButton).toBeDisabled()
+    await expect(publishButton).toHaveAttribute('data-disabled', 'true')
+    expect(
+      await page.locator(`data-testid=pane-content >> data-testid=pane-item-${documentId}`).count()
+    ).toBe(0)
+  })
+})