mirror of
https://github.com/discourse/discourse.git
synced 2025-05-30 15:28:37 +08:00
DEV: Convert poll modals to new component-based API (#22164)
This commit is contained in:
David Taylor
214
plugins/poll/test/javascripts/component/poll-ui-builder-test.js
Normal file
214
plugins/poll/test/javascripts/component/poll-ui-builder-test.js
Normal file
@ -0,0 +1,214 @@
|
||||
import { module, test } from "qunit";
|
||||
import { click, fillIn, render } from "@ember/test-helpers";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
import selectKit from "discourse/tests/helpers/select-kit-helper";
|
||||
|
||||
async function setupBuilder(context) {
|
||||
const results = [];
|
||||
const model = {
|
||||
toolbarEvent: { getText: () => "", addText: (t) => results.push(t) },
|
||||
};
|
||||
context.model = model;
|
||||
await render(
|
||||
hbs`<Modal::PollUiBuilder @inline={{true}} @model={{this.model}} @closeModal={{fn (mut this.closeCalled) true}} />`
|
||||
);
|
||||
return results;
|
||||
}
|
||||
|
||||
module("Poll | Component | poll-ui-builder", function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("Can switch poll type", async function (assert) {
|
||||
await setupBuilder(this);
|
||||
|
||||
assert.dom(".poll-type-value-regular").hasClass("active");
|
||||
|
||||
await click(".poll-type-value-multiple");
|
||||
assert
|
||||
.dom(".poll-type-value-multiple")
|
||||
.hasClass("active", "can switch to 'multiple' type");
|
||||
|
||||
assert
|
||||
.dom(".poll-type-value-number")
|
||||
.doesNotExist("number type is hidden by default");
|
||||
|
||||
await click(".show-advanced");
|
||||
assert
|
||||
.dom(".poll-type-value-number")
|
||||
.exists("number type appears in advanced mode");
|
||||
|
||||
await click(".poll-type-value-number");
|
||||
assert
|
||||
.dom(".poll-type-value-number")
|
||||
.hasClass("active", "can switch to 'number' type");
|
||||
});
|
||||
|
||||
test("Automatically updates min/max when number of options change", async function (assert) {
|
||||
await setupBuilder(this);
|
||||
|
||||
await click(".poll-type-value-multiple");
|
||||
assert.dom(".poll-options-min").hasValue("0");
|
||||
assert.dom(".poll-options-max").hasValue("0");
|
||||
|
||||
await fillIn(".poll-option-value input", "a");
|
||||
assert.dom(".poll-options-min").hasValue("1");
|
||||
assert.dom(".poll-options-max").hasValue("1");
|
||||
|
||||
await click(".poll-option-add");
|
||||
|
||||
await fillIn(".poll-option-value:nth-of-type(2) input", "b");
|
||||
assert.dom(".poll-options-min").hasValue("1");
|
||||
assert.dom(".poll-options-max").hasValue("2");
|
||||
});
|
||||
|
||||
test("disables save button", async function (assert) {
|
||||
this.siteSettings.poll_maximum_options = 3;
|
||||
|
||||
await setupBuilder(this);
|
||||
assert
|
||||
.dom(".insert-poll")
|
||||
.isDisabled("Insert button disabled when no options specified");
|
||||
|
||||
await fillIn(".poll-option-value input", "a");
|
||||
assert
|
||||
.dom(".insert-poll")
|
||||
.isEnabled("Insert button enabled once an option is specified");
|
||||
|
||||
await click(".poll-option-add");
|
||||
await fillIn(".poll-option-value:nth-of-type(2) input", "b");
|
||||
await click(".poll-option-add");
|
||||
await fillIn(".poll-option-value:nth-of-type(3) input", "c");
|
||||
await click(".poll-option-add");
|
||||
await fillIn(".poll-option-value:nth-of-type(4) input", "d");
|
||||
|
||||
assert
|
||||
.dom(".insert-poll")
|
||||
.isDisabled("Insert button disabled when too many options");
|
||||
});
|
||||
|
||||
test("number mode", async function (assert) {
|
||||
const results = await setupBuilder(this);
|
||||
|
||||
await click(".show-advanced");
|
||||
await click(".poll-type-value-number");
|
||||
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=number results=always min=1 max=20 step=1]\n[/poll]\n"
|
||||
);
|
||||
|
||||
await fillIn(".poll-options-step", "2");
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=number results=always min=1 max=20 step=2]\n[/poll]\n",
|
||||
"includes step value"
|
||||
);
|
||||
|
||||
await click(".poll-toggle-public");
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=number results=always min=1 max=20 step=2 public=true]\n[/poll]\n",
|
||||
"includes public boolean"
|
||||
);
|
||||
|
||||
await fillIn(".poll-options-step", "0");
|
||||
assert
|
||||
.dom(".insert-poll")
|
||||
.isDisabled("Insert button disabled when step is 0");
|
||||
});
|
||||
|
||||
test("regular mode", async function (assert) {
|
||||
const results = await setupBuilder(this);
|
||||
|
||||
await fillIn(".poll-option-value input", "a");
|
||||
await click(".poll-option-add");
|
||||
await fillIn(".poll-option-value:nth-of-type(2) input", "b");
|
||||
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=regular results=always chartType=bar]\n* a\n* b\n[/poll]\n",
|
||||
"has correct output"
|
||||
);
|
||||
|
||||
await click(".show-advanced");
|
||||
|
||||
await click(".poll-toggle-public");
|
||||
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=regular results=always public=true chartType=bar]\n* a\n* b\n[/poll]\n",
|
||||
"has public boolean"
|
||||
);
|
||||
|
||||
const groupChooser = selectKit(".group-chooser");
|
||||
await groupChooser.expand();
|
||||
await groupChooser.selectRowByName("custom_group");
|
||||
await groupChooser.collapse();
|
||||
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=regular results=always public=true chartType=bar groups=custom_group]\n* a\n* b\n[/poll]\n",
|
||||
"has groups"
|
||||
);
|
||||
});
|
||||
|
||||
test("multi-choice mode", async function (assert) {
|
||||
const results = await setupBuilder(this);
|
||||
|
||||
await click(".poll-type-value-multiple");
|
||||
|
||||
await fillIn(".poll-option-value input", "a");
|
||||
await click(".poll-option-add");
|
||||
await fillIn(".poll-option-value:nth-of-type(2) input", "b");
|
||||
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=multiple results=always min=1 max=2 chartType=bar]\n* a\n* b\n[/poll]\n",
|
||||
"has correct output"
|
||||
);
|
||||
|
||||
await click(".show-advanced");
|
||||
|
||||
await click(".poll-toggle-public");
|
||||
|
||||
await click(".insert-poll");
|
||||
assert.strictEqual(
|
||||
results[results.length - 1],
|
||||
"[poll type=multiple results=always min=1 max=2 public=true chartType=bar]\n* a\n* b\n[/poll]\n",
|
||||
"has public boolean"
|
||||
);
|
||||
});
|
||||
|
||||
test("staff_only option is not present for non-staff", async function (assert) {
|
||||
await setupBuilder(this);
|
||||
|
||||
await click(".show-advanced");
|
||||
const resultVisibility = selectKit(".poll-result");
|
||||
|
||||
assert.strictEqual(resultVisibility.header().value(), "always");
|
||||
|
||||
await resultVisibility.expand();
|
||||
assert.false(
|
||||
resultVisibility.rowByValue("staff_only").exists(),
|
||||
"staff_only is not visible to normal users"
|
||||
);
|
||||
await resultVisibility.collapse();
|
||||
|
||||
this.currentUser.setProperties({ admin: true });
|
||||
|
||||
await resultVisibility.expand();
|
||||
assert.true(
|
||||
resultVisibility.rowByValue("staff_only").exists(),
|
||||
"staff_only is visible to staff"
|
||||
);
|
||||
await resultVisibility.collapse();
|
||||
});
|
||||
});
|
||||
@ -1,205 +0,0 @@
|
||||
import { module, test } from "qunit";
|
||||
import { setupTest } from "ember-qunit";
|
||||
import {
|
||||
MULTIPLE_POLL_TYPE,
|
||||
NUMBER_POLL_TYPE,
|
||||
REGULAR_POLL_TYPE,
|
||||
} from "discourse/plugins/poll/discourse/controllers/poll-ui-builder";
|
||||
import { settled } from "@ember/test-helpers";
|
||||
|
||||
function setupController(ctx) {
|
||||
const controller = ctx.owner.lookup("controller:poll-ui-builder");
|
||||
controller.set("toolbarEvent", { getText: () => "" });
|
||||
controller.onShow();
|
||||
return controller;
|
||||
}
|
||||
|
||||
module("Unit | Controller | poll-ui-builder", function (hooks) {
|
||||
setupTest(hooks);
|
||||
|
||||
test("isMultiple", function (assert) {
|
||||
const controller = setupController(this);
|
||||
|
||||
controller.setProperties({
|
||||
pollType: MULTIPLE_POLL_TYPE,
|
||||
pollOptions: [{ value: "a" }],
|
||||
});
|
||||
assert.strictEqual(controller.isMultiple, true, "it should be true");
|
||||
|
||||
controller.setProperties({
|
||||
pollType: "random",
|
||||
pollOptions: [{ value: "b" }],
|
||||
});
|
||||
assert.strictEqual(controller.isMultiple, false, "it should be false");
|
||||
});
|
||||
|
||||
test("isNumber", function (assert) {
|
||||
const controller = setupController(this);
|
||||
|
||||
controller.set("pollType", REGULAR_POLL_TYPE);
|
||||
assert.strictEqual(controller.isNumber, false, "it should be false");
|
||||
|
||||
controller.set("pollType", NUMBER_POLL_TYPE);
|
||||
assert.strictEqual(controller.isNumber, true, "it should be true");
|
||||
});
|
||||
|
||||
test("pollOptionsCount", function (assert) {
|
||||
const controller = setupController(this);
|
||||
|
||||
controller.set("pollOptions", [{ value: "1" }, { value: "2" }]);
|
||||
assert.strictEqual(controller.pollOptionsCount, 2, "it should equal 2");
|
||||
|
||||
controller.set("pollOptions", []);
|
||||
assert.strictEqual(controller.pollOptionsCount, 0, "it should equal 0");
|
||||
});
|
||||
|
||||
test("disableInsert", function (assert) {
|
||||
const controller = setupController(this);
|
||||
|
||||
controller.siteSettings.poll_maximum_options = 20;
|
||||
assert.strictEqual(controller.disableInsert, true, "it should be true");
|
||||
|
||||
controller.set("pollOptions", [{ value: "a" }, { value: "b" }]);
|
||||
assert.strictEqual(controller.disableInsert, false, "it should be false");
|
||||
|
||||
controller.set("pollType", NUMBER_POLL_TYPE);
|
||||
assert.strictEqual(controller.disableInsert, false, "it should be false");
|
||||
|
||||
controller.setProperties({
|
||||
pollType: REGULAR_POLL_TYPE,
|
||||
pollOptions: [{ value: "a" }, { value: "b" }, { value: "c" }],
|
||||
});
|
||||
assert.strictEqual(controller.disableInsert, false, "it should be false");
|
||||
|
||||
controller.setProperties({
|
||||
pollType: REGULAR_POLL_TYPE,
|
||||
pollOptions: [],
|
||||
});
|
||||
assert.strictEqual(controller.disableInsert, true, "it should be true");
|
||||
|
||||
controller.setProperties({
|
||||
pollType: REGULAR_POLL_TYPE,
|
||||
pollOptions: [{ value: "w" }],
|
||||
});
|
||||
assert.strictEqual(controller.disableInsert, false, "it should be false");
|
||||
});
|
||||
|
||||
test("number pollOutput", async function (assert) {
|
||||
const controller = setupController(this);
|
||||
controller.siteSettings.poll_maximum_options = 20;
|
||||
|
||||
controller.setProperties({
|
||||
pollType: NUMBER_POLL_TYPE,
|
||||
pollMin: 1,
|
||||
});
|
||||
await settled();
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=number results=always min=1 max=20 step=1]\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
|
||||
controller.set("pollStep", 2);
|
||||
await settled();
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=number results=always min=1 max=20 step=2]\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
|
||||
controller.set("publicPoll", true);
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=number results=always min=1 max=20 step=2 public=true]\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
|
||||
controller.set("pollStep", 0);
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=number results=always min=1 max=20 step=1 public=true]\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
});
|
||||
|
||||
test("regular pollOutput", function (assert) {
|
||||
const controller = setupController(this);
|
||||
controller.siteSettings.poll_maximum_options = 20;
|
||||
|
||||
controller.setProperties({
|
||||
pollOptions: [{ value: "1" }, { value: "2" }],
|
||||
pollType: REGULAR_POLL_TYPE,
|
||||
});
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=regular results=always chartType=bar]\n* 1\n* 2\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
|
||||
controller.set("publicPoll", "true");
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=regular results=always public=true chartType=bar]\n* 1\n* 2\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
|
||||
controller.set("pollGroups", "test");
|
||||
assert.strictEqual(
|
||||
controller.get("pollOutput"),
|
||||
"[poll type=regular results=always public=true chartType=bar groups=test]\n* 1\n* 2\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
});
|
||||
|
||||
test("multiple pollOutput", function (assert) {
|
||||
const controller = setupController(this);
|
||||
controller.siteSettings.poll_maximum_options = 20;
|
||||
|
||||
controller.setProperties({
|
||||
pollType: MULTIPLE_POLL_TYPE,
|
||||
pollMin: 1,
|
||||
pollOptions: [{ value: "1" }, { value: "2" }],
|
||||
});
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=multiple results=always min=1 max=2 chartType=bar]\n* 1\n* 2\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
|
||||
controller.set("publicPoll", "true");
|
||||
assert.strictEqual(
|
||||
controller.pollOutput,
|
||||
"[poll type=multiple results=always min=1 max=2 public=true chartType=bar]\n* 1\n* 2\n[/poll]\n",
|
||||
"it should return the right output"
|
||||
);
|
||||
});
|
||||
|
||||
test("staff_only option is not present for non-staff", async function (assert) {
|
||||
const controller = setupController(this);
|
||||
controller.currentUser = { staff: false };
|
||||
controller.notifyPropertyChange("pollResults");
|
||||
|
||||
assert.strictEqual(
|
||||
controller.pollResults.filterBy("value", "staff_only").length,
|
||||
0,
|
||||
"staff_only is not present"
|
||||
);
|
||||
});
|
||||
|
||||
test("poll result is always by default", function (assert) {
|
||||
const controller = setupController(this);
|
||||
assert.strictEqual(controller.pollResult, "always");
|
||||
});
|
||||
|
||||
test("staff_only option is present for staff", async function (assert) {
|
||||
const controller = setupController(this);
|
||||
controller.currentUser = { staff: true };
|
||||
controller.notifyPropertyChange("pollResults");
|
||||
|
||||
assert.strictEqual(
|
||||
controller.pollResults.filterBy("value", "staff_only").length,
|
||||
1,
|
||||
"staff_only is present"
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user