[Stepper] Handle progress bar of mobile stepper when steps is one (#…

…37079) Signed-off-by: Zeeshan Tamboli <[email protected]> Co-authored-by: seunexplicit <[email protected]> Co-authored-by: Zeeshan Tamboli <[email protected]>
mui · May 30, 2023 · 63d1d42 · 63d1d42
1 parent 282d6e9
commit 63d1d42
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.js b/packages/mui-material/src/MobileStepper/MobileStepper.js
@@ -122,6 +122,15 @@ const MobileStepper = React.forwardRef(function MobileStepper(inProps, ref) {
     variant,
   };
 
+  let value;
+  if (variant === 'progress') {
+    if (steps === 1) {
+      value = 100;
+    } else {
+      value = Math.ceil((activeStep / (steps - 1)) * 100);
+    }
+  }
+
   const classes = useUtilityClasses(ownerState);
 
   return (
@@ -158,7 +167,7 @@ const MobileStepper = React.forwardRef(function MobileStepper(inProps, ref) {
           ownerState={ownerState}
           className={classes.progress}
           variant="determinate"
-          value={Math.ceil((activeStep / (steps - 1)) * 100)}
+          value={value}
           {...LinearProgressProps}
         />
       )}

diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.test.js b/packages/mui-material/src/MobileStepper/MobileStepper.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, describeConformance, screen } from 'test/utils';
+import { createRenderer, describeConformance, fireEvent, screen } from 'test/utils';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Button from '@mui/material/Button';
 import MobileStepper, { mobileStepperClasses as classes } from '@mui/material/MobileStepper';
@@ -111,4 +111,24 @@ describe('<MobileStepper />', () => {
     rerender(<MobileStepper {...defaultProps} variant="progress" steps={3} activeStep={2} />);
     expect(screen.getByRole('progressbar').getAttribute('aria-valuenow')).to.equal('100');
   });
+
+  it('should set value correctly when steps is set to 1', () => {
+    const { getByRole } = render(<MobileStepper {...defaultProps} variant="progress" steps={1} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar.getAttribute('aria-valuenow')).to.equal('100');
+    fireEvent.click(getByRole('button', { name: 'next' }));
+    expect(progressBar.getAttribute('aria-valuenow')).to.equal('100');
+    fireEvent.click(getByRole('button', { name: 'back' }));
+    expect(progressBar.getAttribute('aria-valuenow')).to.equal('100');
+  });
+
+  it('should set value correctly when steps is updated between 1 & 2', () => {
+    const { rerender } = render(<MobileStepper {...defaultProps} variant="progress" steps={1} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar.getAttribute('aria-valuenow')).to.equal('100');
+    rerender(<MobileStepper {...defaultProps} variant="progress" steps={2} />);
+    expect(progressBar.getAttribute('aria-valuenow')).to.equal('0');
+    rerender(<MobileStepper {...defaultProps} variant="progress" steps={1} />);
+    expect(progressBar.getAttribute('aria-valuenow')).to.equal('100');
+  });
 });