wix-style-react/src/Slider/Slider.protractor.driver.js

wix-style-react

import { protractorUniTestkitFactoryCreator } from 'wix-ui-test-utils/protractor';
import { popoverDriverFactory } from '../Popover/Popover.uni.driver';

import { dataHooks } from './constants';

export default (component, _body, { dataHook }) => {
  const getSliderTooltipDataHook = index => {
    return dataHook
      ? `${dataHook}-${dataHooks.sliderTooltip}-${index}`
      : `${dataHooks.sliderTooltip}-${index}`;
  };

  const sliderHandle = index =>
    component.$(`[data-hook="${getSliderTooltipDataHook(index)}"]`);

  let currentHandleIndex = 0;

  const actions = {
    element: () => component,
    exists: () => !!component,

    handleTooltipValue: async ({ index }) => {
      const popoverTestkit = protractorUniTestkitFactoryCreator(
        popoverDriverFactory,
      )({
        dataHook: getSliderTooltipDataHook(index),
      });

      await popoverTestkit.mouseEnter();
      const text = parseInt(
        await (await popoverTestkit.getContentElement()).getText(),
      );

      await actions.unHoverHandle({ index });

      return text;
    },

    isHandleTooltipDisplayed: async () => {
      const popoverTestkit = protractorUniTestkitFactoryCreator(
        popoverDriverFactory,
      )({
        dataHook: getSliderTooltipDataHook(currentHandleIndex),
      });

      return popoverTestkit.isContentElementExists();
    },

    hoverHandle: async ({ index }) => {
      currentHandleIndex = index;
      await actions.unHoverHandle({ index });
      const handle = sliderHandle(index);
      await browser.actions().mouseMove(handle).perform();
    },

    dragHandle: async ({ index, offset }) => {
      const ONE_DOT_MOVEMENT = 64;
      const handle = sliderHandle(index);
      await browser
        .actions()
        .dragAndDrop(handle, { x: offset * ONE_DOT_MOVEMENT, y: 0 })
        .perform();
    },
    unHoverHandle: async ({ index }) => {
      currentHandleIndex = 0;
      const handle = sliderHandle(index);

      await browser
        .actions()
        .mouseMove(handle)
        .mouseMove({ x: -100, y: -100 })
        .perform();
    },
  };

  return actions;
};