discourse/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6

import { acceptance } from "helpers/qunit-helpers";
import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";

acceptance("Details Button", {
  loggedIn: true,
  beforeEach: function() {
    clearPopupMenuOptionsCallback();
  }
});

function findTextarea() {
  return find(".d-editor-input")[0];
}

test("details button", assert => {
  const popupMenu = selectKit(".toolbar-popup-menu-options");

  visit("/");
  click("#create-topic");

  popupMenu.expand().selectRowByValue("insertDetails");

  andThen(() => {
    assert.equal(
      find(".d-editor-input").val(),
      `\n[details="${I18n.t("composer.details_title")}"]\n${I18n.t(
        "composer.details_text"
      )}\n[/details]\n`,
      "it should contain the right output"
    );
  });

  fillIn(".d-editor-input", "This is my title");

  andThen(() => {
    const textarea = findTextarea();
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
  });

  popupMenu.expand().selectRowByValue("insertDetails");

  andThen(() => {
    assert.equal(
      find(".d-editor-input").val(),
      `\n[details="${I18n.t(
        "composer.details_title"
      )}"]\nThis is my title\n[/details]\n`,
      "it should contain the right selected output"
    );

    const textarea = findTextarea();
    assert.equal(
      textarea.selectionStart,
      21,
      "it should start highlighting at the right position"
    );
    assert.equal(
      textarea.selectionEnd,
      37,
      "it should end highlighting at the right position"
    );
  });

  fillIn(".d-editor-input", "Before some text in between After");

  andThen(() => {
    const textarea = findTextarea();
    textarea.selectionStart = 7;
    textarea.selectionEnd = 28;
  });

  popupMenu.expand().selectRowByValue("insertDetails");

  andThen(() => {
    assert.equal(
      find(".d-editor-input").val(),
      `Before \n[details="${I18n.t(
        "composer.details_title"
      )}"]\nsome text in between\n[/details]\n After`,
      "it should contain the right output"
    );

    const textarea = findTextarea();
    assert.equal(
      textarea.selectionStart,
      28,
      "it should start highlighting at the right position"
    );
    assert.equal(
      textarea.selectionEnd,
      48,
      "it should end highlighting at the right position"
    );
  });

  fillIn(".d-editor-input", "Before \nsome text in between\n After");

  andThen(() => {
    const textarea = findTextarea();
    textarea.selectionStart = 8;
    textarea.selectionEnd = 29;
  });

  popupMenu.expand().selectRowByValue("insertDetails");

  andThen(() => {
    assert.equal(
      find(".d-editor-input").val(),
      `Before \n\n[details="${I18n.t(
        "composer.details_title"
      )}"]\nsome text in between\n[/details]\n\n After`,
      "it should contain the right output"
    );

    const textarea = findTextarea();
    assert.equal(
      textarea.selectionStart,
      29,
      "it should start highlighting at the right position"
    );
    assert.equal(
      textarea.selectionEnd,
      49,
      "it should end highlighting at the right position"
    );
  });
});

test("details button surrounds all selected text in a single details block", assert => {
  const multilineInput = "first line\n\nsecond line\n\nthird line";
  const popupMenu = selectKit(".toolbar-popup-menu-options");

  visit("/");
  click("#create-topic");
  fillIn(".d-editor-input", multilineInput);

  andThen(() => {
    const textarea = findTextarea();
    textarea.selectionStart = 0;
    textarea.selectionEnd = textarea.value.length;
  });

  popupMenu.expand().selectRowByValue("insertDetails");

  andThen(() => {
    assert.equal(
      find(".d-editor-input").val(),
      `\n[details="${I18n.t(
        "composer.details_title"
      )}"]\n${multilineInput}\n[/details]\n`,
      "it should contain the right output"
    );
  });
});