Add a test

mui · Nov 25, 2024 · ecd4102 · ecd4102
1 parent 5a25a2d
commit ecd4102
Showing 1 changed file with 150 additions and 0 deletions.
diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
@@ -254,6 +254,50 @@ describe('<Slider />', () => {
       expect(handleChange.args[0][1]).to.equal(80);
       expect(handleChange.args[1][1]).to.equal(78);
     });
+
+    describe('vertical orientation', () => {
+      describe('keyboard interactions', () => {
+        it('ArrowLeft and ArrowDown decrements the value', () => {
+          const { getByRole } = render(<Slider orientation="vertical" defaultValue={50} />);
+
+          const slider = getByRole('slider');
+
+          expect(slider).to.have.attribute('aria-valuenow', '50');
+
+          act(() => {
+            slider.focus();
+          });
+
+          fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+          expect(slider).to.have.attribute('aria-valuenow', '49');
+
+          fireEvent.keyDown(slider, { key: 'ArrowDown' });
+
+          expect(slider).to.have.attribute('aria-valuenow', '48');
+        });
+
+        it('ArrowRight and ArrowUp increments the value', () => {
+          const { getByRole } = render(<Slider orientation="vertical" defaultValue={50} />);
+
+          const slider = getByRole('slider');
+
+          expect(slider).to.have.attribute('aria-valuenow', '50');
+
+          act(() => {
+            slider.focus();
+          });
+
+          fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+          expect(slider).to.have.attribute('aria-valuenow', '51');
+
+          fireEvent.keyDown(slider, { key: 'ArrowUp' });
+
+          expect(slider).to.have.attribute('aria-valuenow', '52');
+        });
+      });
+    });
   });
 
   describe('range', () => {
@@ -986,6 +1030,112 @@ describe('<Slider />', () => {
       expect(handleChange.args[0][1]).to.equal(80);
       expect(handleChange.args[1][1]).to.equal(78);
     });
+
+    describe('keyboard interactions', () => {
+      it('ArrowRight and ArrowDown decrements the value', () => {
+        const { getByRole } = render(
+          <ThemeProvider
+            theme={createTheme({
+              direction: 'rtl',
+            })}
+          >
+            <Slider defaultValue={50} />
+          </ThemeProvider>,
+        );
+
+        const slider = getByRole('slider');
+
+        expect(slider).to.have.attribute('aria-valuenow', '50');
+
+        act(() => {
+          slider.focus();
+        });
+
+        fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+        expect(slider).to.have.attribute('aria-valuenow', '49');
+
+        fireEvent.keyDown(slider, { key: 'ArrowDown' });
+
+        expect(slider).to.have.attribute('aria-valuenow', '48');
+      });
+
+      it('ArrowLeft and ArrowUp increments the value', () => {
+        const { getByRole } = render(
+          <ThemeProvider
+            theme={createTheme({
+              direction: 'rtl',
+            })}
+          >
+            <Slider defaultValue={50} />
+          </ThemeProvider>,
+        );
+
+        const slider = getByRole('slider');
+
+        expect(slider).to.have.attribute('aria-valuenow', '50');
+
+        act(() => {
+          slider.focus();
+        });
+
+        fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+        expect(slider).to.have.attribute('aria-valuenow', '51');
+
+        fireEvent.keyDown(slider, { key: 'ArrowUp' });
+
+        expect(slider).to.have.attribute('aria-valuenow', '52');
+      });
+
+      it('End key sets the value to max', () => {
+        const { getByRole } = render(
+          <ThemeProvider
+            theme={createTheme({
+              direction: 'rtl',
+            })}
+          >
+            <Slider defaultValue={50} max={99} />
+          </ThemeProvider>,
+        );
+
+        const slider = getByRole('slider');
+
+        expect(slider).to.have.attribute('aria-valuenow', '50');
+
+        act(() => {
+          slider.focus();
+        });
+
+        fireEvent.keyDown(slider, { key: 'End' });
+
+        expect(slider).to.have.attribute('aria-valuenow', '99');
+      });
+
+      it('Home key sets the value to min', () => {
+        const { getByRole } = render(
+          <ThemeProvider
+            theme={createTheme({
+              direction: 'rtl',
+            })}
+          >
+            <Slider defaultValue={50} min={1} />
+          </ThemeProvider>,
+        );
+
+        const slider = getByRole('slider');
+
+        expect(slider).to.have.attribute('aria-valuenow', '50');
+
+        act(() => {
+          slider.focus();
+        });
+
+        fireEvent.keyDown(slider, { key: 'Home' });
+
+        expect(slider).to.have.attribute('aria-valuenow', '1');
+      });
+    });
   });
 
   describe('warnings', () => {