test: change the proxy offsetLeft to proxy getBoundingClientRect

Author: bbb169

tests/new-range.spec.tsx

@@ -57,16 +57,6 @@ describe('NewPicker.Range', () => {
   beforeAll(() => {
     jest.spyOn(document.documentElement, 'scrollWidth', 'get').mockReturnValue(1000);
 
-    // Viewport size
-    spyElementPrototypes(HTMLElement, {
-      clientWidth: {
-        get: () => 400,
-      },
-      clientHeight: {
-        get: () => 400,
-      },
-    });
-
     // Popup size
     spyElementPrototypes(HTMLDivElement, {
       getBoundingClientRect() {
@@ -110,6 +100,13 @@ describe('NewPicker.Range', () => {
       },
     });
     spyElementPrototypes(HTMLElement, {
+      // Viewport size
+      clientWidth: {
+        get: () => 400,
+      },
+      clientHeight: {
+        get: () => 400,
+      },
       offsetParent: {
         get: () => document.body,
       },
@@ -120,6 +117,17 @@ describe('NewPicker.Range', () => {
           }
         },
       },
+      // offsetParent
+      getBoundingClientRect() {
+        if (this.tagName === 'BODY') {
+          return {
+            x: 0,
+            y: 0,
+            width: 200,
+            height: 200,
+          };
+        }
+      },
     });
   });
 
@@ -1423,14 +1431,28 @@ describe('NewPicker.Range', () => {
     it('the arrow should be set to `inset-inline-start` when the popup is aligned to `bottomLeft`.', async () => {
       render(<DayRangePicker open />);
 
+      const oriGetComputedStyle = window.getComputedStyle;
+      window.getComputedStyle = (ele: HTMLElement) => {
+        const retObj = oriGetComputedStyle(ele);
+
+        retObj.borderRightWidth = '4px';
+        retObj.borderLeftWidth = '2px';
+        return retObj;
+      };
+
       await act(async () => {
         jest.runAllTimers();
 
         await Promise.resolve();
       });
+
       expect(document.querySelector('.rc-picker-range-arrow')).toHaveStyle({
         'inset-inline-start': '0',
       });
+      expect(document.querySelector('.rc-picker-active-bar')).toHaveStyle({
+        'inset-inline-start': '-2px',
+      });
+      window.getComputedStyle = oriGetComputedStyle;
     });
 
     it('the arrow should be set to `inset-inline-end` when the popup is aligned to `bottomRight`.', async () => {
@@ -1450,9 +1472,24 @@ describe('NewPicker.Range', () => {
               x: 300,
             };
           }
+          if (this.className.includes('rc-picker-input')) {
+            return {
+              ...rangeRect,
+              width: 100,
+            };
+          }
         },
       });
 
+      const oriGetComputedStyle = window.getComputedStyle;
+      window.getComputedStyle = (ele: HTMLElement) => {
+        const retObj = oriGetComputedStyle(ele);
+
+        retObj.borderRightWidth = '4px';
+        retObj.borderLeftWidth = '2px';
+        return retObj;
+      };
+
       render(<DayRangePicker open />);
 
       await act(async () => {
@@ -1465,10 +1502,11 @@ describe('NewPicker.Range', () => {
       });
 
       expect(document.querySelector('.rc-picker-active-bar')).toHaveStyle({
-        'inset-inline-end': '100px',
+        'inset-inline-end': '96px',
       });
 
       mock.mockRestore();
+      window.getComputedStyle = oriGetComputedStyle;
     });
   });
 });

tests/range.spec.tsx

@@ -541,7 +541,7 @@ describe('Picker.Range', () => {
     it('pass tabIndex', () => {
       const { container } = render(
         <div>
-          <DayRangePicker tabIndex={-1}/>
+          <DayRangePicker tabIndex={-1} />
         </div>,
       );
 
@@ -705,12 +705,7 @@ describe('Picker.Range', () => {
   });
 
   it('prefix', () => {
-    render(
-      <DayRangePicker
-        prefix={<span className="prefix" />}
-        allowClear
-      />,
-    );
+    render(<DayRangePicker prefix={<span className="prefix" />} allowClear />);
     expect(document.querySelector('.prefix')).toBeInTheDocument();
   });
 
@@ -1771,6 +1766,36 @@ describe('Picker.Range', () => {
           }
         },
       },
+      getBoundingClientRect() {
+        if (this.className.includes('rc-picker-dropdown')) {
+          return {
+            x: 0,
+            y: 0,
+            width: 300,
+          };
+        }
+        if (this.className.includes('rc-picker-range')) {
+          return {
+            x: 0,
+            y: 0,
+            width: 200,
+          };
+        }
+        if (this.className.includes('rc-picker-input')) {
+          return {
+            x: 100,
+            y: 0,
+            width: 100,
+          };
+        }
+        if (this.className.includes('rc-picker')) {
+          return {
+            x: 0,
+            y: 0,
+            width: 200,
+          };
+        }
+      },
     });
     const { container } = render(
       <DayRangePicker