DEV: refactors select-kit helper to prevent it to leak into global state (#7708)

This commit is contained in:
Joffrey JAFFEUX 2019-06-06 10:47:10 +02:00 committed by GitHub
parent 782da448a2
commit b339d67401
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 299 additions and 307 deletions

View File

@ -53,12 +53,6 @@
"requirejs": true,
"RSVP": true,
"sandbox": true,
"selectKit": true,
"selectKitFillInFilter": true,
"selectKitSelectNoneRow": true,
"selectKitSelectRowByIndex": true,
"selectKitSelectRowByName": true,
"selectKitSelectRowByValue": true,
"sinon": true,
"test": true,
"triggerEvent": true,

View File

@ -1,5 +1,6 @@
import { acceptance } from "helpers/qunit-helpers";
import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
import selectKit from "helpers/select-kit-helper";
acceptance("Details Button", {
loggedIn: true,

View File

@ -1,3 +1,5 @@
import selectKit from "helpers/select-kit-helper";
export function displayPollBuilderButton() {
visit("/");
click("#create-topic");

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Admin - Suspend User", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("CategoryChooser", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Category Edit - security", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import DiscourseURL from "discourse/lib/url";
import { acceptance } from "helpers/qunit-helpers";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, replaceCurrentUser } from "helpers/qunit-helpers";
import { _clearSnapshots } from "select-kit/components/composer-actions";
import { toggleCheckDraftPopup } from "discourse/controllers/composer";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
import { toggleCheckDraftPopup } from "discourse/controllers/composer";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, replaceCurrentUser } from "helpers/qunit-helpers";
acceptance("Composer and uncategorized is not allowed", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Dashboard", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, logIn } from "helpers/qunit-helpers";
acceptance("Group", {
@ -48,7 +49,7 @@ QUnit.test("Anonymous Viewing Group", async assert => {
);
assert.ok(count(".user-stream-item") > 0, "it lists stream items");
await expandSelectKit(".group-dropdown");
await selectKit(".group-dropdown").expand();
assert.equal(
find(".select-kit-row")
@ -70,7 +71,7 @@ QUnit.test("Anonymous Viewing Group", async assert => {
await visit("/g");
await visit("/g/discourse");
await expandSelectKit(".group-dropdown");
await selectKit(".group-dropdown").expand();
assert.equal(
find(".group-dropdown-filter").length,

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, logIn } from "helpers/qunit-helpers";
acceptance("New Topic");

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
import User from "discourse/models/user";
@ -114,12 +115,12 @@ QUnit.test("font size change", async assert => {
await visit("/u/eviltrout/preferences/interface");
// Live changes without reload
await expandSelectKit(".text-size .combobox");
await selectKitSelectRowByValue("larger", ".text-size .combobox");
await selectKit(".text-size .combobox").expand();
await selectKit(".text-size .combobox").selectRowByValue("larger");
assert.ok(document.documentElement.classList.contains("text-size-larger"));
await expandSelectKit(".text-size .combobox");
await selectKitSelectRowByValue("largest", ".text-size .combobox");
await selectKit(".text-size .combobox").expand();
await selectKit(".text-size .combobox").selectRowByValue("largest");
assert.ok(document.documentElement.classList.contains("text-size-largest"));
assert.equal($.cookie("text_size"), null, "cookie is not set");
@ -129,16 +130,16 @@ QUnit.test("font size change", async assert => {
assert.equal($.cookie("text_size"), null, "cookie is not set");
await expandSelectKit(".text-size .combobox");
await selectKitSelectRowByValue("larger", ".text-size .combobox");
await selectKit(".text-size .combobox").expand();
await selectKit(".text-size .combobox").selectRowByValue("larger");
await click(".text-size input[type=checkbox]");
await savePreferences();
assert.equal($.cookie("text_size"), "larger|1", "cookie is set");
await click(".text-size input[type=checkbox]");
await expandSelectKit(".text-size .combobox");
await selectKitSelectRowByValue("largest", ".text-size .combobox");
await selectKit(".text-size .combobox").expand();
await selectKit(".text-size .combobox").selectRowByValue("largest");
await savePreferences();
assert.equal($.cookie("text_size"), null, "cookie is removed");

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Review", {

View File

@ -1,4 +1,6 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, waitFor } from "helpers/qunit-helpers";
acceptance("Search - Full Page", {
settings: { tagging_enabled: true },
loggedIn: true,

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, logIn } from "helpers/qunit-helpers";
const emptySearchContextCallbacks = [];

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Share and Invite modal - mobile", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Shared Drafts", { loggedIn: true });

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Tag Groups", {

View File

@ -1,4 +1,6 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance, replaceCurrentUser } from "helpers/qunit-helpers";
acceptance("Topic - Edit timer", {
loggedIn: true,
pretend(server, helper) {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { withPluginApi } from "discourse/lib/plugin-api";
import { clearTopicFooterButtons } from "discourse/lib/register-topic-footer-button";
import { acceptance } from "helpers/qunit-helpers";

View File

@ -1,4 +1,6 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
acceptance("Topic Notifications button", {
loggedIn: true,
pretend(server, helper) {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import { acceptance } from "helpers/qunit-helpers";
import { IMAGE_VERSION as v } from "pretty-text/emoji/version";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("group-list", { integration: true });

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("categories-admin-dropdown", { integration: true });

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("category-chooser", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import Category from "discourse/models/category";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import Category from "discourse/models/category";

View File

@ -1,4 +1,6 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("combo-box", {
integration: true,
beforeEach: function() {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("list-setting", { integration: true });

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("mini-tag-chooser", {

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import { withPluginApi } from "discourse/lib/plugin-api";
import { clearCallbacks } from "select-kit/mixins/plugin-api";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import Topic from "discourse/models/topic";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import { withPluginApi } from "discourse/lib/plugin-api";
import { clearCallbacks } from "select-kit/mixins/plugin-api";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import DiscourseURL from "discourse/lib/url";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import Topic from "discourse/models/topic";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import Topic from "discourse/models/topic";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
import Topic from "discourse/models/topic";

View File

@ -1,3 +1,4 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("value-list", { integration: true });

View File

@ -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);
}
};
}

View 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);
}
};
}

View File

@ -30,7 +30,6 @@
//= require sinon/pkg/sinon
//= require helpers/assertions
//= require helpers/select-kit-helper
//= require helpers/qunit-helpers
//= require_tree ./fixtures