test(slider): add suggested changes to the slider test and stories

carbon-design-system · Jun 27, 2024 · acf2770 · acf2770
1 parent e6847e2
commit acf2770
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 27 deletions.
diff --git a/e2e/components/Slider/Slider-test.avt.e2e.js b/e2e/components/Slider/Slider-test.avt.e2e.js
@@ -92,19 +92,45 @@ test.describe('@avt Slider', () => {
     await expect(page).toHaveNoACViolations('Slider-with-layer');
   });
 
-  test('@avt-advanced-states slider with custom format', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Slider',
-      id: 'components-slider--slider-with-custom-value-label',
-      globals: {
-        theme: 'white',
-      },
-    });
+  test.slow(
+    '@avt-advanced-states slider with custom format',
+    async ({ page }) => {
+      await visitStory(page, {
+        component: 'Slider',
+        id: 'components-slider--slider-with-custom-value-label',
+        globals: {
+          theme: 'white',
+        },
+      });
 
-    await page.keyboard.press('Tab');
-    await expect(page.getByRole('slider')).toHaveValue('Medium');
-    await expect(page).toHaveNoACViolations('Slider-with-custom-value-label');
-  });
+      // Test for label changes
+      // Initial value
+      await page.keyboard.press('Tab');
+      await expect(page.getByRole('slider')).toBeVisible();
+      await page.keyboard.press('Tab');
+
+      await expect(page.getByRole('slider')).toHaveAttribute(
+        'aria-valuetext',
+        'Medium'
+      );
+      // Move to high
+      await page.keyboard.press('Shift+ArrowRight');
+      await expect(page.getByRole('slider')).toHaveAttribute(
+        'aria-valuetext',
+        'High'
+      );
+
+      // Move to Low
+      await page.keyboard.press('Shift+ArrowLeft');
+      await page.keyboard.press('Shift+ArrowLeft');
+      await expect(page.getByRole('slider')).toHaveAttribute(
+        'aria-valuetext',
+        'Low'
+      );
+
+      await expect(page).toHaveNoACViolations('Slider-with-custom-value-label');
+    }
+  );
 
   // Prevent timeout
   test.slow('@avt-keyboard-nav', async ({ page }) => {

diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js
@@ -53,27 +53,13 @@ export const SliderWithHiddenInputs = () => (
   />
 );
 
-export const SliderWithHiddenInputsAndFormatLabel = () => (
-  <Slider
-    labelText="Slider label with percentage"
-    value={50}
-    min={0}
-    max={100}
-    stepMultiplier={10}
-    step={1}
-    noValidate
-    hideTextInput
-    formatLabel={(val) => `${val}%`}
-  />
-);
-
 export const SliderWithCustomValueLabel = () => (
   <Slider
     labelText="Slider label with low/medium/high"
     value={50}
     min={0}
     max={100}
-    stepMultiplier={10}
+    stepMultiplier={50}
     step={1}
     noValidate
     hideTextInput