wix-style-react/dist/es/src/Input/Input.driver.js

wix-style-react

import ReactTestUtils from 'react-dom/test-utils';
import { tooltipDriverFactory } from "wix-ui-core/dist/es/src/components/tooltip/Tooltip.driver";
import { dataHooks } from './constants';
import DATA_ATTR from './DataAttr';

var inputDriverFactory = function inputDriverFactory(_ref) {
  var element = _ref.element,
      eventTrigger = _ref.eventTrigger;
  var input = element && element.querySelector('input');
  var clearButton = element && element.querySelector("[data-hook=input-clear-button]");
  var customAffixNode = element && element.querySelector("[data-hook=\"custom-affix\"]");
  var iconAffixNode = element && element.querySelector("[data-hook=\"icon-affix\"]");
  var menuArrowNode = element && element.querySelector("[data-hook=\"".concat(dataHooks.menuArrow, "\"]"));

  var getName = function getName() {
    return input.getAttribute('name');
  };

  var getType = function getType() {
    return input.getAttribute('type');
  };

  var getMaxLength = function getMaxLength() {
    return input.getAttribute('maxlength');
  };

  var driver = {
    trigger: function trigger(_trigger, event) {
      return ReactTestUtils.Simulate[_trigger](input, event);
    },
    focus: function focus(options) {
      input.focus(options);
      ReactTestUtils.Simulate.focus(input);
    },
    blur: function blur() {
      input.blur();
      ReactTestUtils.Simulate.blur(input);
    },
    getName: getName,
    getMaxLength: getMaxLength,
    getType: getType,
    keyDown: function keyDown(key) {
      return ReactTestUtils.Simulate.keyDown(input, {
        key: key
      });
    },
    click: function click() {
      return ReactTestUtils.Simulate.click(input);
    },
    clickCustomAffix: function clickCustomAffix() {
      return ReactTestUtils.Simulate.click(customAffixNode);
    },
    clickClear: function clickClear() {
      return ReactTestUtils.Simulate.click(clearButton);
    },
    clickIconAffix: function clickIconAffix() {
      return ReactTestUtils.Simulate.click(iconAffixNode);
    },
    clickMenuArrow: function clickMenuArrow() {
      return ReactTestUtils.Simulate.click(menuArrowNode);
    },
    mouseOver: function mouseOver() {
      return ReactTestUtils.Simulate.mouseOver(input);
    },
    mouseOut: function mouseOut() {
      return ReactTestUtils.Simulate.mouseOut(input);
    },
    clearText: function clearText() {
      return driver.enterText('');
    },
    enterText: function enterText(text) {
      if (driver.getReadOnly() || driver.isDisabled()) {
        return;
      }

      input.value = text;
      ReactTestUtils.Simulate.change(input, {
        target: {
          name: getName(),
          type: getType(),
          value: text
        }
      });
    },
    getValue: function getValue() {
      return input.value;
    },
    getText: function getText() {
      return input.value;
    },
    getPlaceholder: function getPlaceholder() {
      return input.placeholder;
    },
    getPattern: function getPattern() {
      return input.pattern;
    },
    getDefaultValue: function getDefaultValue() {
      return input.defaultValue;
    },
    getTabIndex: function getTabIndex() {
      return input.tabIndex;
    },
    getReadOnly: function getReadOnly() {
      return input.readOnly;
    },
    getDisabled: function getDisabled() {
      return input.disabled;
    },
    getTextOverflow: function getTextOverflow() {
      return input.style['text-overflow'];
    },
    getAriaLabel: function getAriaLabel() {
      return input.getAttribute('aria-label');
    },
    getAriaControls: function getAriaControls() {
      return input.getAttribute('aria-controls');
    },
    getAriaDescribedby: function getAriaDescribedby() {
      return input.getAttribute('aria-describedby');
    },
    getAutocomplete: function getAutocomplete() {
      return input.getAttribute('autocomplete');
    },
    getRequired: function getRequired() {
      return input.required;
    },
    hasPrefix: function hasPrefix() {
      return element.hasAttribute(DATA_ATTR.PREFIX);
    },
    hasSuffix: function hasSuffix() {
      return !!element.querySelector("[data-hook=\"".concat(dataHooks.suffixes, "\"]"));
    },
    prefixComponentExists: function prefixComponentExists(style) {
      return element.hasAttribute(DATA_ATTR.PREFIX) && !!element.querySelector(style);
    },
    suffixComponentExists: function suffixComponentExists(style) {
      return !!element.querySelector("[data-hook=\"".concat(dataHooks.suffixes, "\"] ").concat(style));
    },
    getDataHook: function getDataHook() {
      return element.getAttribute('data-hook');
    },
    getCustomAffix: function getCustomAffix() {
      return customAffixNode.textContent;
    },
    hasMenuArrow: function hasMenuArrow() {
      return !!menuArrowNode;
    },
    hasClearButton: function hasClearButton() {
      return !!clearButton;
    },
    isRTL: function isRTL() {
      return element.getAttribute('dir') === 'rtl';
    },
    isFocusedStyle: function isFocusedStyle() {
      return element.hasAttribute(DATA_ATTR.FOCUS);
    },
    isHoveredStyle: function isHoveredStyle() {
      return element.hasAttribute(DATA_ATTR.HOVER);
    },
    isDisabled: function isDisabled() {
      return element.hasAttribute(DATA_ATTR.DISABLED);
    },
    isOfSize: function isOfSize(size) {
      return element.getAttribute(DATA_ATTR.SIZE) === size;
    },
    getSize: function getSize() {
      return element.getAttribute(DATA_ATTR.SIZE);
    },
    isFocus: function isFocus() {
      return document.activeElement === input;
    },
    exists: function exists() {
      return !!(element && element.querySelector('input'));
    },
    startComposing: function startComposing() {
      return ReactTestUtils.Simulate.compositionStart(input);
    },
    endComposing: function endComposing() {
      return ReactTestUtils.Simulate.compositionEnd(input);
    },
    getCursorLocation: function getCursorLocation() {
      return input.selectionStart;
    },
    getRootElementClasses: function getRootElementClasses() {
      return element.classList;
    },
    getInputElementClasses: function getInputElementClasses() {
      return input.classList;
    },
    hasRightBorderRadius: function hasRightBorderRadius() {
      return !element.hasAttribute(DATA_ATTR.RIGHTBORDERRADIUS);
    },
    hasLeftBorderRadius: function hasLeftBorderRadius() {
      return !element.hasAttribute(DATA_ATTR.LEFTBORDERRADIUS);
    },
    isCustomInput: function isCustomInput() {
      return input.getAttribute('data-hook') === 'wsr-custom-input';
    },
    // Status

    /** Return true if the given status is displayed */
    hasStatus: function hasStatus(status) {
      return element.getAttribute(DATA_ATTR.STATUS) === status;
    },

    /** If there's a status message, returns its text value */
    getStatusMessage: function getStatusMessage() {
      var tooltipText = null;
      var tooltipDriver = tooltipDriverFactory({
        element: element.querySelector('[data-hook="status-indicator-tooltip"]'),
        eventTrigger: eventTrigger
      });

      if (tooltipDriver.exists()) {
        tooltipDriver.mouseEnter();
        var contentElement = tooltipDriver.getContentElement();

        if (contentElement) {
          tooltipText = contentElement.textContent;
        }
      }

      return tooltipText;
    }
  };
  return driver;
};

export default inputDriverFactory;