Stories rework: VaSlider (#4183)

* VaSlider stories rework

* remove variables

packages/ui/.storybook/interaction-utils/storySelector.ts

@@ -0,0 +1,15 @@
+export function getStoryId(id: string): HTMLElement {
+  return document.querySelector(`[data-testid="${id}"]`) as HTMLElement
+}
+
+export function getStoryIdAll(id: string): NodeListOf<HTMLElement> {
+  return document.querySelectorAll(`[data-testid="${id}"]`)
+}
+
+export function getStorySelector(selector: string): HTMLElement {
+  return document.querySelector(selector) as HTMLElement
+}
+
+export function getStorySelectorAll(selector: string): NodeListOf<HTMLElement> {
+  return document.querySelectorAll(selector)
+}

packages/ui/.storybook/interaction-utils/userEvent.ts

@@ -2,22 +2,24 @@ import { userEvent as event } from '@storybook/testing-library'
 import { sleep } from '../../src/utils/sleep'
 
 export const userEvent = {
-  click: async (element: Element, options?: { delay?: number }) => {
-    const defaultOptions = { delay: 0 }
+  click: async (element: Element, options?: { delay?: number, clientX?: number, clientY?: number, skipPointerEventsCheck?: boolean }) => {
+    const defaultOptions = { delay: 0, skipPointerEventsCheck: false }
     const mergedOptions = { ...defaultOptions, ...options }
+    const { delay, skipPointerEventsCheck } = mergedOptions
 
-    event.click(element, undefined, { skipHover: true })
+    event.click(element, options, { skipHover: true, skipPointerEventsCheck })
     // waiting for DOM changes
-    await sleep(mergedOptions.delay)
+    await sleep(delay)
   },
 
   type: async (element: Element, text: string, options?: { sleep?: boolean, delay?: number }) => {
     const defaultOptions = { sleep: true, delay: 0 }
     const mergedOptions = { ...defaultOptions, ...options }
+    const { sleep: boolSleep, delay } = mergedOptions
 
     event.type(element, text)
     // waiting for DOM changes
-    if(mergedOptions.sleep) await sleep(mergedOptions.delay)
+    if(boolSleep) await sleep(delay)
   },
 
   hover: async (element: Element, options?: { delay?: number }) => {