remove unnecessary tests and keep updateScrollButtons impl

SaidMarar · Jul 19, 2023 · 762c6db · 762c6db
1 parent 5d65ce8
commit 762c6db
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 60 deletions.
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
@@ -559,6 +559,29 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
  }
  });
 
+ const updateScrollButtonState = useEventCallback(() => {
+ if (scrollable && scrollButtons !== false) {
+ const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = tabsRef.current;
+ let showStartScroll;
+ let showEndScroll;
+
+ if (vertical) {
+ showStartScroll = scrollTop > 1;
+ showEndScroll = scrollTop < scrollHeight - clientHeight - 1;
+ } else {
+ const scrollLeft = getNormalizedScrollLeft(tabsRef.current, theme.direction);
+ // use 1 for the potential rounding error with browser zooms.
+ showStartScroll = isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
+ showEndScroll = !isRtl ? scrollLeft < scrollWidth - clientWidth - 1 : scrollLeft > 1;
+ }
+
+ if (showStartScroll !== displayStartScroll || showEndScroll !== displayEndScroll) {
+ setDisplayStartScroll(showStartScroll);
+ setDisplayEndScroll(showEndScroll);
+ }
+ }
+ });
+
  React.useEffect(() => {
  const handleResize = debounce(() => {
  // If the Tabs component is replaced by Suspense with a fallback, the last
@@ -663,9 +686,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
  action,
  () => ({
  updateIndicator: updateIndicatorState,
- updateScrollButtons: () => {},
+ updateScrollButtons: updateScrollButtonState,
  }),
- [updateIndicatorState],
+ [updateIndicatorState, updateScrollButtonState],
  );
 
  const indicator = (

diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -509,28 +509,6 @@ describe('<Tabs />', () => {
  expect(container.querySelectorAll(selector)).to.have.lengthOf(1);
  });
 
- it('should response to scroll events', async function test() {
- if (isJSDOM) {
- this.skip();
- }
- const { container, getByRole } = render(tabs);
- const tablistContainer = getByRole('tablist').parentElement;
-
- tablistContainer.scrollLeft = 10;
- await waitFor(() => {
- expect(hasLeftScrollButton(container)).to.equal(true);
- expect(hasRightScrollButton(container)).to.equal(true);
- });
-
- tablistContainer.scrollLeft = 0;
- fireEvent.scroll(container.querySelector(`.${classes.scroller}.${classes.scrollableX}`));
-
- await waitFor(() => {
- expect(hasLeftScrollButton(container)).to.equal(false);
- expect(hasRightScrollButton(container)).to.equal(true);
- });
- });
-
  it('should get a scrollbar size listener', () => {
  const { setProps, getByRole } = render(
  <Tabs value={0}>
@@ -600,39 +578,8 @@ describe('<Tabs />', () => {
  expect(container.querySelectorAll(`.${classes.scrollButtonsHideMobile}`)).to.have.lengthOf(0);
  });
 
- it('should handle window resize event', async function test() {
- if (isJSDOM) {
- this.skip();
- }
- const { container, getByRole } = render(
- <Tabs value={0} variant="scrollable" scrollButtons style={{ width: 200 }}>
- <Tab />
- <Tab />
- <Tab />
- </Tabs>,
- );
-
- const tablistContainer = getByRole('tablist').parentElement;
-
- tablistContainer.scrollLeft = 10;
- await waitFor(() => {
- expect(hasLeftScrollButton(container)).to.equal(true);
- expect(hasRightScrollButton(container)).to.equal(true);
- });
- tablistContainer.scrollLeft = 0;
-
- act(() => {
- window.dispatchEvent(new window.Event('resize', {}));
- });
-
- await waitFor(() => {
- expect(hasLeftScrollButton(container)).to.equal(false);
- expect(hasRightScrollButton(container)).to.equal(true);
- });
- });
-
  describe('scroll button visibility states', () => {
- it('should set neither left nor right scroll button state', async function test() {
+ it('should set neither left nor right scroll button state', function test() {
  if (isJSDOM) {
  this.skip();
  }
@@ -643,10 +590,8 @@ describe('<Tabs />', () => {
  </Tabs>,
  );
 
- await waitFor(() => {
- expect(hasLeftScrollButton(container)).to.equal(false);
- expect(hasRightScrollButton(container)).to.equal(false);
- });
+ expect(hasLeftScrollButton(container)).to.equal(false);
+ expect(hasRightScrollButton(container)).to.equal(false);
  });
 
  it('should set only left scroll button state', async function test() {