test(e2e): create e2e tests for recent source changes

Author: cngonzalez

.env.example

@@ -19,10 +19,19 @@ SDK_E2E_DATASET_0=production
 SDK_E2E_DATASET_1=testing
 
 
+# The media library ID provisioned for e2e testing
+SDK_E2E_MEDIA_LIBRARY_ID=mlyobHbSHBsj
+
+
 # This is a write token that allows us to use the client to create / destroy / edit resources
 # (which Playwright will then load in the kitchensink app to test against)
 # You can generate your own token by heading over to the tokens section of
 # https://www.sanity.work/manage/, or
 # by using your CLI user token (`SANITY_INTERNAL_ENV=staging sanity debug --secrets`)
 SDK_E2E_SESSION_TOKEN=
 
+# This is a write token that allows us to use the media library client to create / destroy / edit resources
+# This is generated on the org admin page. If you are a user with media library permissions, you can just
+# use the same user session token you used above.
+SDK_E2E_MEDIA_LIBRARY_TOKEN=
+

.github/workflows/e2e.yml

@@ -70,6 +70,8 @@ jobs:
       SDK_E2E_ORGANIZATION_ID: ${{ secrets.SDK_E2E_ORGANIZATION_ID }}
       SDK_E2E_DATASET_0: ${{ github.event_name == 'pull_request' && format('pr-{0}-{1}-{2}', github.event.number, matrix.browser, github.run_id) || format('main-{0}-{1}', matrix.browser, github.run_id) }}
       SDK_E2E_DATASET_1: ${{ github.event_name == 'pull_request' && format('pr-{0}-{1}-secondary-{2}', github.event.number, matrix.browser, github.run_id) || format('main-{0}-secondary-{1}', matrix.browser, github.run_id) }}
+      SDK_E2E_MEDIA_LIBRARY_ID: ${{ secrets.SDK_E2E_MEDIA_LIBRARY_ID }}
+      SDK_E2E_MEDIA_LIBRARY_TOKEN: ${{ secrets.SDK_E2E_MEDIA_LIBRARY_TOKEN }}
       SDK_E2E_SESSION_TOKEN: ${{ secrets.SDK_E2E_SESSION_TOKEN }}
       SDK_E2E_USER_ID: ${{ secrets.SDK_E2E_USER_ID }}
       SDK_E2E_USER_PASSWORD: ${{ secrets.SDK_E2E_USER_PASSWORD }}

apps/kitchensink-react/e2e/media-library.spec.ts

@@ -0,0 +1,83 @@
+import {expect, test} from '@repo/e2e'
+
+test.describe('Media Library', () => {
+  test('can patch media library asset and see updates in useQuery and projection', async ({
+    page,
+    getPageContext,
+    getMediaLibraryClient,
+  }) => {
+    // Navigate to the media library route
+    await page.goto('./media-library')
+    const pageContext = await getPageContext(page)
+
+    // Wait for the query results to be visible
+    const queryResultsElement = pageContext.getByTestId('query-results')
+    await queryResultsElement.waitFor({timeout: 15000})
+
+    const projectionResultsElement = pageContext.getByTestId('projection-results')
+    await projectionResultsElement.waitFor({timeout: 15000})
+
+    // Extract the JSON text from the query results
+    const queryJsonText = await queryResultsElement.textContent()
+    expect(queryJsonText).toBeTruthy()
+
+    // Parse the JSON to get the query results
+    const queryResults = JSON.parse(queryJsonText!)
+
+    // Get the first asset's _id
+    const firstAsset = queryResults[0]
+    expect(firstAsset).toHaveProperty('_id')
+    const assetId = firstAsset._id
+    expect(assetId).toBeTruthy()
+
+    // Verify the projection results are showing for the same asset
+    const projectionJsonText = await projectionResultsElement.textContent()
+    expect(projectionJsonText).toBeTruthy()
+    const projectionData = JSON.parse(projectionJsonText!)
+    expect(projectionData).toBeTruthy()
+
+    // Create a media library client
+    const mediaLibraryClient = getMediaLibraryClient()
+
+    // Create a unique hash key for this test run (for parallel test execution)
+    const testHash = `test_hash_${Date.now()}_${Math.random().toString(36).substring(7)}`
+    const testValue = 'test-value'
+
+    // Patch the asset with an arbitrary value using a unique hash key, so we can check real-time updates in useQuery and projection.
+    await mediaLibraryClient
+      .patch(assetId)
+      .set({arbitraryValues: {[testHash]: testValue}})
+      .commit()
+
+    // Wait for useQuery to update with the new value
+    await expect(async () => {
+      const updatedQueryText = await queryResultsElement.textContent()
+      expect(updatedQueryText).toBeTruthy()
+
+      const updatedQueryResults = JSON.parse(updatedQueryText!)
+      const updatedAsset = updatedQueryResults.find((asset: {_id: string}) => asset._id === assetId)
+
+      expect(updatedAsset).toBeTruthy()
+      expect(updatedAsset.arbitraryValues).toBeTruthy()
+      expect(updatedAsset.arbitraryValues[testHash]).toBe(testValue)
+    }).toPass({timeout: 10000})
+
+    // Wait for projection to update with the new value
+    await expect(async () => {
+      const updatedProjectionText = await projectionResultsElement.textContent()
+      expect(updatedProjectionText).toBeTruthy()
+
+      const updatedProjectionData = JSON.parse(updatedProjectionText!)
+
+      expect(updatedProjectionData).toBeTruthy()
+      expect(updatedProjectionData.arbitraryValues).toBeTruthy()
+      expect(updatedProjectionData.arbitraryValues[testHash]).toBe(testValue)
+    }).toPass({timeout: 10000})
+
+    // Cleanup: Remove the test hash from arbitrary values
+    await mediaLibraryClient
+      .patch(assetId)
+      .unset([`arbitraryValues.${testHash}`])
+      .commit()
+  })
+})

apps/kitchensink-react/e2e/releases.spec.ts

@@ -0,0 +1,151 @@
+import {expect, test} from '@repo/e2e'
+import {getVersionId} from 'sanity'
+
+test.describe('Releases Route', () => {
+  test('can create base documents and release versions', async ({
+    page,
+    getClient,
+    createDocuments,
+    getPageContext,
+  }) => {
+    const client = getClient()
+
+    // First create the bestFriend author document so we can test references across docs
+    const {
+      documentIds: [bestFriendId],
+    } = await createDocuments(
+      [
+        {
+          _type: 'author',
+          name: 'Base Best Friend',
+        },
+      ],
+      {asDraft: false},
+    )
+
+    // Create the main test document
+    const {
+      documentIds: [testDocId],
+    } = await createDocuments(
+      [
+        {
+          _type: 'author',
+          name: 'Base Test Author',
+          bestFriend: {_type: 'reference', _ref: bestFriendId, _weak: true},
+        },
+      ],
+      {asDraft: false},
+    )
+
+    await page.goto('./releases')
+    const pageContext = await getPageContext(page)
+    const heading = pageContext.getByText('Releases', {exact: true}).first()
+    await expect(heading).toBeVisible({timeout: 30000})
+
+    // Create the release
+    const {releaseId} = await client.releases.create({
+      metadata: {
+        title: 'Test Release',
+        releaseType: 'scheduled',
+      },
+    })
+
+    // Create release version documents
+    await createDocuments(
+      [
+        {
+          _id: getVersionId(bestFriendId, releaseId),
+          _type: 'author',
+          name: 'Release Best Friend',
+        },
+        {
+          _id: getVersionId(testDocId, releaseId),
+          _type: 'author',
+          name: 'Release Test Author',
+          bestFriend: {_type: 'reference', _ref: bestFriendId, _weak: true},
+        },
+      ],
+      {asDraft: false},
+    )
+
+    // Verify the release document exists and is being listened to live
+    const autocompleteInput = pageContext.locator('input[placeholder="Type to find release …"]')
+    await expect(autocompleteInput).toBeVisible()
+
+    await autocompleteInput.click()
+    await autocompleteInput.fill('Test')
+
+    const releaseIdText = pageContext.getByText(`Release ID: ${releaseId}`)
+    await expect(releaseIdText).toBeVisible({timeout: 10000})
+
+    const releaseButton = pageContext.getByRole('button', {
+      name: new RegExp(`Test Release.*Release ID: ${releaseId}`),
+    })
+    await expect(releaseButton).toBeVisible()
+    await releaseButton.click()
+
+    await expect(autocompleteInput).toHaveValue('Test Release', {timeout: 10000})
+
+    const selectedPerspectiveHeading = pageContext.getByText('Selected Perspective')
+    await expect(selectedPerspectiveHeading).toBeVisible()
+
+    const releaseIdInPerspective = pageContext.getByText(releaseId).first()
+    await expect(releaseIdInPerspective).toBeVisible({timeout: 10000})
+
+    // Enter the test document ID in the "View Document across different perspectives" input
+    const documentPerspectiveHeading = pageContext.getByText(
+      'View Document across different perspectives',
+    )
+    await expect(documentPerspectiveHeading).toBeVisible()
+
+    const documentIdInput = pageContext.locator('input[placeholder="Enter document ID"]')
+    await expect(documentIdInput).toBeVisible()
+    await documentIdInput.fill(testDocId)
+    await page.waitForTimeout(2000)
+
+    const projectionCard = pageContext.getByTestId('document-projection-card')
+    await projectionCard.scrollIntoViewIfNeeded()
+
+    // Verify the projection also shows the release version
+    await expect(async () => {
+      const projectionContent = await projectionCard.textContent()
+      expect(projectionContent).toContain('"bestFriend": "Release Best Friend"')
+    }).toPass({timeout: 15000})
+
+    await client.action([
+      {
+        actionType: 'sanity.action.document.edit',
+        draftId: getVersionId(bestFriendId, releaseId),
+        publishedId: bestFriendId,
+        patch: {
+          set: {
+            name: 'Updated Release Best Friend',
+          },
+        },
+      },
+    ])
+
+    await expect(async () => {
+      const projectionContent = await projectionCard.textContent()
+      expect(projectionContent).toContain('"bestFriend": "Updated Release Best Friend"')
+    }).toPass({timeout: 20000, intervals: [2000, 3000, 5000]})
+
+    await client.action([
+      {
+        actionType: 'sanity.action.document.edit',
+        draftId: getVersionId(testDocId, releaseId),
+        publishedId: testDocId,
+        patch: {
+          set: {
+            name: 'Updated Release Test Author',
+          },
+        },
+      },
+    ])
+
+    await expect(async () => {
+      const projectionContent = await projectionCard.textContent()
+      expect(projectionContent).toContain('"name": "Updated Release Test Author"')
+    }).toPass({timeout: 20000, intervals: [2000, 3000, 5000]})
+  })
+})