Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Modernize chat's component tests (#19577) 

1. `test()` and `render()` instead of `componentTest()`
2. Angle brackets
3. `strictEqual()`/`true()`/`false()` assertions

This removes all remaining uses of `componentTest` from core
This commit is contained in:
Jarek Radosz 2022-12-22 14:35:18 +01:00 committed by GitHub
parent 8546c2084a
commit dc3473fe06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 1397 additions and 1762 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/chat/test/javascripts/components/chat-channel-archive-modal-inner-test.js
View File

@ -10,18 +10,19 @@ module(
function (hooks) {
setupRenderingTest(hooks);
hooks.beforeEach(function () {
this.set("channel", fabricators.chatChannel({}));
});
test("channel title is escaped in instructions correctly", async function (assert) {
this.set("channel.title", `<script>someeviltitle</script>`);
await render(
hbs`{{chat-channel-archive-modal-inner chatChannel=channel}}`
this.set(
"channel",
fabricators.chatChannel({
title: `<script>someeviltitle</script>`,
})
);
assert.ok(
await render(
hbs`<ChatChannelArchiveModalInner @chatChannel={{this.channel}} />`
);
assert.true(
query(".chat-channel-archive-modal-instructions").innerHTML.includes(
"&lt;script&gt;someeviltitle&lt;/script&gt;"
)

56
plugins/chat/test/javascripts/components/chat-channel-card-test.js
View File

@ -20,39 +20,39 @@ module("Discourse Chat | Component | chat-channel-card", function (hooks) {
test("escapes channel title", async function (assert) {
this.channel.set("title", "<div class='xss'>evil</div>");
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.notOk(exists(".xss"));
assert.false(exists(".xss"));
});
test("escapes channel description", async function (assert) {
this.channel.set("description", "<div class='xss'>evil</div>");
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.notOk(exists(".xss"));
assert.false(exists(".xss"));
});
test("Closed channel", async function (assert) {
this.channel.set("status", "closed");
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.ok(exists(".chat-channel-card.-closed"));
assert.true(exists(".chat-channel-card.-closed"));
});
test("Archived channel", async function (assert) {
this.channel.set("status", "archived");
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.ok(exists(".chat-channel-card.-archived"));
assert.true(exists(".chat-channel-card.-archived"));
});
test("Muted channel", async function (assert) {
this.channel.currentUserMembership.muted = true;
this.channel.currentUserMembership.following = true;
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-card__tag.-muted").textContent.trim(),
I18n.t("chat.muted")
);
@ -60,27 +60,27 @@ module("Discourse Chat | Component | chat-channel-card", function (hooks) {
test("Joined channel", async function (assert) {
this.channel.currentUserMembership.set("following", true);
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-card__tag.-joined").textContent.trim(),
I18n.t("chat.joined")
);
assert.ok(exists(".toggle-channel-membership-button.-leave"));
assert.true(exists(".toggle-channel-membership-button.-leave"));
});
test("Joinable channel", async function (assert) {
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.ok(exists(".chat-channel-card__join-btn"));
assert.true(exists(".chat-channel-card__join-btn"));
});
test("Memberships count", async function (assert) {
this.channel.set("membershipsCount", 4);
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-card__members").textContent.trim(),
I18n.t("chat.channel.memberships_count", { count: 4 })
);
@ -88,41 +88,41 @@ module("Discourse Chat | Component | chat-channel-card", function (hooks) {
test("No description", async function (assert) {
this.channel.set("description", null);
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.notOk(exists(".chat-channel-card__description"));
assert.false(exists(".chat-channel-card__description"));
});
test("Description", async function (assert) {
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-card__description").textContent.trim(),
this.channel.description
);
});
test("Name", async function (assert) {
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-card__name").innerText.trim(),
this.channel.title
);
});
test("Settings button", async function (assert) {
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.ok(exists(".chat-channel-card__setting"));
assert.true(exists(".chat-channel-card__setting"));
});
test("Read restricted chatable", async function (assert) {
this.channel.set("chatable.read_restricted", true);
await render(hbs`{{chat-channel-card channel=channel}}`);
await render(hbs`<ChatChannelCard @channel={{this.channel}} />`);
assert.ok(exists(".d-icon-lock"));
assert.equal(
assert.true(exists(".d-icon-lock"));
assert.strictEqual(
query(".chat-channel-card").style.borderLeftColor,
"rgb(213, 99, 83)"
);

19
plugins/chat/test/javascripts/components/chat-channel-delete-modal-inner-test.js
View File

@ -10,18 +10,19 @@ module(
function (hooks) {
setupRenderingTest(hooks);
hooks.beforeEach(function () {
this.set("channel", fabricators.chatChannel({}));
});
test("channel title is escaped in instructions correctly", async function (assert) {
this.set("channel.title", `<script>someeviltitle</script>`);
await render(
hbs`{{chat-channel-delete-modal-inner chatChannel=channel}}`
this.set(
"channel",
fabricators.chatChannel({
title: `<script>someeviltitle</script>`,
})
);
assert.ok(
await render(
hbs`<ChatChannelDeleteModalInner @chatChannel={{this.channel}} />`
);
assert.true(
query(".chat-channel-delete-modal-instructions").innerHTML.includes(
"&lt;script&gt;someeviltitle&lt;/script&gt;"
)

93
plugins/chat/test/javascripts/components/chat-channel-leave-btn-test.js
View File

@ -1,81 +1,62 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { click } from "@ember/test-helpers";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { click, render } from "@ember/test-helpers";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import pretender from "discourse/tests/helpers/create-pretender";
import I18n from "I18n";
import { module } from "qunit";
import { module, test } from "qunit";
module("Discourse Chat | Component | chat-channel-leave-btn", function (hooks) {
setupRenderingTest(hooks);
componentTest("accepts an optional onLeaveChannel callback", {
template: hbs`{{chat-channel-leave-btn channel=channel onLeaveChannel=onLeaveChannel}}`,
test("accepts an optional onLeaveChannel callback", async function (assert) {
this.set("foo", 1);
this.set("onLeaveChannel", () => this.set("foo", 2));
this.set("channel", {
id: 1,
chatable_type: "DirectMessage",
chatable: {
users: [{ id: 1 }],
},
});
beforeEach() {
this.set("foo", 1);
this.set("onLeaveChannel", () => this.set("foo", 2));
this.set("channel", {
id: 1,
chatable_type: "DirectMessage",
chatable: {
users: [{ id: 1 }],
},
});
},
await render(
hbs`<ChatChannelLeaveBtn @channel={{this.channel}} @onLeaveChannel={{this.onLeaveChannel}} />`
);
async test(assert) {
pretender.post("/chat/chat_channels/:chatChannelId/unfollow", () => {
return [200, { current_user_membership: { following: false } }, {}];
});
assert.equal(this.foo, 1);
pretender.post("/chat/chat_channels/:chatChannelId/unfollow", () => {
return [200, { current_user_membership: { following: false } }, {}];
});
assert.strictEqual(this.foo, 1);
await click(".chat-channel-leave-btn");
assert.equal(this.foo, 2);
},
await click(".chat-channel-leave-btn");
assert.strictEqual(this.foo, 2);
});
componentTest("has a specific title for direct message channel", {
template: hbs`{{chat-channel-leave-btn channel=channel}}`,
test("has a specific title for direct message channel", async function (assert) {
this.set("channel", { chatable_type: "DirectMessage" });
beforeEach() {
this.set("channel", { chatable_type: "DirectMessage" });
},
await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
async test(assert) {
const btn = query(".chat-channel-leave-btn");
assert.equal(btn.title, I18n.t("chat.direct_messages.leave"));
},
const btn = query(".chat-channel-leave-btn");
assert.strictEqual(btn.title, I18n.t("chat.direct_messages.leave"));
});
componentTest("has a specific title for message channel", {
template: hbs`{{chat-channel-leave-btn channel=channel}}`,
test("has a specific title for message channel", async function (assert) {
this.set("channel", { chatable_type: "Topic" });
beforeEach() {
this.set("channel", { chatable_type: "Topic" });
},
await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
async test(assert) {
const btn = query(".chat-channel-leave-btn");
assert.equal(btn.title, I18n.t("chat.leave"));
},
const btn = query(".chat-channel-leave-btn");
assert.strictEqual(btn.title, I18n.t("chat.leave"));
});
componentTest("is not visible on mobile", {
template: hbs`{{chat-channel-leave-btn channel=channel}}`,
test("is not visible on mobile", async function (assert) {
this.site.mobileView = true;
this.set("channel", { chatable_type: "Topic" });
beforeEach() {
this.site.mobileView = true;
this.set("channel", { chatable_type: "Topic" });
},
await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
async test(assert) {
assert.notOk(exists(".chat-channel-leave-btn"));
},
assert.false(exists(".chat-channel-leave-btn"));
});
});

4
plugins/chat/test/javascripts/components/chat-channel-metadata-test.js
View File

@ -35,13 +35,13 @@ module("Discourse Chat | Component | chat-channel-metadata", function (hooks) {
hbs`<ChatChannelMetadata @channel={{this.channel}} @unreadIndicator={{this.unreadIndicator}}/>`
);
assert.ok(exists(".chat-channel-unread-indicator"));
assert.true(exists(".chat-channel-unread-indicator"));
this.unreadIndicator = false;
await render(
hbs`<ChatChannelMetadata @channel={{this.channel}} @unreadIndicator={{this.unreadIndicator}}/>`
);
assert.notOk(exists(".chat-channel-unread-indicator"));
assert.false(exists(".chat-channel-unread-indicator"));
});
});

28
plugins/chat/test/javascripts/components/chat-channel-preview-card-test.js
View File

@ -24,24 +24,24 @@ module(
});
test("channel title", async function (assert) {
await render(hbs`{{chat-channel-preview-card channel=channel}}`);
await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-title__name").innerText,
this.channel.title,
"it shows the channel title"
);
assert.ok(
assert.true(
exists(query(".chat-channel-title__category-badge")),
"it shows the category hashtag badge"
);
});
test("channel description", async function (assert) {
await render(hbs`{{chat-channel-preview-card channel=channel}}`);
await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-preview-card__description").innerText,
this.channel.description,
"the channel description is shown"
@ -51,32 +51,32 @@ module(
test("no channel description", async function (assert) {
this.channel.set("description", null);
await render(hbs`{{chat-channel-preview-card channel=channel}}`);
await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
assert.notOk(
assert.false(
exists(".chat-channel-preview-card__description"),
"no line is left for the channel description if there is none"
);
assert.ok(
assert.true(
exists(".chat-channel-preview-card.-no-description"),
"it adds a modifier class for styling"
);
});
test("join", async function (assert) {
await render(hbs`{{chat-channel-preview-card channel=channel}}`);
await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
assert.ok(
assert.true(
exists(".toggle-channel-membership-button.-join"),
"it shows the join channel button"
);
});
test("browse all", async function (assert) {
await render(hbs`{{chat-channel-preview-card channel=channel}}`);
await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
assert.ok(
assert.true(
exists(".chat-channel-preview-card__browse-all"),
"it shows a link to browse all channels"
);
@ -84,9 +84,9 @@ module(
test("closed channel", async function (assert) {
this.channel.set("status", "closed");
await render(hbs`{{chat-channel-preview-card channel=channel}}`);
await render(hbs`<ChatChannelPreviewCard @channel={{this.channel}} />`);
assert.notOk(
assert.false(
exists(".chat-channel-preview-card__join-channel-btn"),
"it does not show the join channel button"
);

188
plugins/chat/test/javascripts/components/chat-channel-title-test.js
View File

@ -1,145 +1,115 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import fabricators from "../helpers/fabricators";
import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-channel-title", function (hooks) {
setupRenderingTest(hooks);
componentTest("category channel", {
template: hbs`{{chat-channel-title channel=channel}}`,
test("category channel", async function (assert) {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
})
);
beforeEach() {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
})
);
},
await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
async test(assert) {
assert.equal(
query(".chat-channel-title__category-badge").getAttribute("style"),
`color: #${this.channel.chatable.color}`
);
assert.equal(
query(".chat-channel-title__name").innerText,
this.channel.title
);
},
assert.strictEqual(
query(".chat-channel-title__category-badge").getAttribute("style"),
`color: #${this.channel.chatable.color}`
);
assert.strictEqual(
query(".chat-channel-title__name").innerText,
this.channel.title
);
});
componentTest("category channel - escapes title", {
template: hbs`{{chat-channel-title channel=channel}}`,
test("category channel - escapes title", async function (assert) {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
title: "<div class='xss'>evil</div>",
})
);
beforeEach() {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
title: "<div class='xss'>evil</div>",
})
);
},
await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
async test(assert) {
assert.notOk(exists(".xss"));
},
assert.false(exists(".xss"));
});
componentTest("category channel - read restricted", {
template: hbs`{{chat-channel-title channel=channel}}`,
test("category channel - read restricted", async function (assert) {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
chatable: { read_restricted: true },
})
);
beforeEach() {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
chatable: { read_restricted: true },
})
);
},
await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
async test(assert) {
assert.ok(exists(".d-icon-lock"));
},
assert.true(exists(".d-icon-lock"));
});
componentTest("category channel - not read restricted", {
template: hbs`{{chat-channel-title channel=channel}}`,
test("category channel - not read restricted", async function (assert) {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
chatable: { read_restricted: false },
})
);
beforeEach() {
this.set(
"channel",
fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel,
chatable: { read_restricted: false },
})
);
},
await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
async test(assert) {
assert.notOk(exists(".d-icon-lock"));
},
assert.false(exists(".d-icon-lock"));
});
componentTest("direct message channel - one user", {
template: hbs`{{chat-channel-title channel=channel}}`,
test("direct message channel - one user", async function (assert) {
this.set("channel", fabricators.directMessageChatChannel());
beforeEach() {
this.set("channel", fabricators.directMessageChatChannel());
},
await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
async test(assert) {
const user = this.channel.chatable.users[0];
const user = this.channel.chatable.users[0];
assert.ok(
exists(`.chat-user-avatar-container .avatar[title="${user.username}"]`)
);
assert.true(
exists(`.chat-user-avatar-container .avatar[title="${user.username}"]`)
);
assert.equal(
query(".chat-channel-title__name").innerText.trim(),
user.username
);
},
assert.strictEqual(
query(".chat-channel-title__name").innerText.trim(),
user.username
);
});
componentTest("direct message channel - multiple users", {
template: hbs`{{chat-channel-title channel=channel}}`,
test("direct message channel - multiple users", async function (assert) {
const channel = fabricators.directMessageChatChannel();
beforeEach() {
const channel = fabricators.directMessageChatChannel();
channel.chatable.users.push({
id: 2,
username: "joffrey",
name: null,
avatar_template: "/letter_avatar_proxy/v3/letter/t/31188e/{size}.png",
});
channel.chatable.users.push({
id: 2,
username: "joffrey",
name: null,
avatar_template: "/letter_avatar_proxy/v3/letter/t/31188e/{size}.png",
});
this.set("channel", channel);
this.set("channel", channel);
},
await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
async test(assert) {
const users = this.channel.chatable.users;
assert.equal(
parseInt(
query(".chat-channel-title__users-count").innerText.trim(),
10
),
users.length
);
assert.equal(
query(".chat-channel-title__name").innerText.trim(),
users.mapBy("username").join(", ")
);
},
const users = this.channel.chatable.users;
assert.strictEqual(
parseInt(query(".chat-channel-title__users-count").innerText.trim(), 10),
users.length
);
assert.strictEqual(
query(".chat-channel-title__name").innerText.trim(),
users.mapBy("username").join(", ")
);
});
});

29
plugins/chat/test/javascripts/components/chat-composer-dropdown-test.js
View File

@ -1,28 +1,21 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { click } from "@ember/test-helpers";
import { module } from "qunit";
import { click, render } from "@ember/test-helpers";
import { module, test } from "qunit";
module("Discourse Chat | Component | chat-composer-dropdown", function (hooks) {
setupRenderingTest(hooks);
componentTest("buttons", {
template: hbs`{{chat-composer-dropdown buttons=buttons}}`,
test("buttons", async function (assert) {
this.set("buttons", [{ id: "foo", icon: "times", action: () => {} }]);
async beforeEach() {
this.set("buttons", [{ id: "foo", icon: "times", action: () => {} }]);
},
await render(hbs`<ChatComposerDropdown @buttons={{this.buttons}} />`);
await click(".chat-composer-dropdown__trigger-btn");
async test(assert) {
await click(".chat-composer-dropdown__trigger-btn");
assert.ok(exists(".chat-composer-dropdown__item.foo"));
assert.ok(
exists(".chat-composer-dropdown__action-btn.foo .d-icon-times")
);
},
assert.true(exists(".chat-composer-dropdown__item.foo"));
assert.true(
exists(".chat-composer-dropdown__action-btn.foo .d-icon-times")
);
});
});

23
plugins/chat/test/javascripts/components/chat-composer-inline-buttons-test.js
View File

@ -1,26 +1,23 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module(
"Discourse Chat | Component | chat-composer-inline-buttons",
function (hooks) {
setupRenderingTest(hooks);
componentTest("buttons", {
template: hbs`{{chat-composer-inline-buttons buttons=buttons}}`,
test("buttons", async function (assert) {
this.set("buttons", [{ id: "foo", icon: "times", action: () => {} }]);
async beforeEach() {
this.set("buttons", [{ id: "foo", icon: "times", action: () => {} }]);
},
await render(
hbs`<ChatComposerInlineButtons @buttons={{this.buttons}} />`
);
async test(assert) {
assert.ok(exists(".chat-composer-inline-button.foo"));
assert.ok(exists(".chat-composer-inline-button.foo .d-icon-times"));
},
assert.true(exists(".chat-composer-inline-button.foo"));
assert.true(exists(".chat-composer-inline-button.foo .d-icon-times"));
});
}
);

116
plugins/chat/test/javascripts/components/chat-composer-placeholder-test.js
View File

@ -1,87 +1,73 @@
import { set } from "@ember/object";
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module(
"Discourse Chat | Component | chat-composer placeholder",
function (hooks) {
setupRenderingTest(hooks);
componentTest("direct message to self shows Jot something down", {
template: hbs`{{chat-composer chatChannel=chatChannel}}`,
test("direct message to self shows Jot something down", async function (assert) {
this.currentUser.set("id", 1);
this.set(
"chatChannel",
ChatChannel.create({
chatable_type: "DirectMessage",
chatable: {
users: [{ id: 1 }],
},
})
);
beforeEach() {
set(this.currentUser, "id", 1);
this.set(
"chatChannel",
ChatChannel.create({
chatable_type: "DirectMessage",
chatable: {
users: [{ id: 1 }],
},
})
);
},
await render(hbs`<ChatComposer @chatChannel={{this.chatChannel}} />`);
async test(assert) {
assert.equal(
query(".chat-composer-input").placeholder,
"Jot something down"
);
},
assert.strictEqual(
query(".chat-composer-input").placeholder,
"Jot something down"
);
});
componentTest("direct message to multiple folks shows their names", {
template: hbs`{{chat-composer chatChannel=chatChannel}}`,
test("direct message to multiple folks shows their names", async function (assert) {
this.set(
"chatChannel",
ChatChannel.create({
chatable_type: "DirectMessage",
chatable: {
users: [
{ name: "Tomtom" },
{ name: "Steaky" },
{ username: "zorro" },
],
},
})
);
beforeEach() {
this.set(
"chatChannel",
ChatChannel.create({
chatable_type: "DirectMessage",
chatable: {
users: [
{ name: "Tomtom" },
{ name: "Steaky" },
{ username: "zorro" },
],
},
})
);
},
await render(hbs`<ChatComposer @chatChannel={{this.chatChannel}} />`);
async test(assert) {
assert.equal(
query(".chat-composer-input").placeholder,
"Chat with Tomtom, Steaky, @zorro"
);
},
assert.strictEqual(
query(".chat-composer-input").placeholder,
"Chat with Tomtom, Steaky, @zorro"
);
});
componentTest("message to channel shows send message to channel name", {
template: hbs`{{chat-composer chatChannel=chatChannel}}`,
test("message to channel shows send message to channel name", async function (assert) {
this.set(
"chatChannel",
ChatChannel.create({
chatable_type: "Category",
title: "just-cats",
})
);
beforeEach() {
this.set(
"chatChannel",
ChatChannel.create({
chatable_type: "Category",
title: "just-cats",
})
);
},
await render(hbs`<ChatComposer @chatChannel={{this.chatChannel}} />`);
async test(assert) {
assert.equal(
query(".chat-composer-input").placeholder,
"Chat with #just-cats"
);
},
assert.strictEqual(
query(".chat-composer-input").placeholder,
"Chat with #just-cats"
);
});
}
);

220
plugins/chat/test/javascripts/components/chat-composer-upload-test.js
View File

@ -1,158 +1,132 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import I18n from "I18n";
import { click } from "@ember/test-helpers";
import { module } from "qunit";
import { click, render } from "@ember/test-helpers";
import { module, test } from "qunit";
module("Discourse Chat | Component | chat-composer-upload", function (hooks) {
setupRenderingTest(hooks);
componentTest("file - uploading in progress", {
template: hbs`{{chat-composer-upload upload=upload}}`,
test("file - uploading in progress", async function (assert) {
this.set("upload", {
progress: 50,
extension: ".pdf",
fileName: "test.pdf",
});
beforeEach() {
this.set("upload", {
progress: 50,
extension: ".pdf",
fileName: "test.pdf",
});
},
await render(hbs`<ChatComposerUpload @upload={{this.upload}} />`);
async test(assert) {
assert.ok(exists(".upload-progress[value=50]"));
assert.strictEqual(
query(".uploading").innerText.trim(),
I18n.t("uploading")
);
},
assert.true(exists(".upload-progress[value=50]"));
assert.strictEqual(
query(".uploading").innerText.trim(),
I18n.t("uploading")
);
});
componentTest("image - uploading in progress", {
template: hbs`{{chat-composer-upload upload=upload}}`,
test("image - uploading in progress", async function (assert) {
this.set("upload", {
extension: ".png",
progress: 78,
fileName: "test.png",
});
beforeEach() {
this.set("upload", {
extension: ".png",
progress: 78,
fileName: "test.png",
});
},
await render(hbs`<ChatComposerUpload @upload={{this.upload}} />`);
async test(assert) {
assert.ok(exists(".d-icon-far-image"));
assert.ok(exists(".upload-progress[value=78]"));
assert.strictEqual(
query(".uploading").innerText.trim(),
I18n.t("uploading")
);
},
assert.true(exists(".d-icon-far-image"));
assert.true(exists(".upload-progress[value=78]"));
assert.strictEqual(
query(".uploading").innerText.trim(),
I18n.t("uploading")
);
});
componentTest("image - preprocessing upload in progress", {
template: hbs`{{chat-composer-upload upload=upload}}`,
test("image - preprocessing upload in progress", async function (assert) {
this.set("upload", {
extension: ".png",
progress: 78,
fileName: "test.png",
processing: true,
});
beforeEach() {
this.set("upload", {
extension: ".png",
progress: 78,
fileName: "test.png",
processing: true,
});
},
await render(hbs`<ChatComposerUpload @upload={{this.upload}} />`);
async test(assert) {
assert.strictEqual(
query(".processing").innerText.trim(),
I18n.t("processing")
);
},
assert.strictEqual(
query(".processing").innerText.trim(),
I18n.t("processing")
);
});
componentTest("file - upload complete", {
template: hbs`{{chat-composer-upload isDone=true upload=upload}}`,
test("file - upload complete", async function (assert) {
this.set("upload", {
type: ".pdf",
original_filename: "some file.pdf",
extension: "pdf",
});
beforeEach() {
this.set("upload", {
type: ".pdf",
original_filename: "some file.pdf",
extension: "pdf",
});
},
await render(
hbs`<ChatComposerUpload @isDone={{true}} @upload={{this.upload}} />`
);
async test(assert) {
assert.ok(exists(".d-icon-file-alt"));
assert.strictEqual(query(".file-name").innerText.trim(), "some file.pdf");
assert.strictEqual(query(".extension-pill").innerText.trim(), "pdf");
},
assert.true(exists(".d-icon-file-alt"));
assert.strictEqual(query(".file-name").innerText.trim(), "some file.pdf");
assert.strictEqual(query(".extension-pill").innerText.trim(), "pdf");
});
componentTest("image - upload complete", {
template: hbs`{{chat-composer-upload isDone=true upload=upload}}`,
test("image - upload complete", async function (assert) {
this.set("upload", {
type: ".png",
original_filename: "bar_image.png",
extension: "png",
short_path: "/images/avatar.png",
});
beforeEach() {
this.set("upload", {
type: ".png",
original_filename: "bar_image.png",
extension: "png",
short_path: "/images/avatar.png",
});
},
await render(
hbs`<ChatComposerUpload @isDone={{true}} @upload={{this.upload}} />`
);
async test(assert) {
assert.ok(exists("img.preview-img[src='/images/avatar.png']"));
assert.strictEqual(query(".file-name").innerText.trim(), "bar_image.png");
assert.strictEqual(query(".extension-pill").innerText.trim(), "png");
},
assert.true(exists("img.preview-img[src='/images/avatar.png']"));
assert.strictEqual(query(".file-name").innerText.trim(), "bar_image.png");
assert.strictEqual(query(".extension-pill").innerText.trim(), "png");
});
componentTest("removing completed upload", {
template: hbs`{{chat-composer-upload isDone=true upload=upload onCancel=(action "removeUpload" upload)}}`,
test("removing completed upload", async function (assert) {
this.set("uploadRemoved", false);
this.set("removeUpload", () => {
this.set("uploadRemoved", true);
});
this.set("upload", {
type: ".png",
original_filename: "bar_image.png",
extension: "png",
short_path: "/images/avatar.png",
});
beforeEach() {
this.set("uploadRemoved", false);
this.set("actions", {
removeUpload: () => {
this.set("uploadRemoved", true);
},
});
this.set("upload", {
type: ".png",
original_filename: "bar_image.png",
extension: "png",
short_path: "/images/avatar.png",
});
},
await render(
hbs`<ChatComposerUpload @isDone={{true}} @upload={{this.upload}} @onCancel={{fn this.removeUpload this.upload}} />`
);
async test(assert) {
await click(".remove-upload");
assert.strictEqual(this.uploadRemoved, true);
},
await click(".remove-upload");
assert.strictEqual(this.uploadRemoved, true);
});
componentTest("cancelling in progress upload", {
template: hbs`{{chat-composer-upload upload=upload onCancel=(action "removeUpload" upload)}}`,
test("cancelling in progress upload", async function (assert) {
this.set("uploadRemoved", false);
this.set("removeUpload", () => {
this.set("uploadRemoved", true);
});
this.set("upload", {
type: ".png",
original_filename: "bar_image.png",
extension: "png",
short_path: "/images/avatar.png",
});
beforeEach() {
this.set("uploadRemoved", false);
this.set("actions", {
removeUpload: () => {
this.set("uploadRemoved", true);
},
});
this.set("upload", {
type: ".png",
original_filename: "bar_image.png",
extension: "png",
short_path: "/images/avatar.png",
});
},
await render(
hbs`<ChatComposerUpload @upload={{this.upload}} @onCancel={{fn this.removeUpload this.upload}} />`
);
async test(assert) {
await click(".remove-upload");
assert.strictEqual(this.uploadRemoved, true);
},
await click(".remove-upload");
assert.strictEqual(this.uploadRemoved, true);
});
});

189
plugins/chat/test/javascripts/components/chat-composer-uploads-test.js
View File

@ -1,6 +1,4 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import pretender from "discourse/tests/helpers/create-pretender";
import {
count,
@ -8,8 +6,8 @@ import {
exists,
} from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { click, settled, waitFor } from "@ember/test-helpers";
import { module } from "qunit";
import { click, render, settled, waitFor } from "@ember/test-helpers";
import { module, test } from "qunit";
import { run } from "@ember/runloop";
const fakeUpload = {
@ -48,116 +46,107 @@ function setupUploadPretender() {
module("Discourse Chat | Component | chat-composer-uploads", function (hooks) {
setupRenderingTest(hooks);
componentTest(
"loading uploads from an outside source (e.g. draft or editing message)",
{
template: hbs`{{chat-composer-uploads fileUploadElementId="chat-widget-uploader"}}`,
test("loading uploads from an outside source (e.g. draft or editing message)", async function (assert) {
await render(hbs`
<ChatComposerUploads @fileUploadElementId="chat-widget-uploader" />
`);
async test(assert) {
this.appEvents = this.container.lookup("service:appEvents");
this.appEvents.trigger("chat-composer:load-uploads", [fakeUpload]);
await settled();
this.appEvents = this.container.lookup("service:appEvents");
this.appEvents.trigger("chat-composer:load-uploads", [fakeUpload]);
await settled();
assert.strictEqual(count(".chat-composer-upload"), 1);
assert.strictEqual(exists(".chat-composer-upload"), true);
},
}
);
componentTest("upload starts and completes", {
template: hbs`{{chat-composer-uploads fileUploadElementId="chat-widget-uploader" onUploadChanged=onUploadChanged}}`,
beforeEach() {
setupUploadPretender();
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
},
async test(assert) {
const done = assert.async();
this.appEvents = this.container.lookup("service:appEvents");
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.strictEqual(count(".chat-composer-upload"), 1);
},
assert.strictEqual(count(".chat-composer-upload"), 1);
assert.strictEqual(exists(".chat-composer-upload"), true);
});
componentTest("removing a completed upload", {
template: hbs`{{chat-composer-uploads fileUploadElementId="chat-widget-uploader" onUploadChanged=onUploadChanged}}`,
test("upload starts and completes", async function (assert) {
setupUploadPretender();
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
beforeEach() {
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
},
await render(hbs`
<ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
`);
async test(assert) {
this.appEvents = this.container.lookup("service:appEvents");
run(() =>
this.appEvents.trigger("chat-composer:load-uploads", [fakeUpload])
);
assert.strictEqual(count(".chat-composer-upload"), 1);
const done = assert.async();
this.appEvents = this.container.lookup("service:appEvents");
this.appEvents.on(
"upload-mixin:chat-composer-uploader:upload-success",
(fileName, upload) => {
assert.strictEqual(fileName, "avatar.png");
assert.deepEqual(upload, mockUploadResponse);
done();
}
);
await click(".remove-upload");
assert.strictEqual(count(".chat-composer-upload"), 0);
},
this.appEvents.trigger(
"upload-mixin:chat-composer-uploader:add-files",
createFile("avatar.png")
);
await waitFor(".chat-composer-upload");
assert.strictEqual(count(".chat-composer-upload"), 1);
});
componentTest("cancelling in progress upload", {
template: hbs`{{chat-composer-uploads fileUploadElementId="chat-widget-uploader" onUploadChanged=onUploadChanged}}`,
test("removing a completed upload", async function (assert) {
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
beforeEach() {
setupUploadPretender();
await render(hbs`
<ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
`);
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
},
this.appEvents = this.container.lookup("service:appEvents");
run(() =>
this.appEvents.trigger("chat-composer:load-uploads", [fakeUpload])
);
assert.strictEqual(count(".chat-composer-upload"), 1);
async test(assert) {
const image = createFile("avatar.png");
const done = assert.async();
this.appEvents = this.container.lookup("service:appEvents");
await click(".remove-upload");
assert.strictEqual(count(".chat-composer-upload"), 0);
});
this.appEvents.on(
`upload-mixin:chat-composer-uploader:upload-cancelled`,
(fileId) => {
assert.strictEqual(
fileId.includes("uppy-avatar/"),
true,
"upload was cancelled"
);
done();
}
);
test("cancelling in progress upload", async function (assert) {
setupUploadPretender();
this.appEvents.trigger(
"upload-mixin:chat-composer-uploader:add-files",
image
);
this.set("changedUploads", null);
this.set("onUploadChanged", (uploads) => {
this.set("changedUploads", uploads);
});
await waitFor(".chat-composer-upload");
assert.strictEqual(count(".chat-composer-upload"), 1);
await render(hbs`
<ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
`);
await click(".remove-upload");
assert.strictEqual(count(".chat-composer-upload"), 0);
},
const image = createFile("avatar.png");
const done = assert.async();
this.appEvents = this.container.lookup("service:appEvents");
this.appEvents.on(
`upload-mixin:chat-composer-uploader:upload-cancelled`,
(fileId) => {
assert.strictEqual(
fileId.includes("uppy-avatar/"),
true,
"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);
await click(".remove-upload");
assert.strictEqual(count(".chat-composer-upload"), 0);
});
});

27
plugins/chat/test/javascripts/components/chat-emoji-avatar-test.js
View File

@ -1,26 +1,21 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-emoji-avatar", function (hooks) {
setupRenderingTest(hooks);
componentTest("uses an emoji as avatar", {
template: hbs`{{chat-emoji-avatar emoji=emoji}}`,
test("uses an emoji as avatar", async function (assert) {
this.set("emoji", ":otter:");
async beforeEach() {
this.set("emoji", ":otter:");
},
await render(hbs`<ChatEmojiAvatar @emoji={{this.emoji}} />`);
async test(assert) {
assert.ok(
exists(
`.chat-emoji-avatar .chat-emoji-avatar-container .emoji[title=otter]`
)
);
},
assert.true(
exists(
`.chat-emoji-avatar .chat-emoji-avatar-container .emoji[title=otter]`
)
);
});
});

22
plugins/chat/test/javascripts/components/chat-emoji-picker-test.js
View File

@ -83,21 +83,21 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
test("When displaying navigation", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
assert.ok(
assert.true(
exists(
`.chat-emoji-picker__section-btn.active[data-section="favorites"]`
),
"it renders first section as active"
);
assert.ok(
assert.true(
exists(
`.chat-emoji-picker__section-btn[data-section="smileys_&_emotion"]`
)
);
assert.ok(
assert.true(
exists(`.chat-emoji-picker__section-btn[data-section="people_&_body"]`)
);
assert.ok(
assert.true(
exists(`.chat-emoji-picker__section-btn[data-section="objects"]`)
);
});
@ -107,11 +107,11 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
await click(".chat-emoji-picker__fitzpatrick-modifier-btn.current.t1");
await click(".chat-emoji-picker__fitzpatrick-modifier-btn.t6");
assert.ok(
assert.true(
exists(`img[src="/images/emoji/twitter/raised_hands/6.png"]`),
"it applies the tone to emojis"
);
assert.ok(
assert.true(
exists(".chat-emoji-picker__fitzpatrick-modifier-btn.current.t6"),
"it changes the current scale to t6"
);
@ -127,7 +127,7 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
await click(`.chat-emoji-picker__section-btn[data-section="objects"]`);
assert.ok(
assert.true(
document.querySelector("#ember-testing-container").scrollTop > 0,
"it scrolls to the section"
);
@ -142,21 +142,21 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
1,
"it filters the emojis list"
);
assert.ok(
assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
"it filters the correct emoji"
);
await fillIn(".dc-filter-input", "Grinning");
assert.ok(
assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
"it is case insensitive"
);
await fillIn(".dc-filter-input", "smiley_cat");
assert.ok(
assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
"it filters the correct emoji using search alias"
);
@ -193,7 +193,7 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
test("When opening the picker", async function (assert) {
await render(hbs`<ChatEmojiPicker />`);
assert.ok(document.activeElement.classList.contains("dc-filter-input"));
assert.true(document.activeElement.classList.contains("dc-filter-input"));
});
test("When hovering an emoji", async function (assert) {

8
plugins/chat/test/javascripts/components/chat-live-pane-test.js
View File

@ -30,15 +30,15 @@ module("Discourse Chat | Component | chat-live-pane", function (hooks) {
);
await render(
hbs`{{chat-live-pane loadingMorePast=true chat=chat chatChannel=channel}}`
hbs`<ChatLivePane @loadingMorePast={{true}} @chat={{this.chat}} @chatChannel={{this.channel}} />`
);
assert.ok(exists(".chat-skeleton"));
assert.true(exists(".chat-skeleton"));
await render(
hbs`{{chat-live-pane loadingMoreFuture=true chat=chat chatChannel=channel}}`
hbs`<ChatLivePane @loadingMoreFuture={{true}} @chat={{this.chat}} @chatChannel={{this.channel}} />`
);
assert.ok(exists(".chat-skeleton"));
assert.true(exists(".chat-skeleton"));
});
});

31
plugins/chat/test/javascripts/components/chat-message-avatar-test.js
View File

@ -1,34 +1,25 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-message-avatar", function (hooks) {
setupRenderingTest(hooks);
componentTest("chat_webhook_event", {
template: hbs`{{chat-message-avatar message=message}}`,
test("chat_webhook_event", async function (assert) {
this.set("message", { chat_webhook_event: { emoji: ":heart:" } });
beforeEach() {
this.set("message", { chat_webhook_event: { emoji: ":heart:" } });
},
await render(hbs`<ChatMessageAvatar @message={{this.message}} />`);
async test(assert) {
assert.equal(query(".chat-emoji-avatar .emoji").title, "heart");
},
assert.strictEqual(query(".chat-emoji-avatar .emoji").title, "heart");
});
componentTest("user", {
template: hbs`{{chat-message-avatar message=message}}`,
test("user", async function (assert) {
this.set("message", { user: { username: "discobot" } });
beforeEach() {
this.set("message", { user: { username: "discobot" } });
},
await render(hbs`<ChatMessageAvatar @message={{this.message}} />`);
async test(assert) {
assert.ok(exists('.chat-user-avatar [data-user-card="discobot"]'));
},
assert.true(exists('.chat-user-avatar [data-user-card="discobot"]'));
});
});

706
plugins/chat/test/javascripts/components/chat-message-collapser-test.js
View File

@ -1,6 +1,4 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { click, render } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile";
import {
@ -57,9 +55,9 @@ module("Discourse Chat | Component | chat message collapser", function (hooks) {
test("escapes uploads header", async function (assert) {
this.set("uploads", [{ original_filename: evilString }]);
await render(hbs`{{chat-message-collapser uploads=uploads}}`);
await render(hbs`<ChatMessageCollapser @uploads={{this.uploads}} />`);
assert.ok(
assert.true(
query(".chat-message-collapser-link-small").innerHTML.includes(
evilStringEscaped
)
@ -74,115 +72,109 @@ module(
test("escapes youtube header", async function (assert) {
this.set("cooked", youtubeCooked.replace("ytId1", evilString));
await render(hbs`{{chat-message-collapser cooked=cooked}}`);
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
assert.ok(
assert.true(
query(".chat-message-collapser-link").href.includes(
"%3Cscript%3Esomeeviltitle%3C/script%3E"
)
);
});
componentTest("shows youtube link in header", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows youtube link in header", async function (assert) {
this.set("cooked", youtubeCooked);
beforeEach() {
this.set("cooked", youtubeCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const link = document.querySelectorAll(".chat-message-collapser-link");
const link = queryAll(".chat-message-collapser-link");
assert.equal(link.length, 2, "two youtube links rendered");
assert.strictEqual(
link[0].href,
"https://www.youtube.com/watch?v=ytId1"
);
assert.strictEqual(
link[1].href,
"https://www.youtube.com/watch?v=ytId2"
);
},
assert.strictEqual(link.length, 2, "two youtube links rendered");
assert.strictEqual(link[0].href, "https://www.youtube.com/watch?v=ytId1");
assert.strictEqual(link[1].href, "https://www.youtube.com/watch?v=ytId2");
});
componentTest("shows all user written text", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows all user written text", async function (assert) {
youtubeCooked.youtubeid;
this.set("cooked", youtubeCooked);
beforeEach() {
youtubeCooked.youtubeid;
this.set("cooked", youtubeCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const text = document.querySelectorAll(".chat-message-collapser p");
const text = queryAll(".chat-message-collapser p");
assert.equal(text.length, 3, "shows all written text");
assert.strictEqual(
text[0].innerText,
"written text",
"first line of written text"
);
assert.strictEqual(
text[1].innerText,
"more written text",
"third line of written text"
);
assert.strictEqual(
text[2].innerText,
"and even more",
"fifth line of written text"
);
},
assert.strictEqual(text.length, 3, "shows all written text");
assert.strictEqual(
text[0].innerText,
"written text",
"first line of written text"
);
assert.strictEqual(
text[1].innerText,
"more written text",
"third line of written text"
);
assert.strictEqual(
text[2].innerText,
"and even more",
"fifth line of written text"
);
});
componentTest("collapses and expands cooked youtube", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("collapses and expands cooked youtube", async function (assert) {
this.set("cooked", youtubeCooked);
beforeEach() {
this.set("cooked", youtubeCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const youtubeDivs = document.querySelectorAll(".onebox");
const youtubeDivs = queryAll(".onebox");
assert.equal(youtubeDivs.length, 2, "two youtube previews rendered");
assert.strictEqual(
youtubeDivs.length,
2,
"two youtube previews rendered"
);
await click(
document.querySelectorAll(".chat-message-collapser-opened")[0],
"close first preview"
);
await click(
queryAll(".chat-message-collapser-opened")[0],
"close first preview"
);
assert.notOk(
visible(".onebox[data-youtube-id='ytId1']"),
"first youtube preview hidden"
);
assert.ok(
visible(".onebox[data-youtube-id='ytId2']"),
"second youtube preview still visible"
);
assert.false(
visible(".onebox[data-youtube-id='ytId1']"),
"first youtube preview hidden"
);
assert.true(
visible(".onebox[data-youtube-id='ytId2']"),
"second youtube preview still visible"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(youtubeDivs.length, 2, "two youtube previews rendered");
assert.strictEqual(
youtubeDivs.length,
2,
"two youtube previews rendered"
);
await click(
document.querySelectorAll(".chat-message-collapser-opened")[1],
"close second preview"
);
await click(
queryAll(".chat-message-collapser-opened")[1],
"close second preview"
);
assert.ok(
visible(".onebox[data-youtube-id='ytId1']"),
"first youtube preview still visible"
);
assert.notOk(
visible(".onebox[data-youtube-id='ytId2']"),
"second youtube preview hidden"
);
assert.true(
visible(".onebox[data-youtube-id='ytId1']"),
"first youtube preview still visible"
);
assert.false(
visible(".onebox[data-youtube-id='ytId2']"),
"second youtube preview hidden"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(youtubeDivs.length, 2, "two youtube previews rendered");
},
assert.strictEqual(
youtubeDivs.length,
2,
"two youtube previews rendered"
);
});
}
);
@ -193,65 +185,57 @@ module(
setupRenderingTest(hooks);
const imageTextCooked = "<p>A picture of Tomtom</p>";
componentTest("shows filename for one image", {
template: hbs`{{chat-message-collapser cooked=cooked uploads=uploads}}`,
test("shows filename for one image", async function (assert) {
this.set("cooked", imageTextCooked);
this.set("uploads", [{ original_filename: "tomtom.jpeg" }]);
beforeEach() {
this.set("cooked", imageTextCooked);
this.set("uploads", [{ original_filename: "tomtom.jpeg" }]);
},
await render(
hbs`<ChatMessageCollapser @cooked={{this.cooked}} @uploads={{this.uploads}} />`
);
async test(assert) {
assert.ok(
query(".chat-message-collapser-link-small").innerText.includes(
"tomtom.jpeg"
)
);
},
assert.true(
query(".chat-message-collapser-link-small").innerText.includes(
"tomtom.jpeg"
)
);
});
componentTest("shows number of files for multiple images", {
template: hbs`{{chat-message-collapser cooked=cooked uploads=uploads}}`,
test("shows number of files for multiple images", async function (assert) {
this.set("cooked", imageTextCooked);
this.set("uploads", [{}, {}]);
beforeEach() {
this.set("cooked", imageTextCooked);
this.set("uploads", [{}, {}]);
},
await render(
hbs`<ChatMessageCollapser @cooked={{this.cooked}} @uploads={{this.uploads}} />`
);
async test(assert) {
assert.ok(
query(".chat-message-collapser-link-small").innerText.includes(
"2 files"
)
);
},
assert.true(
query(".chat-message-collapser-link-small").innerText.includes(
"2 files"
)
);
});
componentTest("collapses and expands images", {
template: hbs`{{chat-message-collapser cooked=cooked uploads=uploads}}`,
test("collapses and expands images", async function (assert) {
this.set("cooked", imageTextCooked);
this.set("uploads", [{ original_filename: "tomtom.png" }]);
beforeEach() {
this.set("cooked", imageTextCooked);
this.set("uploads", [{ original_filename: "tomtom.png" }]);
},
await render(
hbs`<ChatMessageCollapser @cooked={{this.cooked}} @uploads={{this.uploads}} />`
);
async test(assert) {
const uploads = ".chat-uploads";
const chatImageUpload = ".chat-img-upload";
const uploads = ".chat-uploads";
const chatImageUpload = ".chat-img-upload";
assert.ok(visible(uploads));
assert.ok(visible(chatImageUpload));
assert.true(visible(uploads));
assert.true(visible(chatImageUpload));
await click(".chat-message-collapser-opened");
await click(".chat-message-collapser-opened");
assert.false(visible(uploads));
assert.false(visible(chatImageUpload));
assert.notOk(visible(uploads));
assert.notOk(visible(chatImageUpload));
await click(".chat-message-collapser-closed");
assert.ok(visible(uploads));
assert.ok(visible(chatImageUpload));
},
await click(".chat-message-collapser-closed");
assert.true(visible(uploads));
assert.true(visible(chatImageUpload));
});
}
);
@ -261,93 +245,79 @@ module(
function (hooks) {
setupRenderingTest(hooks);
componentTest("shows links for animated image", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows links for animated image", async function (assert) {
this.set("cooked", animatedImageCooked);
beforeEach() {
this.set("cooked", animatedImageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const links = document.querySelectorAll(
"a.chat-message-collapser-link-small"
);
const links = queryAll("a.chat-message-collapser-link-small");
assert.ok(links[0].innerText.trim().includes("avatar.png"));
assert.ok(links[0].href.includes("avatar.png"));
assert.true(links[0].innerText.trim().includes("avatar.png"));
assert.true(links[0].href.includes("avatar.png"));
assert.ok(
links[1].innerText.trim().includes("d-logo-sketch-small.png")
);
assert.ok(links[1].href.includes("d-logo-sketch-small.png"));
},
assert.true(
links[1].innerText.trim().includes("d-logo-sketch-small.png")
);
assert.true(links[1].href.includes("d-logo-sketch-small.png"));
});
componentTest("shows all user written text", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows all user written text", async function (assert) {
this.set("cooked", animatedImageCooked);
beforeEach() {
this.set("cooked", animatedImageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const text = document.querySelectorAll(".chat-message-collapser p");
const text = queryAll(".chat-message-collapser p");
assert.equal(text.length, 5, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[2].innerText, "more written text");
assert.strictEqual(text[4].innerText, "and even more");
},
assert.strictEqual(text.length, 5, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[2].innerText, "more written text");
assert.strictEqual(text[4].innerText, "and even more");
});
componentTest("collapses and expands animated image onebox", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("collapses and expands animated image onebox", async function (assert) {
this.set("cooked", animatedImageCooked);
beforeEach() {
this.set("cooked", animatedImageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const animatedOneboxes = document.querySelectorAll(".animated.onebox");
const animatedOneboxes = queryAll(".animated.onebox");
assert.equal(animatedOneboxes.length, 2, "two oneboxes rendered");
assert.strictEqual(animatedOneboxes.length, 2, "two oneboxes rendered");
await click(
document.querySelectorAll(".chat-message-collapser-opened")[0],
"close first preview"
);
await click(
queryAll(".chat-message-collapser-opened")[0],
"close first preview"
);
assert.notOk(
visible(".onebox[src='/images/avatar.png']"),
"first onebox hidden"
);
assert.ok(
visible(".onebox[src='/images/d-logo-sketch-small.png']"),
"second onebox still visible"
);
assert.false(
visible(".onebox[src='/images/avatar.png']"),
"first onebox hidden"
);
assert.true(
visible(".onebox[src='/images/d-logo-sketch-small.png']"),
"second onebox still visible"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(animatedOneboxes.length, 2, "two oneboxes rendered");
assert.strictEqual(animatedOneboxes.length, 2, "two oneboxes rendered");
await click(
document.querySelectorAll(".chat-message-collapser-opened")[1],
"close second preview"
);
await click(
queryAll(".chat-message-collapser-opened")[1],
"close second preview"
);
assert.ok(
visible(".onebox[src='/images/avatar.png']"),
"first onebox still visible"
);
assert.notOk(
visible(".onebox[src='/images/d-logo-sketch-small.png']"),
"second onebox hidden"
);
assert.true(
visible(".onebox[src='/images/avatar.png']"),
"first onebox still visible"
);
assert.false(
visible(".onebox[src='/images/d-logo-sketch-small.png']"),
"second onebox hidden"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(animatedOneboxes.length, 2, "two oneboxes rendered");
},
assert.strictEqual(animatedOneboxes.length, 2, "two oneboxes rendered");
});
}
);
@ -357,91 +327,77 @@ module(
function (hooks) {
setupRenderingTest(hooks);
componentTest("shows links for animated image", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows links for animated image", async function (assert) {
this.set("cooked", externalImageCooked);
beforeEach() {
this.set("cooked", externalImageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const links = document.querySelectorAll(
"a.chat-message-collapser-link-small"
);
const links = queryAll("a.chat-message-collapser-link-small");
assert.ok(links[0].innerText.trim().includes("http://cat1.com"));
assert.ok(links[0].href.includes("http://cat1.com"));
assert.true(links[0].innerText.trim().includes("http://cat1.com"));
assert.true(links[0].href.includes("http://cat1.com"));
assert.ok(links[1].innerText.trim().includes("http://cat2.com"));
assert.ok(links[1].href.includes("http://cat2.com"));
},
assert.true(links[1].innerText.trim().includes("http://cat2.com"));
assert.true(links[1].href.includes("http://cat2.com"));
});
componentTest("shows all user written text", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows all user written text", async function (assert) {
this.set("cooked", externalImageCooked);
beforeEach() {
this.set("cooked", externalImageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const text = document.querySelectorAll(".chat-message-collapser p");
const text = queryAll(".chat-message-collapser p");
assert.equal(text.length, 5, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[2].innerText, "more written text");
assert.strictEqual(text[4].innerText, "and even more");
},
assert.strictEqual(text.length, 5, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[2].innerText, "more written text");
assert.strictEqual(text[4].innerText, "and even more");
});
componentTest("collapses and expands image oneboxes", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("collapses and expands image oneboxes", async function (assert) {
this.set("cooked", externalImageCooked);
beforeEach() {
this.set("cooked", externalImageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const imageOneboxes = document.querySelectorAll(".onebox");
const imageOneboxes = queryAll(".onebox");
assert.equal(imageOneboxes.length, 2, "two oneboxes rendered");
assert.strictEqual(imageOneboxes.length, 2, "two oneboxes rendered");
await click(
document.querySelectorAll(".chat-message-collapser-opened")[0],
"close first preview"
);
await click(
queryAll(".chat-message-collapser-opened")[0],
"close first preview"
);
assert.notOk(
visible(".onebox[href='http://cat1.com']"),
"first onebox hidden"
);
assert.ok(
visible(".onebox[href='http://cat2.com']"),
"second onebox still visible"
);
assert.false(
visible(".onebox[href='http://cat1.com']"),
"first onebox hidden"
);
assert.true(
visible(".onebox[href='http://cat2.com']"),
"second onebox still visible"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(imageOneboxes.length, 2, "two oneboxes rendered");
assert.strictEqual(imageOneboxes.length, 2, "two oneboxes rendered");
await click(
document.querySelectorAll(".chat-message-collapser-opened")[1],
"close second preview"
);
await click(
queryAll(".chat-message-collapser-opened")[1],
"close second preview"
);
assert.ok(
visible(".onebox[href='http://cat1.com']"),
"first onebox still visible"
);
assert.notOk(
visible(".onebox[href='http://cat2.com']"),
"second onebox hidden"
);
assert.true(
visible(".onebox[href='http://cat1.com']"),
"first onebox still visible"
);
assert.false(
visible(".onebox[href='http://cat2.com']"),
"second onebox hidden"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(imageOneboxes.length, 2, "two oneboxes rendered");
},
assert.strictEqual(imageOneboxes.length, 2, "two oneboxes rendered");
});
}
);
@ -458,129 +414,107 @@ module(
.replace("shows alt", evilString)
.replace("/images/d-logo-sketch-small.png", evilString)
);
await render(hbs`{{chat-message-collapser cooked=cooked}}`);
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
assert.ok(
assert.true(
queryAll(".chat-message-collapser-link-small")[0].innerHTML.includes(
evilStringEscaped
)
);
assert.ok(
assert.true(
queryAll(".chat-message-collapser-link-small")[1].innerHTML.includes(
"%3Cscript%3Esomeeviltitle%3C/script%3E"
)
);
});
componentTest("shows alt or links (if no alt) for linked image", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows alt or links (if no alt) for linked image", async function (assert) {
this.set("cooked", imageCooked);
beforeEach() {
this.set("cooked", imageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const links = document.querySelectorAll(
"a.chat-message-collapser-link-small"
);
const links = queryAll("a.chat-message-collapser-link-small");
assert.ok(links[0].innerText.trim().includes("shows alt"));
assert.ok(links[0].href.includes("/images/avatar.png"));
assert.true(links[0].innerText.trim().includes("shows alt"));
assert.true(links[0].href.includes("/images/avatar.png"));
assert.ok(
links[1].innerText.trim().includes("/images/d-logo-sketch-small.png")
);
assert.ok(links[1].href.includes("/images/d-logo-sketch-small.png"));
},
assert.true(
links[1].innerText.trim().includes("/images/d-logo-sketch-small.png")
);
assert.true(links[1].href.includes("/images/d-logo-sketch-small.png"));
});
componentTest("shows all user written text", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows all user written text", async function (assert) {
this.set("cooked", imageCooked);
beforeEach() {
this.set("cooked", imageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const text = document.querySelectorAll(".chat-message-collapser p");
const text = queryAll(".chat-message-collapser p");
assert.equal(text.length, 6, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[2].innerText, "more written text");
assert.strictEqual(text[4].innerText, "and even more");
},
assert.strictEqual(text.length, 6, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[2].innerText, "more written text");
assert.strictEqual(text[4].innerText, "and even more");
});
componentTest("collapses and expands images", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("collapses and expands images", async function (assert) {
this.set("cooked", imageCooked);
beforeEach() {
this.set("cooked", imageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const images = document.querySelectorAll("img");
const images = queryAll("img");
assert.equal(images.length, 3);
assert.strictEqual(images.length, 3);
await click(
document.querySelectorAll(".chat-message-collapser-opened")[0],
"close first preview"
);
await click(
queryAll(".chat-message-collapser-opened")[0],
"close first preview"
);
assert.notOk(
visible("img[src='/images/avatar.png']"),
"first image hidden"
);
assert.ok(
visible("img[src='/images/d-logo-sketch-small.png']"),
"second image still visible"
);
assert.false(
visible("img[src='/images/avatar.png']"),
"first image hidden"
);
assert.true(
visible("img[src='/images/d-logo-sketch-small.png']"),
"second image still visible"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(images.length, 3);
assert.strictEqual(images.length, 3);
await click(
document.querySelectorAll(".chat-message-collapser-opened")[1],
"close second preview"
);
await click(
queryAll(".chat-message-collapser-opened")[1],
"close second preview"
);
assert.ok(
visible("img[src='/images/avatar.png']"),
"first image still visible"
);
assert.notOk(
visible("img[src='/images/d-logo-sketch-small.png']"),
"second image hidden"
);
assert.true(
visible("img[src='/images/avatar.png']"),
"first image still visible"
);
assert.false(
visible("img[src='/images/d-logo-sketch-small.png']"),
"second image hidden"
);
await click(".chat-message-collapser-closed");
await click(".chat-message-collapser-closed");
assert.equal(images.length, 3);
},
assert.strictEqual(images.length, 3);
});
componentTest("does not show collapser for emoji images", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("does not show collapser for emoji images", async function (assert) {
this.set("cooked", imageCooked);
beforeEach() {
this.set("cooked", imageCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const links = document.querySelectorAll(
"a.chat-message-collapser-link-small"
);
const images = document.querySelectorAll("img");
const collapser = document.querySelectorAll(
".chat-message-collapser-opened"
);
const links = queryAll("a.chat-message-collapser-link-small");
const images = queryAll("img");
const collapser = queryAll(".chat-message-collapser-opened");
assert.equal(links.length, 2);
assert.equal(images.length, 3, "shows images and emoji");
assert.equal(collapser.length, 2);
},
assert.strictEqual(links.length, 2);
assert.strictEqual(images.length, 3, "shows images and emoji");
assert.strictEqual(collapser.length, 2);
});
}
);
@ -597,9 +531,9 @@ module(
.replace("https://imgur.com/gallery/yyVx5lJ", evilString)
.replace("Le tomtom album", evilString)
);
await render(hbs`{{chat-message-collapser cooked=cooked}}`);
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
assert.ok(
assert.true(
query(".chat-message-collapser-link-small").href.includes(
"%3Cscript%3Esomeeviltitle%3C/script%3E"
)
@ -610,71 +544,53 @@ module(
);
});
componentTest("removes album title overlay", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("removes album title overlay", async function (assert) {
this.set("cooked", galleryCooked);
beforeEach() {
this.set("cooked", galleryCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
assert.notOk(visible(".album-title"), "album title removed");
},
assert.false(visible(".album-title"), "album title removed");
});
componentTest("shows gallery link", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows gallery link", async function (assert) {
this.set("cooked", galleryCooked);
beforeEach() {
this.set("cooked", galleryCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
assert.ok(
query(".chat-message-collapser-link-small").innerText.includes(
"Le tomtom album"
)
);
},
assert.true(
query(".chat-message-collapser-link-small").innerText.includes(
"Le tomtom album"
)
);
});
componentTest("shows all user written text", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("shows all user written text", async function (assert) {
this.set("cooked", galleryCooked);
beforeEach() {
this.set("cooked", galleryCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
const text = document.querySelectorAll(".chat-message-collapser p");
const text = queryAll(".chat-message-collapser p");
assert.equal(text.length, 2, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[1].innerText, "more written text");
},
assert.strictEqual(text.length, 2, "shows all written text");
assert.strictEqual(text[0].innerText, "written text");
assert.strictEqual(text[1].innerText, "more written text");
});
componentTest("collapses and expands images", {
template: hbs`{{chat-message-collapser cooked=cooked}}`,
test("collapses and expands images", async function (assert) {
this.set("cooked", galleryCooked);
beforeEach() {
this.set("cooked", galleryCooked);
},
await render(hbs`<ChatMessageCollapser @cooked={{this.cooked}} />`);
async test(assert) {
assert.ok(visible("img"), "image visible initially");
assert.true(visible("img"), "image visible initially");
await click(
document.querySelectorAll(".chat-message-collapser-opened")[0],
"close preview"
);
await click(
queryAll(".chat-message-collapser-opened")[0],
"close preview"
);
assert.false(visible("img"), "image hidden");
assert.notOk(visible("img"), "image hidden");
await click(".chat-message-collapser-closed");
assert.ok(visible("img"), "image visible initially");
},
await click(".chat-message-collapser-closed");
assert.true(visible("img"), "image visible initially");
});
}
);

173
plugins/chat/test/javascripts/components/chat-message-info-test.js
View File

@ -1,140 +1,111 @@
import Bookmark from "discourse/models/bookmark";
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import I18n from "I18n";
import { module } from "qunit";
import { module, test } from "qunit";
import User from "discourse/models/user";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-message-info", function (hooks) {
setupRenderingTest(hooks);
componentTest("chat_webhook_event", {
template: hbs`{{chat-message-info message=message}}`,
test("chat_webhook_event", async function (assert) {
this.set("message", { chat_webhook_event: { username: "discobot" } });
beforeEach() {
this.set("message", { chat_webhook_event: { username: "discobot" } });
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.equal(
query(".chat-message-info__username").innerText.trim(),
this.message.chat_webhook_event.username
);
assert.equal(
query(".chat-message-info__bot-indicator").textContent.trim(),
I18n.t("chat.bot")
);
},
assert.strictEqual(
query(".chat-message-info__username").innerText.trim(),
this.message.chat_webhook_event.username
);
assert.strictEqual(
query(".chat-message-info__bot-indicator").textContent.trim(),
I18n.t("chat.bot")
);
});
componentTest("user", {
template: hbs`{{chat-message-info message=message}}`,
test("user", async function (assert) {
this.set("message", { user: { username: "discobot" } });
beforeEach() {
this.set("message", { user: { username: "discobot" } });
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.equal(
query(".chat-message-info__username").innerText.trim(),
this.message.user.username
);
},
assert.strictEqual(
query(".chat-message-info__username").innerText.trim(),
this.message.user.username
);
});
componentTest("date", {
template: hbs`{{chat-message-info message=message}}`,
test("date", async function (assert) {
this.set("message", {
user: { username: "discobot" },
created_at: moment(),
});
beforeEach() {
this.set("message", {
user: { username: "discobot" },
created_at: moment(),
});
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.ok(exists(".chat-message-info__date"));
},
assert.true(exists(".chat-message-info__date"));
});
componentTest("bookmark (with reminder)", {
template: hbs`{{chat-message-info message=message}}`,
test("bookmark (with reminder)", async function (assert) {
this.set("message", {
user: { username: "discobot" },
bookmark: Bookmark.create({
reminder_at: moment(),
name: "some name",
}),
});
beforeEach() {
this.set("message", {
user: { username: "discobot" },
bookmark: Bookmark.create({
reminder_at: moment(),
name: "some name",
}),
});
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.ok(
exists(".chat-message-info__bookmark .d-icon-discourse-bookmark-clock")
);
},
assert.true(
exists(".chat-message-info__bookmark .d-icon-discourse-bookmark-clock")
);
});
componentTest("bookmark (no reminder)", {
template: hbs`{{chat-message-info message=message}}`,
test("bookmark (no reminder)", async function (assert) {
this.set("message", {
user: { username: "discobot" },
bookmark: Bookmark.create({
name: "some name",
}),
});
beforeEach() {
this.set("message", {
user: { username: "discobot" },
bookmark: Bookmark.create({
name: "some name",
}),
});
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.ok(exists(".chat-message-info__bookmark .d-icon-bookmark"));
},
assert.true(exists(".chat-message-info__bookmark .d-icon-bookmark"));
});
componentTest("user status", {
template: hbs`{{chat-message-info message=message}}`,
test("user status", async function (assert) {
const status = { description: "off to dentist", emoji: "tooth" };
this.set("message", { user: User.create({ status }) });
beforeEach() {
const status = { description: "off to dentist", emoji: "tooth" };
this.set("message", { user: User.create({ status }) });
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.ok(exists(".chat-message-info__status .user-status-message"));
},
assert.true(exists(".chat-message-info__status .user-status-message"));
});
componentTest("reviewable", {
template: hbs`{{chat-message-info message=message}}`,
test("reviewable", async function (assert) {
this.set("message", {
user: { username: "discobot" },
user_flag_status: 0,
});
beforeEach() {
this.set("message", {
user: { username: "discobot" },
user_flag_status: 0,
});
},
await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
async test(assert) {
assert.equal(
query(".chat-message-info__flag > .svg-icon-title").title,
I18n.t("chat.you_flagged")
);
assert.strictEqual(
query(".chat-message-info__flag > .svg-icon-title").title,
I18n.t("chat.you_flagged")
);
this.set("message", {
user: { username: "discobot" },
reviewable_id: 1,
});
this.set("message", {
user: { username: "discobot" },
reviewable_id: 1,
});
assert.equal(
query(".chat-message-info__flag a .svg-icon-title").title,
I18n.t("chat.flagged")
);
},
assert.strictEqual(
query(".chat-message-info__flag a .svg-icon-title").title,
I18n.t("chat.flagged")
);
});
});

12
plugins/chat/test/javascripts/components/chat-message-move-to-channel-modal-inner-test.js
View File

@ -18,11 +18,15 @@ module(
this.set("chat", { publicChannels: [this.channel] });
this.set("selectedMessageIds", [1]);
await render(
hbs`{{chat-message-move-to-channel-modal-inner selectedMessageIds=selectedMessageIds sourceChannel=channel chat=chat}}`
);
await render(hbs`
<ChatMessageMoveToChannelModalInner
@selectedMessageIds={{this.selectedMessageIds}}
@sourceChannel={{this.channel}}
@chat={{this.chat}}
/>
`);
assert.ok(
assert.true(
query(".chat-message-move-to-channel-modal-inner").innerHTML.includes(
"&lt;script&gt;someeviltitle&lt;/script&gt;"
)

143
plugins/chat/test/javascripts/components/chat-message-reaction-test.js
View File

@ -1,104 +1,87 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { click } from "@ember/test-helpers";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { click, render } from "@ember/test-helpers";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module } from "qunit";
import { module, test } from "qunit";
module("Discourse Chat | Component | chat-message-reaction", function (hooks) {
setupRenderingTest(hooks);
componentTest("accepts arbitrary class property", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart") class="foo"}}`,
test("accepts arbitrary class property", async function (assert) {
await render(hbs`
<ChatMessageReaction @reaction={{hash emoji="heart"}} @class="foo" />
`);
async test(assert) {
assert.ok(exists(".chat-message-reaction.foo"));
},
assert.true(exists(".chat-message-reaction.foo"));
});
componentTest("adds reacted class when user reacted", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart" reacted=true)}}`,
test("adds reacted class when user reacted", async function (assert) {
await render(hbs`
<ChatMessageReaction @reaction={{hash emoji="heart" reacted=true}} />
`);
async test(assert) {
assert.ok(exists(".chat-message-reaction.reacted"));
},
assert.true(exists(".chat-message-reaction.reacted"));
});
componentTest("adds reaction name as class", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart")}}`,
test("adds reaction name as class", async function (assert) {
await render(hbs`<ChatMessageReaction @reaction={{hash emoji="heart"}} />`);
async test(assert) {
assert.ok(exists(`.chat-message-reaction[data-emoji-name="heart"]`));
},
assert.true(exists(`.chat-message-reaction[data-emoji-name="heart"]`));
});
componentTest("adds show class when count is positive", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart" count=this.count)}}`,
test("adds show class when count is positive", async function (assert) {
this.set("count", 0);
beforeEach() {
this.set("count", 0);
},
await render(hbs`
<ChatMessageReaction @reaction={{hash emoji="heart" count=this.count}} />
`);
async test(assert) {
assert.notOk(exists(".chat-message-reaction.show"));
assert.false(exists(".chat-message-reaction.show"));
this.set("count", 1);
assert.true(exists(".chat-message-reaction.show"));
});
test("title/alt attributes", async function (assert) {
await render(hbs`<ChatMessageReaction @reaction={{hash emoji="heart"}} />`);
assert.strictEqual(query(".chat-message-reaction").title, ":heart:");
assert.strictEqual(query(".chat-message-reaction img").alt, ":heart:");
});
test("count of reactions", async function (assert) {
this.set("count", 0);
await render(hbs`
<ChatMessageReaction @reaction={{hash emoji="heart" count=this.count}} />
`);
assert.false(exists(".chat-message-reaction .count"));
this.set("count", 2);
assert.strictEqual(query(".chat-message-reaction .count").innerText, "2");
});
test("reaction’s image", async function (assert) {
await render(hbs`<ChatMessageReaction @reaction={{hash emoji="heart"}} />`);
const src = query(".chat-message-reaction img").src;
assert.true(/heart\.png/.test(src));
});
test("click action", async function (assert) {
this.set("count", 0);
this.set("react", () => {
this.set("count", 1);
});
assert.ok(exists(".chat-message-reaction.show"));
},
});
await render(hbs`
<ChatMessageReaction class="show" @reaction={{hash emoji="heart" count=this.count}} @react={{this.react}} />
`);
componentTest("title/alt attributes", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart")}}`,
assert.false(exists(".chat-message-reaction .count"));
async test(assert) {
assert.equal(query(".chat-message-reaction").title, ":heart:");
assert.equal(query(".chat-message-reaction img").alt, ":heart:");
},
});
componentTest("count of reactions", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart" count=this.count)}}`,
beforeEach() {
this.set("count", 0);
},
async test(assert) {
assert.notOk(exists(".chat-message-reaction .count"));
this.set("count", 2);
assert.equal(query(".chat-message-reaction .count").innerText, "2");
},
});
componentTest("reaction’s image", {
template: hbs`{{chat-message-reaction reaction=(hash emoji="heart")}}`,
async test(assert) {
const src = query(".chat-message-reaction img").src;
assert.ok(/heart\.png/.test(src));
},
});
componentTest("click action", {
template: hbs`{{chat-message-reaction class="show" reaction=(hash emoji="heart" count=this.count) react=this.react}}`,
beforeEach() {
this.set("count", 0);
this.set("react", () => {
this.set("count", 1);
});
},
async test(assert) {
assert.notOk(exists(".chat-message-reaction .count"));
await click(".chat-message-reaction");
assert.equal(query(".chat-message-reaction .count").innerText, "1");
},
await click(".chat-message-reaction");
assert.strictEqual(query(".chat-message-reaction .count").innerText, "1");
});
});

49
plugins/chat/test/javascripts/components/chat-message-separator-test.js
View File

@ -1,44 +1,35 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import I18n from "I18n";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-message-separator", function (hooks) {
setupRenderingTest(hooks);
componentTest("newest message", {
template: hbs`{{chat-message-separator message=message}}`,
test("newest message", async function (assert) {
this.set("message", { newestMessage: true });
async beforeEach() {
this.set("message", { newestMessage: true });
},
await render(hbs`<ChatMessageSeparator @message={{this.message}} />`);
async test(assert) {
assert.equal(
query(".chat-message-separator.new-message .text").innerText.trim(),
I18n.t("chat.new_messages")
);
},
assert.strictEqual(
query(".chat-message-separator.new-message .text").innerText.trim(),
I18n.t("chat.new_messages")
);
});
componentTest("first message of the day", {
template: hbs`{{chat-message-separator message=message}}`,
test("first message of the day", async function (assert) {
this.set("date", moment().format("LLL"));
this.set("message", { firstMessageOfTheDayAt: this.date });
async beforeEach() {
this.set("date", moment().format("LLL"));
this.set("message", { firstMessageOfTheDayAt: this.date });
},
await render(hbs`<ChatMessageSeparator @message={{this.message}} />`);
async test(assert) {
assert.equal(
query(
".chat-message-separator.first-daily-message .text"
).innerText.trim(),
this.date
);
},
assert.strictEqual(
query(
".chat-message-separator.first-daily-message .text"
).innerText.trim(),
this.date
);
});
});

40
plugins/chat/test/javascripts/components/chat-message-test.js
View File

@ -60,26 +60,28 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
};
}
const template = hbs`{{chat-message
message=message
canInteractWithChat=canInteractWithChat
details=this.details
chatChannel=chatChannel
setReplyTo=setReplyTo
replyMessageClicked=replyMessageClicked
editButtonClicked=editButtonClicked
selectingMessages=selectingMessages
onStartSelectingMessages=onStartSelectingMessages
onSelectMessage=onSelectMessage
bulkSelectMessages=bulkSelectMessages
onHoverMessage=onHoverMessage
afterReactionAdded=reStickScrollIfNeeded
}}`;
const template = hbs`
<ChatMessage
@message={{this.message}}
@canInteractWithChat={{this.canInteractWithChat}}
@details={{this.details}}
@chatChannel={{this.chatChannel}}
@setReplyTo={{this.setReplyTo}}
@replyMessageClicked={{this.replyMessageClicked}}
@editButtonClicked={{this.editButtonClicked}}
@selectingMessages={{this.selectingMessages}}
@onStartSelectingMessages={{this.onStartSelectingMessages}}
@onSelectMessage={{this.onSelectMessage}}
@bulkSelectMessages={{this.bulkSelectMessages}}
@onHoverMessage={{this.onHoverMessage}}
@afterReactionAdded={{this.reStickScrollIfNeeded}}
/>
`;
test("Message with edits", async function (assert) {
this.setProperties(generateMessageProps({ edited: true }));
await render(template);
assert.ok(
assert.true(
exists(".chat-message-edited"),
"has the correct edited css class"
);
@ -88,7 +90,7 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
test("Deleted message", async function (assert) {
this.setProperties(generateMessageProps({ deleted_at: moment() }));
await render(template);
assert.ok(
assert.true(
exists(".chat-message-deleted .chat-message-expand"),
"has the correct deleted css class and expand button within"
);
@ -97,7 +99,7 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
test("Hidden message", async function (assert) {
this.setProperties(generateMessageProps({ hidden: true }));
await render(template);
assert.ok(
assert.true(
exists(".chat-message-hidden .chat-message-expand"),
"has the correct hidden css class and expand button within"
);
@ -109,7 +111,7 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
await render(template);
await waitFor("div[data-visible=true]");
assert.ok(
assert.true(
exists(".chat-message-container[data-visible=true]"),
"message is marked as visible"
);

86
plugins/chat/test/javascripts/components/chat-message-text-test.js
View File

@ -1,76 +1,62 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile";
import { exists } from "discourse/tests/helpers/qunit-helpers";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-message-text", function (hooks) {
setupRenderingTest(hooks);
componentTest("yields", {
template: hbs`{{#chat-message-text cooked=cooked uploads=uploads}} <div class="yield-me"></div> {{/chat-message-text}}`,
test("yields", async function (assert) {
this.set("cooked", "<p></p>");
beforeEach() {
this.set("cooked", "<p></p>");
},
await render(hbs`
<ChatMessageText @cooked={{this.cooked}} @uploads={{this.uploads}}>
<div class="yield-me"></div>
</ChatMessageText>
`);
async test(assert) {
assert.ok(exists(".yield-me"));
},
assert.true(exists(".yield-me"));
});
componentTest("shows collapsed", {
template: hbs`{{chat-message-text cooked=cooked uploads=uploads}}`,
test("shows collapsed", async function (assert) {
this.set(
"cooked",
'<div class="onebox lazyYT lazyYT-container" data-youtube-id="WaT_rLGuUr8" data-youtube-title="Japanese Katsu Curry (Pork Cutlet)"/>'
);
beforeEach() {
this.set(
"cooked",
'<div class="onebox lazyYT lazyYT-container" data-youtube-id="WaT_rLGuUr8" data-youtube-title="Japanese Katsu Curry (Pork Cutlet)"/>'
);
},
await render(
hbs`<ChatMessageText @cooked={{this.cooked}} @uploads={{this.uploads}} />`
);
async test(assert) {
assert.ok(exists(".chat-message-collapser"));
},
assert.true(exists(".chat-message-collapser"));
});
componentTest("does not collapse a non-image onebox", {
template: hbs`{{chat-message-text cooked=cooked}}`,
test("does not collapse a non-image onebox", async function (assert) {
this.set("cooked", '<p><a href="http://cat1.com" class="onebox"></a></p>');
beforeEach() {
this.set(
"cooked",
'<p><a href="http://cat1.com" class="onebox"></a></p>'
);
},
await render(hbs`<ChatMessageText @cooked={{this.cooked}} />`);
async test(assert) {
assert.notOk(exists(".chat-message-collapser"));
},
assert.false(exists(".chat-message-collapser"));
});
componentTest("shows edits - regular message", {
template: hbs`{{chat-message-text cooked=cooked edited=true}}`,
test("shows edits - regular message", async function (assert) {
this.set("cooked", "<p></p>");
beforeEach() {
this.set("cooked", "<p></p>");
},
await render(
hbs`<ChatMessageText @cooked={{this.cooked}} @edited={{true}} />`
);
async test(assert) {
assert.ok(exists(".chat-message-edited"));
},
assert.true(exists(".chat-message-edited"));
});
componentTest("shows edits - collapsible message", {
template: hbs`{{chat-message-text cooked=cooked edited=true}}`,
test("shows edits - collapsible message", async function (assert) {
this.set("cooked", '<div class="onebox lazyYT-container"></div>');
beforeEach() {
this.set("cooked", '<div class="onebox lazyYT-container"></div>');
},
await render(
hbs`<ChatMessageText @cooked={{this.cooked}} @edited={{true}} />`
);
async test(assert) {
assert.ok(exists(".chat-message-edited"));
},
assert.true(exists(".chat-message-edited"));
});
});

258
plugins/chat/test/javascripts/components/chat-replying-indicator-test.js
View File

@ -1,182 +1,166 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import fabricators from "../helpers/fabricators";
import MockPresenceChannel from "../helpers/mock-presence-channel";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module(
"Discourse Chat | Component | chat-replying-indicator",
function (hooks) {
setupRenderingTest(hooks);
componentTest("not displayed when no one is replying", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("not displayed when no one is replying", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
assert.notOk(exists(".chat-replying-indicator__text"));
},
assert.false(exists(".chat-replying-indicator__text"));
});
componentTest("displays indicator when user is replying", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("displays indicator when user is replying", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
const sam = { id: 1, username: "sam" };
this.set("presenceChannel.users", [sam]);
const sam = { id: 1, username: "sam" };
this.set("presenceChannel.users", [sam]);
assert.equal(
query(".chat-replying-indicator__text").innerText,
`${sam.username} is typing`
);
},
assert.strictEqual(
query(".chat-replying-indicator__text").innerText,
`${sam.username} is typing`
);
});
componentTest("displays indicator when 2 or 3 users are replying", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("displays indicator when 2 or 3 users are replying", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
const sam = { id: 1, username: "sam" };
const mark = { id: 2, username: "mark" };
this.set("presenceChannel.users", [sam, mark]);
const sam = { id: 1, username: "sam" };
const mark = { id: 2, username: "mark" };
this.set("presenceChannel.users", [sam, mark]);
assert.equal(
query(".chat-replying-indicator__text").innerText,
`${sam.username} and ${mark.username} are typing`
);
},
assert.strictEqual(
query(".chat-replying-indicator__text").innerText,
`${sam.username} and ${mark.username} are typing`
);
});
componentTest("displays indicator when 3 users are replying", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("displays indicator when 3 users are replying", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
const sam = { id: 1, username: "sam" };
const mark = { id: 2, username: "mark" };
const joffrey = { id: 3, username: "joffrey" };
this.set("presenceChannel.users", [sam, mark, joffrey]);
const sam = { id: 1, username: "sam" };
const mark = { id: 2, username: "mark" };
const joffrey = { id: 3, username: "joffrey" };
this.set("presenceChannel.users", [sam, mark, joffrey]);
assert.equal(
query(".chat-replying-indicator__text").innerText,
`${sam.username}, ${mark.username} and ${joffrey.username} are typing`
);
},
assert.strictEqual(
query(".chat-replying-indicator__text").innerText,
`${sam.username}, ${mark.username} and ${joffrey.username} are typing`
);
});
componentTest("displays indicator when more than 3 users are replying", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("displays indicator when more than 3 users are replying", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
const sam = { id: 1, username: "sam" };
const mark = { id: 2, username: "mark" };
const joffrey = { id: 3, username: "joffrey" };
const taylor = { id: 4, username: "taylor" };
this.set("presenceChannel.users", [sam, mark, joffrey, taylor]);
const sam = { id: 1, username: "sam" };
const mark = { id: 2, username: "mark" };
const joffrey = { id: 3, username: "joffrey" };
const taylor = { id: 4, username: "taylor" };
this.set("presenceChannel.users", [sam, mark, joffrey, taylor]);
assert.equal(
query(".chat-replying-indicator__text").innerText,
`${sam.username}, ${mark.username} and 2 others are typing`
);
},
assert.strictEqual(
query(".chat-replying-indicator__text").innerText,
`${sam.username}, ${mark.username} and 2 others are typing`
);
});
componentTest("filters current user from list of repliers", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("filters current user from list of repliers", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
const sam = { id: 1, username: "sam" };
this.set("presenceChannel.users", [sam, this.currentUser]);
const sam = { id: 1, username: "sam" };
this.set("presenceChannel.users", [sam, this.currentUser]);
assert.equal(
query(".chat-replying-indicator__text").innerText,
`${sam.username} is typing`
);
},
assert.strictEqual(
query(".chat-replying-indicator__text").innerText,
`${sam.username} is typing`
);
});
componentTest("resets presence when channel is draft", {
template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,
test("resets presence when channel is draft", async function (assert) {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
subscribed: true,
})
);
async beforeEach() {
this.set("chatChannel", fabricators.chatChannel());
this.set(
"presenceChannel",
MockPresenceChannel.create({
name: `/chat-reply/${this.chatChannel.id}`,
subscribed: true,
})
);
},
await render(
hbs`<ChatReplyingIndicator @presenceChannel={{this.presenceChannel}} @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
assert.ok(this.presenceChannel.subscribed);
assert.true(this.presenceChannel.subscribed);
this.set("chatChannel", fabricators.chatChannel({ isDraft: true }));
assert.notOk(this.presenceChannel.subscribed);
},
this.set("chatChannel", fabricators.chatChannel({ isDraft: true }));
assert.false(this.presenceChannel.subscribed);
});
}
);

127
plugins/chat/test/javascripts/components/chat-retention-reminder-test.js
View File

@ -1,93 +1,80 @@
import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
import { set } from "@ember/object";
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import I18n from "I18n";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
module(
"Discourse Chat | Component | chat-retention-reminder",
function (hooks) {
setupRenderingTest(hooks);
componentTest("Shows for public channels when user needs it", {
template: hbs`{{chat-retention-reminder chatChannel=chatChannel}}`,
test("Shows for public channels when user needs it", async function (assert) {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "Category" })
);
this.currentUser.set("needs_channel_retention_reminder", true);
this.siteSettings.chat_channel_retention_days = 100;
async beforeEach() {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "Category" })
);
set(this.currentUser, "needs_channel_retention_reminder", true);
this.siteSettings.chat_channel_retention_days = 100;
},
await render(
hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
assert.equal(
query(".chat-retention-reminder-text").innerText.trim(),
I18n.t("chat.retention_reminders.public", { days: 100 })
);
},
assert.strictEqual(
query(".chat-retention-reminder-text").innerText.trim(),
I18n.t("chat.retention_reminders.public", { days: 100 })
);
});
componentTest(
"Doesn't show for public channels when user has dismissed it",
{
template: hbs`{{chat-retention-reminder chatChannel=chatChannel}}`,
test("Doesn't show for public channels when user has dismissed it", async function (assert) {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "Category" })
);
this.currentUser.set("needs_channel_retention_reminder", false);
this.siteSettings.chat_channel_retention_days = 100;
async beforeEach() {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "Category" })
);
set(this.currentUser, "needs_channel_retention_reminder", false);
this.siteSettings.chat_channel_retention_days = 100;
},
await render(
hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
assert.notOk(exists(".chat-retention-reminder"));
},
}
);
componentTest("Shows for direct message channels when user needs it", {
template: hbs`{{chat-retention-reminder chatChannel=chatChannel}}`,
async beforeEach() {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "DirectMessage" })
);
set(this.currentUser, "needs_dm_retention_reminder", true);
this.siteSettings.chat_dm_retention_days = 100;
},
async test(assert) {
assert.equal(
query(".chat-retention-reminder-text").innerText.trim(),
I18n.t("chat.retention_reminders.dm", { days: 100 })
);
},
assert.false(exists(".chat-retention-reminder"));
});
componentTest("Doesn't show for dm channels when user has dismissed it", {
template: hbs`{{chat-retention-reminder chatChannel=chatChannel}}`,
test("Shows for direct message channels when user needs it", async function (assert) {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "DirectMessage" })
);
this.currentUser.set("needs_dm_retention_reminder", true);
this.siteSettings.chat_dm_retention_days = 100;
async beforeEach() {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "DirectMessage" })
);
set(this.currentUser, "needs_dm_retention_reminder", false);
this.siteSettings.chat_dm_retention_days = 100;
},
await render(
hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
);
async test(assert) {
assert.notOk(exists(".chat-retention-reminder"));
},
assert.strictEqual(
query(".chat-retention-reminder-text").innerText.trim(),
I18n.t("chat.retention_reminders.dm", { days: 100 })
);
});
test("Doesn't show for dm channels when user has dismissed it", async function (assert) {
this.set(
"chatChannel",
ChatChannel.create({ chatable_type: "DirectMessage" })
);
this.currentUser.set("needs_dm_retention_reminder", false);
this.siteSettings.chat_dm_retention_days = 100;
await render(
hbs`<ChatRetentionReminder @chatChannel={{this.chatChannel}} />`
);
assert.false(exists(".chat-retention-reminder"));
});
}
);

90
plugins/chat/test/javascripts/components/chat-upload-test.js
View File

@ -1,10 +1,8 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module } from "qunit";
import { settled } from "@ember/test-helpers";
import { module, test } from "qunit";
import { render, settled } from "@ember/test-helpers";
const IMAGE_FIXTURE = {
id: 290,
@ -54,65 +52,53 @@ const TXT_FIXTURE = {
module("Discourse Chat | Component | chat-upload", function (hooks) {
setupRenderingTest(hooks);
componentTest("with an image", {
template: hbs`{{chat-upload upload=upload}}`,
test("with an image", async function (assert) {
this.set("upload", IMAGE_FIXTURE);
beforeEach() {
this.set("upload", IMAGE_FIXTURE);
},
await render(hbs`<ChatUpload @upload={{this.upload}} />`);
async test(assert) {
assert.true(exists("img.chat-img-upload"), "displays as an image");
const image = query("img.chat-img-upload");
assert.strictEqual(image.loading, "lazy", "is lazy loading");
assert.true(exists("img.chat-img-upload"), "displays as an image");
const image = query("img.chat-img-upload");
assert.strictEqual(image.loading, "lazy", "is lazy loading");
assert.strictEqual(
image.style.backgroundColor,
"rgb(120, 131, 112)",
"sets background to dominant color"
);
assert.strictEqual(
image.style.backgroundColor,
"rgb(120, 131, 112)",
"sets background to dominant color"
);
image.dispatchEvent(new Event("load")); // Fake that the image has loaded
await settled();
image.dispatchEvent(new Event("load")); // Fake that the image has loaded
await settled();
assert.strictEqual(
image.style.backgroundColor,
"",
"removes the background color once the image has loaded"
);
},
assert.strictEqual(
image.style.backgroundColor,
"",
"removes the background color once the image has loaded"
);
});
componentTest("with a video", {
template: hbs`{{chat-upload upload=upload}}`,
test("with a video", async function (assert) {
this.set("upload", VIDEO_FIXTURE);
beforeEach() {
this.set("upload", VIDEO_FIXTURE);
},
await render(hbs`<ChatUpload @upload={{this.upload}} />`);
async test(assert) {
assert.true(exists("video.chat-video-upload"), "displays as an video");
const video = query("video.chat-video-upload");
assert.ok(video.hasAttribute("controls"), "has video controls");
assert.strictEqual(
video.getAttribute("preload"),
"metadata",
"video has correct preload settings"
);
},
assert.true(exists("video.chat-video-upload"), "displays as an video");
const video = query("video.chat-video-upload");
assert.true(video.hasAttribute("controls"), "has video controls");
assert.strictEqual(
video.getAttribute("preload"),
"metadata",
"video has correct preload settings"
);
});
componentTest("non image upload", {
template: hbs`{{chat-upload upload=upload}}`,
test("non image upload", async function (assert) {
this.set("upload", TXT_FIXTURE);
beforeEach() {
this.set("upload", TXT_FIXTURE);
},
await render(hbs`<ChatUpload @upload={{this.upload}} />`);
async test(assert) {
assert.true(exists("a.chat-other-upload"), "displays as a link");
const link = query("a.chat-other-upload");
assert.strictEqual(link.href, TXT_FIXTURE.url, "has the correct URL");
},
assert.true(exists("a.chat-other-upload"), "displays as a link");
const link = query("a.chat-other-upload");
assert.strictEqual(link.href, TXT_FIXTURE.url, "has the correct URL");
});
});

63
plugins/chat/test/javascripts/components/chat-user-avatar-test.js
View File

@ -1,9 +1,8 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { exists } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
const user = {
id: 1,
@ -15,41 +14,37 @@ const user = {
module("Discourse Chat | Component | chat-user-avatar", function (hooks) {
setupRenderingTest(hooks);
componentTest("user is not online", {
template: hbs`{{chat-user-avatar chat=chat user=user}}`,
test("user is not online", async function (assert) {
this.set("user", user);
this.set("chat", { presenceChannel: { users: [] } });
async beforeEach() {
this.set("user", user);
this.set("chat", { presenceChannel: { users: [] } });
},
await render(
hbs`<ChatUserAvatar @chat={{this.chat}} @user={{this.user}} />`
);
async test(assert) {
assert.ok(
exists(
`.chat-user-avatar .chat-user-avatar-container[data-user-card=${user.username}] .avatar[title=${user.username}]`
)
);
assert.notOk(exists(".chat-user-avatar.is-online"));
},
assert.true(
exists(
`.chat-user-avatar .chat-user-avatar-container[data-user-card=${user.username}] .avatar[title=${user.username}]`
)
);
assert.false(exists(".chat-user-avatar.is-online"));
});
componentTest("user is online", {
template: hbs`{{chat-user-avatar chat=chat user=user}}`,
test("user is online", async function (assert) {
this.set("user", user);
this.set("chat", {
presenceChannel: { users: [{ id: user.id }] },
});
async beforeEach() {
this.set("user", user);
this.set("chat", {
presenceChannel: { users: [{ id: user.id }] },
});
},
await render(
hbs`<ChatUserAvatar @chat={{this.chat}} @user={{this.user}} />`
);
async test(assert) {
assert.ok(
exists(
`.chat-user-avatar .chat-user-avatar-container[data-user-card=${user.username}] .avatar[title=${user.username}]`
)
);
assert.ok(exists(".chat-user-avatar.is-online"));
},
assert.true(
exists(
`.chat-user-avatar .chat-user-avatar-container[data-user-card=${user.username}] .avatar[title=${user.username}]`
)
);
assert.true(exists(".chat-user-avatar.is-online"));
});
});

63
plugins/chat/test/javascripts/components/chat-user-display-name-test.js
View File

@ -1,9 +1,8 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import { module } from "qunit";
import { module, test } from "qunit";
import { render } from "@ember/test-helpers";
function displayName() {
return query(".chat-user-display-name").innerText.trim();
@ -14,30 +13,22 @@ module(
function (hooks) {
setupRenderingTest(hooks);
componentTest("username and no name", {
template: hbs`{{chat-user-display-name user=user}}`,
test("username and no name", async function (assert) {
this.siteSettings.prioritize_username_in_ux = true;
this.set("user", { username: "bob", name: null });
async beforeEach() {
this.siteSettings.prioritize_username_in_ux = true;
this.set("user", { username: "bob", name: null });
},
await render(hbs`<ChatUserDisplayName @user={{this.user}} />`);
async test(assert) {
assert.equal(displayName(), "bob");
},
assert.strictEqual(displayName(), "bob");
});
componentTest("username and name", {
template: hbs`{{chat-user-display-name user=user}}`,
test("username and name", async function (assert) {
this.siteSettings.prioritize_username_in_ux = true;
this.set("user", { username: "bob", name: "Bobcat" });
async beforeEach() {
this.siteSettings.prioritize_username_in_ux = true;
this.set("user", { username: "bob", name: "Bobcat" });
},
await render(hbs`<ChatUserDisplayName @user={{this.user}} />`);
async test(assert) {
assert.equal(displayName(), "bob — Bobcat");
},
assert.strictEqual(displayName(), "bob — Bobcat");
});
}
);
@ -47,30 +38,22 @@ module(
function (hooks) {
setupRenderingTest(hooks);
componentTest("no name", {
template: hbs`{{chat-user-display-name user=user}}`,
test("no name", async function (assert) {
this.siteSettings.prioritize_username_in_ux = false;
this.set("user", { username: "bob", name: null });
async beforeEach() {
this.siteSettings.prioritize_username_in_ux = false;
this.set("user", { username: "bob", name: null });
},
await render(hbs`<ChatUserDisplayName @user={{this.user}} />`);
async test(assert) {
assert.equal(displayName(), "bob");
},
assert.strictEqual(displayName(), "bob");
});
componentTest("name and username", {
template: hbs`{{chat-user-display-name user=user}}`,
test("name and username", async function (assert) {
this.siteSettings.prioritize_username_in_ux = false;
this.set("user", { username: "bob", name: "Bobcat" });
async beforeEach() {
this.siteSettings.prioritize_username_in_ux = false;
this.set("user", { username: "bob", name: "Bobcat" });
},
await render(hbs`<ChatUserDisplayName @user={{this.user}} />`);
async test(assert) {
assert.equal(displayName(), "Bobcat — bob");
},
assert.strictEqual(displayName(), "Bobcat — bob");
});
}
);

51
plugins/chat/test/javascripts/components/collapser-test.js
View File

@ -1,45 +1,38 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { click } from "@ember/test-helpers";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { click, render } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile";
import { exists, query, visible } from "discourse/tests/helpers/qunit-helpers";
import { module } from "qunit";
import { exists, visible } from "discourse/tests/helpers/qunit-helpers";
import { module, test } from "qunit";
import { htmlSafe } from "@ember/template";
module("Discourse Chat | Component | collapser", function (hooks) {
setupRenderingTest(hooks);
componentTest("renders header", {
template: hbs`{{collapser header=header}}`,
test("renders header", async function (assert) {
this.set("header", htmlSafe(`<div class="cat">tomtom</div>`));
beforeEach() {
this.set("header", htmlSafe("<div class='cat'>tomtom</div>"));
},
await render(hbs`<Collapser @header={{this.header}} />`);
async test(assert) {
const element = query(".cat");
assert.ok(exists(element));
},
assert.true(exists(".cat"));
});
componentTest("collapses and expands yielded body", {
template: hbs`{{#collapser}}<div class='cat'>body text</div>{{/collapser}}`,
test("collapses and expands yielded body", async function (assert) {
await render(hbs`
<Collapser>
<div class="cat">body text</div>
</Collapser>
`);
test: async function (assert) {
const openButton = ".chat-message-collapser-closed";
const closeButton = ".chat-message-collapser-opened";
const body = ".cat";
const openButton = ".chat-message-collapser-closed";
const closeButton = ".chat-message-collapser-opened";
const body = ".cat";
assert.ok(visible(body));
await click(closeButton);
assert.true(visible(body));
assert.notOk(visible(body));
await click(closeButton);
assert.false(visible(body));
await click(openButton);
assert.ok(visible(body));
},
await click(openButton);
assert.true(visible(body));
});
});

16
plugins/chat/test/javascripts/components/dc-filter-input-test.js
View File

@ -10,26 +10,26 @@ module("Discourse Chat | Component | dc-filter-input", function (hooks) {
test("Left icon", async function (assert) {
await render(hbs`<DcFilterInput @icons={{hash left="bell"}} />`);
assert.ok(exists(".d-icon-bell.-left"));
assert.true(exists(".d-icon-bell.-left"));
});
test("Right icon", async function (assert) {
await render(hbs`<DcFilterInput @icons={{hash right="bell"}} />`);
assert.ok(exists(".d-icon-bell.-right"));
assert.true(exists(".d-icon-bell.-right"));
});
test("Class attribute", async function (assert) {
await render(hbs`<DcFilterInput @class="foo" />`);
assert.ok(exists(".dc-filter-input-container.foo"));
assert.true(exists(".dc-filter-input-container.foo"));
});
test("Html attributes", async function (assert) {
await render(hbs`<DcFilterInput data-foo="1" placeholder="bar" />`);
assert.ok(exists('.dc-filter-input[data-foo="1"]'));
assert.ok(exists('.dc-filter-input[placeholder="bar"]'));
assert.true(exists('.dc-filter-input[data-foo="1"]'));
assert.true(exists('.dc-filter-input[placeholder="bar"]'));
});
test("Filter action", async function (assert) {
@ -40,17 +40,17 @@ module("Discourse Chat | Component | dc-filter-input", function (hooks) {
await render(hbs`<DcFilterInput @filterAction={{this.action}} />`);
await fillIn(".dc-filter-input", "foo");
assert.equal(this.value, "foo");
assert.strictEqual(this.value, "foo");
});
test("Focused state", async function (assert) {
await render(hbs`<DcFilterInput @filterAction={{this.action}} />`);
await triggerEvent(".dc-filter-input", "focusin");
assert.ok(exists(".dc-filter-input-container.is-focused"));
assert.true(exists(".dc-filter-input-container.is-focused"));
await triggerEvent(".dc-filter-input", "focusout");
assert.notOk(exists(".dc-filter-input-container.is-focused"));
assert.false(exists(".dc-filter-input-container.is-focused"));
});
});

192
plugins/chat/test/javascripts/components/direct-message-creator-test.js
View File

@ -1,13 +1,11 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { click, fillIn } from "@ember/test-helpers";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { click, fillIn, render } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import { createDirectMessageChannelDraft } from "discourse/plugins/chat/discourse/models/chat-channel";
import { Promise } from "rsvp";
import fabricators from "../helpers/fabricators";
import { module } from "qunit";
import { module, test } from "qunit";
function mockChat(context, options = {}) {
const mock = context.container.lookup("service:chat");
@ -25,143 +23,119 @@ function mockChat(context, options = {}) {
module("Discourse Chat | Component | direct-message-creator", function (hooks) {
setupRenderingTest(hooks);
componentTest("search", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("search", async function (assert) {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
async test(assert) {
await fillIn(".filter-usernames", "hawk");
assert.ok(exists("li.user[data-username='hawk']"));
},
await fillIn(".filter-usernames", "hawk");
assert.true(exists("li.user[data-username='hawk']"));
});
componentTest("select/deselect", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("select/deselect", async function (assert) {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
assert.false(exists(".selected-user"));
async test(assert) {
assert.notOk(exists(".selected-user"));
await fillIn(".filter-usernames", "hawk");
await click("li.user[data-username='hawk']");
assert.true(exists(".selected-user"));
await fillIn(".filter-usernames", "hawk");
await click("li.user[data-username='hawk']");
assert.ok(exists(".selected-user"));
await click(".selected-user");
assert.notOk(exists(".selected-user"));
},
await click(".selected-user");
assert.false(exists(".selected-user"));
});
componentTest("no search results", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("no search results", async function (assert) {
this.set("chat", mockChat(this, { users: [] }));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this, { users: [] }));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
async test(assert) {
await fillIn(".filter-usernames", "bad cat");
assert.ok(exists(".no-results"));
},
await fillIn(".filter-usernames", "bad cat");
assert.true(exists(".no-results"));
});
componentTest("loads user on first load", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("loads user on first load", async function (assert) {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
async test(assert) {
assert.ok(exists("li.user[data-username='hawk']"));
assert.ok(exists("li.user[data-username='mark']"));
},
assert.true(exists("li.user[data-username='hawk']"));
assert.true(exists("li.user[data-username='mark']"));
});
componentTest("do not load more users after selection", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("do not load more users after selection", async function (assert) {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
async test(assert) {
await click("li.user[data-username='hawk']");
assert.notOk(exists("li.user[data-username='mark']"));
},
await click("li.user[data-username='hawk']");
assert.false(exists("li.user[data-username='mark']"));
});
componentTest("apply is-focused to filter-area on focus input", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}<button class="test-blur">blur</button>`,
test("apply is-focused to filter-area on focus input", async function (assert) {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} /><button class="test-blur">blur</button>`
);
async test(assert) {
await click(".filter-usernames");
await click(".filter-usernames");
assert.true(exists(".filter-area.is-focused"));
assert.ok(exists(".filter-area.is-focused"));
await click(".test-blur");
assert.notOk(exists(".filter-area.is-focused"));
},
await click(".test-blur");
assert.false(exists(".filter-area.is-focused"));
});
componentTest("state is reset on channel change", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("state is reset on channel change", async function (assert) {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
async test(assert) {
await fillIn(".filter-usernames", "hawk");
await fillIn(".filter-usernames", "hawk");
assert.strictEqual(query(".filter-usernames").value, "hawk");
assert.equal(query(".filter-usernames").value, "hawk");
this.set("channel", fabricators.chatChannel());
this.set("channel", createDirectMessageChannelDraft());
this.set("channel", fabricators.chatChannel());
this.set("channel", createDirectMessageChannelDraft());
assert.equal(query(".filter-usernames").value, "");
assert.ok(exists(".filter-area.is-focused"));
assert.ok(exists("li.user[data-username='hawk']"));
},
assert.strictEqual(query(".filter-usernames").value, "");
assert.true(exists(".filter-area.is-focused"));
assert.true(exists("li.user[data-username='hawk']"));
});
componentTest("shows user status", {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
test("shows user status", async function (assert) {
const userWithStatus = {
username: "hawk",
status: { emoji: "tooth", description: "off to dentist" },
};
const chat = mockChat(this, { users: [userWithStatus] });
this.set("chat", chat);
this.set("channel", createDirectMessageChannelDraft());
beforeEach() {
const userWithStatus = {
username: "hawk",
status: { emoji: "tooth", description: "off to dentist" },
};
const chat = mockChat(this, { users: [userWithStatus] });
this.set("chat", chat);
this.set("channel", createDirectMessageChannelDraft());
},
await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
async test(assert) {
await fillIn(".filter-usernames", "hawk");
assert.ok(exists(".user-status-message"));
},
await fillIn(".filter-usernames", "hawk");
assert.true(exists(".user-status-message"));
});
});

12
plugins/chat/test/javascripts/components/on-visibility-action-test.js
View File

@ -15,15 +15,17 @@ module("Discourse Chat | Component | on-visibility-action", function (hooks) {
this.set("root", document.querySelector("#ember-testing"));
await render(
hbs`{{#if display}}{{on-visibility-action action=action root=root}}{{/if}}`
);
await render(hbs`
{{#if display}}
<OnVisibilityAction @action={{this.action}} @root={{this.root}} />
{{/if}}
`);
assert.equal(this.value, null);
assert.strictEqual(this.value, null);
this.set("display", true);
await waitUntil(() => this.value !== null);
assert.equal(this.value, "foo");
assert.strictEqual(this.value, "foo");
});
});

4
plugins/chat/test/javascripts/components/user-card-chat-button-test.js
View File

@ -15,7 +15,7 @@ module("Discourse Chat | Component | user-card-chat-button", function (hooks) {
await render(hbs`<UserCardChatButton/>`);
assert.ok(exists(".user-card-chat-btn"), "it shows the chat button");
assert.true(exists(".user-card-chat-btn"), "it shows the chat button");
});
test("when current user can’t send direct messages", async function (assert) {
@ -25,7 +25,7 @@ module("Discourse Chat | Component | user-card-chat-button", function (hooks) {
await render(hbs`<UserCardChatButton/>`);
assert.notOk(
assert.false(
exists(".user-card-chat-btn"),
"it doesn’t show the chat button"
);

2
plugins/chat/test/javascripts/integration/components/user-menu/chat-notifications-list-test.js
View File

@ -21,7 +21,7 @@ module(
test("empty state when there are no notifications", async function (assert) {
await render(template);
assert.ok(exists(".empty-state .empty-state-body"));
assert.true(exists(".empty-state .empty-state-body"));
assert.strictEqual(
query(".empty-state .empty-state-title").textContent.trim(),
I18n.t("user_menu.no_chat_notifications_title")