test: add test for added tabs scroll behavior

mui · May 15, 2022 · 7afd991 · 7afd991
1 parent c12b47e
commit 7afd991
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -692,6 +692,28 @@ describe('<Tabs />', () => {
       clock.tick(1000);
       expect(tablistContainer.scrollLeft).equal(100);
     });
+
+    it('should scroll by width of partially visible item', () => {
+      const { container, getByRole, getAllByRole } = render(
+        <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
+          <Tab style={{ width: 220, minWidth: 'auto' }} />
+          <Tab style={{ width: 220, minWidth: 'auto' }} />
+          <Tab style={{ width: 220, minWidth: 'auto' }} />
+        </Tabs>,
+      );
+      const tablistContainer = getByRole('tablist').parentElement;
+      const tabs = getAllByRole('tab');
+      Object.defineProperty(tablistContainer, 'clientWidth', { value: 200 });
+      Object.defineProperty(tabs[0], 'clientWidth', { value: 220 });
+      Object.defineProperty(tabs[1], 'clientWidth', { value: 220 });
+      Object.defineProperty(tabs[2], 'clientWidth', { value: 220 });
+      Object.defineProperty(tablistContainer, 'scrollWidth', { value: 3 * 220 });
+
+      tablistContainer.scrollLeft = 0;
+      fireEvent.click(findScrollButton(container, 'right'));
+      clock.tick(1000);
+      expect(tablistContainer.scrollLeft).equal(220);
+    });
   });
 
   describe('scroll into view behavior', () => {