sopify-test-modul-fo/View/vanillajs-datepicker/test/options/orientation.js

describe('options - orientation', function () {
  const getIntSize = px => Math.round(parseFloat(px));
  const getTopPos = (el, wrap) => el.offsetTop + (wrap ? wrap.offsetTop : 0) + window.scrollY;
  const getLeftPos = (el, wrap) => el.offsetLeft + (wrap ? wrap.offsetLeft : 0) + window.scrollX;
  const getBottomPos = (el, wrap) => getTopPos(el, wrap) + el.offsetHeight;
  const getRightPos = (el, wrap) => getLeftPos(el, wrap) + el.offsetWidth;
  let wrapper;
  let input;

  beforeEach(function () {
    wrapper = document.createElement('div');
    Object.assign(wrapper.style, {
      boxSizing: 'border-box',
      position: 'fixed',
      top: '50px',
      left: '50px',
      width: '300px',
      paddingTop: '300px',
    });
    input = document.createElement('input');
    wrapper.appendChild(input);
    testContainer.appendChild(wrapper);
  });

  afterEach(function () {
    domUtils.emptyChildNodes(testContainer);
  });

  it('"auto" makes the picker show on top left of the input by default', function () {
    const {dp, picker} = createDP(input);
    dp.show();

    expect(getIntSize(picker.style.top), 'to be close to', getTopPos(input, wrapper) - picker.offsetHeight, 1);
    expect(getIntSize(picker.style.left), 'to be close to', getLeftPos(input, wrapper), 1);
    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.destroy();
  });

  it('"auto" makes the picker show on top right of the input if computed style of the input has direction: rrl', function () {
    const {dp, picker} = createDP(input);
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(getIntSize(picker.style.top), 'to be close to', getTopPos(input, wrapper) - picker.offsetHeight, 1);
    expect(getIntSize(picker.style.left), 'to be close to', getRightPos(input, wrapper) - picker.offsetWidth, 1);
    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"auto" makes the picker show on bottom of the input if visible space above the input < picker height', function () {
    const {dp, picker} = createDP(input);
    wrapper.style.paddingTop = '0';
    dp.show();

    expect(getIntSize(picker.style.top), 'to be close to', getBottomPos(input, wrapper), 1);
    expect(getIntSize(picker.style.left), 'to be close to', getLeftPos(input, wrapper), 1);
    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(getIntSize(picker.style.top), 'to be close to', getBottomPos(input, wrapper), 1);
    expect(getIntSize(picker.style.left), 'to be close to', getRightPos(input, wrapper) - picker.offsetWidth, 1);
    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"auto" makes the picker move to 10px from document\'s left if picker\'s left < document\'s', function () {
    const {dp, picker} = createDP(input);
    wrapper.style.left = '-40px';
    dp.show();

    expect(getIntSize(picker.style.left), 'to be', 10);
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.destroy();
  });

  it('"auto" makes the picker show on right if picker\'s right edge > document\'s', function () {
    const {dp, picker} = createDP(input);
    Object.assign(wrapper.style, {left: 'auto', right: 0, width: '150px'});
    dp.show();

    expect(getIntSize(picker.style.left), 'to be close to', getRightPos(input, wrapper) - picker.offsetWidth, 1);
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"top" makes the picker show on top of the input regardless of the size of the space above', function () {
    const {dp, picker} = createDP(input, {orientation: 'top'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.style.paddingTop = '0';
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"bottom" makes the picker show on bottom of the input regardless of the size of the space below', function () {
    wrapper.style.paddingTop = '0';

    const {dp, picker} = createDP(input, {orientation: 'bottom'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: 'auto', bottom: '0'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"left" makes the picker show on left of the input regardless of the direction of the input', function () {
    const {dp, picker} = createDP(input, {orientation: 'left'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.destroy();
  });

  it('"right" makes the picker show on right of the input regardless of the direction of the input', function () {
    const {dp, picker} = createDP(input, {orientation: 'right'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"top left" makes the picker always show on top left of the input', function () {
    wrapper.style.paddingTop = '0';

    const {dp, picker} = createDP(input, {orientation: 'top left'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: 'auto', bottom: '0'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: '0', bottom: ''});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.destroy();
  });

  it('"top right" makes the picker always show on top right of the input', function () {
    wrapper.style.paddingTop = '0';

    const {dp, picker} = createDP(input, {orientation: 'top right'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: 'auto', bottom: '0'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: '0', bottom: ''});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('"bottom left" makes the picker always show on bottom left of the input', function () {
    wrapper.style.paddingTop = '0';

    const {dp, picker} = createDP(input, {orientation: 'bottom left'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: 'auto', bottom: '0'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: '0', bottom: ''});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.destroy();
  });

  it('"bottom right" makes the picker always show on bottom right of the input', function () {
    wrapper.style.paddingTop = '0';

    const {dp, picker} = createDP(input, {orientation: 'bottom right'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: 'auto', bottom: '0'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    wrapper.setAttribute('dir', 'rtl');
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    Object.assign(wrapper.style, {top: '0', bottom: ''});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.destroy();
  });

  it('can be updated with setOptions()', function () {
    const {dp, picker} = createDP(input);
    dp.setOptions({orientation: 'right bottom'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    dp.setOptions({orientation: 'bottom auto'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.hide();
    dp.setOptions({orientation: 'auto right'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

    dp.hide();
    dp.setOptions({orientation: 'auto'});
    dp.show();

    expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
    expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

    dp.destroy();
  });

  describe('with custom container', function () {
    let foo;

    beforeEach(function () {
      foo = parseHTML('<div id="foo"></div>').firstChild;
      Object.assign(foo.style, {
        boxSizing: 'border-box',
        position: 'fixed',
        top: '20px',
        left: '20px',
        height: '360px',
        overflow: 'auto',
      });
      Object.assign(wrapper.style, {position: '', top: '', left: ''});
      testContainer.replaceChild(foo, wrapper);
      foo.appendChild(wrapper);
    });

    it('makes the picker\'s position relative to the container', function () {
      const {dp, picker} = createDP(input, {container: '#foo'});
      dp.show();

      expect(getIntSize(picker.style.top), 'to be', input.offsetTop - picker.offsetHeight);
      expect(getIntSize(picker.style.left), 'to be', input.offsetLeft);
      expect(picker.classList.contains('datepicker-orient-top'), 'to be true');
      expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

      dp.hide();
      wrapper.style.paddingBottom = '200px';
      foo.scrollTop = 100;
      dp.show();

      expect(getIntSize(picker.style.top), 'to be', input.offsetTop + input.offsetHeight);
      expect(getIntSize(picker.style.left), 'to be', input.offsetLeft);
      expect(picker.classList.contains('datepicker-orient-bottom'), 'to be true');
      expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

      foo.scrollTop = 0;
      wrapper.style.paddingBottom = '';
      dp.destroy();
    });

    it('"auto" makes the picker move to 10px from container\'s left if picker\'s left < container\'s', function () {
      const {dp, picker} = createDP(input, {container: '#foo'});
      wrapper.style.marginLeft = '-40px';
      dp.show();

      expect(getIntSize(picker.style.left), 'to be', 10);
      expect(picker.classList.contains('datepicker-orient-left'), 'to be true');

      dp.destroy();
    });

    it('"auto" makes the picker show on right if picker\'s right edge < container\'s', function () {
      const {dp, picker} = createDP(input, {container: '#foo'});
      wrapper.style.width = '150px';
      dp.show();

      expect(getIntSize(picker.style.left), 'to be', input.offsetLeft + input.offsetWidth - picker.offsetWidth);
      expect(picker.classList.contains('datepicker-orient-right'), 'to be true');

      dp.destroy();
    });
  });
});