DEV: select-kit 2 (#7998)

This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component.

Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**
This commit is contained in:
Joffrey JAFFEUX
2020-02-03 14:22:14 +01:00
committed by GitHub
parent 0e2cbee339
commit 0431942f3d
278 changed files with 7566 additions and 6957 deletions

View File

@ -14,59 +14,46 @@ test("isMultiple", function(assert) {
const controller = this.subject();
controller.setProperties({
pollType: controller.get("multiplePollType"),
pollType: controller.multiplePollType,
pollOptionsCount: 1
});
assert.equal(controller.get("isMultiple"), true, "it should be true");
assert.equal(controller.isMultiple, true, "it should be true");
controller.set("pollOptionsCount", 0);
assert.equal(controller.get("isMultiple"), false, "it should be false");
assert.equal(controller.isMultiple, false, "it should be false");
controller.setProperties({ pollType: "random", pollOptionsCount: 1 });
assert.equal(controller.get("isMultiple"), false, "it should be false");
assert.equal(controller.isMultiple, false, "it should be false");
});
test("isNumber", function(assert) {
const controller = this.subject();
controller.siteSettings = Discourse.SiteSettings;
controller.set("pollType", "random");
controller.set("pollType", controller.regularPollType);
assert.equal(controller.get("isNumber"), false, "it should be false");
assert.equal(controller.isNumber, false, "it should be false");
controller.set("pollType", controller.get("numberPollType"));
controller.set("pollType", controller.numberPollType);
assert.equal(controller.get("isNumber"), true, "it should be true");
assert.equal(controller.isNumber, true, "it should be true");
});
test("showMinMax", function(assert) {
const controller = this.subject();
controller.siteSettings = Discourse.SiteSettings;
controller.setProperties({
isNumber: true,
isMultiple: false
});
controller.set("pollType", controller.numberPollType);
assert.equal(controller.showMinMax, true, "it should be true");
assert.equal(controller.get("showMinMax"), true, "it should be true");
controller.set("pollType", controller.multiplePollType);
assert.equal(controller.showMinMax, true, "it should be true");
controller.setProperties({
isNumber: false,
isMultiple: true
});
assert.equal(controller.get("showMinMax"), true, "it should be true");
controller.setProperties({
isNumber: false,
isMultiple: false,
isRegular: true
});
assert.equal(controller.get("showMinMax"), false, "it should be false");
controller.set("pollType", controller.regularPollType);
assert.equal(controller.showMinMax, false, "it should be false");
});
test("pollOptionsCount", function(assert) {
@ -75,11 +62,11 @@ test("pollOptionsCount", function(assert) {
controller.set("pollOptions", "1\n2\n");
assert.equal(controller.get("pollOptionsCount"), 2, "it should equal 2");
assert.equal(controller.pollOptionsCount, 2, "it should equal 2");
controller.set("pollOptions", "");
assert.equal(controller.get("pollOptionsCount"), 0, "it should equal 0");
assert.equal(controller.pollOptionsCount, 0, "it should equal 0");
});
test("pollMinOptions", function(assert) {
@ -87,12 +74,12 @@ test("pollMinOptions", function(assert) {
controller.siteSettings = Discourse.SiteSettings;
controller.setProperties({
isMultiple: true,
pollType: controller.multiplePollType,
pollOptionsCount: 1
});
assert.deepEqual(
controller.get("pollMinOptions"),
controller.pollMinOptions,
[{ name: 1, value: 1 }],
"it should return the right options"
);
@ -100,7 +87,7 @@ test("pollMinOptions", function(assert) {
controller.set("pollOptionsCount", 2);
assert.deepEqual(
controller.get("pollMinOptions"),
controller.pollMinOptions,
[
{ name: 1, value: 1 },
{ name: 2, value: 2 }
@ -108,11 +95,11 @@ test("pollMinOptions", function(assert) {
"it should return the right options"
);
controller.set("isNumber", true);
controller.set("pollType", controller.numberPollType);
controller.siteSettings.poll_maximum_options = 2;
assert.deepEqual(
controller.get("pollMinOptions"),
controller.pollMinOptions,
[
{ name: 1, value: 1 },
{ name: 2, value: 2 }
@ -126,13 +113,13 @@ test("pollMaxOptions", function(assert) {
controller.siteSettings = Discourse.SiteSettings;
controller.setProperties({
isMultiple: true,
pollType: controller.multiplePollType,
pollOptionsCount: 1,
pollMin: 1
});
assert.deepEqual(
controller.get("pollMaxOptions"),
controller.pollMaxOptions,
[],
"it should return the right options"
);
@ -140,21 +127,20 @@ test("pollMaxOptions", function(assert) {
controller.set("pollOptionsCount", 2);
assert.deepEqual(
controller.get("pollMaxOptions"),
controller.pollMaxOptions,
[{ name: 2, value: 2 }],
"it should return the right options"
);
controller.siteSettings.poll_maximum_options = 3;
controller.setProperties({
isMultiple: false,
isNumber: true,
pollType: controller.get("numberPollType"),
pollStep: 2,
pollMin: 1
});
assert.deepEqual(
controller.get("pollMaxOptions"),
controller.pollMaxOptions,
[
{ name: 2, value: 2 },
{ name: 3, value: 3 },
@ -171,18 +157,12 @@ test("pollStepOptions", function(assert) {
controller.siteSettings = Discourse.SiteSettings;
controller.siteSettings.poll_maximum_options = 3;
controller.set("isNumber", false);
assert.equal(controller.pollStepOptions, null, "is should return null");
assert.equal(
controller.get("pollStepOptions"),
null,
"is should return null"
);
controller.setProperties({ isNumber: true });
controller.set("pollType", controller.numberPollType);
assert.deepEqual(
controller.get("pollStepOptions"),
controller.pollStepOptions,
[
{ name: 1, value: 1 },
{ name: 2, value: 2 },
@ -196,25 +176,29 @@ test("disableInsert", function(assert) {
const controller = this.subject();
controller.siteSettings = Discourse.SiteSettings;
controller.setProperties({ isRegular: true });
assert.equal(controller.disableInsert, true, "it should be true");
assert.equal(controller.get("disableInsert"), true, "it should be true");
controller.set("pollOptionsCount", 2);
controller.setProperties({ isRegular: true, pollOptionsCount: 2 });
assert.equal(controller.disableInsert, false, "it should be false");
assert.equal(controller.get("disableInsert"), false, "it should be false");
controller.set("pollType", controller.numberPollType);
controller.setProperties({ isNumber: true });
assert.equal(controller.disableInsert, false, "it should be false");
assert.equal(controller.get("disableInsert"), false, "it should be false");
controller.setProperties({
pollType: controller.regularPollType,
pollOptionsCount: 3
});
controller.setProperties({ isNumber: false, pollOptionsCount: 3 });
assert.equal(controller.disableInsert, false, "it should be false");
assert.equal(controller.get("disableInsert"), false, "it should be false");
controller.setProperties({
pollType: controller.regularPollType,
pollOptionsCount: 1
});
controller.setProperties({ isNumber: false, pollOptionsCount: 1 });
assert.equal(controller.get("disableInsert"), true, "it should be true");
assert.equal(controller.disableInsert, true, "it should be true");
});
test("number pollOutput", function(assert) {
@ -223,13 +207,12 @@ test("number pollOutput", function(assert) {
controller.siteSettings.poll_maximum_options = 20;
controller.setProperties({
isNumber: true,
pollType: controller.get("numberPollType"),
pollType: controller.numberPollType,
pollMin: 1
});
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=number min=1 max=20 step=1]\n[/poll]\n",
"it should return the right output"
);
@ -237,7 +220,7 @@ test("number pollOutput", function(assert) {
controller.set("pollStep", 2);
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=number min=1 max=20 step=2]\n[/poll]\n",
"it should return the right output"
);
@ -245,7 +228,7 @@ test("number pollOutput", function(assert) {
controller.set("publicPoll", true);
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=number min=1 max=20 step=2 public=true]\n[/poll]\n",
"it should return the right output"
);
@ -253,7 +236,7 @@ test("number pollOutput", function(assert) {
controller.set("pollStep", 0);
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=number min=1 max=20 step=1 public=true]\n[/poll]\n",
"it should return the right output"
);
@ -267,11 +250,11 @@ test("regular pollOutput", function(assert) {
controller.set("pollOptions", "1\n2");
controller.setProperties({
pollOptions: "1\n2",
pollType: controller.get("regularPollType")
pollType: controller.regularPollType
});
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=regular chartType=bar]\n* 1\n* 2\n[/poll]\n",
"it should return the right output"
);
@ -279,7 +262,7 @@ test("regular pollOutput", function(assert) {
controller.set("publicPoll", "true");
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=regular public=true chartType=bar]\n* 1\n* 2\n[/poll]\n",
"it should return the right output"
);
@ -300,13 +283,13 @@ test("multiple pollOutput", function(assert) {
controller.setProperties({
isMultiple: true,
pollType: controller.get("multiplePollType"),
pollType: controller.multiplePollType,
pollMin: 1,
pollOptions: "\n\n1\n\n2"
});
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=multiple min=1 max=2 chartType=bar]\n* 1\n* 2\n[/poll]\n",
"it should return the right output"
);
@ -314,7 +297,7 @@ test("multiple pollOutput", function(assert) {
controller.set("publicPoll", "true");
assert.equal(
controller.get("pollOutput"),
controller.pollOutput,
"[poll type=multiple min=1 max=2 public=true chartType=bar]\n* 1\n* 2\n[/poll]\n",
"it should return the right output"
);
@ -325,8 +308,7 @@ test("staff_only option is not present for non-staff", function(assert) {
controller.currentUser = { staff: false };
assert.ok(
controller.pollResults.filter(result => result.value === "staff_only")
.length === 0,
controller.pollResults.filterBy("value", "staff_only").length === 0,
"staff_only is not present"
);
});
@ -336,8 +318,7 @@ test("staff_only option is present for staff", function(assert) {
controller.currentUser = { staff: true };
assert.ok(
controller.pollResults.filter(result => result.value === "staff_only")
.length === 1,
controller.pollResults.filterBy("value", "staff_only").length === 1,
"staff_only is present"
);
});