diff --git a/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6 b/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6
new file mode 100644
index 00000000000..a77e79ca9c9
--- /dev/null
+++ b/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6
@@ -0,0 +1,96 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance('composer', { loggedIn: true });
+
+function findTextarea() {
+  return find(".d-editor-input")[0];
+}
+
+test('details button', () => {
+  visit("/");
+
+  andThen(() => {
+    ok(exists('#create-topic'), 'the create button is visible');
+  });
+
+  click('#create-topic');
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `[details=${I18n.t("composer.details_title")}]${I18n.t("composer.details_text")}[/details]`,
+      '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;
+  });
+
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `[details=This is my title]${I18n.t("composer.details_text")}[/details]`,
+      'it should contain the right output'
+    );
+
+    const textarea = findTextarea();
+    equal(textarea.selectionStart, 9, 'it should start highlighting at the right position');
+    equal(textarea.selectionEnd, 25, '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;
+  });
+
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `Before [details=some text in between]${I18n.t("composer.details_text")}[/details] After`,
+      'it should contain the right output'
+    );
+
+    const textarea = findTextarea();
+    equal(textarea.selectionStart, 16, 'it should start highlighting at the right position');
+    equal(textarea.selectionEnd, 36, 'it should end highlighting at the right position');
+  });
+
+  fillIn('.d-editor-input', "Before\nsome text in between\nAfter");
+
+  andThen(() => {
+    const textarea = findTextarea();
+    textarea.selectionStart = 7;
+    textarea.selectionEnd = 28;
+  });
+
+  click('button.options');
+  click('.popup-menu .fa-caret-right');
+
+  andThen(() => {
+    equal(
+      find(".d-editor-input").val(),
+      `Before\n[details=some text in between]${I18n.t("composer.details_text")}[/details]\nAfter`,
+      'it should contain the right output'
+    );
+
+    const textarea = findTextarea();
+    equal(textarea.selectionStart, 16, 'it should start highlighting at the right position');
+    equal(textarea.selectionEnd, 36, 'it should end highlighting at the right position');
+  });
+});