adds a dsl to simplify testing of the select-box
This commit is contained in:
parent
16fe7aa307
commit
562e48dfb7
|
@ -43,6 +43,10 @@
|
||||||
"asyncRender":true,
|
"asyncRender":true,
|
||||||
"selectDropdown":true,
|
"selectDropdown":true,
|
||||||
"selectBox":true,
|
"selectBox":true,
|
||||||
|
"expandSelectBox":true,
|
||||||
|
"collapseSelectBox":true,
|
||||||
|
"selectBoxSelectRow":true,
|
||||||
|
"selectBoxFillInFilter":true,
|
||||||
"asyncTestDiscourse":true,
|
"asyncTestDiscourse":true,
|
||||||
"fixture":true,
|
"fixture":true,
|
||||||
"find":true,
|
"find":true,
|
||||||
|
|
|
@ -62,10 +62,17 @@ export default Ember.Component.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@computed
|
@computed("textKey")
|
||||||
titleForRow: function() {
|
titleForRow(textKey) {
|
||||||
return (rowComponent) => {
|
return (rowComponent) => {
|
||||||
return rowComponent.get(`content.${this.get("textKey")}`);
|
return rowComponent.get(`content.${textKey}`);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
@computed("idKey")
|
||||||
|
idForRow(idKey) {
|
||||||
|
return (rowComponent) => {
|
||||||
|
return rowComponent.get(`content.${idKey}`);
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -8,29 +8,24 @@ export default Ember.Component.extend({
|
||||||
|
|
||||||
tagName: "li",
|
tagName: "li",
|
||||||
|
|
||||||
attributeBindings: ["title"],
|
attributeBindings: ["title", "id:data-id"],
|
||||||
|
|
||||||
classNameBindings: ["isHighlighted:is-highlighted", "isSelected:is-selected"],
|
classNameBindings: ["isHighlighted:is-highlighted", "isSelected:is-selected"],
|
||||||
|
|
||||||
@computed("titleForRow")
|
@computed("titleForRow")
|
||||||
title(titleForRow) {
|
title(titleForRow) { return titleForRow(this); },
|
||||||
return titleForRow(this);
|
|
||||||
},
|
@computed("idForRow")
|
||||||
|
id(idForRow) { return idForRow(this); },
|
||||||
|
|
||||||
@computed("templateForRow")
|
@computed("templateForRow")
|
||||||
template(templateForRow) {
|
template(templateForRow) { return templateForRow(this); },
|
||||||
return templateForRow(this);
|
|
||||||
},
|
|
||||||
|
|
||||||
@computed("shouldHighlightRow", "highlightedValue")
|
@computed("shouldHighlightRow", "highlightedValue")
|
||||||
isHighlighted(shouldHighlightRow) {
|
isHighlighted(shouldHighlightRow) { return shouldHighlightRow(this); },
|
||||||
return shouldHighlightRow(this);
|
|
||||||
},
|
|
||||||
|
|
||||||
@computed("shouldSelectRow", "value")
|
@computed("shouldSelectRow", "value")
|
||||||
isSelected(shouldSelectRow) {
|
isSelected(shouldSelectRow) { return shouldSelectRow(this); },
|
||||||
return shouldSelectRow(this);
|
|
||||||
},
|
|
||||||
|
|
||||||
icon() {
|
icon() {
|
||||||
if (this.get("content.icon")) {
|
if (this.get("content.icon")) {
|
||||||
|
|
|
@ -39,6 +39,7 @@
|
||||||
shouldHighlightRow=shouldHighlightRow
|
shouldHighlightRow=shouldHighlightRow
|
||||||
shouldSelectRow=shouldSelectRow
|
shouldSelectRow=shouldSelectRow
|
||||||
titleForRow=titleForRow
|
titleForRow=titleForRow
|
||||||
|
idForRow=idForRow
|
||||||
onSelectRow=(action "onSelectRow")
|
onSelectRow=(action "onSelectRow")
|
||||||
onHoverRow=(action "onHoverRow")
|
onHoverRow=(action "onHoverRow")
|
||||||
onClearSelection=(action "onClearSelection")
|
onClearSelection=(action "onClearSelection")
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
{{component selectBoxRowComponent
|
{{component selectBoxRowComponent
|
||||||
content=content
|
content=content
|
||||||
templateForRow=templateForRow
|
templateForRow=templateForRow
|
||||||
|
idForRow=idForRow
|
||||||
titleForRow=titleForRow
|
titleForRow=titleForRow
|
||||||
shouldHighlightRow=shouldHighlightRow
|
shouldHighlightRow=shouldHighlightRow
|
||||||
shouldSelectRow=shouldSelectRow
|
shouldSelectRow=shouldSelectRow
|
||||||
|
|
|
@ -75,7 +75,9 @@ QUnit.test("Subcategory list settings", assert => {
|
||||||
|
|
||||||
click('.edit-category-general');
|
click('.edit-category-general');
|
||||||
|
|
||||||
selectBox('.edit-category-tab-general .category-select-box', 'feature');
|
expandSelectBox('.edit-category-tab-general .category-select-box');
|
||||||
|
|
||||||
|
selectBoxSelectRow(3, {selector: '.edit-category-tab-general .category-select-box'});
|
||||||
|
|
||||||
click('.edit-category-settings');
|
click('.edit-category-settings');
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
|
|
|
@ -48,11 +48,14 @@ QUnit.test("Showing and hiding the edit controls", assert => {
|
||||||
|
|
||||||
QUnit.test("Updating the topic title and category", assert => {
|
QUnit.test("Updating the topic title and category", assert => {
|
||||||
visit("/t/internationalization-localization/280");
|
visit("/t/internationalization-localization/280");
|
||||||
|
|
||||||
click('#topic-title .d-icon-pencil');
|
click('#topic-title .d-icon-pencil');
|
||||||
|
|
||||||
fillIn('#edit-title', 'this is the new title');
|
fillIn('#edit-title', 'this is the new title');
|
||||||
|
|
||||||
selectBox('.title-wrapper .category-select-box', 'faq');
|
expandSelectBox('.title-wrapper .category-select-box');
|
||||||
|
|
||||||
|
selectBoxSelectRow(4, {selector: '.title-wrapper .category-select-box'});
|
||||||
|
|
||||||
click('#topic-title .submit-edit');
|
click('#topic-title .submit-edit');
|
||||||
|
|
||||||
|
@ -100,7 +103,7 @@ QUnit.test("Reply as new topic", assert => {
|
||||||
"it fills composer with the ring string"
|
"it fills composer with the ring string"
|
||||||
);
|
);
|
||||||
assert.equal(
|
assert.equal(
|
||||||
find('.category-select-box .select-box-header .current-selection').html().trim(), "feature",
|
selectBox('.category-select-box').header.text(), "feature",
|
||||||
"it fills category selector with the right category"
|
"it fills category selector with the right category"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,24 +21,20 @@ componentTest('updating the content refreshes the list', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
andThen(() => {
|
andThen(() => assert.notOk(selectBox().isHidden) );
|
||||||
assert.equal(find(".pinned-button").hasClass("is-hidden"), false);
|
|
||||||
});
|
|
||||||
|
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.equal(selectBox().selectedRow.el().find(".title").text(), "Pinned") );
|
||||||
assert.equal(find(".select-box-row.is-selected .title").html().trim(), "Pinned");
|
|
||||||
});
|
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
this.set("topic.pinned", false);
|
this.set("topic.pinned", false);
|
||||||
assert.equal(find(".select-box-row.is-selected .title").html().trim(), "Unpinned");
|
assert.equal(selectBox().selectedRow.el().find(".title").text(), "Unpinned");
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
this.set("topic.deleted", true);
|
this.set("topic.deleted", true);
|
||||||
assert.equal(find(".pinned-button").hasClass("is-hidden"), true);
|
assert.ok(find(".pinned-button").hasClass("is-hidden"), "it hides the button when topic is deleted");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,12 +10,12 @@ componentTest('updating the content refreshes the list', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row .text").html().trim(), "robin");
|
assert.equal(selectBox().row(1).text(), "robin");
|
||||||
this.set("content", [{ id: 1, text: "regis" }]);
|
this.set("content", [{ id: 1, text: "regis" }]);
|
||||||
assert.equal(find(".select-box-row .text").html().trim(), "regis");
|
assert.equal(selectBox().row(1).text(), "regis");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -29,16 +29,16 @@ componentTest('accepts a value by reference', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(
|
assert.equal(
|
||||||
find(".select-box-row.is-selected .text").html().trim(), "robin",
|
selectBox().selectedRow.text(), "robin",
|
||||||
"it highlights the row corresponding to the value"
|
"it highlights the row corresponding to the value"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
click(".select-box-row[title='robin']");
|
selectBoxSelectRow(1);
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(this.get("value"), 1, "it mutates the value");
|
assert.equal(this.get("value"), 1, "it mutates the value");
|
||||||
|
@ -54,21 +54,19 @@ componentTest('select-box can be filtered', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input"));
|
andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input"));
|
||||||
|
|
||||||
fillIn(".filter-query", "regis");
|
selectBoxFillInFilter("regis");
|
||||||
triggerEvent('.filter-query', 'keyup');
|
|
||||||
|
|
||||||
andThen(() => assert.equal(find(".select-box-row").length, 1, "it filters results"));
|
andThen(() => assert.equal(selectBox().rows.length, 1, "it filters results"));
|
||||||
|
|
||||||
fillIn(".filter-query", "");
|
selectBoxFillInFilter("");
|
||||||
triggerEvent('.filter-query', 'keyup');
|
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(
|
assert.equal(
|
||||||
find(".select-box-row").length, 2,
|
selectBox().rows.length, 2,
|
||||||
"it returns to original content when filter is empty"
|
"it returns to original content when filter is empty"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -79,7 +77,7 @@ componentTest('no default icon', {
|
||||||
template: '{{select-box}}',
|
template: '{{select-box}}',
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
assert.equal(find(".select-box-header .icon").length, 0, "it doesn’t have an icon if not specified");
|
assert.equal(selectBox().header.icon().length, 0, "it doesn’t have an icon if not specified");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -87,7 +85,7 @@ componentTest('customisable icon', {
|
||||||
template: '{{select-box icon="shower"}}',
|
template: '{{select-box icon="shower"}}',
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
assert.equal(find(".select-box-header .icon").hasClass("d-icon-shower"), true, "it has a the correct icon");
|
assert.ok(selectBox().header.icon().hasClass("d-icon-shower"), "it has a the correct icon");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -95,22 +93,22 @@ componentTest('default search icon', {
|
||||||
template: '{{select-box filterable=true}}',
|
template: '{{select-box filterable=true}}',
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-filter .d-icon-search").length, 1, "it has a the correct icon");
|
assert.ok(selectBox().filter.icon().hasClass("d-icon-search"), "it has a the correct icon");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
componentTest('with no search icon', {
|
componentTest('with no search icon', {
|
||||||
template: '{{select-box filterable=true searchIcon=null}}',
|
template: '{{select-box filterable=true filterIcon=null}}',
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".search-icon").length, 0, "it has no icon");
|
assert.equal(selectBox().filter.icon().length, 0, "it has no icon");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -119,10 +117,10 @@ componentTest('custom search icon', {
|
||||||
template: '{{select-box filterable=true filterIcon="shower"}}',
|
template: '{{select-box filterable=true filterIcon="shower"}}',
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-filter .d-icon-shower").length, 1, "it has a the correct icon");
|
assert.ok(selectBox().filter.icon().hasClass("d-icon-shower"), "it has a the correct icon");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -130,29 +128,22 @@ componentTest('custom search icon', {
|
||||||
componentTest('not filterable by default', {
|
componentTest('not filterable by default', {
|
||||||
template: '{{select-box}}',
|
template: '{{select-box}}',
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.notOk(selectBox().filter.exists()) );
|
||||||
assert.equal(find(".select-box-filter").length, 0);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
componentTest('select-box is expandable', {
|
componentTest('select-box is expandable', {
|
||||||
template: '{{select-box}}',
|
template: '{{select-box}}',
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.ok(selectBox().isExpanded) );
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), true);
|
|
||||||
});
|
|
||||||
|
|
||||||
click(".select-box-header");
|
collapseSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.notOk(selectBox().isExpanded) );
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), false);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -165,10 +156,10 @@ componentTest('accepts custom id/text keys', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-selected .text").html().trim(), "robin");
|
assert.equal(selectBox().selectedRow.text(), "robin");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -181,12 +172,12 @@ componentTest('doesn’t render collection content before first expand', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
assert.equal(find(".select-box-body .collection").length, 0);
|
assert.notOk(exists(find(".collection")));
|
||||||
|
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-body .collection").length, 1);
|
assert.ok(exists(find(".collection")));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -199,25 +190,19 @@ componentTest('persists filter state when expandind/collapsing', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
fillIn('.filter-query', 'rob');
|
|
||||||
triggerEvent('.filter-query', 'keyup');
|
|
||||||
|
|
||||||
andThen(() => {
|
selectBoxFillInFilter("rob");
|
||||||
assert.equal(find(".select-box-row").length, 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
click(".select-box-header");
|
andThen(() => assert.equal(selectBox().rows.length, 1) );
|
||||||
|
|
||||||
andThen(() => {
|
collapseSelectBox();
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), false);
|
|
||||||
});
|
|
||||||
|
|
||||||
click(".select-box-header");
|
andThen(() => assert.notOk(selectBox().isExpanded) );
|
||||||
|
|
||||||
andThen(() => {
|
expandSelectBox();
|
||||||
assert.equal(find(".select-box-row").length, 1);
|
|
||||||
});
|
andThen(() => assert.equal(selectBox().rows.length, 1) );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -229,10 +214,11 @@ componentTest('supports options to limit size', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(parseInt(find(".select-box-body").height()), 20, "it limits the height");
|
const body = find(".select-box-body");
|
||||||
|
assert.equal(parseInt(body.height()), 20, "it limits the height");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -248,11 +234,9 @@ componentTest('supports custom row template', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.equal(selectBox().row(1).el().html(), "<b>robin</b>") );
|
||||||
assert.equal(find(".select-box-row").html().trim(), "<b>robin</b>");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -265,11 +249,9 @@ componentTest('supports converting select value to integer', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.equal(selectBox().selectedRow.text(), "régis") );
|
||||||
assert.equal(find(".select-box-row.is-selected .text").text(), "régis");
|
|
||||||
});
|
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
this.set("value", 3);
|
this.set("value", 3);
|
||||||
|
@ -277,7 +259,7 @@ componentTest('supports converting select value to integer', {
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-selected .text").text(), "jeff", "it works with dynamic content");
|
assert.equal(selectBox().selectedRow.text(), "jeff", "it works with dynamic content");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -290,14 +272,14 @@ componentTest('dynamic headerText', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
andThen(() => {
|
|
||||||
assert.equal(find(".select-box-header .current-selection").html().trim(), "robin");
|
andThen(() => assert.equal(selectBox().header.text(), "robin") );
|
||||||
});
|
|
||||||
|
selectBoxSelectRow(2);
|
||||||
|
|
||||||
click(".select-box-row[title='regis']");
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-header .current-selection").html().trim(), "regis", "it changes header text");
|
assert.equal(selectBox().header.text(), "regis", "it changes header text");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -311,14 +293,16 @@ componentTest('static headerText', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-header .current-selection").html().trim(), "Choose...");
|
assert.equal(selectBox().header.text(), "Choose...");
|
||||||
});
|
});
|
||||||
|
|
||||||
click(".select-box-row[title='regis']");
|
selectBoxSelectRow(2);
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-header .current-selection").html().trim(), "Choose...", "it doesn’t change header text");
|
assert.equal(selectBox().header.text(), "Choose...", "it doesn’t change header text");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -332,11 +316,9 @@ componentTest('supports custom row title', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => assert.equal(selectBox().row(1).title(), "sam") );
|
||||||
assert.equal(find(".select-box-row:first").attr("title"), "sam");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -348,96 +330,60 @@ componentTest('supports keyboard events', {
|
||||||
},
|
},
|
||||||
|
|
||||||
test(assert) {
|
test(assert) {
|
||||||
const arrowDownEvent = () => {
|
expandSelectBox();
|
||||||
const event = jQuery.Event("keydown");
|
|
||||||
event.keyCode = 40;
|
|
||||||
find(".select-box").trigger(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const arrowUpEvent = () => {
|
selectBox().keyboard.down();
|
||||||
const event = jQuery.Event("keydown");
|
|
||||||
event.keyCode = 38;
|
|
||||||
find(".select-box").trigger(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const escapeEvent = () => {
|
|
||||||
const event = jQuery.Event("keydown");
|
|
||||||
event.keyCode = 27;
|
|
||||||
find(".select-box").trigger(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const enterEvent = () => {
|
|
||||||
const event = jQuery.Event("keydown");
|
|
||||||
event.keyCode = 13;
|
|
||||||
find(".select-box").trigger(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabEvent = () => {
|
|
||||||
const event = jQuery.Event("keydown");
|
|
||||||
event.keyCode = 9;
|
|
||||||
find(".select-box").trigger(event);
|
|
||||||
};
|
|
||||||
|
|
||||||
click(".select-box-header");
|
|
||||||
|
|
||||||
andThen(() => arrowDownEvent() );
|
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-highlighted").attr("title"), "robin", "it highlights the first row");
|
assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the first row");
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => arrowDownEvent() );
|
selectBox().keyboard.down();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it highlights the next row");
|
assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the next row");
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => arrowDownEvent() );
|
selectBox().keyboard.down();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it keeps highlighting the last row when reaching the end");
|
assert.equal(selectBox().highlightedRow.title(), "regis", "it keeps highlighting the last row when reaching the end");
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => arrowUpEvent() );
|
selectBox().keyboard.up();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-highlighted").attr("title"), "robin", "it highlights the previous row");
|
assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the previous row");
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => enterEvent() );
|
selectBox().keyboard.enter();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-selected").attr("title"), "robin", "it selects the row when pressing enter");
|
assert.equal(selectBox().selectedRow.title(), "robin", "it selects the row when pressing enter");
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box when selecting a row");
|
assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
|
||||||
});
|
});
|
||||||
|
|
||||||
click(".select-box-header");
|
expandSelectBox();
|
||||||
|
|
||||||
|
selectBox().keyboard.escape();
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), true);
|
assert.notOk(selectBox().isExpanded, "it collapses the select box");
|
||||||
});
|
});
|
||||||
|
|
||||||
andThen(() => escapeEvent() );
|
expandSelectBox();
|
||||||
|
|
||||||
|
selectBoxFillInFilter("regis");
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box");
|
assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the first result");
|
||||||
});
|
});
|
||||||
|
|
||||||
click(".select-box-header");
|
selectBox().keyboard.tab();
|
||||||
andThen(() => {
|
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), true);
|
|
||||||
});
|
|
||||||
|
|
||||||
fillIn(".filter-query", "regis");
|
|
||||||
triggerEvent('.filter-query', 'keyup');
|
|
||||||
andThen(() => {
|
|
||||||
assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it highlights the first result");
|
|
||||||
});
|
|
||||||
|
|
||||||
andThen(() => tabEvent() );
|
|
||||||
|
|
||||||
andThen(() => {
|
andThen(() => {
|
||||||
assert.equal(find(".select-box-row.is-selected").attr("title"), "regis", "it selects the row when pressing tab");
|
assert.equal(selectBox().selectedRow.title(), "regis", "it selects the row when pressing tab");
|
||||||
assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box when selecting a row");
|
assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -18,11 +18,6 @@ Ember.Test.registerAsyncHelper('selectDropdown', function(app, selector, itemId)
|
||||||
$select2.trigger("change");
|
$select2.trigger("change");
|
||||||
});
|
});
|
||||||
|
|
||||||
Ember.Test.registerAsyncHelper('selectBox', function(app, selector, title) {
|
|
||||||
click(selector + ' .select-box-header');
|
|
||||||
click(selector + ' .select-box-row[title="' + title + '"]');
|
|
||||||
});
|
|
||||||
|
|
||||||
function invisible(selector) {
|
function invisible(selector) {
|
||||||
var $items = find(selector + ":visible");
|
var $items = find(selector + ":visible");
|
||||||
return $items.length === 0 ||
|
return $items.length === 0 ||
|
||||||
|
|
|
@ -0,0 +1,121 @@
|
||||||
|
function checkSelectBoxIsNotExpanded(selectBoxSelector) {
|
||||||
|
if (find(selectBoxSelector).hasClass('is-expanded')) {
|
||||||
|
throw 'You expected select-box to be collapsed but it is expanded.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkSelectBoxIsNotCollapsed(selectBoxSelector) {
|
||||||
|
if (!find(selectBoxSelector).hasClass('is-expanded')) {
|
||||||
|
throw 'You expected select-box to be expanded but it is collapsed.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Ember.Test.registerAsyncHelper('expandSelectBox', function(app, selectBoxSelector) {
|
||||||
|
selectBoxSelector = selectBoxSelector || '.select-box';
|
||||||
|
|
||||||
|
checkSelectBoxIsNotExpanded(selectBoxSelector);
|
||||||
|
|
||||||
|
click(selectBoxSelector + ' .select-box-header');
|
||||||
|
});
|
||||||
|
|
||||||
|
Ember.Test.registerAsyncHelper('collapseSelectBox', function(app, selectBoxSelector) {
|
||||||
|
selectBoxSelector = selectBoxSelector || '.select-box';
|
||||||
|
|
||||||
|
checkSelectBoxIsNotCollapsed(selectBoxSelector);
|
||||||
|
|
||||||
|
click(selectBoxSelector + ' .select-box-header');
|
||||||
|
});
|
||||||
|
|
||||||
|
Ember.Test.registerAsyncHelper('selectBoxSelectRow', function(app, rowId, options) {
|
||||||
|
options = options || {};
|
||||||
|
options.selector = options.selector || '.select-box';
|
||||||
|
|
||||||
|
checkSelectBoxIsNotCollapsed(options.selector);
|
||||||
|
|
||||||
|
click(options.selector + " .select-box-row[data-id='" + rowId + "']");
|
||||||
|
});
|
||||||
|
|
||||||
|
Ember.Test.registerAsyncHelper('selectBoxFillInFilter', function(app, filter, options) {
|
||||||
|
options = options || {};
|
||||||
|
options.selector = options.selector || '.select-box';
|
||||||
|
|
||||||
|
checkSelectBoxIsNotCollapsed(options.selector);
|
||||||
|
|
||||||
|
var filterQuerySelector = options.selector + ' .filter-query';
|
||||||
|
fillIn(filterQuerySelector, filter);
|
||||||
|
triggerEvent(filterQuerySelector, 'keyup');
|
||||||
|
});
|
||||||
|
|
||||||
|
function selectBox(selector) { // eslint-disable-line no-unused-vars
|
||||||
|
selector = selector || '.select-box';
|
||||||
|
|
||||||
|
function rowHelper(row) {
|
||||||
|
return {
|
||||||
|
text: function() { return row.find('.text').text().trim(); },
|
||||||
|
icon: function() { return row.find('.d-icon'); },
|
||||||
|
title: function() { return row.attr('title'); },
|
||||||
|
el: function() { return row; }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function headerHelper(header) {
|
||||||
|
return {
|
||||||
|
text: function() { return header.find('.current-selection').text().trim(); },
|
||||||
|
icon: function() { return header.find('.icon'); },
|
||||||
|
title: function() { return header.attr('title'); },
|
||||||
|
el: header
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterHelper(filter) {
|
||||||
|
return {
|
||||||
|
icon: function() { return filter.find('.d-icon'); },
|
||||||
|
exists: function() { return exists(filter); },
|
||||||
|
el: filter
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyboardHelper() {
|
||||||
|
function createEvent(target, keyCode) {
|
||||||
|
if (typeof target !== 'undefined') {
|
||||||
|
selector = find(selector).find(target);
|
||||||
|
}
|
||||||
|
|
||||||
|
andThen(function() {
|
||||||
|
var event = jQuery.Event('keydown');
|
||||||
|
event.keyCode = keyCode;
|
||||||
|
find(selector).trigger(event);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
down: function(target) { createEvent(target, 40); },
|
||||||
|
up: function(target) { createEvent(target, 38); },
|
||||||
|
escape: function(target) { createEvent(target, 27); },
|
||||||
|
enter: function(target) { createEvent(target, 13); },
|
||||||
|
tab: function(target) { createEvent(target, 9); }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
keyboard: keyboardHelper(),
|
||||||
|
|
||||||
|
isExpanded: find(selector).hasClass('is-expanded'),
|
||||||
|
|
||||||
|
isHidden: find(selector).hasClass('is-hidden'),
|
||||||
|
|
||||||
|
header: headerHelper(find(selector).find('.select-box-header')),
|
||||||
|
|
||||||
|
filter: filterHelper(find(selector).find('.select-box-filter')),
|
||||||
|
|
||||||
|
rows: find(selector).find('.select-box-row'),
|
||||||
|
|
||||||
|
row: function(id) {
|
||||||
|
return rowHelper(find(selector).find('.select-box-row[data-id="' + id + '"]'));
|
||||||
|
},
|
||||||
|
|
||||||
|
selectedRow: rowHelper(find(selector).find('.select-box-row.is-selected')),
|
||||||
|
|
||||||
|
highlightedRow: rowHelper(find(selector).find('.select-box-row.is-highlighted'))
|
||||||
|
};
|
||||||
|
}
|
|
@ -32,6 +32,7 @@
|
||||||
//= require sinon-qunit-1.0.0
|
//= require sinon-qunit-1.0.0
|
||||||
|
|
||||||
//= require helpers/assertions
|
//= require helpers/assertions
|
||||||
|
//= require helpers/select-box-helper
|
||||||
|
|
||||||
//= require helpers/qunit-helpers
|
//= require helpers/qunit-helpers
|
||||||
//= require_tree ./fixtures
|
//= require_tree ./fixtures
|
||||||
|
@ -168,4 +169,3 @@ Object.keys(requirejs.entries).forEach(function(entry) {
|
||||||
});
|
});
|
||||||
|
|
||||||
resetSite();
|
resetSite();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue