fix: Fix Rect intersection check so that users dont need to provide Virtualizer mocks for tests (#8396)

* Fix Rect intersection check so users dont have to mock scrollHeight in tests

* update docs

* properly turn in virt for our tests

Author: LFDanLu

package.json

@@ -25,7 +25,7 @@
     "build:s2-docs": "NODE_ENV=storybook storybook build -c .storybook-s2 --docs",
     "start:docs": "DOCS_ENV=dev parcel 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
     "build:docs": "DOCS_ENV=staging parcel build 'packages/@react-{spectrum,aria,stately}/*/docs/*.mdx' 'packages/react-aria-components/docs/**/*.mdx' 'packages/@internationalized/*/docs/*.mdx' 'packages/dev/docs/pages/**/*.mdx'",
-    "test": "cross-env STRICT_MODE=1 yarn jest",
+    "test": "cross-env STRICT_MODE=1 VIRT_ON=1 yarn jest",
     "test:lint": "node packages/**/*.test-lint.js",
     "test-loose": "cross-env VIRT_ON=1 yarn jest",
     "test-storybook": "test-storybook --url http://localhost:9003  --browsers chromium --no-cache",

packages/@react-spectrum/color/test/ColorPicker.test.js

@@ -22,6 +22,8 @@ describe('ColorPicker', function () {
 
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
     jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     jest.useFakeTimers();
   });

packages/@react-spectrum/picker/test/TempUtilTest.test.js

@@ -27,6 +27,8 @@ describe('Picker/Select ', function () {
 
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
     jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     simulateDesktop();
   });

packages/@react-spectrum/table/test/TestTableUtils.test.tsx

@@ -37,6 +37,12 @@ describe('Table ', function () {
   let onSortChange = jest.fn();
   let testUtilRealTimer = new User({advanceTimer: (waitTime) => new Promise((resolve) => setTimeout(resolve, waitTime))});
 
+  beforeAll(function () {
+    jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
+  });
+
   let TableExample = (props) => {
     let [sort, setSort] = useState({});
     let setSortDescriptor = (sort) => {

packages/@react-stately/virtualizer/src/Rect.ts

@@ -92,12 +92,12 @@ export class Rect {
    * @param rect - The rectangle to check.
    */
   intersects(rect: Rect): boolean {
-    return this.area > 0 
-        && rect.area > 0 
-        && this.x <= rect.x + rect.width
-        && rect.x <= this.x + this.width
-        && this.y <= rect.y + rect.height
-        && rect.y <= this.y + this.height;
+    let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
+    return (isTestEnv || this.area > 0 && rect.area > 0)
+      && this.x <= rect.x + rect.width
+      && rect.x <= this.x + this.width
+      && this.y <= rect.y + rect.height
+      && rect.y <= this.y + this.height;
   }
 
   /**

packages/dev/docs/pages/react-spectrum/testing.mdx

@@ -253,6 +253,9 @@ afterAll(() => {
 
 ### Virtualized components
 
+**Note:** As of [3.41](https://www.npmjs.com/package/@adobe/react-spectrum/v/3.41.0), Virtualizer behavior is disabled in tests automatically so the below mocks are now unnecessary for most test cases. However, if you are writing tests for interactions
+that depend on item size calculations such as scroll into view, you will need to provide the mocks below as well as enable Virtualizer via the `VIRT_ON=1` process environment variable when running your tests.
+
 Many of our collection components are virtualized out of the box and thus rely on DOM node measurement to know how large a item should be and how many items can be rendered at once.
 To properly render virtualized components in a test environment, you'll have to to mock the `clientHeight` and `clientWidth` getters of the `HTMLElement` prototype.
 `scrollHeight` and `scrollWidth` should also be mocked to set the height and width of each item. See below for an example implementation in Jest.