discourse/plugins/chat/test/javascripts/components/chat-composer-uploads-test.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

143 lines
4.2 KiB
JavaScript
Raw Normal View History

import { click, render, waitFor } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile";
import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import pretender from "discourse/tests/helpers/create-pretender";
import {
count,
createFile,
exists,
} from "discourse/tests/helpers/qunit-helpers";
const fakeUpload = {
type: ".png",
extension: "png",
name: "myfile.png",
short_path: "/images/avatar.png",
};
const mockUploadResponse = {
extension: "jpeg",
filesize: 126177,
height: 800,
human_filesize: "123 KB",
id: 202,
original_filename: "avatar.PNG.jpg",
retain_hours: null,
short_path: "/images/avatar.png",
short_url: "upload://yoj8pf9DdIeHRRULyw7i57GAYdz.jpeg",
thumbnail_height: 320,
thumbnail_width: 690,
url: "/images/avatar.png",
width: 1920,
};
function setupUploadPretender() {
pretender.post(
"/uploads.json",
() => {
return [200, { "Content-Type": "application/json" }, mockUploadResponse];
},
500 // this delay is important to slow down the uploads a bit so we can click elements in the UI like the cancel button
);
}
module("Discourse Chat | Component | chat-composer-uploads", function (hooks) {
setupRenderingTest(hooks);
test("loading uploads from an outside source (e.g. draft or editing message)", async function (assert) {
this.existingUploads = [fakeUpload];
await render(hbs`
<ChatComposerUploads @existingUploads={{this.existingUploads}} @fileUploadElementId="chat-widget-uploader" />
`);
assert.strictEqual(count(".chat-composer-upload"), 1);
assert.strictEqual(exists(".chat-composer-upload"), true);
});
test("upload starts and completes", async function (assert) {
setupUploadPretender();
this.set("onUploadChanged", () => {});
await render(hbs`
<ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
`);
const done = assert.async();
this.appEvents = this.container.lookup("service:app-events");
this.appEvents.on(
"upload-mixin:chat-composer-uploader:upload-success",
(fileName, upload) => {
assert.strictEqual(fileName, "avatar.png");
assert.deepEqual(upload, mockUploadResponse);
done();
}
);
this.appEvents.trigger(
"upload-mixin:chat-composer-uploader:add-files",
createFile("avatar.png")
);
await waitFor(".chat-composer-upload");
assert.dom(".chat-composer-upload").exists({ count: 1 });
});
test("removing a completed upload", async function (assert) {
this.set("changedUploads", null);
this.set("onUploadChanged", () => {});
this.existingUploads = [fakeUpload];
await render(hbs`
<ChatComposerUploads @existingUploads={{this.existingUploads}} @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
`);
assert.dom(".chat-composer-upload").exists({ count: 1 });
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi
2023-04-25 16:23:03 +08:00
await click(".chat-composer-upload__remove-btn");
assert.dom(".chat-composer-upload").exists({ count: 0 });
});
test("cancelling in progress upload", async function (assert) {
setupUploadPretender();
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
await render(hbs`
<ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
`);
const image = createFile("avatar.png");
const done = assert.async();
this.appEvents = this.container.lookup("service:app-events");
this.appEvents.on(
`upload-mixin:chat-composer-uploader:upload-cancelled`,
(fileId) => {
assert.true(
fileId.includes("chat-composer-uploader-avatar/"),
"upload was cancelled"
);
done();
}
);
this.appEvents.trigger(
"upload-mixin:chat-composer-uploader:add-files",
image
);
await waitFor(".chat-composer-upload");
assert.strictEqual(count(".chat-composer-upload"), 1);
UX: improves composer and thread panel (#21210) This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step. ### New features included in this PR - A resizable side panel - A clear dropzone area for uploads - A simplified design for image uploads, this is only a first step towards more redesign of this area in the future ### Notable fixes in this PR - Correct placeholder in thread panel - Allows to edit the last message of a thread with arrow up - Correctly focus composer when replying to a message - The reply indicator is added instantly in the channel when starting a thread - Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content ### Technical notes To achieve this PR, three important changes have been made: - `<ChatComposer>` has been fully rewritten and is now a glimmer component - The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage` - `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>` Note ".chat-live-pane" has been renamed ".chat-channel" Design for upload dropzone is from @chapoi
2023-04-25 16:23:03 +08:00
await click(".chat-composer-upload__remove-btn");
assert.strictEqual(count(".chat-composer-upload"), 0);
});
});