discourse/test/javascripts/components/multi-select-test.js.es6

import componentTest from 'helpers/component-test';
moduleForComponent('multi-select', {
  integration: true,
  beforeEach: function() {
    this.set('subject', selectKit());
  }
});

componentTest('with objects and values', {
  template: '{{multi-select content=items values=values}}',

  beforeEach() {
    this.set('items', [{id: 1, name: 'hello'}, {id: 2, name: 'world'}]);
    this.set('values', [1, 2]);
  },

  test(assert) {
    andThen(() => {
      assert.equal(this.get('subject').header().value(), '1,2');
    });
  }
});

componentTest('with title', {
  template: '{{multi-select title=(i18n "test.title")}}',

  beforeEach() {
    I18n.translations[I18n.locale].js.test = {title: 'My title'};
  },

  test(assert) {
    andThen(() => assert.equal(selectKit().header().title(), 'My title') );
  }
});


componentTest('interactions', {
  template: '{{multi-select none=none content=items values=values}}',

  beforeEach() {
    I18n.translations[I18n.locale].js.test = {none: 'none'};
    this.set('items', [{id: 1, name: 'regis'}, {id: 2, name: 'sam'}, {id: 3, name: 'robin'}]);
    this.set('values', [1, 2]);
  },

  test(assert) {
    this.get('subject').expand();

    andThen(() => {
      assert.equal(
        this.get('subject').highlightedRow().name(),
        'robin',
        'it highlights the first content row'
      );
    });

    this.set('none', 'test.none');

    andThen(() => {
      assert.ok(this.get('subject').noneRow().exists());
      assert.equal(
        this.get('subject').highlightedRow().name(),
        'robin',
        'it highlights the first content row'
      );
    });

    this.get('subject').selectRowByValue(3);
    this.get('subject').expand();

    andThen(() => {
      assert.equal(
        this.get('subject').highlightedRow().name(),
        'none',
        'it highlights none row if no content'
      );
    });

    this.get('subject').fillInFilter('joffrey');

    andThen(() => {
      assert.equal(
        this.get('subject').highlightedRow().name(),
        'joffrey',
        'it highlights create row when filling filter'
      );
    });

    this.get('subject').keyboard().enter();

    andThen(() => {
      assert.equal(
        this.get('subject').highlightedRow().name(),
        'none',
        'it highlights none row after creating content and no content left'
      );
    });

    this.get('subject').keyboard().backspace();

    andThen(() => {
      const $lastSelectedName = this.get('subject').header().el().find('.selected-name').last();
      assert.equal($lastSelectedName.attr('data-name'), 'joffrey');
      assert.ok($lastSelectedName.hasClass('is-highlighted'), 'it highlights the last selected name when using backspace');
    });

    this.get('subject').keyboard().backspace();

    andThen(() => {
      const $lastSelectedName = this.get('subject').header().el().find('.selected-name').last();
      assert.equal($lastSelectedName.attr('data-name'), 'robin', 'it removes the previous highlighted selected content');
      assert.notOk(this.get('subject').rowByValue('joffrey').exists(), 'generated content shouldn’t appear in content when removed');
    });

    this.get('subject').keyboard().selectAll();

    andThen(() => {
      const $highlightedSelectedNames = this.get('subject').header().el().find('.selected-name.is-highlighted');
      assert.equal($highlightedSelectedNames.length, 3, 'it highlights each selected name');
    });

    this.get('subject').keyboard().backspace();

    andThen(() => {
      const $selectedNames = this.get('subject').header().el().find('.selected-name');
      assert.equal($selectedNames.length, 0, 'it removed all selected content');
    });

    andThen(() => {
      assert.ok(this.get('subject').isFocused());
      assert.ok(this.get('subject').isExpanded());
    });

    this.get('subject').keyboard().escape();

    andThen(() => {
      assert.ok(this.get('subject').isFocused());
      assert.notOk(this.get('subject').isExpanded());
    });

    this.get('subject').keyboard().escape();

    andThen(() => {
      assert.notOk(this.get('subject').isFocused());
      assert.notOk(this.get('subject').isExpanded());
    });
  }
});

componentTest('with limitMatches', {
  template: '{{multi-select content=content limitMatches=2}}',

  beforeEach() {
    this.set('content', ['sam', 'jeff', 'neil']);
  },

  test(assert) {
    this.get('subject').expand();

    andThen(() => assert.equal(this.get('subject').el().find(".select-kit-row").length, 2));
  }
});

componentTest('with minimum', {
  template: '{{multi-select content=content minimum=1}}',

  beforeEach() {
    this.set('content', ['sam', 'jeff', 'neil']);
  },

  test(assert) {
    this.get('subject').expand();

    andThen(() => assert.equal(this.get('subject').validationMessage(), 'Select at least 1 item(s).'));

    this.get('subject').selectRowByValue('sam');

    andThen(() => {
      assert.equal(this.get('subject').header().label(), 'sam');
    });
  }
});

componentTest('with minimumLabel', {
  template: '{{multi-select content=content minimum=1 minimumLabel="test.minimum"}}',

  beforeEach() {
    I18n.translations[I18n.locale].js.test = { minimum: 'min %{count}' };
    this.set('content', ['sam', 'jeff', 'neil']);
  },

  test(assert) {
    this.get('subject').expand();

    andThen(() => assert.equal(this.get('subject').validationMessage(), 'min 1'));

    this.get('subject').selectRowByValue('jeff');

    andThen(() => {
      assert.equal(this.get('subject').header().label(), 'jeff');
    });
  }
});