FEATURE: image resizing discoverability (#6804)

This commit is contained in:
Maja Komel
2019-02-27 11:46:16 +01:00
committed by Régis Hanol
parent f68a7a16a4
commit 7d2ea2d4dd
6 changed files with 279 additions and 6 deletions

View File

@ -10,6 +10,9 @@ acceptance("Composer", {
draft_sequence: 42
});
});
server.post("/uploads/lookup-urls", () => {
return helper.response([]);
});
},
settings: {
enable_whispers: true
@ -596,3 +599,79 @@ QUnit.test("Checks for existing draft", async assert => {
toggleCheckDraftPopup(false);
});
const assertImageResized = (assert, uploads) => {
assert.equal(
find(".d-editor-input").val(),
uploads.join("\n"),
"it resizes uploaded image"
);
};
QUnit.test("Image resizing buttons", async assert => {
await visit("/");
await click("#create-topic");
let uploads = [
"![test|690x313](upload://test.png)",
"[img]http://example.com/image.jpg[/img]",
"![anotherOne|690x463](upload://anotherOne.jpeg)",
"![](upload://withoutAltAndSize.jpeg)",
"`![test|690x313](upload://test.png)`",
"![withoutSize](upload://withoutSize.png)",
"<img src='http://someimage.jpg' wight='20' height='20'>",
"![onTheSameLine1|200x200](upload://onTheSameLine1.jpeg) ![onTheSameLine2|250x250](upload://onTheSameLine2.jpeg)",
"![identicalImage|300x300](upload://identicalImage.png)",
"![identicalImage|300x300](upload://identicalImage.png)"
];
await fillIn(".d-editor-input", uploads.join("\n"));
assert.ok(
find(".button-wrapper").length === 0,
"it does not append scaling buttons before hovering images"
);
await triggerEvent($(".d-editor-preview img"), "mouseover");
assert.ok(
find(".button-wrapper").length === 6,
"it adds correct amount of scaling button groups"
);
uploads[0] = "![test|690x313,50%](upload://test.png)";
await click(find(".button-wrapper .scale-btn[data-scale='50']")[0]);
assertImageResized(assert, uploads);
await triggerEvent($(".d-editor-preview img"), "mouseover");
uploads[2] = "![anotherOne|690x463,75%](upload://anotherOne.jpeg)";
await click(find(".button-wrapper .scale-btn[data-scale='75']")[1]);
assertImageResized(assert, uploads);
await triggerEvent($(".d-editor-preview img"), "mouseover");
uploads[7] =
"![onTheSameLine1|200x200,50%](upload://onTheSameLine1.jpeg) ![onTheSameLine2|250x250](upload://onTheSameLine2.jpeg)";
await click(find(".button-wrapper .scale-btn[data-scale='50']")[2]);
assertImageResized(assert, uploads);
await triggerEvent($(".d-editor-preview img"), "mouseover");
uploads[7] =
"![onTheSameLine1|200x200,50%](upload://onTheSameLine1.jpeg) ![onTheSameLine2|250x250,75%](upload://onTheSameLine2.jpeg)";
await click(find(".button-wrapper .scale-btn[data-scale='75']")[3]);
assertImageResized(assert, uploads);
await triggerEvent($(".d-editor-preview img"), "mouseover");
uploads[8] = "![identicalImage|300x300,50%](upload://identicalImage.png)";
await click(find(".button-wrapper .scale-btn[data-scale='50']")[4]);
assertImageResized(assert, uploads);
await triggerEvent($(".d-editor-preview img"), "mouseover");
uploads[9] = "![identicalImage|300x300,75%](upload://identicalImage.png)";
await click(find(".button-wrapper .scale-btn[data-scale='75']")[5]);
assertImageResized(assert, uploads);
});