test: add coverage for aria-label on handle container element

nerdyman · Feb 8, 2024 · 7db4b7c · 7db4b7c
1 parent 54a715c
commit 7db4b7c
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/docs/storybook/content/stories/99-tests/default.test.stories.tsx b/docs/storybook/content/stories/99-tests/default.test.stories.tsx
@@ -16,14 +16,20 @@ Default.args = getArgs();
 
 Default.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const sliderRoot = canvas.queryByTestId(Default.args?.['data-testid']) as Element;
+  const sliderRoot = (await canvas.findByRole('slider')) as HTMLDivElement;
 
   // Should have elements on mount.
-  await new Promise((resolve) => setTimeout(resolve, 500));
-  await waitFor(() => expect(sliderRoot).toBeInTheDocument());
   await waitFor(() => expect(canvas.getByAltText('one')).toBeInTheDocument());
   await waitFor(() => expect(canvas.getByAltText('two')).toBeInTheDocument());
 
+  // Should have a11y attributes on mount.
+  await waitFor(() => expect(sliderRoot).toHaveAttribute('aria-valuemin', '0'));
+  await waitFor(() => expect(sliderRoot).toHaveAttribute('aria-valuemax', '100'));
+  await waitFor(() => expect(sliderRoot).toHaveAttribute('aria-valuenow', '50'));
+  await waitFor(() =>
+    expect(canvas.queryByLabelText('Drag to move or focus and use arrow keys')).toBeInTheDocument(),
+  );
+
   // Should have initial position on mount.
   await waitFor(() => expect(Default.args?.onPositionChange).toHaveBeenLastCalledWith(50));
 };