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) { function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
hooks.beforeEach(function () {
this.set("channel", fabricators.chatChannel({}));
});
test("channel title is escaped in instructions correctly", async function (assert) { test("channel title is escaped in instructions correctly", async function (assert) {
this.set("channel.title", `<script>someeviltitle</script>`); this.set(
"channel",
await render( fabricators.chatChannel({
hbs`{{chat-channel-archive-modal-inner chatChannel=channel}}` title: `<script>someeviltitle</script>`,
})
); );
assert.ok( await render(
hbs`<ChatChannelArchiveModalInner @chatChannel={{this.channel}} />`
);
assert.true(
query(".chat-channel-archive-modal-instructions").innerHTML.includes( query(".chat-channel-archive-modal-instructions").innerHTML.includes(
"&lt;script&gt;someeviltitle&lt;/script&gt;" "&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) { test("escapes channel title", async function (assert) {
this.channel.set("title", "<div class='xss'>evil</div>"); 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) { test("escapes channel description", async function (assert) {
this.channel.set("description", "<div class='xss'>evil</div>"); 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) { test("Closed channel", async function (assert) {
this.channel.set("status", "closed"); 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) { test("Archived channel", async function (assert) {
this.channel.set("status", "archived"); 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) { test("Muted channel", async function (assert) {
this.channel.currentUserMembership.muted = true; this.channel.currentUserMembership.muted = true;
this.channel.currentUserMembership.following = 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(), query(".chat-channel-card__tag.-muted").textContent.trim(),
I18n.t("chat.muted") I18n.t("chat.muted")
); );
@ -60,27 +60,27 @@ module("Discourse Chat | Component | chat-channel-card", function (hooks) {
test("Joined channel", async function (assert) { test("Joined channel", async function (assert) {
this.channel.currentUserMembership.set("following", true); 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(), query(".chat-channel-card__tag.-joined").textContent.trim(),
I18n.t("chat.joined") 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) { 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) { test("Memberships count", async function (assert) {
this.channel.set("membershipsCount", 4); 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(), query(".chat-channel-card__members").textContent.trim(),
I18n.t("chat.channel.memberships_count", { count: 4 }) 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) { test("No description", async function (assert) {
this.channel.set("description", null); 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) { 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(), query(".chat-channel-card__description").textContent.trim(),
this.channel.description this.channel.description
); );
}); });
test("Name", async function (assert) { 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(), query(".chat-channel-card__name").innerText.trim(),
this.channel.title this.channel.title
); );
}); });
test("Settings button", async function (assert) { 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) { test("Read restricted chatable", async function (assert) {
this.channel.set("chatable.read_restricted", true); 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.true(exists(".d-icon-lock"));
assert.equal( assert.strictEqual(
query(".chat-channel-card").style.borderLeftColor, query(".chat-channel-card").style.borderLeftColor,
"rgb(213, 99, 83)" "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) { function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
hooks.beforeEach(function () {
this.set("channel", fabricators.chatChannel({}));
});
test("channel title is escaped in instructions correctly", async function (assert) { test("channel title is escaped in instructions correctly", async function (assert) {
this.set("channel.title", `<script>someeviltitle</script>`); this.set(
"channel",
await render( fabricators.chatChannel({
hbs`{{chat-channel-delete-modal-inner chatChannel=channel}}` title: `<script>someeviltitle</script>`,
})
); );
assert.ok( await render(
hbs`<ChatChannelDeleteModalInner @chatChannel={{this.channel}} />`
);
assert.true(
query(".chat-channel-delete-modal-instructions").innerHTML.includes( query(".chat-channel-delete-modal-instructions").innerHTML.includes(
"&lt;script&gt;someeviltitle&lt;/script&gt;" "&lt;script&gt;someeviltitle&lt;/script&gt;"
) )

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

@ -1,20 +1,15 @@
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest, import { click, render } from "@ember/test-helpers";
} from "discourse/tests/helpers/component-test";
import { click } from "@ember/test-helpers";
import { exists, query } from "discourse/tests/helpers/qunit-helpers"; import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import pretender from "discourse/tests/helpers/create-pretender"; import pretender from "discourse/tests/helpers/create-pretender";
import I18n from "I18n"; import I18n from "I18n";
import { module } from "qunit"; import { module, test } from "qunit";
module("Discourse Chat | Component | chat-channel-leave-btn", function (hooks) { module("Discourse Chat | Component | chat-channel-leave-btn", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("accepts an optional onLeaveChannel callback", { test("accepts an optional onLeaveChannel callback", async function (assert) {
template: hbs`{{chat-channel-leave-btn channel=channel onLeaveChannel=onLeaveChannel}}`,
beforeEach() {
this.set("foo", 1); this.set("foo", 1);
this.set("onLeaveChannel", () => this.set("foo", 2)); this.set("onLeaveChannel", () => this.set("foo", 2));
this.set("channel", { this.set("channel", {
@ -24,58 +19,44 @@ module("Discourse Chat | Component | chat-channel-leave-btn", function (hooks) {
users: [{ id: 1 }], users: [{ id: 1 }],
}, },
}); });
},
async test(assert) { await render(
hbs`<ChatChannelLeaveBtn @channel={{this.channel}} @onLeaveChannel={{this.onLeaveChannel}} />`
);
pretender.post("/chat/chat_channels/:chatChannelId/unfollow", () => { pretender.post("/chat/chat_channels/:chatChannelId/unfollow", () => {
return [200, { current_user_membership: { following: false } }, {}]; return [200, { current_user_membership: { following: false } }, {}];
}); });
assert.equal(this.foo, 1); assert.strictEqual(this.foo, 1);
await click(".chat-channel-leave-btn"); await click(".chat-channel-leave-btn");
assert.strictEqual(this.foo, 2);
assert.equal(this.foo, 2);
},
}); });
componentTest("has a specific title for direct message channel", { test("has a specific title for direct message channel", async function (assert) {
template: hbs`{{chat-channel-leave-btn channel=channel}}`,
beforeEach() {
this.set("channel", { chatable_type: "DirectMessage" }); this.set("channel", { chatable_type: "DirectMessage" });
},
async test(assert) { await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
const btn = query(".chat-channel-leave-btn"); const btn = query(".chat-channel-leave-btn");
assert.strictEqual(btn.title, I18n.t("chat.direct_messages.leave"));
assert.equal(btn.title, I18n.t("chat.direct_messages.leave"));
},
}); });
componentTest("has a specific title for message channel", { test("has a specific title for message channel", async function (assert) {
template: hbs`{{chat-channel-leave-btn channel=channel}}`,
beforeEach() {
this.set("channel", { chatable_type: "Topic" }); this.set("channel", { chatable_type: "Topic" });
},
async test(assert) { await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
const btn = query(".chat-channel-leave-btn"); const btn = query(".chat-channel-leave-btn");
assert.strictEqual(btn.title, I18n.t("chat.leave"));
assert.equal(btn.title, I18n.t("chat.leave"));
},
}); });
componentTest("is not visible on mobile", { test("is not visible on mobile", async function (assert) {
template: hbs`{{chat-channel-leave-btn channel=channel}}`,
beforeEach() {
this.site.mobileView = true; this.site.mobileView = true;
this.set("channel", { chatable_type: "Topic" }); this.set("channel", { chatable_type: "Topic" });
},
async test(assert) { await render(hbs`<ChatChannelLeaveBtn @channel={{this.channel}} />`);
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}}/>` 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; this.unreadIndicator = false;
await render( await render(
hbs`<ChatChannelMetadata @channel={{this.channel}} @unreadIndicator={{this.unreadIndicator}}/>` 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) { 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, query(".chat-channel-title__name").innerText,
this.channel.title, this.channel.title,
"it shows the channel title" "it shows the channel title"
); );
assert.ok( assert.true(
exists(query(".chat-channel-title__category-badge")), exists(query(".chat-channel-title__category-badge")),
"it shows the category hashtag badge" "it shows the category hashtag badge"
); );
}); });
test("channel description", async function (assert) { 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, query(".chat-channel-preview-card__description").innerText,
this.channel.description, this.channel.description,
"the channel description is shown" "the channel description is shown"
@ -51,32 +51,32 @@ module(
test("no channel description", async function (assert) { test("no channel description", async function (assert) {
this.channel.set("description", null); 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"), exists(".chat-channel-preview-card__description"),
"no line is left for the channel description if there is none" "no line is left for the channel description if there is none"
); );
assert.ok( assert.true(
exists(".chat-channel-preview-card.-no-description"), exists(".chat-channel-preview-card.-no-description"),
"it adds a modifier class for styling" "it adds a modifier class for styling"
); );
}); });
test("join", async function (assert) { 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"), exists(".toggle-channel-membership-button.-join"),
"it shows the join channel button" "it shows the join channel button"
); );
}); });
test("browse all", async function (assert) { 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"), exists(".chat-channel-preview-card__browse-all"),
"it shows a link to browse all channels" "it shows a link to browse all channels"
); );
@ -84,9 +84,9 @@ module(
test("closed channel", async function (assert) { test("closed channel", async function (assert) {
this.channel.set("status", "closed"); 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"), exists(".chat-channel-preview-card__join-channel-btn"),
"it does not show the join channel button" "it does not show the join channel button"
); );

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

@ -1,43 +1,35 @@
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { exists, query } from "discourse/tests/helpers/qunit-helpers"; import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import fabricators from "../helpers/fabricators"; import fabricators from "../helpers/fabricators";
import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel"; 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) { module("Discourse Chat | Component | chat-channel-title", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("category channel", { test("category channel", async function (assert) {
template: hbs`{{chat-channel-title channel=channel}}`,
beforeEach() {
this.set( this.set(
"channel", "channel",
fabricators.chatChannel({ fabricators.chatChannel({
chatable_type: CHATABLE_TYPES.categoryChannel, chatable_type: CHATABLE_TYPES.categoryChannel,
}) })
); );
},
async test(assert) { await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-channel-title__category-badge").getAttribute("style"), query(".chat-channel-title__category-badge").getAttribute("style"),
`color: #${this.channel.chatable.color}` `color: #${this.channel.chatable.color}`
); );
assert.equal( assert.strictEqual(
query(".chat-channel-title__name").innerText, query(".chat-channel-title__name").innerText,
this.channel.title this.channel.title
); );
},
}); });
componentTest("category channel - escapes title", { test("category channel - escapes title", async function (assert) {
template: hbs`{{chat-channel-title channel=channel}}`,
beforeEach() {
this.set( this.set(
"channel", "channel",
fabricators.chatChannel({ fabricators.chatChannel({
@ -45,17 +37,13 @@ module("Discourse Chat | Component | chat-channel-title", function (hooks) {
title: "<div class='xss'>evil</div>", title: "<div class='xss'>evil</div>",
}) })
); );
},
async test(assert) { await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
assert.notOk(exists(".xss"));
}, assert.false(exists(".xss"));
}); });
componentTest("category channel - read restricted", { test("category channel - read restricted", async function (assert) {
template: hbs`{{chat-channel-title channel=channel}}`,
beforeEach() {
this.set( this.set(
"channel", "channel",
fabricators.chatChannel({ fabricators.chatChannel({
@ -63,17 +51,13 @@ module("Discourse Chat | Component | chat-channel-title", function (hooks) {
chatable: { read_restricted: true }, chatable: { read_restricted: true },
}) })
); );
},
async test(assert) { await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
assert.ok(exists(".d-icon-lock"));
}, assert.true(exists(".d-icon-lock"));
}); });
componentTest("category channel - not read restricted", { test("category channel - not read restricted", async function (assert) {
template: hbs`{{chat-channel-title channel=channel}}`,
beforeEach() {
this.set( this.set(
"channel", "channel",
fabricators.chatChannel({ fabricators.chatChannel({
@ -81,38 +65,30 @@ module("Discourse Chat | Component | chat-channel-title", function (hooks) {
chatable: { read_restricted: false }, chatable: { read_restricted: false },
}) })
); );
},
async test(assert) { await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
assert.notOk(exists(".d-icon-lock"));
}, assert.false(exists(".d-icon-lock"));
}); });
componentTest("direct message channel - one user", { test("direct message channel - one user", async function (assert) {
template: hbs`{{chat-channel-title channel=channel}}`,
beforeEach() {
this.set("channel", fabricators.directMessageChatChannel()); this.set("channel", fabricators.directMessageChatChannel());
},
async test(assert) { await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
const user = this.channel.chatable.users[0]; const user = this.channel.chatable.users[0];
assert.ok( assert.true(
exists(`.chat-user-avatar-container .avatar[title="${user.username}"]`) exists(`.chat-user-avatar-container .avatar[title="${user.username}"]`)
); );
assert.equal( assert.strictEqual(
query(".chat-channel-title__name").innerText.trim(), query(".chat-channel-title__name").innerText.trim(),
user.username user.username
); );
},
}); });
componentTest("direct message channel - multiple users", { test("direct message channel - multiple users", async function (assert) {
template: hbs`{{chat-channel-title channel=channel}}`,
beforeEach() {
const channel = fabricators.directMessageChatChannel(); const channel = fabricators.directMessageChatChannel();
channel.chatable.users.push({ channel.chatable.users.push({
@ -123,23 +99,17 @@ module("Discourse Chat | Component | chat-channel-title", function (hooks) {
}); });
this.set("channel", channel); this.set("channel", channel);
},
async test(assert) { await render(hbs`<ChatChannelTitle @channel={{this.channel}} />`);
const users = this.channel.chatable.users; const users = this.channel.chatable.users;
assert.strictEqual(
assert.equal( parseInt(query(".chat-channel-title__users-count").innerText.trim(), 10),
parseInt(
query(".chat-channel-title__users-count").innerText.trim(),
10
),
users.length users.length
); );
assert.strictEqual(
assert.equal(
query(".chat-channel-title__name").innerText.trim(), query(".chat-channel-title__name").innerText.trim(),
users.mapBy("username").join(", ") users.mapBy("username").join(", ")
); );
},
}); });
}); });

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

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

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

@ -1,22 +1,17 @@
import { set } from "@ember/object"; import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { query } from "discourse/tests/helpers/qunit-helpers"; import { query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel"; 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( module(
"Discourse Chat | Component | chat-composer placeholder", "Discourse Chat | Component | chat-composer placeholder",
function (hooks) { function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("direct message to self shows Jot something down", { test("direct message to self shows Jot something down", async function (assert) {
template: hbs`{{chat-composer chatChannel=chatChannel}}`, this.currentUser.set("id", 1);
beforeEach() {
set(this.currentUser, "id", 1);
this.set( this.set(
"chatChannel", "chatChannel",
ChatChannel.create({ ChatChannel.create({
@ -26,20 +21,16 @@ module(
}, },
}) })
); );
},
async test(assert) { await render(hbs`<ChatComposer @chatChannel={{this.chatChannel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-composer-input").placeholder, query(".chat-composer-input").placeholder,
"Jot something down" "Jot something down"
); );
},
}); });
componentTest("direct message to multiple folks shows their names", { test("direct message to multiple folks shows their names", async function (assert) {
template: hbs`{{chat-composer chatChannel=chatChannel}}`,
beforeEach() {
this.set( this.set(
"chatChannel", "chatChannel",
ChatChannel.create({ ChatChannel.create({
@ -53,20 +44,16 @@ module(
}, },
}) })
); );
},
async test(assert) { await render(hbs`<ChatComposer @chatChannel={{this.chatChannel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-composer-input").placeholder, query(".chat-composer-input").placeholder,
"Chat with Tomtom, Steaky, @zorro" "Chat with Tomtom, Steaky, @zorro"
); );
},
}); });
componentTest("message to channel shows send message to channel name", { test("message to channel shows send message to channel name", async function (assert) {
template: hbs`{{chat-composer chatChannel=chatChannel}}`,
beforeEach() {
this.set( this.set(
"chatChannel", "chatChannel",
ChatChannel.create({ ChatChannel.create({
@ -74,14 +61,13 @@ module(
title: "just-cats", title: "just-cats",
}) })
); );
},
async test(assert) { await render(hbs`<ChatComposer @chatChannel={{this.chatChannel}} />`);
assert.equal(
assert.strictEqual(
query(".chat-composer-input").placeholder, query(".chat-composer-input").placeholder,
"Chat with #just-cats" "Chat with #just-cats"
); );
},
}); });
} }
); );

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

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

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

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

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

@ -1,26 +1,21 @@
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { exists } from "discourse/tests/helpers/qunit-helpers"; import { exists } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile"; 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) { module("Discourse Chat | Component | chat-emoji-avatar", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("uses an emoji as avatar", { test("uses an emoji as avatar", async function (assert) {
template: hbs`{{chat-emoji-avatar emoji=emoji}}`,
async beforeEach() {
this.set("emoji", ":otter:"); this.set("emoji", ":otter:");
},
async test(assert) { await render(hbs`<ChatEmojiAvatar @emoji={{this.emoji}} />`);
assert.ok(
assert.true(
exists( exists(
`.chat-emoji-avatar .chat-emoji-avatar-container .emoji[title=otter]` `.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) { test("When displaying navigation", async function (assert) {
await render(hbs`<ChatEmojiPicker />`); await render(hbs`<ChatEmojiPicker />`);
assert.ok( assert.true(
exists( exists(
`.chat-emoji-picker__section-btn.active[data-section="favorites"]` `.chat-emoji-picker__section-btn.active[data-section="favorites"]`
), ),
"it renders first section as active" "it renders first section as active"
); );
assert.ok( assert.true(
exists( exists(
`.chat-emoji-picker__section-btn[data-section="smileys_&_emotion"]` `.chat-emoji-picker__section-btn[data-section="smileys_&_emotion"]`
) )
); );
assert.ok( assert.true(
exists(`.chat-emoji-picker__section-btn[data-section="people_&_body"]`) exists(`.chat-emoji-picker__section-btn[data-section="people_&_body"]`)
); );
assert.ok( assert.true(
exists(`.chat-emoji-picker__section-btn[data-section="objects"]`) 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.current.t1");
await click(".chat-emoji-picker__fitzpatrick-modifier-btn.t6"); await click(".chat-emoji-picker__fitzpatrick-modifier-btn.t6");
assert.ok( assert.true(
exists(`img[src="/images/emoji/twitter/raised_hands/6.png"]`), exists(`img[src="/images/emoji/twitter/raised_hands/6.png"]`),
"it applies the tone to emojis" "it applies the tone to emojis"
); );
assert.ok( assert.true(
exists(".chat-emoji-picker__fitzpatrick-modifier-btn.current.t6"), exists(".chat-emoji-picker__fitzpatrick-modifier-btn.current.t6"),
"it changes the current scale to 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"]`); await click(`.chat-emoji-picker__section-btn[data-section="objects"]`);
assert.ok( assert.true(
document.querySelector("#ember-testing-container").scrollTop > 0, document.querySelector("#ember-testing-container").scrollTop > 0,
"it scrolls to the section" "it scrolls to the section"
); );
@ -142,21 +142,21 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
1, 1,
"it filters the emojis list" "it filters the emojis list"
); );
assert.ok( assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'), exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
"it filters the correct emoji" "it filters the correct emoji"
); );
await fillIn(".dc-filter-input", "Grinning"); await fillIn(".dc-filter-input", "Grinning");
assert.ok( assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'), exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
"it is case insensitive" "it is case insensitive"
); );
await fillIn(".dc-filter-input", "smiley_cat"); await fillIn(".dc-filter-input", "smiley_cat");
assert.ok( assert.true(
exists('.chat-emoji-picker__sections > img[alt="grinning"]'), exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
"it filters the correct emoji using search alias" "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) { test("When opening the picker", async function (assert) {
await render(hbs`<ChatEmojiPicker />`); 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) { 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( 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( 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, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers"; 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) { module("Discourse Chat | Component | chat-message-avatar", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("chat_webhook_event", { test("chat_webhook_event", async function (assert) {
template: hbs`{{chat-message-avatar message=message}}`,
beforeEach() {
this.set("message", { chat_webhook_event: { emoji: ":heart:" } }); this.set("message", { chat_webhook_event: { emoji: ":heart:" } });
},
async test(assert) { await render(hbs`<ChatMessageAvatar @message={{this.message}} />`);
assert.equal(query(".chat-emoji-avatar .emoji").title, "heart");
}, assert.strictEqual(query(".chat-emoji-avatar .emoji").title, "heart");
}); });
componentTest("user", { test("user", async function (assert) {
template: hbs`{{chat-message-avatar message=message}}`,
beforeEach() {
this.set("message", { user: { username: "discobot" } }); this.set("message", { user: { username: "discobot" } });
},
async test(assert) { await render(hbs`<ChatMessageAvatar @message={{this.message}} />`);
assert.ok(exists('.chat-user-avatar [data-user-card="discobot"]'));
}, assert.true(exists('.chat-user-avatar [data-user-card="discobot"]'));
}); });
}); });

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

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

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

@ -1,69 +1,53 @@
import Bookmark from "discourse/models/bookmark"; import Bookmark from "discourse/models/bookmark";
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers"; import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import I18n from "I18n"; import I18n from "I18n";
import { module } from "qunit"; import { module, test } from "qunit";
import User from "discourse/models/user"; import User from "discourse/models/user";
import { render } from "@ember/test-helpers";
module("Discourse Chat | Component | chat-message-info", function (hooks) { module("Discourse Chat | Component | chat-message-info", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("chat_webhook_event", { test("chat_webhook_event", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
this.set("message", { chat_webhook_event: { username: "discobot" } }); this.set("message", { chat_webhook_event: { username: "discobot" } });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.equal(
assert.strictEqual(
query(".chat-message-info__username").innerText.trim(), query(".chat-message-info__username").innerText.trim(),
this.message.chat_webhook_event.username this.message.chat_webhook_event.username
); );
assert.equal( assert.strictEqual(
query(".chat-message-info__bot-indicator").textContent.trim(), query(".chat-message-info__bot-indicator").textContent.trim(),
I18n.t("chat.bot") I18n.t("chat.bot")
); );
},
}); });
componentTest("user", { test("user", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
this.set("message", { user: { username: "discobot" } }); this.set("message", { user: { username: "discobot" } });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.equal(
assert.strictEqual(
query(".chat-message-info__username").innerText.trim(), query(".chat-message-info__username").innerText.trim(),
this.message.user.username this.message.user.username
); );
},
}); });
componentTest("date", { test("date", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
this.set("message", { this.set("message", {
user: { username: "discobot" }, user: { username: "discobot" },
created_at: moment(), created_at: moment(),
}); });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.ok(exists(".chat-message-info__date"));
}, assert.true(exists(".chat-message-info__date"));
}); });
componentTest("bookmark (with reminder)", { test("bookmark (with reminder)", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
this.set("message", { this.set("message", {
user: { username: "discobot" }, user: { username: "discobot" },
bookmark: Bookmark.create({ bookmark: Bookmark.create({
@ -71,57 +55,45 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
name: "some name", name: "some name",
}), }),
}); });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.ok(
assert.true(
exists(".chat-message-info__bookmark .d-icon-discourse-bookmark-clock") exists(".chat-message-info__bookmark .d-icon-discourse-bookmark-clock")
); );
},
}); });
componentTest("bookmark (no reminder)", { test("bookmark (no reminder)", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
this.set("message", { this.set("message", {
user: { username: "discobot" }, user: { username: "discobot" },
bookmark: Bookmark.create({ bookmark: Bookmark.create({
name: "some name", name: "some name",
}), }),
}); });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.ok(exists(".chat-message-info__bookmark .d-icon-bookmark"));
}, assert.true(exists(".chat-message-info__bookmark .d-icon-bookmark"));
}); });
componentTest("user status", { test("user status", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
const status = { description: "off to dentist", emoji: "tooth" }; const status = { description: "off to dentist", emoji: "tooth" };
this.set("message", { user: User.create({ status }) }); this.set("message", { user: User.create({ status }) });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.ok(exists(".chat-message-info__status .user-status-message"));
}, assert.true(exists(".chat-message-info__status .user-status-message"));
}); });
componentTest("reviewable", { test("reviewable", async function (assert) {
template: hbs`{{chat-message-info message=message}}`,
beforeEach() {
this.set("message", { this.set("message", {
user: { username: "discobot" }, user: { username: "discobot" },
user_flag_status: 0, user_flag_status: 0,
}); });
},
async test(assert) { await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
assert.equal(
assert.strictEqual(
query(".chat-message-info__flag > .svg-icon-title").title, query(".chat-message-info__flag > .svg-icon-title").title,
I18n.t("chat.you_flagged") I18n.t("chat.you_flagged")
); );
@ -131,10 +103,9 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
reviewable_id: 1, reviewable_id: 1,
}); });
assert.equal( assert.strictEqual(
query(".chat-message-info__flag a .svg-icon-title").title, query(".chat-message-info__flag a .svg-icon-title").title,
I18n.t("chat.flagged") 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("chat", { publicChannels: [this.channel] });
this.set("selectedMessageIds", [1]); this.set("selectedMessageIds", [1]);
await render( await render(hbs`
hbs`{{chat-message-move-to-channel-modal-inner selectedMessageIds=selectedMessageIds sourceChannel=channel chat=chat}}` <ChatMessageMoveToChannelModalInner
); @selectedMessageIds={{this.selectedMessageIds}}
@sourceChannel={{this.channel}}
@chat={{this.chat}}
/>
`);
assert.ok( assert.true(
query(".chat-message-move-to-channel-modal-inner").innerHTML.includes( query(".chat-message-move-to-channel-modal-inner").innerHTML.includes(
"&lt;script&gt;someeviltitle&lt;/script&gt;" "&lt;script&gt;someeviltitle&lt;/script&gt;"
) )

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

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

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

@ -1,44 +1,35 @@
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { query } from "discourse/tests/helpers/qunit-helpers"; import { query } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import I18n from "I18n"; 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) { module("Discourse Chat | Component | chat-message-separator", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("newest message", { test("newest message", async function (assert) {
template: hbs`{{chat-message-separator message=message}}`,
async beforeEach() {
this.set("message", { newestMessage: true }); this.set("message", { newestMessage: true });
},
async test(assert) { await render(hbs`<ChatMessageSeparator @message={{this.message}} />`);
assert.equal(
assert.strictEqual(
query(".chat-message-separator.new-message .text").innerText.trim(), query(".chat-message-separator.new-message .text").innerText.trim(),
I18n.t("chat.new_messages") I18n.t("chat.new_messages")
); );
},
}); });
componentTest("first message of the day", { test("first message of the day", async function (assert) {
template: hbs`{{chat-message-separator message=message}}`,
async beforeEach() {
this.set("date", moment().format("LLL")); this.set("date", moment().format("LLL"));
this.set("message", { firstMessageOfTheDayAt: this.date }); this.set("message", { firstMessageOfTheDayAt: this.date });
},
async test(assert) { await render(hbs`<ChatMessageSeparator @message={{this.message}} />`);
assert.equal(
assert.strictEqual(
query( query(
".chat-message-separator.first-daily-message .text" ".chat-message-separator.first-daily-message .text"
).innerText.trim(), ).innerText.trim(),
this.date 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 const template = hbs`
message=message <ChatMessage
canInteractWithChat=canInteractWithChat @message={{this.message}}
details=this.details @canInteractWithChat={{this.canInteractWithChat}}
chatChannel=chatChannel @details={{this.details}}
setReplyTo=setReplyTo @chatChannel={{this.chatChannel}}
replyMessageClicked=replyMessageClicked @setReplyTo={{this.setReplyTo}}
editButtonClicked=editButtonClicked @replyMessageClicked={{this.replyMessageClicked}}
selectingMessages=selectingMessages @editButtonClicked={{this.editButtonClicked}}
onStartSelectingMessages=onStartSelectingMessages @selectingMessages={{this.selectingMessages}}
onSelectMessage=onSelectMessage @onStartSelectingMessages={{this.onStartSelectingMessages}}
bulkSelectMessages=bulkSelectMessages @onSelectMessage={{this.onSelectMessage}}
onHoverMessage=onHoverMessage @bulkSelectMessages={{this.bulkSelectMessages}}
afterReactionAdded=reStickScrollIfNeeded @onHoverMessage={{this.onHoverMessage}}
}}`; @afterReactionAdded={{this.reStickScrollIfNeeded}}
/>
`;
test("Message with edits", async function (assert) { test("Message with edits", async function (assert) {
this.setProperties(generateMessageProps({ edited: true })); this.setProperties(generateMessageProps({ edited: true }));
await render(template); await render(template);
assert.ok( assert.true(
exists(".chat-message-edited"), exists(".chat-message-edited"),
"has the correct edited css class" "has the correct edited css class"
); );
@ -88,7 +90,7 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
test("Deleted message", async function (assert) { test("Deleted message", async function (assert) {
this.setProperties(generateMessageProps({ deleted_at: moment() })); this.setProperties(generateMessageProps({ deleted_at: moment() }));
await render(template); await render(template);
assert.ok( assert.true(
exists(".chat-message-deleted .chat-message-expand"), exists(".chat-message-deleted .chat-message-expand"),
"has the correct deleted css class and expand button within" "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) { test("Hidden message", async function (assert) {
this.setProperties(generateMessageProps({ hidden: true })); this.setProperties(generateMessageProps({ hidden: true }));
await render(template); await render(template);
assert.ok( assert.true(
exists(".chat-message-hidden .chat-message-expand"), exists(".chat-message-hidden .chat-message-expand"),
"has the correct hidden css class and expand button within" "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 render(template);
await waitFor("div[data-visible=true]"); await waitFor("div[data-visible=true]");
assert.ok( assert.true(
exists(".chat-message-container[data-visible=true]"), exists(".chat-message-container[data-visible=true]"),
"message is marked as visible" "message is marked as visible"
); );

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,45 +1,38 @@
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest, import { click, render } from "@ember/test-helpers";
} from "discourse/tests/helpers/component-test";
import { click } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import { exists, query, visible } from "discourse/tests/helpers/qunit-helpers"; import { exists, visible } from "discourse/tests/helpers/qunit-helpers";
import { module } from "qunit"; import { module, test } from "qunit";
import { htmlSafe } from "@ember/template"; import { htmlSafe } from "@ember/template";
module("Discourse Chat | Component | collapser", function (hooks) { module("Discourse Chat | Component | collapser", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("renders header", { test("renders header", async function (assert) {
template: hbs`{{collapser header=header}}`, this.set("header", htmlSafe(`<div class="cat">tomtom</div>`));
beforeEach() { await render(hbs`<Collapser @header={{this.header}} />`);
this.set("header", htmlSafe("<div class='cat'>tomtom</div>"));
},
async test(assert) { assert.true(exists(".cat"));
const element = query(".cat");
assert.ok(exists(element));
},
}); });
componentTest("collapses and expands yielded body", { test("collapses and expands yielded body", async function (assert) {
template: hbs`{{#collapser}}<div class='cat'>body text</div>{{/collapser}}`, await render(hbs`
<Collapser>
<div class="cat">body text</div>
</Collapser>
`);
test: async function (assert) {
const openButton = ".chat-message-collapser-closed"; const openButton = ".chat-message-collapser-closed";
const closeButton = ".chat-message-collapser-opened"; const closeButton = ".chat-message-collapser-opened";
const body = ".cat"; const body = ".cat";
assert.ok(visible(body)); assert.true(visible(body));
await click(closeButton);
assert.notOk(visible(body)); await click(closeButton);
assert.false(visible(body));
await click(openButton); await click(openButton);
assert.true(visible(body));
assert.ok(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) { test("Left icon", async function (assert) {
await render(hbs`<DcFilterInput @icons={{hash left="bell"}} />`); 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) { test("Right icon", async function (assert) {
await render(hbs`<DcFilterInput @icons={{hash right="bell"}} />`); 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) { test("Class attribute", async function (assert) {
await render(hbs`<DcFilterInput @class="foo" />`); 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) { test("Html attributes", async function (assert) {
await render(hbs`<DcFilterInput data-foo="1" placeholder="bar" />`); await render(hbs`<DcFilterInput data-foo="1" placeholder="bar" />`);
assert.ok(exists('.dc-filter-input[data-foo="1"]')); assert.true(exists('.dc-filter-input[data-foo="1"]'));
assert.ok(exists('.dc-filter-input[placeholder="bar"]')); assert.true(exists('.dc-filter-input[placeholder="bar"]'));
}); });
test("Filter action", async function (assert) { 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 render(hbs`<DcFilterInput @filterAction={{this.action}} />`);
await fillIn(".dc-filter-input", "foo"); await fillIn(".dc-filter-input", "foo");
assert.equal(this.value, "foo"); assert.strictEqual(this.value, "foo");
}); });
test("Focused state", async function (assert) { test("Focused state", async function (assert) {
await render(hbs`<DcFilterInput @filterAction={{this.action}} />`); await render(hbs`<DcFilterInput @filterAction={{this.action}} />`);
await triggerEvent(".dc-filter-input", "focusin"); 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"); await triggerEvent(".dc-filter-input", "focusout");
assert.notOk(exists(".dc-filter-input-container.is-focused")); assert.false(exists(".dc-filter-input-container.is-focused"));
}); });
}); });

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

@ -1,13 +1,11 @@
import componentTest, { import { setupRenderingTest } from "discourse/tests/helpers/component-test";
setupRenderingTest, import { click, fillIn, render } from "@ember/test-helpers";
} from "discourse/tests/helpers/component-test";
import { click, fillIn } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import { exists, query } from "discourse/tests/helpers/qunit-helpers"; import { exists, query } from "discourse/tests/helpers/qunit-helpers";
import { createDirectMessageChannelDraft } from "discourse/plugins/chat/discourse/models/chat-channel"; import { createDirectMessageChannelDraft } from "discourse/plugins/chat/discourse/models/chat-channel";
import { Promise } from "rsvp"; import { Promise } from "rsvp";
import fabricators from "../helpers/fabricators"; import fabricators from "../helpers/fabricators";
import { module } from "qunit"; import { module, test } from "qunit";
function mockChat(context, options = {}) { function mockChat(context, options = {}) {
const mock = context.container.lookup("service:chat"); const mock = context.container.lookup("service:chat");
@ -25,131 +23,106 @@ function mockChat(context, options = {}) {
module("Discourse Chat | Component | direct-message-creator", function (hooks) { module("Discourse Chat | Component | direct-message-creator", function (hooks) {
setupRenderingTest(hooks); setupRenderingTest(hooks);
componentTest("search", { test("search", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
this.set("chat", mockChat(this)); this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
await fillIn(".filter-usernames", "hawk"); await fillIn(".filter-usernames", "hawk");
assert.ok(exists("li.user[data-username='hawk']")); assert.true(exists("li.user[data-username='hawk']"));
},
}); });
componentTest("select/deselect", { test("select/deselect", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
this.set("chat", mockChat(this)); this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
assert.notOk(exists(".selected-user")); hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
assert.false(exists(".selected-user"));
await fillIn(".filter-usernames", "hawk"); await fillIn(".filter-usernames", "hawk");
await click("li.user[data-username='hawk']"); await click("li.user[data-username='hawk']");
assert.true(exists(".selected-user"));
assert.ok(exists(".selected-user"));
await click(".selected-user"); await click(".selected-user");
assert.false(exists(".selected-user"));
assert.notOk(exists(".selected-user"));
},
}); });
componentTest("no search results", { test("no search results", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
this.set("chat", mockChat(this, { users: [] })); this.set("chat", mockChat(this, { users: [] }));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
await fillIn(".filter-usernames", "bad cat"); await fillIn(".filter-usernames", "bad cat");
assert.true(exists(".no-results"));
assert.ok(exists(".no-results"));
},
}); });
componentTest("loads user on first load", { test("loads user on first load", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
this.set("chat", mockChat(this)); this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
assert.ok(exists("li.user[data-username='hawk']")); hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
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", { test("do not load more users after selection", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
this.set("chat", mockChat(this)); this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
await click("li.user[data-username='hawk']"); await click("li.user[data-username='hawk']");
assert.false(exists("li.user[data-username='mark']"));
assert.notOk(exists("li.user[data-username='mark']"));
},
}); });
componentTest("apply is-focused to filter-area on focus input", { test("apply is-focused to filter-area on focus input", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}<button class="test-blur">blur</button>`,
beforeEach() {
this.set("chat", mockChat(this)); this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} /><button class="test-blur">blur</button>`
);
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"); await click(".test-blur");
assert.false(exists(".filter-area.is-focused"));
assert.notOk(exists(".filter-area.is-focused"));
},
}); });
componentTest("state is reset on channel change", { test("state is reset on channel change", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
this.set("chat", mockChat(this)); this.set("chat", mockChat(this));
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
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", fabricators.chatChannel());
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
assert.equal(query(".filter-usernames").value, ""); assert.strictEqual(query(".filter-usernames").value, "");
assert.ok(exists(".filter-area.is-focused")); assert.true(exists(".filter-area.is-focused"));
assert.ok(exists("li.user[data-username='hawk']")); assert.true(exists("li.user[data-username='hawk']"));
},
}); });
componentTest("shows user status", { test("shows user status", async function (assert) {
template: hbs`{{direct-message-creator channel=channel chat=chat}}`,
beforeEach() {
const userWithStatus = { const userWithStatus = {
username: "hawk", username: "hawk",
status: { emoji: "tooth", description: "off to dentist" }, status: { emoji: "tooth", description: "off to dentist" },
@ -157,11 +130,12 @@ module("Discourse Chat | Component | direct-message-creator", function (hooks) {
const chat = mockChat(this, { users: [userWithStatus] }); const chat = mockChat(this, { users: [userWithStatus] });
this.set("chat", chat); this.set("chat", chat);
this.set("channel", createDirectMessageChannelDraft()); this.set("channel", createDirectMessageChannelDraft());
},
async test(assert) { await render(
hbs`<DirectMessageCreator @channel={{this.channel}} @chat={{this.chat}} />`
);
await fillIn(".filter-usernames", "hawk"); await fillIn(".filter-usernames", "hawk");
assert.ok(exists(".user-status-message")); 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")); this.set("root", document.querySelector("#ember-testing"));
await render( await render(hbs`
hbs`{{#if display}}{{on-visibility-action action=action root=root}}{{/if}}` {{#if display}}
); <OnVisibilityAction @action={{this.action}} @root={{this.root}} />
{{/if}}
`);
assert.equal(this.value, null); assert.strictEqual(this.value, null);
this.set("display", true); this.set("display", true);
await waitUntil(() => this.value !== null); 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/>`); 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) { 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/>`); await render(hbs`<UserCardChatButton/>`);
assert.notOk( assert.false(
exists(".user-card-chat-btn"), exists(".user-card-chat-btn"),
"it doesn’t show the chat button" "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) { test("empty state when there are no notifications", async function (assert) {
await render(template); await render(template);
assert.ok(exists(".empty-state .empty-state-body")); assert.true(exists(".empty-state .empty-state-body"));
assert.strictEqual( assert.strictEqual(
query(".empty-state .empty-state-title").textContent.trim(), query(".empty-state .empty-state-title").textContent.trim(),
I18n.t("user_menu.no_chat_notifications_title") I18n.t("user_menu.no_chat_notifications_title")