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 index 9a877e1750b..8a358c4362e 100644 --- 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 = ({children}) => { + const [ref, setRef] = useState(null) + + return ( +
+ {React.cloneElement(children as React.ReactElement, {scrollContainerRef: {current: ref}})} +
+ ) +} + const renderTest = async (props: Partial) => { const wrapper = await createTestProvider({ resources: [releasesUsEnglishLocaleBundle], @@ -91,88 +103,90 @@ const renderTest = async (props: Partial) => { onNavigate={vi.fn()} router={route.create('/', [route.create('/:releaseId'), route.intents('/intents')])} > - + + ], + }, + }} + release={activeASAPRelease} + {...props} + /> + , { wrapper, @@ -181,6 +195,8 @@ const renderTest = async (props: Partial) => { } 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 new file mode 100644 index 00000000000..5648d60df07 --- /dev/null +++ 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 + }) +}