wix-style-react/src/ImageViewer/ImageViewer.uni.driver.js

wix-style-react

import { baseUniDriverFactory } from 'wix-ui-test-utils/base-driver';
import { iconButtonDriverFactory } from '../IconButton/IconButton.uni.driver';
import { addItemUniDriverFactory } from '../AddItem/AddItem.uni.driver';
import { tooltipDriverFactory } from '../Tooltip/Tooltip.uni.driver';
import { dataAttributes, dataHooks } from './constants';
import { statusIndicatorDriverFactory } from '../StatusIndicator/StatusIndicator.uni.driver';
import { PopoverMenuDriver } from '../PopoverMenu/PopoverMenu.uni.driver';

export const imageViewerUniDriverFactory = (base, body) => {
  const find = dataHook => base.$(`[data-hook="${dataHook}"]`);
  const hasDataAttribute = async (dataAttr, el) =>
    (await el.attr(dataAttr)) === 'true';

  const hoverElement = () => base.hover();
  const showButtons = hoverElement;
  const isImagesContainerElementVisible = () =>
    hasDataAttribute(
      dataAttributes.containerVisible,
      find(dataHooks.imagesContainer),
    );
  const isImageElementVisible = imgElement =>
    hasDataAttribute(dataAttributes.imageVisible, imgElement);

  const addItemTestkit = addItemUniDriverFactory(find(dataHooks.addItem), body);
  const tooltipTestkit = dataHook => tooltipDriverFactory(find(dataHook), body);
  const iconButtonTestkit = dataHook => iconButtonDriverFactory(find(dataHook));
  const popoverMenuDriver = dataHook => PopoverMenuDriver(find(dataHook), body);

  const removeIconButton = iconButtonTestkit(dataHooks.remove);
  const downloadIconButton = iconButtonTestkit(dataHooks.download);
  const updateIconButton = iconButtonTestkit(dataHooks.update);
  const moreIconButton = iconButtonTestkit(dataHooks.more);

  const updateTooltip = tooltipTestkit(dataHooks.updateTooltip);
  const downloadTooltip = tooltipTestkit(dataHooks.downloadTooltip);
  const removeTooltip = tooltipTestkit(dataHooks.removeTooltip);
  const moreTooltip = tooltipTestkit(dataHooks.moreTooltip);

  const getStatusIndicatorDriver = () =>
    statusIndicatorDriverFactory(
      base.$(`[data-hook="${dataHooks.errorTooltip}"]`),
      body,
    );

  const moreButtonExists = () => moreIconButton.exists();
  const clickMore = () => showButtons().then(() => moreIconButton.click());

  return {
    ...baseUniDriverFactory(base),
    updateExists: () => !!find(dataHooks.update),
    updateButtonExists: () => updateIconButton.exists(),
    removeButtonExists: () => removeIconButton.exists(),
    downloadButtonExists: () => downloadIconButton.exists(),
    moreButtonExists,
    clickAdd: () => addItemTestkit.click(),
    clickUpdate: () => showButtons().then(() => updateIconButton.click()),
    clickDownload: async () => {
      await showButtons();

      if (await moreButtonExists()) {
        await clickMore();
        const moreActions = popoverMenuDriver(dataHooks.actionsMenu);
        return moreActions.clickAtChild(0);
      } else {
        return downloadIconButton.click();
      }
    },
    clickRemove: async () => {
      await showButtons();

      if (await moreButtonExists()) {
        await clickMore();
        const moreActions = popoverMenuDriver(dataHooks.actionsMenu);
        return moreActions.clickAtChild(1);
      } else {
        return removeIconButton.click();
      }
    },
    getContainerStyles: () => base.attr('style'),
    getAddTooltipContent: () => addItemTestkit.getTooltipContent(),
    getUpdateTooltipContent: () => updateTooltip.getTooltipText(),
    getDownloadTooltipContent: () => downloadTooltip.getTooltipText(),
    getRemoveTooltipContent: () => removeTooltip.getTooltipText(),
    getMoreTooltipContent: () => moreTooltip.getTooltipText(),
    isDisabled: () =>
      base.attr(dataAttributes.disabled).then(x => x === 'true'),
    isAddItemVisible: () => find(dataHooks.addItem).exists(),
    isLoaderVisible: () => find(dataHooks.loader).exists(),
    isImageLoaded: () => base.$('[data-was-image-loaded]').exists(),
    isImageVisible: async () => {
      const image = find(dataHooks.image);

      return (
        (await image.exists()) &&
        !!(await image.attr('src')) &&
        (await isImageElementVisible(image)) &&
        (await isImagesContainerElementVisible())
      );
    },
    isPreviousImageVisible: async () => {
      const previousImage = find(dataHooks.previousImage);

      return (
        (await previousImage.exists()) &&
        !!(await previousImage.attr('src')) &&
        (await isImageElementVisible(previousImage)) &&
        (await isImagesContainerElementVisible())
      );
    },
    getImageUrl: async () => {
      const image = find(dataHooks.image);
      return (await image.exists()) && (await image.attr('src'));
    },
    getPreviousImageUrl: async () => {
      const previousImage = find(dataHooks.previousImage);
      return (
        (await previousImage.exists()) && (await previousImage.attr('src'))
      );
    },
    hover: hoverElement,

    // Status
    /** Return true if there's a status */
    hasStatus: async status => {
      const statusIndicatorDriver = getStatusIndicatorDriver();
      if (await statusIndicatorDriver.exists()) {
        return status === (await statusIndicatorDriver.getStatus());
      }

      return false;
    },
    /** If there's a status message, returns its text value */
    getStatusMessage: async () => {
      const statusIndicatorDriver = getStatusIndicatorDriver();
      let tooltipText = null;

      if (await statusIndicatorDriver.hasMessage()) {
        tooltipText = await statusIndicatorDriver.getMessage();
      }

      return tooltipText;
    },
  };
};