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
index cbf078c279a..e429c96e715 100644
--- a/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6
+++ b/plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6
@@ -16,7 +16,7 @@ test('details button', (assert) => {
   andThen(() => {
     assert.equal(
       find(".d-editor-input").val(),
-      `[details=${I18n.t("composer.details_title")}]${I18n.t("composer.details_text")}[/details]`,
+      `\n[details=${I18n.t("composer.details_title")}]\n${I18n.t("composer.details_text")}\n[/details]\n`,
       'it should contain the right output'
     );
   });
@@ -35,13 +35,13 @@ test('details button', (assert) => {
   andThen(() => {
     assert.equal(
       find(".d-editor-input").val(),
-      `[details=${I18n.t("composer.details_title")}]This is my title[/details]`,
+      `\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, 17, 'it should start highlighting at the right position');
-    assert.equal(textarea.selectionEnd, 33, 'it should end highlighting at the right position');
+    assert.equal(textarea.selectionStart, 19, 'it should start highlighting at the right position');
+    assert.equal(textarea.selectionEnd, 35, 'it should end highlighting at the right position');
   });
 
   fillIn('.d-editor-input', "Before some text in between After");
@@ -58,13 +58,13 @@ test('details button', (assert) => {
   andThen(() => {
     assert.equal(
       find(".d-editor-input").val(),
-      `Before [details=${I18n.t("composer.details_title")}]some text in between[/details] After`,
+      `Before\n[details=${I18n.t("composer.details_title")}]\nsome text in between\n[/details]\nAfter`,
       'it should contain the right output'
     );
 
     const textarea = findTextarea();
-    assert.equal(textarea.selectionStart, 24, 'it should start highlighting at the right position');
-    assert.equal(textarea.selectionEnd, 44, 'it should end highlighting at the right position');
+    assert.equal(textarea.selectionStart, 26, 'it should start highlighting at the right position');
+    assert.equal(textarea.selectionEnd, 46, 'it should end highlighting at the right position');
   });
 
   fillIn('.d-editor-input', "Before\nsome text in between\nAfter");
@@ -81,12 +81,12 @@ test('details button', (assert) => {
   andThen(() => {
     assert.equal(
       find(".d-editor-input").val(),
-      `Before\n[details=${I18n.t("composer.details_title")}]some text in between[/details]\nAfter`,
+      `Before\n\n[details=${I18n.t("composer.details_title")}]\nsome text in between\n[/details]\n\nAfter`,
       'it should contain the right output'
     );
 
     const textarea = findTextarea();
-    assert.equal(textarea.selectionStart, 24, 'it should start highlighting at the right position');
-    assert.equal(textarea.selectionEnd, 44, 'it should end highlighting at the right position');
+    assert.equal(textarea.selectionStart, 26, 'it should start highlighting at the right position');
+    assert.equal(textarea.selectionEnd, 46, 'it should end highlighting at the right position');
   });
 });