mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
DEV: refactors select-kit helper to prevent it to leak into global state (#7708)
This commit is contained in:
Joffrey JAFFEUX
GitHub
@@ -1,290 +0,0 @@
|
||||
function checkSelectKitIsNotExpanded(selector) {
|
||||
if (find(selector).hasClass("is-expanded")) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
"You expected select-kit to be collapsed but it is expanded."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function checkSelectKitIsNotCollapsed(selector) {
|
||||
if (!find(selector).hasClass("is-expanded")) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
"You expected select-kit to be expanded but it is collapsed."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Ember.Test.registerAsyncHelper("expandSelectKit", function(app, selector) {
|
||||
checkSelectKitIsNotExpanded(selector);
|
||||
click(selector + " .select-kit-header");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("collapseSelectKit", function(app, selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
click(selector + " .select-kit-header");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("selectKitFillInFilter", function(
|
||||
app,
|
||||
filter,
|
||||
selector
|
||||
) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
fillIn(selector + " .filter-input", filter);
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("selectKitSelectRowByValue", function(
|
||||
app,
|
||||
value,
|
||||
selector
|
||||
) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
click(selector + " .select-kit-row[data-value='" + value + "']");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("selectKitSelectRowByName", function(
|
||||
app,
|
||||
name,
|
||||
selector
|
||||
) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
click(selector + " .select-kit-row[data-name='" + name + "']");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("selectKitSelectNoneRow", function(
|
||||
app,
|
||||
selector
|
||||
) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
click(selector + " .select-kit-row.none");
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("selectKitSelectRowByIndex", function(
|
||||
app,
|
||||
index,
|
||||
selector
|
||||
) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
click(find(selector + " .select-kit-row").eq(index));
|
||||
});
|
||||
|
||||
Ember.Test.registerAsyncHelper("keyboardHelper", function(
|
||||
app,
|
||||
value,
|
||||
target,
|
||||
selector
|
||||
) {
|
||||
function createEvent(element, keyCode, options) {
|
||||
element = element || ".filter-input";
|
||||
selector = find(selector).find(element);
|
||||
options = options || {};
|
||||
|
||||
var type = options.type || "keydown";
|
||||
var event = jQuery.Event(type);
|
||||
event.keyCode = keyCode;
|
||||
if (options && options.metaKey) {
|
||||
event.metaKey = true;
|
||||
}
|
||||
|
||||
andThen(() => {
|
||||
find(selector).trigger(event);
|
||||
});
|
||||
}
|
||||
|
||||
switch (value) {
|
||||
case "enter":
|
||||
return createEvent(target, 13);
|
||||
case "backspace":
|
||||
return createEvent(target, 8);
|
||||
case "selectAll":
|
||||
return createEvent(target, 65, { metaKey: true });
|
||||
case "escape":
|
||||
return createEvent(target, 27);
|
||||
case "down":
|
||||
return createEvent(target, 40);
|
||||
case "up":
|
||||
return createEvent(target, 38);
|
||||
case "tab":
|
||||
return createEvent(target, 9);
|
||||
}
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function selectKit(selector) {
|
||||
selector = selector || ".select-kit";
|
||||
|
||||
function rowHelper(row) {
|
||||
return {
|
||||
name: function() {
|
||||
return row.attr("data-name");
|
||||
},
|
||||
icon: function() {
|
||||
return row.find(".d-icon");
|
||||
},
|
||||
title: function() {
|
||||
return row.attr("title");
|
||||
},
|
||||
value: function() {
|
||||
return row.attr("data-value");
|
||||
},
|
||||
exists: function() {
|
||||
return exists(row);
|
||||
},
|
||||
el: function() {
|
||||
return row;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function headerHelper(header) {
|
||||
return {
|
||||
value: function() {
|
||||
return header.attr("data-value");
|
||||
},
|
||||
name: function() {
|
||||
return header.attr("data-name");
|
||||
},
|
||||
label: function() {
|
||||
return header.text().trim();
|
||||
},
|
||||
icon: function() {
|
||||
return header.find(".icon");
|
||||
},
|
||||
title: function() {
|
||||
return header.attr("title");
|
||||
},
|
||||
el: function() {
|
||||
return header;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function filterHelper(filter) {
|
||||
return {
|
||||
icon: function() {
|
||||
return filter.find(".d-icon");
|
||||
},
|
||||
exists: function() {
|
||||
return exists(filter);
|
||||
},
|
||||
el: function() {
|
||||
return filter;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
expand: function() {
|
||||
return expandSelectKit(selector);
|
||||
},
|
||||
|
||||
collapse: function() {
|
||||
return collapseSelectKit(selector);
|
||||
},
|
||||
|
||||
selectRowByIndex: function(index) {
|
||||
selectKitSelectRowByIndex(index, selector);
|
||||
return selectKit(selector);
|
||||
},
|
||||
|
||||
selectRowByValue: function(value) {
|
||||
return selectKitSelectRowByValue(value, selector);
|
||||
},
|
||||
|
||||
// Remove when stable is updated to Discourse 2.1
|
||||
selectRowByValueAwait: function(value) {
|
||||
return selectKitSelectRowByValue(value, selector);
|
||||
},
|
||||
|
||||
selectRowByName: function(name) {
|
||||
selectKitSelectRowByValue(name, selector);
|
||||
return selectKit(selector);
|
||||
},
|
||||
|
||||
selectNoneRow: function() {
|
||||
return selectKitSelectNoneRow(selector);
|
||||
},
|
||||
|
||||
fillInFilter: function(filter) {
|
||||
return selectKitFillInFilter(filter, selector);
|
||||
},
|
||||
|
||||
keyboard: function(value, target) {
|
||||
return keyboardHelper(value, target, selector);
|
||||
},
|
||||
|
||||
isExpanded: function() {
|
||||
return find(selector).hasClass("is-expanded");
|
||||
},
|
||||
|
||||
isFocused: function() {
|
||||
return find(selector).hasClass("is-focused");
|
||||
},
|
||||
|
||||
isHidden: function() {
|
||||
return find(selector).hasClass("is-hidden");
|
||||
},
|
||||
|
||||
header: function() {
|
||||
return headerHelper(find(selector).find(".select-kit-header"));
|
||||
},
|
||||
|
||||
filter: function() {
|
||||
return filterHelper(find(selector).find(".select-kit-filter"));
|
||||
},
|
||||
|
||||
rows: function() {
|
||||
return find(selector).find(".select-kit-row");
|
||||
},
|
||||
|
||||
rowByValue: function(value) {
|
||||
return rowHelper(
|
||||
find(selector).find('.select-kit-row[data-value="' + value + '"]')
|
||||
);
|
||||
},
|
||||
|
||||
rowByName: function(name) {
|
||||
return rowHelper(
|
||||
find(selector).find('.select-kit-row[data-name="' + name + '"]')
|
||||
);
|
||||
},
|
||||
|
||||
rowByIndex: function(index) {
|
||||
return rowHelper(
|
||||
find(selector).find(".select-kit-row:eq(" + index + ")")
|
||||
);
|
||||
},
|
||||
|
||||
el: function() {
|
||||
return find(selector);
|
||||
},
|
||||
|
||||
noneRow: function() {
|
||||
return rowHelper(find(selector).find(".select-kit-row.none"));
|
||||
},
|
||||
|
||||
validationMessage: function() {
|
||||
var validationMessage = find(selector).find(".validation-message");
|
||||
|
||||
if (validationMessage.length) {
|
||||
return validationMessage.html().trim();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
selectedRow: function() {
|
||||
return rowHelper(find(selector).find(".select-kit-row.is-selected"));
|
||||
},
|
||||
|
||||
highlightedRow: function() {
|
||||
return rowHelper(find(selector).find(".select-kit-row.is-highlighted"));
|
||||
},
|
||||
|
||||
exists: function() {
|
||||
return exists(selector);
|
||||
}
|
||||
};
|
||||
}
|
||||
245
test/javascripts/helpers/select-kit-helper.js.es6
Normal file
245
test/javascripts/helpers/select-kit-helper.js.es6
Normal file
@@ -0,0 +1,245 @@
|
||||
function checkSelectKitIsNotExpanded(selector) {
|
||||
if (find(selector).hasClass("is-expanded")) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn("You expected select-kit to be collapsed but it is expanded.");
|
||||
}
|
||||
}
|
||||
|
||||
function checkSelectKitIsNotCollapsed(selector) {
|
||||
if (!find(selector).hasClass("is-expanded")) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn("You expected select-kit to be expanded but it is collapsed.");
|
||||
}
|
||||
}
|
||||
|
||||
async function expandSelectKit(selector) {
|
||||
checkSelectKitIsNotExpanded(selector);
|
||||
return await click(`${selector} .select-kit-header`);
|
||||
}
|
||||
|
||||
async function collapseSelectKit(selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
return await click(`${selector} .select-kit-header`);
|
||||
}
|
||||
|
||||
async function selectKitFillInFilter(filter, selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
await fillIn(`${selector} .filter-input`, filter);
|
||||
}
|
||||
|
||||
async function selectKitSelectRowByValue(value, selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
await click(`${selector} .select-kit-row[data-value='${value}']`);
|
||||
}
|
||||
|
||||
async function selectKitSelectRowByName(name, selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
await click(`${selector} .select-kit-row[data-name='${name}']`);
|
||||
}
|
||||
|
||||
async function selectKitSelectNoneRow(selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
await click(`${selector} .select-kit-row.none`);
|
||||
}
|
||||
|
||||
async function selectKitSelectRowByIndex(index, selector) {
|
||||
checkSelectKitIsNotCollapsed(selector);
|
||||
await click(find(`${selector} .select-kit-row`).eq(index));
|
||||
}
|
||||
|
||||
async function keyboardHelper(value, target, selector) {
|
||||
target = find(selector).find(target || ".filter-input");
|
||||
|
||||
if (value === "selectAll") {
|
||||
// special casing the only one not working with triggerEvent
|
||||
const event = jQuery.Event("keydown");
|
||||
event.keyCode = 65;
|
||||
event.metaKey = true;
|
||||
target.trigger(event);
|
||||
} else {
|
||||
const mapping = {
|
||||
enter: { keyCode: 13 },
|
||||
backspace: { keyCode: 8 },
|
||||
escape: { keyCode: 27 },
|
||||
down: { keyCode: 40 },
|
||||
up: { keyCode: 38 },
|
||||
tab: { keyCode: 9 }
|
||||
};
|
||||
|
||||
await triggerEvent(target, "keydown", mapping[value]);
|
||||
}
|
||||
}
|
||||
|
||||
function rowHelper(row) {
|
||||
return {
|
||||
name() {
|
||||
return row.attr("data-name");
|
||||
},
|
||||
icon() {
|
||||
return row.find(".d-icon");
|
||||
},
|
||||
title() {
|
||||
return row.attr("title");
|
||||
},
|
||||
value() {
|
||||
return row.attr("data-value");
|
||||
},
|
||||
exists() {
|
||||
return exists(row);
|
||||
},
|
||||
el() {
|
||||
return row;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function headerHelper(header) {
|
||||
return {
|
||||
value() {
|
||||
return header.attr("data-value");
|
||||
},
|
||||
name() {
|
||||
return header.attr("data-name");
|
||||
},
|
||||
label() {
|
||||
return header.text().trim();
|
||||
},
|
||||
icon() {
|
||||
return header.find(".icon");
|
||||
},
|
||||
title() {
|
||||
return header.attr("title");
|
||||
},
|
||||
el() {
|
||||
return header;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function filterHelper(filter) {
|
||||
return {
|
||||
icon() {
|
||||
return filter.find(".d-icon");
|
||||
},
|
||||
exists() {
|
||||
return exists(filter);
|
||||
},
|
||||
el() {
|
||||
return filter;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default function selectKit(selector) {
|
||||
selector = selector || ".select-kit";
|
||||
|
||||
return {
|
||||
async expand() {
|
||||
await expandSelectKit(selector);
|
||||
},
|
||||
|
||||
async collapse() {
|
||||
await collapseSelectKit(selector);
|
||||
},
|
||||
|
||||
async selectRowByIndex(index) {
|
||||
await selectKitSelectRowByIndex(index, selector);
|
||||
},
|
||||
|
||||
async selectRowByValue(value) {
|
||||
await selectKitSelectRowByValue(value, selector);
|
||||
},
|
||||
|
||||
async selectKitSelectRowByName(name) {
|
||||
await selectKitSelectRowByName(name, selector);
|
||||
},
|
||||
|
||||
async selectRowByName(name) {
|
||||
await selectKitSelectRowByValue(name, selector);
|
||||
},
|
||||
|
||||
async selectNoneRow() {
|
||||
await selectKitSelectNoneRow(selector);
|
||||
},
|
||||
|
||||
async fillInFilter(filter) {
|
||||
await selectKitFillInFilter(filter, selector);
|
||||
},
|
||||
|
||||
async keyboard(value, target) {
|
||||
await keyboardHelper(value, target, selector);
|
||||
},
|
||||
|
||||
isExpanded() {
|
||||
return find(selector).hasClass("is-expanded");
|
||||
},
|
||||
|
||||
isFocused() {
|
||||
return find(selector).hasClass("is-focused");
|
||||
},
|
||||
|
||||
isHidden() {
|
||||
return find(selector).hasClass("is-hidden");
|
||||
},
|
||||
|
||||
header() {
|
||||
return headerHelper(find(selector).find(".select-kit-header"));
|
||||
},
|
||||
|
||||
filter() {
|
||||
return filterHelper(find(selector).find(".select-kit-filter"));
|
||||
},
|
||||
|
||||
rows() {
|
||||
return find(selector).find(".select-kit-row");
|
||||
},
|
||||
|
||||
rowByValue(value) {
|
||||
return rowHelper(
|
||||
find(selector).find('.select-kit-row[data-value="' + value + '"]')
|
||||
);
|
||||
},
|
||||
|
||||
rowByName(name) {
|
||||
return rowHelper(
|
||||
find(selector).find('.select-kit-row[data-name="' + name + '"]')
|
||||
);
|
||||
},
|
||||
|
||||
rowByIndex(index) {
|
||||
return rowHelper(
|
||||
find(selector).find(".select-kit-row:eq(" + index + ")")
|
||||
);
|
||||
},
|
||||
|
||||
el() {
|
||||
return find(selector);
|
||||
},
|
||||
|
||||
noneRow() {
|
||||
return rowHelper(find(selector).find(".select-kit-row.none"));
|
||||
},
|
||||
|
||||
validationMessage() {
|
||||
const validationMessage = find(selector).find(".validation-message");
|
||||
|
||||
if (validationMessage.length) {
|
||||
return validationMessage.html().trim();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
selectedRow() {
|
||||
return rowHelper(find(selector).find(".select-kit-row.is-selected"));
|
||||
},
|
||||
|
||||
highlightedRow() {
|
||||
return rowHelper(find(selector).find(".select-kit-row.is-highlighted"));
|
||||
},
|
||||
|
||||
exists() {
|
||||
return exists(selector);
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user