discourse/test/javascripts/helpers/select-kit-helper.js

329 lines
7.2 KiB
JavaScript

import { isEmpty } from "@ember/utils";
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`,
find(`${selector} .filter-input`).val() + filter
);
}
async function selectKitEmptyFilter(selector) {
checkSelectKitIsNotCollapsed(selector);
await fillIn(`${selector} .filter-input`, "");
}
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] || { keyCode: value.charCodeAt(0) }
);
}
}
function rowHelper(row) {
return {
name() {
return row.attr("data-name");
},
icon() {
return row.find(".d-icon");
},
title() {
return row.attr("title");
},
label() {
return row
.find(".name")
.text()
.trim();
},
value() {
const value = row.attr("data-value");
return isEmpty(value) ? null : value;
},
exists() {
return exists(row);
},
el() {
return row;
}
};
}
function headerHelper(header) {
return {
value() {
const value = header.attr("data-value");
return isEmpty(value) ? null : value;
},
name() {
return header.attr("data-name");
},
label() {
return header.text().trim();
},
icon() {
return header.find(".d-icon");
},
title() {
return header.find(".selected-name").attr("title");
},
el() {
return header;
}
};
}
function filterHelper(filter) {
return {
icon() {
return filter.find(".d-icon");
},
exists() {
return exists(filter);
},
value() {
return filter.find("input").val();
},
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 selectKitSelectRowByName(name, selector);
},
async selectNoneRow() {
await selectKitSelectNoneRow(selector);
},
async fillInFilter(filter) {
await selectKitFillInFilter(filter, selector);
},
async emptyFilter() {
await selectKitEmptyFilter(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");
},
displayedContent() {
return this.rows()
.map((_, row) => {
return {
name: row.getAttribute("data-name"),
id: row.getAttribute("data-value")
};
})
.toArray();
},
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"));
},
async deselectItem(value) {
await click(
find(selector)
.find(".select-kit-header")
.find(`[data-value=${value}]`)
);
},
exists() {
return exists(selector);
}
};
}
export function testSelectKitModule(moduleName, options = {}) {
moduleForComponent(`select-kit/${moduleName}`, {
integration: true,
beforeEach() {
this.set("subject", selectKit());
options.beforeEach && options.beforeEach.call(this);
},
afterEach() {
options.afterEach && options.afterEach.call(this);
}
});
}
export const DEFAULT_CONTENT = [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" }
];
export function setDefaultState(ctx, value, options = {}) {
const properties = Object.assign(
{
value,
onChange: v => {
ctx.set("value", v);
}
},
options || {}
);
ctx.setProperties(properties);
}