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

204 lines
5.4 KiB
Plaintext
Raw Normal View History

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 shouldnt 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());
});
}
});
2018-01-11 03:54:39 -05:00
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.'));
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');
});
}
});