test/selecting-items.html

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>vaadin-combo basic tests</title>

  <script src="../../web-component-tester/browser.js"></script>
  <script src='../../webcomponentsjs/webcomponents-lite.js'></script>
  <link rel="import" href="../../test-fixture/test-fixture.html">
  <link rel="import" href="common-imports.html">
  <script src="common.js"></script>
</head>

<body>

<test-fixture id="combobox">
  <template>
    <vaadin-combo-box style="width: 320px;"></vaadin-combo-box>
  </template>
</test-fixture>

<test-fixture id="combobox-clear">
  <template>
    <vaadin-combo-box clear-button-visible style="width: 320px;"></vaadin-combo-box>
  </template>
</test-fixture>

<script>
  describe('selecting a value', () => {
    let combobox;
    let input;
    let valueChangedSpy, selectedItemChangedSpy, selectionChangedSpy, changeSpy;

    function dispatchClick(elm) {
      elm.dispatchEvent(new CustomEvent('click', {
        bubbles: true
      }));
    }

    beforeEach(() => {
      combobox = fixture('combobox');
      combobox.items = ['foo', 'bar'];
      input = combobox.root.querySelector('input');

      valueChangedSpy = sinon.spy();
      combobox.addEventListener('value-changed', valueChangedSpy);

      selectedItemChangedSpy = sinon.spy();
      combobox.addEventListener('selected-item-changed', selectedItemChangedSpy);

      selectionChangedSpy = sinon.spy();
      combobox.$.overlay.addEventListener('selection-changed', selectionChangedSpy);

      changeSpy = sinon.spy();
      combobox.addEventListener('change', changeSpy);
    });

    it('should stop click events from bubbling outside the overlay', () => {
      combobox.open();
      combobox.close();

      const clickSpy = sinon.spy();
      document.addEventListener('click', clickSpy);
      combobox.$.overlay._selector.dispatchEvent(new CustomEvent('click', {
        bubbles: true
      }));
      document.removeEventListener('click', clickSpy);
      expect(clickSpy.calledOnce).not.to.be.true;
    });

    it('should fire `selection-changed` when clicked on an item', () => {
      combobox.opened = true;
      Polymer.flush();

      combobox.$.overlay._selector.querySelector('vaadin-combo-box-item').dispatchEvent(new CustomEvent('click', {
        bubbles: true
      }));

      expect(selectionChangedSpy.calledOnce).to.be.true;
      expect(selectionChangedSpy.args[0][0].detail.item).to.eql(combobox.items[0]);
    });

    it('should fire `selection-changed` after the scrolling grace period', done => {
      combobox.open();
      combobox.close();

      const items = [];
      for (let i = 1; i < 50; i++) {
        items.push(i);
      }
      combobox.items = items;

      combobox.opened = true;

      function listener() {
        // Ensure the listener is invoked only once. Otherwise, `done()` might
        // be called multiple times, which produces error for the test.
        combobox.$.overlay._scroller.removeEventListener('scroll', listener);

        setTimeout(() => {
          const firstItem = combobox.$.overlay._selector.querySelector('vaadin-combo-box-item');
          dispatchClick(firstItem);

          expect(selectionChangedSpy.calledOnce).to.be.true;
          done();
        }, 500);
      }

      // Scroll start could delay, for example, with full SD polyfill
      combobox.$.overlay._scroller.addEventListener('scroll', listener);

      combobox.$.overlay._selector.scrollToIndex(20);
    });

    it('should select by using JS api', () => {
      combobox.value = 'foo';

      combobox.open();

      expect(combobox.selectedItem).to.equal('foo');
      expect(combobox.$.overlay._selectedItem).to.equal('foo');
      expect(combobox.inputElement.value).to.equal('foo');
    });

    it('should close the dropdown on selection', () => {
      combobox.open();
      Polymer.flush();

      combobox.$.overlay._selector.querySelector('vaadin-combo-box-item').click();

      expect(combobox.opened).to.equal(false);
    });

    it('should fire exactly one `value-changed` event', () => {
      combobox.value = 'foo';
      expect(valueChangedSpy.callCount).to.equal(1);
    });

    it('should close the dropdown when reselecting the current value', () => {
      combobox.value = 'foo';
      combobox.open();
      combobox.$.overlay.dispatchEvent(new CustomEvent('selection-changed', {detail: {item: combobox.items[0]}}));
      expect(combobox.opened).to.be.false;
    });

    it('should not fire an event when reselecting the current value', () => {
      combobox.value = 'foo';
      valueChangedSpy.reset();
      combobox.$.overlay.dispatchEvent(new CustomEvent('selection-changed', {detail: {item: combobox.items[0]}}));
      expect(valueChangedSpy.callCount).to.equal(0);
    });

    it('should not throw an error if value was undefined', () => {
      combobox.allowCustomValue = true;
      combobox.value = undefined;
      combobox.open();
      combobox.close();
    });

    it('should be possible to set selectedItem before attaching to the DOM', () => {
      var newComboBox = combobox.cloneNode(true);
      newComboBox.items = ['foo', 'bar'];
      newComboBox.selectedItem = 'foo';
      combobox.parentElement.appendChild(newComboBox);
      expect(newComboBox.value).to.equal('foo');
    });

    it('should be possible to set selectedItem after attaching to the DOM and before setting items', () => {
      var newComboBox = combobox.cloneNode(true);
      combobox.parentElement.appendChild(newComboBox);
      newComboBox.selectedItem = 'foo';
      newComboBox.items = ['foo', 'bar'];
      expect(newComboBox.value).to.equal('foo');
    });

    describe('`change` event', () => {
      it('should fire `value-changed` and `selected-item-changed` before `changed`', done => {
        combobox.addEventListener('change', () => {
          expect(valueChangedSpy.called).to.be.true;
          expect(selectedItemChangedSpy.called).to.be.true;
          done();
        });

        combobox.open();
        combobox.value = 'foo';
        combobox.close();
      });

      it('should fire exactly one `change` event', () => {
        combobox.open();
        combobox.value = 'foo';
        combobox.close();

        expect(changeSpy.callCount).to.equal(1);
      });

      it('should not fire `change` event when not commiting a value by closing', () => {
        combobox.value = 'foo';

        expect(changeSpy.callCount).to.equal(0);
      });

      it('should fire on clear', () => {
        combobox.value = 'foo';
        fire('click', combobox.$.input.$.clearButton);

        expect(changeSpy.callCount).to.equal(1);
      });

      it('should not fire until close', () => {
        combobox.value = 'foo';
        combobox.open();
        combobox.value = 'bar';

        expect(changeSpy.callCount).to.equal(0);
      });

      it('should not fire on cancel', () => {
        combobox.open();
        combobox.value = 'foo';
        combobox.cancel();

        expect(changeSpy.callCount).to.equal(0);
      });

      it('should not fire for changes when closed', () => {
        combobox.value = 'foo';

        combobox.open();
        combobox.close();
        it('should fire exactly one `change` event', () => {
          combobox.value = 'foo';
          expect(changeSpy.callCount).to.equal(1);
        });

        expect(changeSpy.callCount).to.equal(0);
      });

      it('should stop input `change` event from bubbling', () => {
        combobox.inputElement.dispatchEvent(new CustomEvent('change'));

        expect(changeSpy.callCount).to.equal(0);
      });

      it('should not set composed flag to true on `change` event', done => {
        combobox.addEventListener('change', e => {
          expect(e.composed).to.be.false;
          done();
        });

        combobox.open();
        combobox.value = 'foo';
        combobox.close();
      });

      it('should fire when selecting an item via click', () => {
        combobox.open();
        const firstItem = combobox.$.overlay._selector.querySelector('vaadin-combo-box-item');
        fire('click', firstItem);

        expect(changeSpy.callCount).to.equal(1);
      });
    });
  });

  describe('clearing a selection - clear icon', () => {
    let combobox;
    let clearIcon;
    beforeEach(() => {
      combobox = fixture('combobox-clear');
      combobox.items = ['foo', 'bar'];

      combobox.value = 'foo';

      clearIcon = combobox.inputElement.$.clearButton;

      // needed for Edge <= 14 in Polymer 2
      combobox.updateStyles();
    });

    it('should show the clearing icon only when combobox has value', done => {
      // Edge and IE have an issue where the correct styles are not applied by the browser
      // on the clear icon before triggering a reflow/re-render. Opening/Closing the combobox
      // seems to be the most reliable way to fix this.
      combobox.open();
      expect(window.getComputedStyle(clearIcon).display).not.to.contain('none');
      combobox.close();

      combobox.value = '';
      combobox.open();
      setTimeout(() => {
        expect(window.getComputedStyle(clearIcon).display).to.contain('none');
        done();
      }, 1);
    });

    it('should clear the selection when clicking on the icon', () => {
      combobox.open();

      fire('click', clearIcon);

      expect(combobox.value).to.eql('');
      expect(combobox.$.overlay._selectedItem).to.be.null;
      expect(combobox.selectedItem).to.be.null;
    });

    it('should not close the dropdown after clearing a selection', () => {
      combobox.open();

      fire('click', clearIcon);

      expect(combobox.opened).to.eql(true);
    });

    it('should cancel click event to avoid input blur', () => {
      combobox.open();

      const event = fire('click', clearIcon);

      expect(event.defaultPrevented).to.eql(true);
    });

  });

  describe('selecting a custom value', () => {
    let combobox;

    function filter(value) {
      combobox.inputElement.value = value;
      combobox.inputElement.dispatchEvent(new CustomEvent('input'));
    }

    beforeEach(done => {
      combobox = fixture('combobox');
      combobox.allowCustomValue = true;
      combobox.items = ['foo', 'bar', 'barbar'];

      combobox.open();
      setTimeout(done);
    });

    it('should select a value when closing when having a single exact match', () => {
      filter('barbar');

      combobox.close();

      expect(combobox.value).to.eql('barbar');
    });

    it('should select a value when closing when having multiple matches', () => {
      filter('BAR');

      combobox.close();

      expect(combobox.value).to.eql('bar');
    });

    it('should clear the selection when closing the overlay and input is cleared', () => {
      combobox.value = 'foo';

      filter('');

      combobox.close();

      expect(combobox.value).to.be.empty;
      expect(combobox.selectedItem).to.be.null;
      expect(combobox.hasAttribute('has-value')).to.be.false;
    });

    it('should select a custom value', () => {
      combobox.value = 'foobar';

      combobox.close();

      expect(combobox.value).to.eql('foobar');
      expect(combobox.selectedItem).to.be.null;
      expect(combobox._inputElementValue).to.eql('foobar');
      expect(combobox.hasAttribute('has-value')).to.be.true;
    });

    it('should clear the custom value on clear', () => {
      combobox.value = 'foobar';

      filter('');

      combobox.close();

      expect(combobox.value).to.be.empty;
      expect(combobox.selectedItem).to.be.null;
    });

    it('should allow changing value to existing item when custom value is set', () => {
      combobox.value = 'foobar';

      combobox.close();

      combobox.value = 'foo';
      expect(combobox.value).to.eql('foo');
      expect(combobox.selectedItem).to.eql('foo');
    });
  });
</script>

</body>

</html>