How can I test a slider range input in Storybook? - Stack Overflow

admin管理员组

文章数量:1387414

I am new to Storybook and I am trying to create component tests like this (in a “my-component.stories.ts” file):

import {
  …,
  type StoryObj,
} from '@storybook/angular';
import { userEvent, within } from '@storybook/test';

type Story = StoryObj<MyComponent>;

export const MyStory: Story {
  args: {
  …
  },
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement);
    const rangeInput = canvas.getByRole('slider') as HTMLInputElement;
    // What can I do with rangeInput?
  },
};

The component to test includes a slider (<input type="range" />), which I reference with the “rangeInput” variable. How can I make my Storybook test change the value of the slider? For ordinary clicking I use “await userEvent.click(…)”, but here I need to click on a particular location of the slider to move knob of the slider at or near this location, and I cannot figure out how I can do it.

I have also noticed that I can move the knob of the slider with the arrow keys of the keyboard (if it has focus), so I had the idea to try this:

await userEvent.keyboard('[ArrowRight]');

This does not work, even if before this there is a pause during which I click manually on the slider to focus it.

What can I do to make Storybook move the knob of a slider the way I need?

本文标签： How can I test a slider range input in StorybookStack Overflow