wix-style-react/dist/es/src/Dropdown/Dropdown.deprecated.spec.js

wix-style-react

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import dropdownDriverFactory from './Dropdown.driver';
import Dropdown from './Dropdown';
import { dropdownTestkitFactory } from '../../testkit';
import { dropdownTestkitFactory as enzymeDropdownTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';
import { sleep } from 'wix-ui-test-utils/react-helpers';
import { createRendererWithDriver, cleanup } from '../../test/utils/unit';
import { depLogger } from '../utils/deprecationLog';

describe('Dropdown (Deprecated mode)', function () {
  var render = createRendererWithDriver(dropdownDriverFactory);
  var createDriver = function createDriver(jsx) {
    return render(jsx).driver;
  };

  var getOptions = function getOptions() {
    return [{ id: 0, value: 'Option 1' }, { id: 1, value: 'Option 2' }, { id: 2, value: 'Option 3', disabled: true }, { id: 3, value: 'Option 4' }, { id: 'divider1', value: '-' }, { id: 'element1', value: React.createElement(
        'span',
        { style: { color: 'brown' } },
        'Option 4'
      ) }];
  };

  afterEach(function () {
    cleanup();
  });

  it('should select item with selectedId on init state', function () {
    var _createDriver = createDriver(React.createElement(Dropdown, { options: getOptions(), selectedId: 0 })),
        inputDriver = _createDriver.inputDriver,
        dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;

    expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
    expect(inputDriver.getValue()).toBe('Option 1');
  });

  it('should select an item when clicked', function () {
    var _createDriver2 = createDriver(React.createElement(Dropdown, { options: getOptions() })),
        driver = _createDriver2.driver,
        dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;

    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(dropdownLayoutDriver.isOptionSelected(0)).toBeTruthy();
  });

  it('should enter the selected option text when selected', function () {
    var _createDriver3 = createDriver(React.createElement(Dropdown, { options: getOptions() })),
        driver = _createDriver3.driver,
        inputDriver = _createDriver3.inputDriver,
        dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;

    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(inputDriver.getValue()).toBe('Option 1');
  });

  it('should update text when selected option changes', function () {
    var options = getOptions();
    var dataHook = 'dropdown-comp';

    var _render = render(React.createElement(Dropdown, { dataHook: dataHook, options: options, selectedId: 0 })),
        dropdownDriver = _render.driver,
        rerender = _render.rerender;

    var driver = dropdownDriver.driver,
        inputDriver = dropdownDriver.inputDriver,
        dropdownLayoutDriver = dropdownDriver.dropdownLayoutDriver;


    driver.focus();
    dropdownLayoutDriver.clickAtOption(0);
    expect(inputDriver.getValue()).toBe('Option 1');

    options[0].value = 'Updated';
    rerender(React.createElement(Dropdown, { dataHook: dataHook, options: options, selectedId: 0 }));

    expect(inputDriver.getValue()).toBe('Updated');
  });

  it('should close when clicking on input (header)', function () {
    var _createDriver4 = createDriver(React.createElement(Dropdown, { options: getOptions() })),
        dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver,
        inputDriver = _createDriver4.inputDriver;

    inputDriver.click();
    expect(dropdownLayoutDriver.isShown()).toBeTruthy();

    return sleep(200).then(function () {
      inputDriver.click();
      expect(dropdownLayoutDriver.isShown()).toBeFalsy();
    });
  });

  it('should be read only', function () {
    var _createDriver5 = createDriver(React.createElement(Dropdown, { options: getOptions() })),
        driver = _createDriver5.driver;

    expect(driver.isReadOnly()).toBeTruthy();
  });

  describe('upgrade deprecation log', function () {
    var consoleErrorSpy = void 0;

    beforeEach(function () {
      consoleErrorSpy = jest.spyOn(global.console, 'error').mockImplementation(jest.fn());
    });
    afterEach(function () {
      consoleErrorSpy.mockRestore();
    });

    describe('without upgrade', function () {
      var depLogSpy = void 0;

      beforeEach(function () {
        depLogSpy = jest.spyOn(depLogger, 'log');
      });

      afterEach(function () {
        return depLogSpy.mockRestore();
      });

      it('should show deprecationLog when \'upgrade\' is not true', function () {
        render(React.createElement(Dropdown, { options: getOptions() }));
        expect(depLogSpy).toBeCalledWith('Dropdown: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
      });

      it('should log error when initialSelectedId is used without upgrade', function () {
        render(React.createElement(Dropdown, { options: getOptions(), initialSelectedId: 0 }));
        expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
        expect(consoleErrorSpy).toBeCalledWith(expect.stringContaining('\'initialSelectedId\' can be used only if you pass \'upgrade=true\' as well.'));
      });
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var wrapper = div.appendChild(ReactTestUtils.renderIntoDocument(React.createElement(
        'div',
        null,
        React.createElement(Dropdown, { dataHook: dataHook })
      )));
      var dropdownTestkit = dropdownTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
      expect(dropdownTestkit.driver.exists()).toBeTruthy();
      expect(dropdownTestkit.inputDriver.exists()).toBeTruthy();
      expect(dropdownTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = mount(React.createElement(Dropdown, { dataHook: dataHook }));
      var dropdownTestkit = enzymeDropdownTestkitFactory({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(dropdownTestkit.driver.exists()).toBeTruthy();
      expect(dropdownTestkit.inputDriver.exists()).toBeTruthy();
      expect(dropdownTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
    });
  });
});