discourse/plugins/poll/test/javascripts/component/poll-ui-builder-test.js

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