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