discourse-custom-wizard/test/javascripts/acceptance/field-test.js

import { getOwner } from "@ember/application";
import {
  click,
  fillIn,
  settled,
  triggerKeyEvent,
  visit,
} from "@ember/test-helpers";
import { test } from "qunit";
import {
  acceptance,
  count,
  createFile,
  exists,
  query,
  visible,
} from "discourse/tests/helpers/qunit-helpers";
import { allFieldsWizard } from "../helpers/wizard";
import tagsJson from "../fixtures/tags";
import usersJson from "../fixtures/users";

const wizardComposerEdtiorEventPrefix = "wizard-editor";

acceptance("Field | Fields", function (needs) {
  needs.pretender((server, helper) => {
    server.get("/w/wizard.json", () => helper.response(allFieldsWizard));
    server.get("/tags/filter/search", () =>
      helper.response({ results: tagsJson["tags"] })
    );
    server.get("/u/search/users", () => helper.response(usersJson));

    server.post(
      "/uploads.json",
      () => {
        return helper.response({
          extension: "jpeg",
          filesize: 126177,
          height: 800,
          human_filesize: "123 KB",
          id: 202,
          original_filename: "avatar.PNG.jpg",
          retain_hours: null,
          short_path: "/uploads/short-url/yoj8pf9DdIeHRRULyw7i57GAYdz.jpeg",
          short_url: "upload://yoj8pf9DdIeHRRULyw7i57GAYdz.jpeg",
          thumbnail_height: 320,
          thumbnail_width: 690,
          url: "/images/discourse-logo-sketch-small.png",
          width: 1920,
        });
      },
      500 // this delay is important to slow down the uploads a bit so we can let elements of the interface update
    );
  });

  test("Text", async function (assert) {
    await visit("/w/wizard");
    assert.ok(exists(".wizard-field.text-field input.wizard-focusable"));
  });

  test("Textarea", async function (assert) {
    await visit("/w/wizard");
    assert.ok(
      visible(".wizard-field.textarea-field textarea.wizard-focusable")
    );
  });

  test("Composer", async function (assert) {
    await visit("/w/wizard");
    assert.ok(
      visible(".wizard-field.composer-field .wizard-field-composer textarea")
    );
    assert.ok(
      exists(".wizard-field.composer-field .d-editor-button-bar button")
    );
    assert.ok(visible(".wizard-btn.toggle-preview"));

    await fillIn(
      ".wizard-field.composer-field .wizard-field-composer textarea",
      "Input in composer"
    );
    await click(".wizard-btn.toggle-preview");
    assert.strictEqual(
      query(
        ".wizard-field.composer-field .wizard-field-composer .d-editor-preview-wrapper p"
      ).textContent.trim(),
      "Input in composer"
    );
  });

  test("Composer - Upload Disables Next Button", async function (assert) {
    await visit("/w/wizard");
    const appEvents = getOwner(this).lookup("service:app-events");
    const done = assert.async();

    appEvents.on(
      `${wizardComposerEdtiorEventPrefix}:all-uploads-complete`,
      async () => {
        await settled();
        assert.ok(!exists(".wizard-btn.next.primary:disabled"));
        done();
      }
    );

    appEvents.on(
      `${wizardComposerEdtiorEventPrefix}:upload-started`,
      async () => {
        await settled();
        assert.ok(exists(".wizard-btn.next.primary:disabled"));
      }
    );

    const image = createFile("avatar.png");
    appEvents.trigger(`${wizardComposerEdtiorEventPrefix}:add-files`, image);
  });

  test("Composer - Hyperlink", async function (assert) {
    await visit("/w/wizard");
    assert.ok(
      visible(".wizard-field.composer-field .wizard-field-composer textarea")
    );
    assert.ok(
      exists(".wizard-field.composer-field .d-editor-button-bar button")
    );
    assert.ok(visible(".wizard-btn.toggle-preview"));
    await fillIn(
      ".wizard-field.composer-field .wizard-field-composer textarea",
      "This is a link to "
    );
    assert.ok(
      !exists(".d-modal.insert-hyperlink-modal"),
      "no hyperlink modal by default"
    );
    await click(
      ".wizard-field.composer-field .wizard-field-composer  .d-editor button.link"
    );
    assert.ok(
      exists(".d-modal.insert-hyperlink-modal"),
      "hyperlink modal visible"
    );

    await fillIn(".d-modal__body.insert-link .inputs .link-url", "google.com");
    await fillIn(".d-modal__body.insert-link .inputs .link-text", "Google");
    await click(".d-modal__footer button.btn-primary");

    assert.strictEqual(
      query(".wizard-field.composer-field .wizard-field-composer textarea")
        .value,
      "This is a link to [Google](https://google.com)",
      "adds link with url and text, prepends 'https://'"
    );

    assert.ok(
      !exists(
        ".wizard-field.composer-field .wizard-field-composer .insert-link.modal-body"
      ),
      "modal dismissed after submitting link"
    );

    await fillIn(
      ".wizard-field.composer-field .wizard-field-composer textarea",
      "Reset textarea contents."
    );

    await click(
      ".wizard-field.composer-field .wizard-field-composer .d-editor button.link"
    );
    await fillIn(".d-modal__body.insert-link .inputs .link-url", "google.com");
    await fillIn(".d-modal__body.insert-link .inputs .link-text", "Google");
    await click(".d-modal__footer button.btn-danger");

    assert.strictEqual(
      query(".wizard-field.composer-field .wizard-field-composer textarea")
        .value,
      "Reset textarea contents.",
      "does not insert anything after cancelling"
    );

    assert.ok(
      !exists(".insert-link.modal-body"),
      "modal dismissed after cancelling"
    );
  });

  test("Text Only", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.text-only-field label.field-label"));
  });

  test("Date", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.date-field input.date-picker"));
    await click(".wizard-field.date-field input.date-picker");
    assert.ok(visible(".wizard-field.date-field .pika-single"));
  });

  test("Time", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.time-field .d-time-input .select-kit"));
    await click(
      ".wizard-field.time-field .d-time-input .select-kit .select-kit-header"
    );
    assert.ok(visible(".wizard-field.time-field .select-kit-collection"));
  });

  test("Date Time", async function (assert) {
    await visit("/w/wizard");
    assert.ok(
      visible(".wizard-field.date-time-field .d-date-time-input .select-kit")
    );
    await click(
      ".wizard-field.date-time-field .d-date-input input.date-picker"
    );
    assert.ok(
      visible(".wizard-field.date-time-field .d-date-input .pika-single")
    );
    await click(
      ".wizard-field.date-time-field .d-time-input .select-kit .select-kit-header"
    );
    assert.ok(visible(".wizard-field.date-time-field .select-kit-collection"));
  });

  test("Number", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.number-field input[type='number']"));
  });

  test("Checkbox", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.checkbox-field input[type='checkbox']"));
  });

  test("Url", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.url-field input[type='text']"));
  });

  test("Upload", async function (assert) {
    await visit("/w/wizard");
    assert.ok(
      visible(".wizard-field.upload-field label.wizard-btn-upload-file")
    );
    assert.ok(exists(".wizard-field.upload-field input.hidden-upload-field"));
  });

  test("Dropdown", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.dropdown-field .single-select-header"));
    await click(".wizard-field.dropdown-field .select-kit-header");
    assert.strictEqual(
      count(".wizard-field.dropdown-field .select-kit-collection li"),
      3
    );
  });

  test("Tag", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.tag-field .multi-select-header"));
    await click(".wizard-field.tag-field .select-kit-header");
    assert.strictEqual(
      count(".wizard-field.tag-field .select-kit-collection li"),
      2
    );
  });

  test("Category", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.category-field .multi-select-header"));
    await click(".wizard-field.category-field .select-kit-header");
    assert.ok(
      exists(
        ".wizard-field.category-field .select-kit-collection .select-kit-row"
      )
    );
  });

  test("Group", async function (assert) {
    await visit("/w/wizard");
    assert.ok(visible(".wizard-field.group-field .single-select-header"));
    await click(".wizard-field.group-field .select-kit-header");
    assert.strictEqual(
      count(".wizard-field.group-field .select-kit-collection li"),
      10
    );
  });

  test("User", async function (assert) {
    await visit("/w/wizard");
    await fillIn(
      ".wizard-field.user-selector-field input.ember-text-field",
      "a"
    );
    await triggerKeyEvent(
      ".wizard-field.user-selector-field input.ember-text-field",
      "keyup",
      "a".charCodeAt(0)
    );

    assert.ok(visible(".wizard-field.user-selector-field .ac-wrap"));
    // TODO: add assertion for ac results. autocomplete does not appear in time.
  });
});