chore: prep work for making e2e tests more isolated (#4961)

test/e2e/README.md

@@ -1,6 +1,6 @@
 # E2E Testing in the Studio
 
-Before you get started with writing and running tests, you need to get hold of a token - either using your own Sanity user token (`sanity debug --secrets` will give you the CLI token), or by creating a project API token using https://sanity.io/manage.
+Before you get started with writing and running tests, you need to get hold of a token - either using your own Sanity user token (`sanity debug --secrets` will give you the CLI token provided you are logged in `sanity login`), or by creating a project API token using https://sanity.io/manage.
 
 The tests expects to find the token in an environment variable named `SANITY_E2E_SESSION_TOKEN`. Either define it in your shell, or add it to the `.env.local` file in the repository root.
 

test/e2e/helpers/createUniqueDocument.ts

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

test/e2e/helpers/sanityClient.ts

@@ -1,22 +1,44 @@
 import {createClient} from '@sanity/client'
+import {SanityClient} from 'sanity'
 import {SANITY_E2E_SESSION_TOKEN} from '../env'
-import {STALE_TEST_THRESHOLD_MS, STUDIO_DATASET_NAME, STUDIO_PROJECT_ID} from './constants'
+import {STUDIO_DATASET_NAME, STUDIO_PROJECT_ID} from './constants'
+import {uuid} from '@sanity/uuid'
 
-export const testSanityClient = createClient({
+export class TestContext {
+  client: SanityClient
+
+  constructor(client: SanityClient) {
+    this.client = client
+  }
+
+  documentIds = new Set<string>()
+
+  getUniqueDocumentId() {
+    const documentId = uuid()
+    this.documentIds.add(documentId)
+    return documentId
+  }
+
+  teardown() {
+    this.client.delete({
+      query: '*[_id in $ids]',
+      params: {ids: [...this.documentIds].map((id) => `drafts.${id}`)},
+    })
+  }
+}
+
+const testSanityClient = createClient({
   projectId: STUDIO_PROJECT_ID,
   dataset: STUDIO_DATASET_NAME,
   token: SANITY_E2E_SESSION_TOKEN,
   useCdn: false,
   apiVersion: '2021-08-31',
 })
 
-export function deleteDocumentsForRun(
-  typeName: string,
-  runId: string,
-): {query: string; params: Record<string, unknown>} {
-  const threshold = new Date(Date.now() - STALE_TEST_THRESHOLD_MS).toISOString()
-  return {
-    query: `*[_type == $typeName && (runId == $runId || _createdAt < "${threshold}")]`,
-    params: {typeName, runId},
-  }
+/* eslint-disable callback-return*/
+export function withDefaultClient(callback: (context: TestContext) => void): void {
+  const context = new TestContext(testSanityClient)
+  callback(context)
+
+  context.teardown()
 }

test/e2e/tests/desk/inspectors.spec.ts

@@ -1,85 +1,90 @@
+/* eslint-disable max-nested-callbacks */
 import {test, expect} from '@playwright/test'
-import {createUniqueDocument, testSanityClient} from '../../helpers'
-
-test.describe.skip('sanity/desk: document inspectors', () => {
-  test('open and close custom inspector', async ({page}) => {
-    await page.goto('/test/content/input-debug;inspectorsTest;inspectors-test')
-
-    // Click to open inspector
-    await page
-      .locator('[data-ui="StatusButton"][aria-label="Custom inspector"]')
-      .click({timeout: 0})
-
-    // Expect button to be selected and inspector to be visible
-    await expect(
-      page.locator('[data-ui="StatusButton"][aria-label="Custom inspector"][data-selected]'),
-    ).toBeVisible()
-    await expect(page.locator('aside[data-ui="DocumentInspectorPanel"]')).toBeVisible()
-    await expect(page.locator('aside[data-ui="DocumentInspectorPanel"] h1')).toContainText(
-      'Custom inspector',
-    )
-
-    // Click to close inspector
-    await page.locator('button[aria-label="Close custom inspector"]').click()
-
-    expect(
-      await page
-        .locator('[data-ui="StatusButton"][aria-label="Custom inspector"]')
-        .evaluate((el) => el.getAttribute('data-selected')),
-    ).toBe(null)
-  })
+import {createUniqueDocument, withDefaultClient} from '../../helpers'
 
-  test('open "Validation" inspector', async ({page}) => {
-    // create published document
-    const uniqueDoc = await createUniqueDocument({_type: 'validationTest'})
-    const id = uniqueDoc._id!
+withDefaultClient((context) => {
+  test.describe.skip('sanity/desk: document inspectors', () => {
+    test('open and close custom inspector', async ({page}) => {
+      await page.goto('/test/content/input-debug;inspectorsTest;inspectors-test')
 
-    // create draft document
-    await createUniqueDocument({
-      _type: 'inspectorsTest',
-      _id: `drafts.${id}`,
-      name: 'Edited by e2e test runner',
+      // Click to open inspector
+      await page
+        .locator('[data-ui="StatusButton"][aria-label="Custom inspector"]')
+        .click({timeout: 0})
+
+      // Expect button to be selected and inspector to be visible
+      await expect(
+        page.locator('[data-ui="StatusButton"][aria-label="Custom inspector"][data-selected]'),
+      ).toBeVisible()
+      await expect(page.locator('aside[data-ui="DocumentInspectorPanel"]')).toBeVisible()
+      await expect(page.locator('aside[data-ui="DocumentInspectorPanel"] h1')).toContainText(
+        'Custom inspector',
+      )
+
+      // Click to close inspector
+      await page.locator('button[aria-label="Close custom inspector"]').click()
+
+      expect(
+        await page
+          .locator('[data-ui="StatusButton"][aria-label="Custom inspector"]')
+          .evaluate((el) => el.getAttribute('data-selected')),
+      ).toBe(null)
     })
 
-    await page.goto(`/test/content/input-debug;validationTest;${id}`)
-
-    // Click to open inspector
-    await page.locator('[data-ui="StatusButton"][aria-label="Validation"]').click({timeout: 0})
-
-    // Expect button to be selected and inspector to be visible
-    await expect(
-      page.locator('[data-ui="StatusButton"][aria-label="Validation"][data-selected]'),
-    ).toBeVisible()
-    await expect(page.locator('aside[data-ui="DocumentInspectorPanel"]')).toBeVisible()
-    await expect(page.locator('aside[data-ui="DocumentInspectorPanel"] h1')).toContainText(
-      'Validation',
-    )
-  })
-
-  test('open "Review changes" inspector', async ({page}) => {
-    // create published document
-    const uniqueDoc = await createUniqueDocument({_type: 'inspectorsTest'})
-    const id = uniqueDoc._id!
-
-    // create draft document
-    await createUniqueDocument({
-      _type: 'inspectorsTest',
-      _id: `drafts.${id}`,
-      name: 'Edited by e2e test runner',
+    test('open "Validation" inspector', async ({page}) => {
+      // create published document
+      const uniqueDoc = await createUniqueDocument(context.client, {_type: 'validationTest'})
+      const id = uniqueDoc._id!
+
+      // create draft document
+      await createUniqueDocument(context.client, {
+        _type: 'inspectorsTest',
+        _id: `drafts.${id}`,
+        name: 'Edited by e2e test runner',
+      })
+
+      await page.goto(`/test/content/input-debug;validationTest;${id}`)
+
+      // Click to open inspector
+      await page.locator('[data-ui="StatusButton"][aria-label="Validation"]').click({timeout: 0})
+
+      // Expect button to be selected and inspector to be visible
+      await expect(
+        page.locator('[data-ui="StatusButton"][aria-label="Validation"][data-selected]'),
+      ).toBeVisible()
+      await expect(page.locator('aside[data-ui="DocumentInspectorPanel"]')).toBeVisible()
+      await expect(page.locator('aside[data-ui="DocumentInspectorPanel"] h1')).toContainText(
+        'Validation',
+      )
     })
 
-    await page.goto(`/test/content/input-debug;inspectorsTest;${id}`)
-
-    // Click to open inspector
-    await page.locator('[data-testid="review-changes-button"]').click()
-
-    // Expect button to be selected and inspector to be visible
-    await expect(page.locator('[data-testid="review-changes-button"][data-selected]')).toBeVisible()
-    await expect(page.locator('aside[data-ui="DocumentInspectorPanel"]')).toBeVisible()
-    await expect(page.locator('aside[data-ui="DocumentInspectorPanel"] h1')).toContainText(
-      'Review changes',
-    )
-
-    await testSanityClient.delete(id)
+    test('open "Review changes" inspector', async ({page}) => {
+      // create published document
+      const uniqueDoc = await createUniqueDocument(context.client, {_type: 'inspectorsTest'})
+      const id = uniqueDoc._id!
+
+      // create draft document
+      await createUniqueDocument(context.client, {
+        _type: 'inspectorsTest',
+        _id: `drafts.${id}`,
+        name: 'Edited by e2e test runner',
+      })
+
+      await page.goto(`/test/content/input-debug;inspectorsTest;${id}`)
+
+      // Click to open inspector
+      await page.locator('[data-testid="review-changes-button"]').click()
+
+      // Expect button to be selected and inspector to be visible
+      await expect(
+        page.locator('[data-testid="review-changes-button"][data-selected]'),
+      ).toBeVisible()
+      await expect(page.locator('aside[data-ui="DocumentInspectorPanel"]')).toBeVisible()
+      await expect(page.locator('aside[data-ui="DocumentInspectorPanel"] h1')).toContainText(
+        'Review changes',
+      )
+
+      await context.client.delete(id)
+    })
   })
 })