fix: resolving issues with virtual lists having zero height in releas…

…e summary
sanity-io · Dec 20, 2024 · 81bc1d9 · 81bc1d9
1 parent 5a58f2d
commit 81bc1d9
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 76 deletions.
diff --git a/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseSummary.test.tsx b/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseSummary.test.tsx
@@ -1,8 +1,10 @@
 import {act, fireEvent, render, screen, within} from '@testing-library/react'
+import React, {type PropsWithChildren, useState} from 'react'
 import {route, RouterProvider} from 'sanity/router'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {getByDataUi} from '../../../../../../test/setup/customQueries'
+import {setupVirtualisedEnvironment} from '../../../../../../test/testUtils/setupVirtualisedEnvironment'
 import {createTestProvider} from '../../../../../../test/testUtils/TestProvider'
 import {DefaultPreview} from '../../../../components/previews/general/DefaultPreview'
 import {
@@ -78,6 +80,16 @@ const releaseDocuments: DocumentInRelease[] = [
   },
 ]
 
+const ScrollContainer: React.FC<PropsWithChildren> = ({children}) => {
+  const [ref, setRef] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{height: '400px'}} ref={setRef}>
+      {React.cloneElement(children as React.ReactElement, {scrollContainerRef: {current: ref}})}
+    </div>
+  )
+}
+
 const renderTest = async (props: Partial<ReleaseSummaryProps>) => {
   const wrapper = await createTestProvider({
     resources: [releasesUsEnglishLocaleBundle],
@@ -91,88 +103,90 @@ const renderTest = async (props: Partial<ReleaseSummaryProps>) => {
       onNavigate={vi.fn()}
       router={route.create('/', [route.create('/:releaseId'), route.intents('/intents')])}
     >
-      <ReleaseSummary
-        scrollContainerRef={{current: null}}
-        documents={releaseDocuments}
-        documentsHistory={{
-          '123': {
-            createdBy: 'created-author-id-1',
-            lastEditedBy: 'edited-author-id-1',
-            editors: ['edited-author-id-1'],
-            history: [
-              {
-                id: '123',
-                timestamp: '2024-11-04T07:53:25Z',
-                author: 'pJ61yWhkD',
-                documentIDs: ['versions.abc.123'],
-                effects: {
-                  'versions.abc.123': {
-                    apply: [
-                      0,
-                      {
-                        _createdAt: '2024-11-04T07:53:25Z',
-                        _id: 'versions.abc.123',
-                        _type: 'book',
-                        _updatedAt: '2024-11-04T07:53:25Z',
-                        address: {
-                          city: 'Stockholm',
-                          country: 'Sweden',
-                        },
-                        publishedAt: '2020-02-03T21:36:34.980Z',
-                        title: 'sdfsadfadsf sdf',
-                        translations: {
-                          no: '0',
-                          se: '0',
+      <ScrollContainer>
+        <ReleaseSummary
+          scrollContainerRef={{current: null}}
+          documents={releaseDocuments}
+          documentsHistory={{
+            '123': {
+              createdBy: 'created-author-id-1',
+              lastEditedBy: 'edited-author-id-1',
+              editors: ['edited-author-id-1'],
+              history: [
+                {
+                  id: '123',
+                  timestamp: '2024-11-04T07:53:25Z',
+                  author: 'pJ61yWhkD',
+                  documentIDs: ['versions.abc.123'],
+                  effects: {
+                    'versions.abc.123': {
+                      apply: [
+                        0,
+                        {
+                          _createdAt: '2024-11-04T07:53:25Z',
+                          _id: 'versions.abc.123',
+                          _type: 'book',
+                          _updatedAt: '2024-11-04T07:53:25Z',
+                          address: {
+                            city: 'Stockholm',
+                            country: 'Sweden',
+                          },
+                          publishedAt: '2020-02-03T21:36:34.980Z',
+                          title: 'sdfsadfadsf sdf',
+                          translations: {
+                            no: '0',
+                            se: '0',
+                          },
                         },
-                      },
-                    ],
-                    revert: [0, null],
+                      ],
+                      revert: [0, null],
+                    },
                   },
                 },
-              },
-            ],
-          },
-          '456': {
-            createdBy: 'created-author-id-2',
-            lastEditedBy: 'edited-author-id-2',
-            editors: ['edited-author-id-1', 'edited-author-id-2'],
-            history: [
-              {
-                id: '456',
-                timestamp: '2024-11-04T07:53:25Z',
-                author: 'pJ61yWhkD',
-                documentIDs: ['versions.abc.456'],
-                effects: {
-                  'versions.abc.456': {
-                    apply: [
-                      0,
-                      {
-                        _createdAt: '2024-11-04T07:53:25Z',
-                        _id: 'versions.abc.456',
-                        _type: 'book',
-                        _updatedAt: '2024-11-04T07:53:25Z',
-                        address: {
-                          city: 'Stockholm',
-                          country: 'Sweden',
-                        },
-                        publishedAt: '2020-02-03T21:36:34.980Z',
-                        title: 'sdfsadfadsf sdf',
-                        translations: {
-                          no: '0',
-                          se: '0',
+              ],
+            },
+            '456': {
+              createdBy: 'created-author-id-2',
+              lastEditedBy: 'edited-author-id-2',
+              editors: ['edited-author-id-1', 'edited-author-id-2'],
+              history: [
+                {
+                  id: '456',
+                  timestamp: '2024-11-04T07:53:25Z',
+                  author: 'pJ61yWhkD',
+                  documentIDs: ['versions.abc.456'],
+                  effects: {
+                    'versions.abc.456': {
+                      apply: [
+                        0,
+                        {
+                          _createdAt: '2024-11-04T07:53:25Z',
+                          _id: 'versions.abc.456',
+                          _type: 'book',
+                          _updatedAt: '2024-11-04T07:53:25Z',
+                          address: {
+                            city: 'Stockholm',
+                            country: 'Sweden',
+                          },
+                          publishedAt: '2020-02-03T21:36:34.980Z',
+                          title: 'sdfsadfadsf sdf',
+                          translations: {
+                            no: '0',
+                            se: '0',
+                          },
                         },
-                      },
-                    ],
-                    revert: [0, null],
+                      ],
+                      revert: [0, null],
+                    },
                   },
                 },
-              },
-            ],
-          },
-        }}
-        release={activeASAPRelease}
-        {...props}
-      />
+              ],
+            },
+          }}
+          release={activeASAPRelease}
+          {...props}
+        />
+      </ScrollContainer>
     </RouterProvider>,
     {
       wrapper,
@@ -181,6 +195,8 @@ const renderTest = async (props: Partial<ReleaseSummaryProps>) => {
 }
 
 describe('ReleaseSummary', () => {
+  setupVirtualisedEnvironment()
+
   describe('for an active release', () => {
     beforeEach(async () => {
       await renderTest({})

diff --git a/packages/sanity/test/testUtils/setupVirtualisedEnvironment.ts b/packages/sanity/test/testUtils/setupVirtualisedEnvironment.ts
@@ -0,0 +1,38 @@
+import {afterEach, beforeEach, vi} from 'vitest'
+
+export const setupVirtualisedEnvironment = (
+  dataTestId?: string,
+  rectWidth: number = 350,
+  rectHeight: number = 800,
+) => {
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect
+
+  const getDOMRect = (width: number, height: number) => ({
+    width,
+    height,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => {},
+  })
+
+  beforeEach(() => {
+    // Virtual list will return an empty list of items unless we have some size,
+    // so we need to mock getBoundingClientRect to return a size for the list.
+    // Not pretty, but it's what they recommend for testing outside of browsers:
+    // https://github.com/TanStack/virtual/issues/641
+    Element.prototype.getBoundingClientRect = vi.fn(function (this: Element) {
+      if (!dataTestId || this.getAttribute('data-testid') === dataTestId) {
+        return getDOMRect(rectWidth, rectHeight)
+      }
+      return getDOMRect(0, 0)
+    })
+  })
+
+  afterEach(() => {
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect
+  })
+}