From ecd41028fa817b5fcbe6dfee69af0b4ccf971a73 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Mon, 25 Nov 2024 22:02:34 +0800
Subject: [PATCH] Add a test

---
 .../mui-material/src/Slider/Slider.test.js    | 150 ++++++++++++++++++
 1 file changed, 150 insertions(+)

diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
index 8b8d868434dbbd..711c6c337fb736 100644
--- 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', () => {