discourse/plugins/chat/test/javascripts/components/chat-message-reaction-test.js
Jarek Radosz dc3473fe06
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
2022-12-22 14:35:18 +01:00

88 lines
2.8 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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