diff --git a/app/assets/javascripts/discourse/app/lib/utilities.js b/app/assets/javascripts/discourse/app/lib/utilities.js index 45d22a15fea..b6cbf19ef2a 100644 --- a/app/assets/javascripts/discourse/app/lib/utilities.js +++ b/app/assets/javascripts/discourse/app/lib/utilities.js @@ -208,6 +208,10 @@ export function caretPosition(el) { // Set the caret's position export function setCaretPosition(ctrl, pos) { + if (typeof ctrl === "string") { + ctrl = document.querySelector(ctrl); + } + let range; if (ctrl.setSelectionRange) { ctrl.focus(); diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js index b83252a888a..c303a16ed3b 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js @@ -7,7 +7,6 @@ import { acceptance, fakeTime, loggedInUser, - query, queryAll, simulateKeys, } from "discourse/tests/helpers/qunit-helpers"; @@ -67,7 +66,7 @@ acceptance("Composer - editor mentions", function (needs) { await visit("/"); await click("#create-topic"); - await simulateKeys(query(".d-editor-input"), "abc @u\r"); + await simulateKeys(".d-editor-input", "abc @u\r"); assert .dom(".d-editor-input") @@ -78,7 +77,7 @@ acceptance("Composer - editor mentions", function (needs) { await visit("/"); await click("#create-topic"); - await simulateKeys(query(".d-editor-input"), "abc @user a\b\b\r"); + await simulateKeys(".d-editor-input", "abc @user a\b\b\r"); assert .dom(".d-editor-input") @@ -89,11 +88,9 @@ acceptance("Composer - editor mentions", function (needs) { await visit("/"); await click("#create-topic"); - const editor = query(".d-editor-input"); - - await simulateKeys(editor, "abc @user 123"); - await setCaretPosition(editor, 9); - await simulateKeys(editor, "\b\b\r"); + await simulateKeys(".d-editor-input", "abc @user 123"); + await setCaretPosition(".d-editor-input", 9); + await simulateKeys(".d-editor-input", "\b\b\r"); assert .dom(".d-editor-input") @@ -108,9 +105,7 @@ acceptance("Composer - editor mentions", function (needs) { await visit("/"); await click("#create-topic"); - const editor = query(".d-editor-input"); - - await simulateKeys(editor, "@u"); + await simulateKeys(".d-editor-input", "@u"); assert .dom(`.autocomplete .emoji[alt='${status.emoji}']`) @@ -125,16 +120,14 @@ acceptance("Composer - editor mentions", function (needs) { await visit("/"); await click("#create-topic"); - const editor = query(".d-editor-input"); - - await simulateKeys(editor, "abc @u"); + await simulateKeys(".d-editor-input", "abc @u"); assert.deepEqual( [...queryAll(".ac-user .username")].map((e) => e.innerText), ["user", "user2", "user_group", "foo"] ); - await simulateKeys(editor, "\bf"); + await simulateKeys(".d-editor-input", "\bf"); assert.deepEqual( [...queryAll(".ac-user .username")].map((e) => e.innerText), diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-image-preview-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-image-preview-test.js index a2bc0c85dad..767650b9468 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/composer-image-preview-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/composer-image-preview-test.js @@ -365,10 +365,9 @@ acceptance("Composer - Image Preview - Plugin API", function (needs) { "My Custom Button", "custom-button-class", "lock", - (event) => { + async (event) => { if (event.target.classList.contains("custom-button-class")) { - document.querySelector(".d-editor-input").value = - "custom button change"; + await fillIn(".d-editor-input", "custom button change"); } } ); diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-messages-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-messages-test.js index e9c7dcc8910..53ee24c6179 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/composer-messages-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/composer-messages-test.js @@ -1,12 +1,13 @@ import { click, fillIn, + triggerEvent, triggerKeyEvent, visit, waitUntil, } from "@ember/test-helpers"; import { test } from "qunit"; -import { acceptance, query } from "discourse/tests/helpers/qunit-helpers"; +import { acceptance } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; import { i18n } from "discourse-i18n"; import pretender, { response } from "../helpers/create-pretender"; @@ -153,9 +154,9 @@ acceptance("Composer - Messages - Duplicate links", function (needs) { await click("button.create"); // Work around the lack of CSS transitions in the test env - const event = new Event("transitionend"); - event.propertyName = "height"; - query("#reply-control").dispatchEvent(event); + await triggerEvent("#reply-control", "transitionend", { + propertyName: "height", + }); assert .dom(".composer-popup") diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js index 650c3a6a39d..2000edbc4c6 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js @@ -2,6 +2,7 @@ import { click, currentURL, fillIn, + find, focus, settled, triggerEvent, @@ -26,7 +27,6 @@ import pretender, { response } from "discourse/tests/helpers/create-pretender"; import { acceptance, metaModifier, - query, updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; @@ -129,9 +129,9 @@ acceptance("Composer", function (needs) { test("Composer height adjustment", async function (assert) { await visit("/"); await click("#create-topic"); - await triggerEvent(document.querySelector(".grippie"), "mousedown"); - await triggerEvent(document.querySelector(".grippie"), "mousemove"); - await triggerEvent(document.querySelector(".grippie"), "mouseup"); + await triggerEvent(".grippie", "mousedown"); + await triggerEvent(".grippie", "mousemove"); + await triggerEvent(".grippie", "mouseup"); await visit("/"); // reload page await click("#create-topic"); @@ -205,17 +205,16 @@ acceptance("Composer", function (needs) { .dom(".d-editor-textarea-wrapper .popup-tip.good") .exists("the body is now good"); - const textarea = query("#reply-control .d-editor-input"); + const textarea = find("#reply-control .d-editor-input"); textarea.selectionStart = textarea.value.length; textarea.selectionEnd = textarea.value.length; await triggerKeyEvent(textarea, "keydown", "B", metaModifier); - const example = i18n(`composer.bold_text`); assert .dom("#reply-control .d-editor-input") .hasValue( - `this is the *content* of a post**${example}**`, + `this is the *content* of a post**${i18n("composer.bold_text")}**`, "supports keyboard shortcuts" ); @@ -365,7 +364,7 @@ acceptance("Composer", function (needs) { assert .dom(".d-editor-input") .hasValue( - query(".topic-post:nth-of-type(1) .cooked > p").innerText, + find(".topic-post:nth-of-type(1) .cooked > p").innerText, "composer has contents of post to be edited" ); }); @@ -614,10 +613,12 @@ acceptance("Composer", function (needs) { assert.dom(".d-editor-input").hasNoValue("clears the composer input"); await click(".topic-post:nth-of-type(2) button.edit"); - assert.true( - query(".d-editor-input").value.startsWith("This is the second post."), - "populates the input with the post text" - ); + assert + .dom(".d-editor-input") + .hasValue( + /^This is the second post\./, + "populates the input with the post text" + ); }); test("Composer can toggle whispers when whisperer user", async function (assert) { @@ -1344,7 +1345,7 @@ acceptance("composer buttons API", function (needs) { await click(".post-controls button.reply"); await fillIn(".d-editor-input", "hello the world"); - const editor = document.querySelector(".d-editor-input"); + const editor = find(".d-editor-input"); editor.setSelectionRange(6, 9); // select the text input in the composer await triggerKeyEvent(".d-editor-input", "keydown", "B", { @@ -1398,7 +1399,7 @@ acceptance("composer buttons API", function (needs) { await visit("/t/internationalization-localization/280"); await click(".post-controls button.reply"); - const editor = document.querySelector(".d-editor-input"); + const editor = find(".d-editor-input"); await triggerKeyEvent(".d-editor-input", "keydown", "S", { altKey: true, ...metaModifier, diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-uploads-uppy-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-uploads-uppy-test.js index 6298196dfad..2aaec3987ad 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/composer-uploads-uppy-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/composer-uploads-uppy-test.js @@ -1,5 +1,12 @@ import { getOwner } from "@ember/owner"; -import { click, fillIn, settled, visit } from "@ember/test-helpers"; +import { + click, + fillIn, + find, + focus, + settled, + visit, +} from "@ember/test-helpers"; import { skip, test } from "qunit"; import { Promise } from "rsvp"; import sinon from "sinon"; @@ -10,7 +17,6 @@ import { chromeTest, createFile, paste, - query, } from "discourse/tests/helpers/qunit-helpers"; import { i18n } from "discourse-i18n"; @@ -305,7 +311,7 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) { await visit("/"); await click("#create-topic"); await fillIn(".d-editor-input", "The image: Text after the image."); - const textArea = query(".d-editor-input"); + const textArea = find(".d-editor-input"); textArea.selectionStart = 10; textArea.selectionEnd = 10; @@ -341,7 +347,7 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) { ".d-editor-input", "The image: [paste here] Text after the image." ); - const textArea = query(".d-editor-input"); + const textArea = find(".d-editor-input"); textArea.selectionStart = 10; textArea.selectionEnd = 23; @@ -428,7 +434,7 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) { await visit("/"); await click("#create-topic"); await fillIn(".d-editor-input", "The image:\ntext after image"); - const input = query(".d-editor-input"); + const input = find(".d-editor-input"); input.selectionStart = 10; input.selectionEnd = 10; @@ -457,17 +463,14 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) { uppyEventFired = true; }); - let element = query(".d-editor"); - let inputElement = query(".d-editor-input"); - inputElement.focus(); - await paste(element, "\ta\tb\n1\t2\t3", { + await focus(".d-editor-input"); + await paste(".d-editor", "\ta\tb\n1\t2\t3", { types: ["text/plain", "Files"], files: [createFile("avatar.png")], }); - await settled(); assert - .dom(inputElement) + .dom(".d-editor-input") .hasValue( "||a|b|\n|---|---|---|\n|1|2|3|\n", "only the plain text table is pasted" @@ -546,7 +549,7 @@ acceptance( appEvents.on("composer:upload-error", async () => { await settled(); - if (query(".dialog-body")) { + if (find(".dialog-body")) { assert .dom(".dialog-body") .hasText( diff --git a/app/assets/javascripts/discourse/tests/acceptance/emoji-test.js b/app/assets/javascripts/discourse/tests/acceptance/emoji-test.js index f7e7b4d08aa..469c2119085 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/emoji-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/emoji-test.js @@ -4,7 +4,6 @@ import { test } from "qunit"; import emojiPicker from "discourse/tests/helpers/emoji-picker-helper"; import { acceptance, - query, simulateKey, simulateKeys, } from "discourse/tests/helpers/qunit-helpers"; @@ -60,14 +59,10 @@ acceptance("Emoji", function (needs) { await visit("/t/internationalization-localization/280"); await click("#topic-footer-buttons .btn.create"); - const editor = query(".d-editor-input"); - - await simulateKeys(editor, ":s"); - + await simulateKeys(".d-editor-input", ":s"); assert.dom(".autocomplete.ac-emoji").doesNotExist(); - await simulateKey(editor, "w"); - + await simulateKey(".d-editor-input", "w"); assert.dom(".autocomplete.ac-emoji").exists(); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/fast-edit-test.js b/app/assets/javascripts/discourse/tests/acceptance/fast-edit-test.js index 9745877614a..e78e4ff02b8 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/fast-edit-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/fast-edit-test.js @@ -1,11 +1,16 @@ -import { click, fillIn, triggerKeyEvent, visit } from "@ember/test-helpers"; +import { + click, + fillIn, + find, + triggerKeyEvent, + visit, +} from "@ember/test-helpers"; import { test } from "qunit"; import { cloneJSON } from "discourse/lib/object"; import postFixtures from "discourse/tests/fixtures/post"; import { acceptance, metaModifier, - query, selectText, } from "discourse/tests/helpers/qunit-helpers"; @@ -21,7 +26,7 @@ acceptance("Fast Edit", function (needs) { test("Fast edit button works", async function (assert) { await visit("/t/internationalization-localization/280"); - const textNode = query("#post_1 .cooked p").childNodes[0]; + const textNode = find("#post_1 .cooked p").childNodes[0]; await selectText(textNode, 9); await click(".quote-button .quote-edit-label"); @@ -40,7 +45,7 @@ acceptance("Fast Edit", function (needs) { test("Works with keyboard shortcut", async function (assert) { await visit("/t/internationalization-localization/280"); - const textNode = query("#post_1 .cooked p").childNodes[0]; + const textNode = find("#post_1 .cooked p").childNodes[0]; await selectText(textNode, 9); @@ -75,7 +80,7 @@ acceptance("Fast Edit", function (needs) { test("Opens full composer for multi-line selection", async function (assert) { await visit("/t/internationalization-localization/280"); - const textNode = query("#post_2 .cooked"); + const textNode = find("#post_2 .cooked"); await selectText(textNode); await click(".quote-button .quote-edit-label"); @@ -87,8 +92,8 @@ acceptance("Fast Edit", function (needs) { test("Opens full composer when selection has typographic characters", async function (assert) { await visit("/t/internationalization-localization/280"); - query("#post_2 .cooked").append(`That’s what she said!`); - const textNode = query("#post_2 .cooked").childNodes[3]; + find("#post_2 .cooked").append(`That’s what she said!`); + const textNode = find("#post_2 .cooked").childNodes[3]; await selectText(textNode); await click(".quote-button .quote-edit-label"); @@ -100,8 +105,8 @@ acceptance("Fast Edit", function (needs) { test("Works with diacritics", async function (assert) { await visit("/t/internationalization-localization/280"); - query("#post_2 .cooked").append(`Je suis désolé, comment ça va?`); - const textNode = query("#post_2 .cooked").childNodes[3]; + find("#post_2 .cooked").append(`Je suis désolé, comment ça va?`); + const textNode = find("#post_2 .cooked").childNodes[3]; await selectText(textNode); await click(".quote-button .quote-edit-label"); @@ -112,8 +117,8 @@ acceptance("Fast Edit", function (needs) { test("Works with CJK ranges", async function (assert) { await visit("/t/internationalization-localization/280"); - query("#post_2 .cooked").append(`这是一个测试`); - const textNode = query("#post_2 .cooked").childNodes[3]; + find("#post_2 .cooked").append(`这是一个测试`); + const textNode = find("#post_2 .cooked").childNodes[3]; await selectText(textNode); await click(".quote-button .quote-edit-label"); @@ -124,8 +129,8 @@ acceptance("Fast Edit", function (needs) { test("Works with emoji", async function (assert) { await visit("/t/internationalization-localization/280"); - query("#post_2 .cooked").append(`This is great 👍`); - const textNode = query("#post_2 .cooked").childNodes[3]; + find("#post_2 .cooked").append(`This is great 👍`); + const textNode = find("#post_2 .cooked").childNodes[3]; await selectText(textNode); await click(".quote-button .quote-edit-label"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/flag-post-test.js b/app/assets/javascripts/discourse/tests/acceptance/flag-post-test.js index f5d577546ca..ffca7f7ce6c 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/flag-post-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/flag-post-test.js @@ -1,7 +1,7 @@ -import { click, fillIn, settled, visit } from "@ember/test-helpers"; +import { click, fillIn, triggerEvent, visit } from "@ember/test-helpers"; import { test } from "qunit"; import userFixtures from "discourse/tests/fixtures/user-fixtures"; -import { acceptance, query } from "discourse/tests/helpers/qunit-helpers"; +import { acceptance } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; async function openFlagModal() { @@ -13,16 +13,14 @@ async function openFlagModal() { await click(".topic-post:first-child button.create-flag"); } -async function pressEnter(element, modifier) { - const event = new KeyboardEvent("keydown", { +async function pressEnter(selector, modifier) { + await triggerEvent(selector, "keydown", { bubbles: true, cancelable: true, key: "Enter", keyCode: 13, [modifier]: true, }); - element.dispatchEvent(event); - await settled(); } acceptance("flagging", function (needs) { @@ -187,14 +185,13 @@ acceptance("flagging", function (needs) { await visit("/t/internationalization-localization/280"); await openFlagModal(); - const modal = query(".d-modal"); - await pressEnter(modal, "ctrlKey"); + await pressEnter(".d-modal", "ctrlKey"); assert .dom(".d-modal") .exists("The modal wasn't closed because the accept button was disabled"); await click("#radio_inappropriate"); // this enables the accept button - await pressEnter(modal, "ctrlKey"); + await pressEnter(".d-modal", "ctrlKey"); assert.dom(".d-modal").doesNotExist("The modal was closed"); }); @@ -202,14 +199,13 @@ acceptance("flagging", function (needs) { await visit("/t/internationalization-localization/280"); await openFlagModal(); - const modal = query(".d-modal"); - await pressEnter(modal, "metaKey"); + await pressEnter(".d-modal", "metaKey"); assert .dom(".d-modal") .exists("The modal wasn't closed because the accept button was disabled"); await click("#radio_inappropriate"); // this enables the accept button - await pressEnter(modal, "ctrlKey"); + await pressEnter(".d-modal", "ctrlKey"); assert.dom(".d-modal").doesNotExist("The modal was closed"); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/image-aspect-ratio-test.js b/app/assets/javascripts/discourse/tests/acceptance/image-aspect-ratio-test.js index 2a2bdca371c..a97d343b4c2 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/image-aspect-ratio-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/image-aspect-ratio-test.js @@ -1,12 +1,13 @@ import { visit } from "@ember/test-helpers"; import { test } from "qunit"; -import { acceptance, query } from "discourse/tests/helpers/qunit-helpers"; +import { acceptance } from "discourse/tests/helpers/qunit-helpers"; acceptance("Image aspect ratio", function () { - test("it applies the aspect ratio", async function (assert) { + test("applies the aspect ratio", async function (assert) { await visit("/t/2480"); - const image = query("#post_3 img[src='/assets/logo.png']"); - assert.strictEqual(image.style.aspectRatio, "690 / 388"); + assert + .dom("#post_3 img[src='/assets/logo.png']") + .hasStyle({ aspectRatio: "690 / 388" }); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js b/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js index 023fc5dc99c..be45048c9cb 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js @@ -5,7 +5,6 @@ import pretender, { response } from "discourse/tests/helpers/create-pretender"; import { acceptance, publishToMessageBus, - query, } from "discourse/tests/helpers/qunit-helpers"; import topicFixtures from "../fixtures/topic"; @@ -52,13 +51,9 @@ acceptance("Post inline mentions", function (needs) { assert .dom(".topic-post .cooked .mention .user-status-message") .exists("user status is shown"); - const statusElement = query( - ".topic-post .cooked .mention .user-status-message img" - ); - assert.true( - statusElement.src.includes(status.emoji), - "status emoji is correct" - ); + assert + .dom(".topic-post .cooked .mention .user-status-message img") + .hasAttribute("src", /surfing_man/, "status emoji is correct"); }); test("inserts user status on message bus message", async function (assert) { @@ -81,13 +76,9 @@ acceptance("Post inline mentions", function (needs) { assert .dom(".topic-post .cooked .mention .user-status-message") .exists("user status is shown"); - const statusElement = query( - ".topic-post .cooked .mention .user-status-message img" - ); - assert.true( - statusElement.src.includes(status.emoji), - "status emoji is correct" - ); + assert + .dom(".topic-post .cooked .mention .user-status-message img") + .hasAttribute("src", /surfing_man/, "status emoji is correct"); }); test("updates user status on message bus message", async function (assert) { @@ -114,13 +105,9 @@ acceptance("Post inline mentions", function (needs) { assert .dom(".topic-post .cooked .mention .user-status-message") .exists("updated user status is shown"); - const statusElement = query( - ".topic-post .cooked .mention .user-status-message img" - ); - assert.true( - statusElement.src.includes(newStatus.emoji), - "updated status emoji is correct" - ); + assert + .dom(".topic-post .cooked .mention .user-status-message img") + .hasAttribute("src", /tooth/, "updated status emoji is correct"); }); test("removes user status on message bus message", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js b/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js index f38ba9b786c..b93aeb4bd36 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js @@ -1,6 +1,6 @@ -import { click, visit } from "@ember/test-helpers"; +import { click, find, visit } from "@ember/test-helpers"; import { test } from "qunit"; -import { acceptance, query } from "discourse/tests/helpers/qunit-helpers"; +import { acceptance } from "discourse/tests/helpers/qunit-helpers"; acceptance("Post Table Wrapper Test", function () { test("fullscreen table wrapper appears on post with large table", async function (assert) { @@ -16,7 +16,7 @@ acceptance("Post Table Wrapper Test", function () { ) .exists("buttons for the table wrapper appear inside a separate div"); - const fullscreenButtonWrapper = query( + const fullscreenButtonWrapper = find( `${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper__buttons` ); diff --git a/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js b/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js index a44551325af..93cee73241a 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js @@ -3,12 +3,12 @@ import { currentRouteName, currentURL, fillIn, + find, visit, } from "@ember/test-helpers"; import { test } from "qunit"; import { acceptance, - query, updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; @@ -55,7 +55,7 @@ acceptance("User Preferences", function (needs) { assert.dom(".saved").doesNotExist("it hasn't been saved yet"); await click(".save-changes"); assert.dom(".saved").exists("it displays the saved message"); - query(".saved").remove(); + find(".saved").remove(); }; await fillIn(".pref-name input[type=text]", "Jon Snow"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-test.js index 86db4ce179f..e559cee82fe 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/search-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/search-test.js @@ -11,16 +11,11 @@ import { test } from "qunit"; import { DEFAULT_TYPE_FILTER } from "discourse/components/search-menu"; import { withPluginApi } from "discourse/lib/plugin-api"; import searchFixtures from "discourse/tests/fixtures/search-fixtures"; -import { - acceptance, - query, - queryAll, -} from "discourse/tests/helpers/qunit-helpers"; +import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; import { i18n } from "discourse-i18n"; -const clickOutside = () => - triggerEvent(document.querySelector("header.d-header"), "pointerdown"); +const clickOutside = () => triggerEvent("header.d-header", "pointerdown"); acceptance("Search - Anonymous", function (needs) { needs.pretender((server, helper) => { @@ -349,7 +344,7 @@ acceptance("Search - Anonymous", function (needs) { .doesNotExist("search context indicator is no longer visible"); await fillIn("#search-term", "dev"); - await query("#search-term").focus(); + await focus("#search-term"); await triggerKeyEvent(document.activeElement, "keyup", "ArrowDown"); await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown"); await click(document.activeElement); @@ -359,7 +354,7 @@ acceptance("Search - Anonymous", function (needs) { .exists("search context indicator is visible"); await fillIn("#search-term", ""); - await query("#search-term").focus(); + await focus("#search-term"); await triggerKeyEvent("#search-term", "keyup", "Backspace"); assert @@ -548,9 +543,7 @@ acceptance("Search - Authenticated", function (needs) { assert.dom(`${container} ul li`).exists("has a list of items"); await triggerKeyEvent("#search-term", "keyup", "Enter"); - assert - .dom(query(`${container} .search-result-topic`)) - .exists("has topic results"); + assert.dom(`${container} .search-result-topic`).exists("has topic results"); await triggerKeyEvent("#search-term", "keyup", "ArrowDown"); assert @@ -576,11 +569,9 @@ acceptance("Search - Authenticated", function (needs) { ); await triggerKeyEvent("#search-term", "keydown", "Escape"); - assert.strictEqual( - document.activeElement, - query("#search-button"), - "Escaping search returns focus to search button" - ); + assert + .dom("#search-button") + .isFocused("Escaping search returns focus to search button"); assert.dom(".search-menu").doesNotExist("Esc removes search dropdown"); await click("#search-button"); @@ -593,16 +584,14 @@ acceptance("Search - Authenticated", function (needs) { ); await triggerKeyEvent("#search-term", "keyup", "Enter"); - assert - .dom(query(`${container} .search-result-topic`)) - .exists("has topic results"); + assert.dom(`${container} .search-result-topic`).exists("has topic results"); await triggerKeyEvent("#search-term", "keyup", "Enter"); assert - .dom(query(`.search-container`)) + .dom(".search-container") .exists("second Enter hit goes to full page search"); assert - .dom(query(`.search-menu`)) + .dom(".search-menu") .doesNotExist("search dropdown is collapsed after second Enter hit"); // new search launched, Enter key should be reset @@ -1164,7 +1153,7 @@ acceptance("Search - assistant", function (needs) { assert.dom(".btn.search-context").exists("shows the button"); await fillIn("#search-term", ""); - await query("input#search-term").focus(); + await focus("input#search-term"); await triggerKeyEvent("input#search-term", "keyup", "Backspace"); assert.dom(".btn.search-context").doesNotExist("removes the button"); @@ -1176,7 +1165,7 @@ acceptance("Search - assistant", function (needs) { .exists("shows the button when reinvoking search"); await fillIn("#search-term", "emoji"); - await query("input#search-term").focus(); + await focus("input#search-term"); await triggerKeyEvent("#search-term", "keyup", "Enter"); assert diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js index 3a6d7d77e18..bc027f67e69 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js @@ -36,7 +36,7 @@ acceptance("Sidebar - Narrow Desktop", function (needs) { .dom(".sidebar-hamburger-dropdown") .exists("cloak sidebar is displayed"); - await triggerEvent(document.querySelector(".header-cloak"), "pointerdown"); + await triggerEvent(".header-cloak", "pointerdown"); assert .dom(".sidebar-hamburger-dropdown") diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js index 433492522ec..32ccfa06b05 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js @@ -1,4 +1,4 @@ -import { click, currentURL, settled, visit } from "@ember/test-helpers"; +import { click, currentURL, find, settled, visit } from "@ember/test-helpers"; import { skip, test } from "qunit"; import { configureEyeline } from "discourse/lib/eyeline"; import { cloneJSON } from "discourse/lib/object"; @@ -8,7 +8,6 @@ import topFixtures from "discourse/tests/fixtures/top-fixtures"; import { acceptance, publishToMessageBus, - query, } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; @@ -134,20 +133,20 @@ acceptance("Topic Discovery", function (needs) { test("switching between tabs", async function (assert) { await visit("/latest"); - assert.strictEqual( - query(".topic-list-body .topic-list-item:first-of-type").dataset.topicId, - "11557", - "shows the correct latest topics" - ); + assert + .dom(".topic-list-body .topic-list-item:first-of-type") + .hasAttribute( + "data-topic-id", + "11557", + "shows the correct latest topics" + ); await click(".navigation-container a[href='/hot']"); assert.strictEqual(currentURL(), "/hot", "switches to hot"); - assert.deepEqual( - query(".topic-list-body .topic-list-item:first-of-type").dataset.topicId, - "13088", - "shows the correct hot topics" - ); + assert + .dom(".topic-list-body .topic-list-item:first-of-type") + .hasAttribute("data-topic-id", "13088", "shows the correct hot topics"); await click(".navigation-container a[href='/categories']"); assert.strictEqual(currentURL(), "/categories", "switches to categories"); @@ -156,13 +155,16 @@ acceptance("Topic Discovery", function (needs) { test("refreshing tabs", async function (assert) { const assertShowingLatest = (url) => { assert.strictEqual(currentURL(), url, "stays on latest"); - const el = query(".topic-list-body .topic-list-item:first-of-type"); - assert.strictEqual(el.closest(".hidden"), null, "topic list is visible"); assert.strictEqual( - el.dataset.topicId, - "11557", - "shows the correct topic" + find(".topic-list-body .topic-list-item:first-of-type").closest( + ".hidden" + ), + null, + "topic list is visible" ); + assert + .dom(".topic-list-body .topic-list-item:first-of-type") + .hasAttribute("data-topic-id", "11557", "shows the correct topic"); }; await visit("/latest"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-quote-button-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-quote-button-test.js index 0d5a22522f9..3f5ffe0b18f 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/topic-quote-button-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/topic-quote-button-test.js @@ -2,11 +2,7 @@ import { click, triggerKeyEvent, visit } from "@ember/test-helpers"; import { test } from "qunit"; import { cloneJSON } from "discourse/lib/object"; import topicFixtures from "discourse/tests/fixtures/topic"; -import { - acceptance, - query, - selectText, -} from "discourse/tests/helpers/qunit-helpers"; +import { acceptance, selectText } from "discourse/tests/helpers/qunit-helpers"; import { i18n } from "discourse-i18n"; acceptance("Topic - Quote button - logged in", function (needs) { @@ -82,12 +78,12 @@ acceptance("Closed Topic - Quote button - logged in", function (needs) { assert.dom(".insert-quote").exists("shows the quote button"); await click(".insert-quote"); - assert.true( - query(".d-editor-input") - .value.trim() - .startsWith("Continuing the discussion from"), - "quote action defaults to reply as new topic (since topic is closed)" - ); + assert + .dom(".d-editor-input") + .hasValue( + /^\s*Continuing the discussion from/, + "quote action defaults to reply as new topic (since topic is closed)" + ); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-user-status-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-user-status-test.js index c4eb4488ca2..aff0c917a17 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/topic-user-status-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/topic-user-status-test.js @@ -5,18 +5,15 @@ import TopicFixtures from "discourse/tests/fixtures/topic"; import { acceptance, publishToMessageBus, - query, } from "discourse/tests/helpers/qunit-helpers"; acceptance("Topic - User Status", function (needs) { - const status = { emoji: "tooth", description: "off to dentist" }; - needs.user(); needs.pretender((server, helper) => { server.get("/t/299/1.json", () => { const response = cloneJSON(TopicFixtures["/t/299/1.json"]); response.post_stream.posts.forEach((post) => { - post.user_status = status; + post.user_status = { emoji: "tooth", description: "off to dentist" }; // we need the poster's name to be different from username // so when display_name_on_posts = true, both name and username will be shown: @@ -50,7 +47,6 @@ acceptance("Topic - User Status", function (needs) { acceptance("Topic - User Status - live updates", function (needs) { const userId = 1; - const status = { emoji: "tooth", description: "off to dentist" }; needs.user(); needs.pretender((server, helper) => { @@ -72,12 +68,9 @@ acceptance("Topic - User Status - live updates", function (needs) { assert .dom(".topic-post .user-status-message") .exists({ count: 3 }, "all posts has user status"); - assert.true( - query(".topic-post .user-status-message .emoji").src.includes( - status.emoji - ), - "status emoji is correct" - ); + assert + .dom(".topic-post .user-status-message .emoji") + .hasAttribute("src", /tooth/, "status emoji is correct"); const newStatus = { emoji: "surfing_man", description: "surfing" }; await publishToMessageBus(`/user-status`, { [userId]: newStatus }); @@ -85,12 +78,9 @@ acceptance("Topic - User Status - live updates", function (needs) { assert .dom(".topic-post .user-status-message") .exists({ count: 3 }, "all posts has user status"); - assert.true( - query(".topic-post .user-status-message .emoji").src.includes( - newStatus.emoji - ), - "status emoji is correct" - ); + assert + .dom(".topic-post .user-status-message .emoji") + .hasAttribute("src", /surfing_man/, "status emoji is correct"); }); test("removing status and setting again", async function (assert) { @@ -100,12 +90,9 @@ acceptance("Topic - User Status - live updates", function (needs) { assert .dom(".topic-post .user-status-message") .exists({ count: 3 }, "all posts has user status"); - assert.true( - query(".topic-post .user-status-message .emoji").src.includes( - status.emoji - ), - "status emoji is correct" - ); + assert + .dom(".topic-post .user-status-message .emoji") + .hasAttribute("src", /tooth/, "status emoji is correct"); await publishToMessageBus(`/user-status`, { [userId]: null }); @@ -119,11 +106,8 @@ acceptance("Topic - User Status - live updates", function (needs) { assert .dom(".topic-post .user-status-message") .exists({ count: 3 }, "all posts have user status"); - assert.true( - query(".topic-post .user-status-message .emoji").src.includes( - newStatus.emoji - ), - "status emoji is correct" - ); + assert + .dom(".topic-post .user-status-message .emoji") + .hasAttribute("src", /surfing_man/, "status emoji is correct"); }); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js index 020fafddec6..1764003aebd 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js @@ -20,7 +20,6 @@ import { acceptance, loggedInUser, publishToMessageBus, - query, queryAll, updateCurrentUser, } from "discourse/tests/helpers/qunit-helpers"; @@ -296,34 +295,28 @@ acceptance("User menu", function (needs) { expectedTabOrder, "data-tab-number of the tabs has no gaps when custom tabs are added and the tabs are in the right order" ); - assert.strictEqual( - query(".tabs-list.bottom-tabs .btn").dataset.tabNumber, - "9", - "bottom tab has the correct data-tab-number" - ); + assert + .dom(".tabs-list.bottom-tabs .btn") + .hasAttribute( + "data-tab-number", + "9", + "bottom tab has the correct data-tab-number" + ); - let customTab1Bubble = query( - "#user-menu-button-custom-tab-1 .badge-notification" - ); + assert + .dom("#user-menu-button-custom-tab-1 .badge-notification") + .hasText("73", "bubble shows the right count"); - assert.dom(customTab1Bubble).hasText("73", "bubble shows the right count"); - - const customTab2Bubble = query( - "#user-menu-button-custom-tab-2 .badge-notification" - ); - - assert.dom(customTab2Bubble).hasText("29", "bubble shows the right count"); + assert + .dom("#user-menu-button-custom-tab-2 .badge-notification") + .hasText("29", "bubble shows the right count"); await publishToMessageBus(`/notification/${loggedInUser().id}`, { unread_high_priority_notifications: 18, }); - customTab1Bubble = query( - "#user-menu-button-custom-tab-1 .badge-notification" - ); - assert - .dom(customTab1Bubble) + .dom("#user-menu-button-custom-tab-1 .badge-notification") .hasText( "18", "displayed bubble count updates when the value is changed" @@ -413,51 +406,56 @@ acceptance("User menu", function (needs) { }); test("the profile tab", async function (assert) { - const clickOutside = () => - triggerEvent(document.querySelector("header.d-header"), "pointerdown"); + const clickOutside = () => triggerEvent("header.d-header", "pointerdown"); updateCurrentUser({ draft_count: 13 }); await visit("/"); await click(".d-header-icons .current-user button"); await click("#user-menu-button-profile"); - const summaryLink = query("#quick-access-profile ul li.summary a"); - assert.true( - summaryLink.href.endsWith("/u/eviltrout/summary"), - "has a link to the summary page of the user" - ); assert - .dom(summaryLink) + .dom("#quick-access-profile ul li.summary a") + .hasAttribute( + "href", + /\/u\/eviltrout\/summary$/, + "has a link to the summary page of the user" + ); + assert + .dom("#quick-access-profile ul li.summary a") .hasText(i18n("user.summary.title"), "summary link has the right label"); assert - .dom(".d-icon-user", summaryLink) + .dom("#quick-access-profile ul li.summary a .d-icon-user") .exists("summary link has the right icon"); - const activityLink = query("#quick-access-profile ul li.activity a"); - assert.true( - activityLink.href.endsWith("/u/eviltrout/activity"), - "has a link to the activity page of the user" - ); assert - .dom(activityLink) + .dom("#quick-access-profile ul li.activity a") + .hasAttribute( + "href", + /\/u\/eviltrout\/activity$/, + "has a link to the activity page of the user" + ); + assert + .dom("#quick-access-profile ul li.activity a") .hasText( i18n("user.activity_stream"), "activity link has the right label" ); assert - .dom(".d-icon-bars-staggered", activityLink) + .dom("#quick-access-profile ul li.activity a .d-icon-bars-staggered") .exists("activity link has the right icon"); - const invitesLink = query("#quick-access-profile ul li.invites a"); - assert.true( - invitesLink.href.endsWith("/u/eviltrout/invited"), - "has a link to the invites page of the user" - ); assert - .dom(invitesLink) + .dom("#quick-access-profile ul li.invites a") + .hasAttribute( + "href", + /\/u\/eviltrout\/invited$/, + "has a link to the invites page of the user" + ); + assert + .dom("#quick-access-profile ul li.invites a") .hasText(i18n("user.invited.title"), "invites link has the right label"); assert - .dom(".d-icon-user-plus", invitesLink) + .dom("#quick-access-profile ul li.invites a .d-icon-user-plus") .exists("invites link has the right icon"); await clickOutside(); @@ -470,47 +468,48 @@ acceptance("User menu", function (needs) { .dom("#quick-access-profile ul li.invites") .doesNotExist("invites link not shown when the user can't invite"); - const draftsLink = query("#quick-access-profile ul li.drafts a"); - assert.true( - draftsLink.href.endsWith("/u/eviltrout/activity/drafts"), - "has a link to the drafts page of the user" - ); assert - .dom(draftsLink) + .dom("#quick-access-profile ul li.drafts a") + .hasAttribute( + "href", + /\/u\/eviltrout\/activity\/drafts$/, + "has a link to the drafts page of the user" + ); + assert + .dom("#quick-access-profile ul li.drafts a") .hasText( i18n("drafts.label_with_count", { count: 13 }), "drafts link has the right label with count of the user's drafts" ); assert - .dom(".d-icon-user_menu\\.drafts", draftsLink) + .dom("#quick-access-profile ul li.drafts a .d-icon-user_menu\\.drafts") .exists("drafts link has the right icon"); - const preferencesLink = query("#quick-access-profile ul li.preferences a"); - assert.true( - preferencesLink.href.endsWith("/u/eviltrout/preferences"), - "has a link to the preferences page of the user" - ); assert - .dom(preferencesLink) + .dom("#quick-access-profile ul li.preferences a") + .hasAttribute( + "href", + /\/u\/eviltrout\/preferences$/, + "has a link to the preferences page of the user" + ); + assert + .dom("#quick-access-profile ul li.preferences a") .hasText( i18n("user.preferences.title"), "preferences link has the right label" ); assert - .dom(".d-icon-gear", preferencesLink) + .dom("#quick-access-profile ul li.preferences a .d-icon-gear") .exists("preferences link has the right icon"); - let doNotDisturbButton = query( - "#quick-access-profile ul li.do-not-disturb .btn" - ); assert - .dom(doNotDisturbButton) + .dom("#quick-access-profile ul li.do-not-disturb .btn") .hasText( i18n("pause_notifications.label"), "Do Not Disturb button has the right label" ); assert - .dom(".d-icon-toggle-off", doNotDisturbButton) + .dom("#quick-access-profile ul li.do-not-disturb .btn .d-icon-toggle-off") .exists("Do Not Disturb button has the right icon"); await clickOutside(); @@ -520,17 +519,14 @@ acceptance("User menu", function (needs) { await click(".d-header-icons .current-user button"); await click("#user-menu-button-profile"); - doNotDisturbButton = query( - "#quick-access-profile ul li.do-not-disturb .btn" - ); assert - .dom(doNotDisturbButton) + .dom("#quick-access-profile ul li.do-not-disturb .btn") .hasText( `${i18n("pause_notifications.label")} 2h`, "Do Not Disturb button has the right label when Do Not Disturb is enabled" ); assert - .dom(".d-icon-toggle-on", doNotDisturbButton) + .dom("#quick-access-profile ul li.do-not-disturb .btn .d-icon-toggle-on") .exists( "Do Not Disturb button has the right icon when Do Not Disturb is enabled" ); @@ -538,17 +534,16 @@ acceptance("User menu", function (needs) { assert .dom("#quick-access-profile ul li.enable-anonymous .btn") .exists("toggle anon button is shown"); - let toggleAnonButton = query( - "#quick-access-profile ul li.enable-anonymous .btn" - ); assert - .dom(toggleAnonButton) + .dom("#quick-access-profile ul li.enable-anonymous .btn") .hasText( i18n("switch_to_anon"), "toggle anonymous button has the right label when the user isn't anonymous" ); assert - .dom(".d-icon-user-secret", toggleAnonButton) + .dom( + "#quick-access-profile ul li.enable-anonymous .btn .d-icon-user-secret" + ) .exists( "toggle anonymous button has the right icon when the user isn't anonymous" ); @@ -558,17 +553,14 @@ acceptance("User menu", function (needs) { await click(".d-header-icons .current-user button"); await click("#user-menu-button-profile"); - toggleAnonButton = query( - "#quick-access-profile ul li.disable-anonymous .btn" - ); assert - .dom(toggleAnonButton) + .dom("#quick-access-profile ul li.disable-anonymous .btn") .hasText( i18n("switch_from_anon"), "toggle anonymous button has the right label when the user is anonymous" ); assert - .dom(".d-icon-ban", toggleAnonButton) + .dom("#quick-access-profile ul li.disable-anonymous .btn .d-icon-ban") .exists( "toggle anonymous button has the right icon when the user is anonymous" ); @@ -658,12 +650,11 @@ acceptance("User menu", function (needs) { "toggle anon button is not shown if the user is not allowed to post anonymously" ); - const logoutButton = query("#quick-access-profile ul li.logout .btn"); assert - .dom(logoutButton) + .dom("#quick-access-profile ul li.logout .btn") .hasText(i18n("user.log_out"), "logout button has the right label"); assert - .dom(".d-icon-right-from-bracket", logoutButton) + .dom("#quick-access-profile ul li.logout .btn .d-icon-right-from-bracket") .exists("logout button has the right icon"); }); @@ -687,25 +678,27 @@ acceptance("User menu", function (needs) { await click(".d-header-icons .current-user button"); await click("#user-menu-button-profile"); - const item1 = query("#quick-access-profile ul li.test-1-item"); - assert - .dom(".d-icon-wrench", item1) + .dom("#quick-access-profile ul li.test-1-item .d-icon-wrench") .exists("The first item's icon is rendered"); - assert.true( - item1.querySelector("a").href.endsWith("/test_1_path"), - "The first item's link is present with correct href" - ); - - const item2 = query("#quick-access-profile ul li.test-2-item"); + assert + .dom("#quick-access-profile ul li.test-1-item a") + .hasAttribute( + "href", + /\/test_1_path$/, + "The first item's link is present with correct href" + ); assert - .dom(".d-icon", item2) + .dom("#quick-access-profile ul li.test-2-item .d-icon") .doesNotExist("The second item doesn't have an icon"); - assert.true( - item2.querySelector("a").href.endsWith("/test_2_path"), - "The second item's link is present with correct href" - ); + assert + .dom("#quick-access-profile ul li.test-2-item a") + .hasAttribute( + "href", + /\/test_2_path$/, + "The second item's link is present with correct href" + ); }); test("the active tab can be clicked again to navigate to a page", async function (assert) { @@ -1031,11 +1024,8 @@ acceptance("User menu - Dismiss button", function (needs) { await click(".d-header-icons .current-user button"); await click("#user-menu-button-other-notifications"); - let othersBadgeNotification = query( - "#user-menu-button-other-notifications .badge-notification" - ); assert - .dom(othersBadgeNotification) + .dom("#user-menu-button-other-notifications .badge-notification") .hasText("4", "badge shows the right count"); await click(".user-menu .notifications-dismiss"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js index a479b7156b8..3341859f5bc 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js @@ -1,10 +1,10 @@ -import { click, visit } from "@ember/test-helpers"; +import { click, find, visit } from "@ember/test-helpers"; import { test } from "qunit"; import cookie, { removeCookie } from "discourse/lib/cookie"; import Session from "discourse/models/session"; import Site from "discourse/models/site"; import userFixtures from "discourse/tests/fixtures/user-fixtures"; -import { acceptance, query } from "discourse/tests/helpers/qunit-helpers"; +import { acceptance } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; import { i18n } from "discourse-i18n"; @@ -26,7 +26,7 @@ acceptance("User Preferences - Interface", function (needs) { assert.dom(".saved").doesNotExist("hasn't been saved yet"); await click(".save-changes"); assert.dom(".saved").exists("it displays the saved message"); - query(".saved").remove(); + find(".saved").remove(); }; await visit("/u/eviltrout/preferences/interface"); @@ -213,11 +213,13 @@ acceptance( await visit("/u/eviltrout/preferences/interface"); assert.dom(".light-color-scheme").exists("has light scheme dropdown"); - assert.strictEqual( - query(".light-color-scheme .selected-name").dataset.value, - session.userColorSchemeId.toString(), - "user's selected color scheme is selected value in light scheme dropdown" - ); + assert + .dom(".light-color-scheme .selected-name") + .hasAttribute( + "data-value", + session.userColorSchemeId.toString(), + "user's selected color scheme is selected value in light scheme dropdown" + ); }); test("display 'Theme default' when default color scheme is not marked as selectable", async function (assert) { @@ -264,17 +266,19 @@ acceptance( assert.dom(".saved").doesNotExist("hasn't been saved yet"); await click(".save-changes"); assert.dom(".saved").exists("displays the saved message"); - query(".saved").remove(); + find(".saved").remove(); }; await visit("/u/eviltrout/preferences/interface"); assert.dom(".light-color-scheme").exists("has regular dropdown"); assert.dom(".dark-color-scheme").exists("has dark color scheme dropdown"); - assert.strictEqual( - query(".dark-color-scheme .selected-name").dataset.value, - session.userDarkSchemeId.toString(), - "sets site default as selected dark scheme" - ); + assert + .dom(".dark-color-scheme .selected-name") + .hasAttribute( + "data-value", + session.userDarkSchemeId.toString(), + "sets site default as selected dark scheme" + ); assert .dom(".control-group.dark-mode") .doesNotExist("does not show disable dark mode checkbox"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/video-placeholder-test.js b/app/assets/javascripts/discourse/tests/acceptance/video-placeholder-test.js index 88b76f1ec57..3d6e9ab907c 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/video-placeholder-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/video-placeholder-test.js @@ -1,4 +1,4 @@ -import { click, visit } from "@ember/test-helpers"; +import { click, triggerEvent, visit } from "@ember/test-helpers"; import { test } from "qunit"; import { acceptance } from "discourse/tests/helpers/qunit-helpers"; @@ -40,8 +40,7 @@ acceptance("Video Placeholder Test", function () { const video = document.querySelector("video"); video.play = function () {}; // We don't actually want the video to play in our test - const canPlayEvent = new Event("canplay"); - video.dispatchEvent(canPlayEvent); + await triggerEvent(video, "canplay"); assert .dom(video) diff --git a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js index ede1f279674..4bedff6e52a 100644 --- a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js +++ b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js @@ -1,5 +1,6 @@ import { run } from "@ember/runloop"; import { + find, getApplication, settled, triggerKeyEvent, @@ -589,15 +590,23 @@ export function createFile(name, type = "image/png", blobData = null) { return file; } -export async function paste(element, text, otherClipboardData = {}) { - let e = new Event("paste", { cancelable: true }); +export async function paste(selector, text, otherClipboardData = {}) { + const e = new Event("paste", { cancelable: true }); e.clipboardData = deepMerge({ getData: () => text }, otherClipboardData); + + const element = typeof selector === "string" ? find(selector) : selector; + element.dispatchEvent(e); + await settled(); return e; } export async function simulateKey(element, key) { + if (typeof element === "string") { + element = find(element); + } + if (key === "\b") { await triggerKeyEvent(element, "keydown", "Backspace"); diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs index 9d901b0585a..f3ad007b861 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs +++ b/app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs @@ -1,7 +1,6 @@ -import { click, fillIn, render } from "@ember/test-helpers"; +import { click, fillIn, find, render } from "@ember/test-helpers"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; import ThemeSettingsEditor from "admin/components/theme-settings-editor"; module( @@ -89,7 +88,7 @@ module( ); - query(".ace").aceEditor.session.doc.setValue( + find(".ace").aceEditor.session.doc.setValue( JSON.stringify([{ setting: "bar", value: "bar" }]) ); await click("button#save"); @@ -112,7 +111,7 @@ module( ); - query(".ace").aceEditor.session.doc.setValue( + find(".ace").aceEditor.session.doc.setValue( JSON.stringify([ { setting: "foo", value: "foo" }, { setting: "bar", value: "bar" }, diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js index a5281ce669f..8d12aeedbfb 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js @@ -2,6 +2,7 @@ import { next } from "@ember/runloop"; import { click, fillIn, + find, focus, render, settled, @@ -15,7 +16,7 @@ import { setCaretPosition } from "discourse/lib/utilities"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; import formatTextWithSelection from "discourse/tests/helpers/d-editor-helper"; import emojiPicker from "discourse/tests/helpers/emoji-picker-helper"; -import { paste, query, queryAll } from "discourse/tests/helpers/qunit-helpers"; +import { paste, queryAll } from "discourse/tests/helpers/qunit-helpers"; import { getTextareaSelection, setTextareaSelection, @@ -63,6 +64,10 @@ module("Integration | Component | d-editor", function (hooks) { }); function jumpEnd(textarea) { + if (typeof textarea === "string") { + textarea = find(textarea); + } + textarea.selectionStart = textarea.value.length; textarea.selectionEnd = textarea.value.length; return textarea; @@ -79,7 +84,7 @@ module("Integration | Component | d-editor", function (hooks) { await render(hbs``); - const textarea = jumpEnd(query("textarea.d-editor-input")); + const textarea = jumpEnd("textarea.d-editor-input"); await testFunc.call(this, assert, textarea); }); } @@ -92,7 +97,7 @@ module("Integration | Component | d-editor", function (hooks) { hbs`` ); - const textarea = jumpEnd(query("textarea.d-editor-input")); + const textarea = jumpEnd("textarea.d-editor-input"); await testFunc.call(this, assert, textarea); }); } @@ -247,7 +252,7 @@ function xyz(x, y, z) { await render(hbs``); - const textarea = query("textarea.d-editor-input"); + const textarea = find("textarea.d-editor-input"); textarea.selectionStart = 0; textarea.selectionEnd = textarea.value.length; @@ -269,7 +274,7 @@ function xyz(x, y, z) { await render(hbs``); - const textarea = jumpEnd(query("textarea.d-editor-input")); + const textarea = jumpEnd("textarea.d-editor-input"); await click("button.code"); assert.strictEqual(this.value, ` ${i18n("composer.code_text")}`); @@ -350,7 +355,7 @@ third line` this.set("value", "existing"); await render(hbs``); - const textarea = query("textarea.d-editor-input"); + const textarea = find("textarea.d-editor-input"); textarea.selectionStart = 0; textarea.selectionEnd = 8; @@ -371,7 +376,7 @@ third line` await render(hbs``); - const textarea = jumpEnd(query("textarea.d-editor-input")); + const textarea = jumpEnd("textarea.d-editor-input"); await click("button.code"); assert.strictEqual( @@ -486,7 +491,7 @@ third line` hbs`` ); - const textarea = jumpEnd(query("textarea.d-editor-input")); + const textarea = jumpEnd("textarea.d-editor-input"); textarea.selectionStart = 0; @@ -507,7 +512,7 @@ third line` hbs`` ); - const textarea = jumpEnd(query("textarea.d-editor-input")); + const textarea = jumpEnd("textarea.d-editor-input"); textarea.selectionStart = 6; textarea.selectionEnd = 10; @@ -709,7 +714,7 @@ third line` // the in-element outlet container necessary for DMenu to work await render(hbs``); const picker = emojiPicker(); - jumpEnd(query("textarea.d-editor-input")); + jumpEnd("textarea.d-editor-input"); await click(".d-editor-button-bar .emoji"); await picker.select("raised_hands"); @@ -721,7 +726,7 @@ third line` await click("textarea.d-editor-input"); await fillIn(".d-editor-input", "starting to type an emoji like :woman"); - jumpEnd(query("textarea.d-editor-input")); + jumpEnd("textarea.d-editor-input"); await triggerKeyEvent(".d-editor-input", "keyup", "Backspace"); //simplest way to trigger more menu here await click(".ac-emoji li:last-child a"); await picker.select("womans_clothes"); @@ -892,8 +897,7 @@ third line` hbs`` ); - let element = query(".d-editor"); - await paste(element, "\ta\tb\n1\t2\t3"); + await paste(".d-editor", "\ta\tb\n1\t2\t3"); assert.strictEqual(this.value, "||a|b|\n|---|---|---|\n|1|2|3|\n"); document.execCommand("undo"); @@ -908,8 +912,7 @@ third line` hbs`` ); - let element = query(".d-editor"); - await paste(element, '\ta\tb\n1\t"2\n2.5"\t3'); + await paste(".d-editor", '\ta\tb\n1\t"2\n2.5"\t3'); assert.strictEqual(this.value, "||a|b|\n|---|---|---|\n|1|2
2.5|3|\n"); }); @@ -918,13 +921,12 @@ third line` async function (assert, textarea) { this.set("value", "See discourse in action"); setTextareaSelection(textarea, 4, 13); - const element = query(".d-editor"); - const event = await paste(element, "https://www.discourse.org/"); + const event = await paste(".d-editor", "https://www.discourse.org/"); assert.strictEqual( this.value, "See [discourse](https://www.discourse.org/) in action" ); - assert.strictEqual(event.defaultPrevented, true); + assert.true(event.defaultPrevented); document.execCommand("undo"); assert.strictEqual(this.value, "See discourse in action"); @@ -936,11 +938,10 @@ third line` async function (assert, textarea) { this.set("value", "good morning"); setTextareaSelection(textarea, 5, 12); - const element = query(".d-editor"); - const event = await paste(element, "evening"); + const event = await paste(".d-editor", "evening"); // Synthetic paste events do not manipulate document content. assert.strictEqual(this.value, "good morning"); - assert.strictEqual(event.defaultPrevented, false); + assert.false(event.defaultPrevented); } ); @@ -949,11 +950,10 @@ third line` async function (assert, textarea) { this.set("value", "a link example:"); jumpEnd(textarea); - const element = query(".d-editor"); - const event = await paste(element, "https://www.discourse.org/"); + const event = await paste(".d-editor", "https://www.discourse.org/"); // Synthetic paste events do not manipulate document content. assert.strictEqual(this.value, "a link example:"); - assert.strictEqual(event.defaultPrevented, false); + assert.false(event.defaultPrevented); } ); @@ -962,14 +962,13 @@ third line` async function (assert, textarea) { this.set("value", "a link example:"); setTextareaSelection(textarea, 0, 1); - const element = query(".d-editor"); const event = await paste( - element, + ".d-editor", "Try out Discourse at: https://www.discourse.org/" ); // Synthetic paste events do not manipulate document content. assert.strictEqual(this.value, "a link example:"); - assert.strictEqual(event.defaultPrevented, false); + assert.false(event.defaultPrevented); } ); @@ -978,10 +977,9 @@ third line` async function (assert, textarea) { this.set("value", "team email"); setTextareaSelection(textarea, 5, 10); - const element = query(".d-editor"); - const event = await paste(element, "mailto:team@discourse.org"); + const event = await paste(".d-editor", "mailto:team@discourse.org"); assert.strictEqual(this.value, "team [email](mailto:team@discourse.org)"); - assert.strictEqual(event.defaultPrevented, true); + assert.true(event.defaultPrevented); } ); @@ -990,11 +988,10 @@ third line` async function (assert, textarea) { this.set("value", "Try https://www.discourse.org"); setTextareaSelection(textarea, 0, 29); - const element = query(".d-editor"); - const event = await paste(element, "https://www.discourse.com/"); + const event = await paste(".d-editor", "https://www.discourse.com/"); // Synthetic paste events do not manipulate document content. assert.strictEqual(this.value, "Try https://www.discourse.org"); - assert.strictEqual(event.defaultPrevented, false); + assert.false(event.defaultPrevented); } ); @@ -1003,11 +1000,10 @@ third line` async function (assert, textarea) { this.set("value", "hello [url=foobar]foobar[/url]"); setTextareaSelection(textarea, 0, 30); - const element = query(".d-editor"); - const event = await paste(element, "https://www.discourse.com/"); + const event = await paste(".d-editor", "https://www.discourse.com/"); // Synthetic paste events do not manipulate document content. assert.strictEqual(this.value, "hello [url=foobar]foobar[/url]"); - assert.strictEqual(event.defaultPrevented, false); + assert.false(event.defaultPrevented); } ); diff --git a/app/assets/javascripts/discourse/tests/integration/components/date-input-test.js b/app/assets/javascripts/discourse/tests/integration/components/date-input-test.js index 4191a95d703..c9134c6e313 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/date-input-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/date-input-test.js @@ -1,4 +1,4 @@ -import { render } from "@ember/test-helpers"; +import { fillIn, render, triggerEvent } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; @@ -24,8 +24,8 @@ module("Integration | Component | date-input", function (hooks) { hbs`` ); - document.querySelector(".date-picker").value = "2019-01-02"; - document.querySelector(".date-picker").dispatchEvent(new Event("change")); + await fillIn(".date-picker", "2019-01-02"); + await triggerEvent(".date-picker", "change"); assert.true(this.date.isSame(DEFAULT_DATE)); }); @@ -38,8 +38,8 @@ module("Integration | Component | date-input", function (hooks) { hbs`` ); - document.querySelector(".date-picker").value = "2019-02-02"; - document.querySelector(".date-picker").dispatchEvent(new Event("change")); + await fillIn(".date-picker", "2019-02-02"); + await triggerEvent(".date-picker", "change"); assert.true(this.date.isSame(moment("2019-02-02"))); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js b/app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js index a5d5bd64714..e21e3cd6c74 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js @@ -2,25 +2,8 @@ import { fillIn, render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; import selectKit from "discourse/tests/helpers/select-kit-helper"; -function fromDateInput() { - return query(".from.d-date-time-input .date-picker"); -} - -function fromTimeInput() { - return query(".from.d-date-time-input .d-time-input .combo-box-header"); -} - -function toDateInput() { - return query(".to.d-date-time-input .date-picker"); -} - -function toTimeInput() { - return query(".to.d-date-time-input .d-time-input .combo-box-header"); -} - const DEFAULT_DATE_TIME_STRING = "2019-01-29 14:45"; const DEFAULT_DATE_TIME = moment(DEFAULT_DATE_TIME_STRING); @@ -34,21 +17,27 @@ module("Integration | Component | date-time-input-range", function (hooks) { hbs`` ); - assert.dom(fromDateInput()).hasValue("2019-01-29"); - assert.strictEqual(fromTimeInput().dataset.name, "14:45"); - assert.dom(toDateInput()).hasNoValue(); - assert.strictEqual(toTimeInput().dataset.name, "--:--"); + assert.dom(".from.d-date-time-input .date-picker").hasValue("2019-01-29"); + assert + .dom(".from.d-date-time-input .d-time-input .combo-box-header") + .hasAttribute("data-name", "14:45"); + assert.dom(".to.d-date-time-input .date-picker").hasNoValue(); + assert + .dom(".to.d-date-time-input .d-time-input .combo-box-header") + .hasAttribute("data-name", "--:--"); - await fillIn(toDateInput(), "2019-01-29"); + await fillIn(".to.d-date-time-input .date-picker", "2019-01-29"); const toTimeSelectKit = selectKit(".to .d-time-input .select-kit"); await toTimeSelectKit.expand(); + let rows = toTimeSelectKit.rows(); assert.dom(rows[0]).hasAttribute("data-name", "14:45"); assert.dom(rows[rows.length - 1]).hasAttribute("data-name", "23:45"); await toTimeSelectKit.collapse(); - await fillIn(toDateInput(), "2019-01-30"); + await fillIn(".to.d-date-time-input .date-picker", "2019-01-30"); await toTimeSelectKit.expand(); + rows = toTimeSelectKit.rows(); assert.dom(rows[0]).hasAttribute("data-name", "00:00"); assert.dom(rows[rows.length - 1]).hasAttribute("data-name", "23:45"); @@ -61,9 +50,10 @@ module("Integration | Component | date-time-input-range", function (hooks) { hbs`` ); - await fillIn(toDateInput(), "2019-01-29"); + await fillIn(".to.d-date-time-input .date-picker", "2019-01-29"); const toTimeSelectKit = selectKit(".to .d-time-input .select-kit"); await toTimeSelectKit.expand(); + let rows = toTimeSelectKit.rows(); assert.dom(rows[4]).hasAttribute("data-name", "15:45"); assert.dom(rows[5]).hasAttribute("data-name", "16:15"); @@ -81,12 +71,16 @@ module("Integration | Component | date-time-input-range", function (hooks) { hbs`` ); - assert.dom(fromDateInput()).hasValue("2019-01-29"); - assert.strictEqual(fromTimeInput().dataset.name, "14:45"); - assert.dom(toDateInput()).hasNoValue(); - assert.strictEqual(toTimeInput().dataset.name, "--:--"); + assert.dom(".from.d-date-time-input .date-picker").hasValue("2019-01-29"); + assert + .dom(".from.d-date-time-input .d-time-input .combo-box-header") + .hasAttribute("data-name", "14:45"); + assert.dom(".to.d-date-time-input .date-picker").hasNoValue(); + assert + .dom(".to.d-date-time-input .d-time-input .combo-box-header") + .hasAttribute("data-name", "--:--"); - await fillIn(toDateInput(), "2019-01-29"); + await fillIn(".to.d-date-time-input .date-picker", "2019-01-29"); const toTimeSelectKit = selectKit(".to .d-time-input .select-kit"); await toTimeSelectKit.expand(); await toTimeSelectKit.selectRowByName("19:15"); diff --git a/app/assets/javascripts/discourse/tests/integration/components/date-time-input-test.js b/app/assets/javascripts/discourse/tests/integration/components/date-time-input-test.js index 11cb1ff628f..fd93a8c5c21 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/date-time-input-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/date-time-input-test.js @@ -1,16 +1,7 @@ -import { render } from "@ember/test-helpers"; +import { fillIn, render, triggerEvent } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; - -function dateInput() { - return query(".date-picker"); -} - -function timeInput() { - return query(".d-time-input .combo-box-header"); -} function setDate(date) { this.set("date", date); @@ -26,8 +17,10 @@ module("Integration | Component | date-time-input", function (hooks) { await render(hbs``); - assert.dom(dateInput()).hasValue("2019-01-29"); - assert.strictEqual(timeInput().dataset.name, "14:45"); + assert.dom(".date-picker").hasValue("2019-01-29"); + assert + .dom(".d-time-input .combo-box-header") + .hasAttribute("data-name", "14:45"); }); test("prevents mutations", async function (assert) { @@ -35,7 +28,7 @@ module("Integration | Component | date-time-input", function (hooks) { await render(hbs``); - dateInput().value = "2019-01-02"; + await fillIn(".date-picker", "2019-01-02"); assert.true(this.date.isSame(DEFAULT_DATE_TIME)); }); @@ -48,8 +41,8 @@ module("Integration | Component | date-time-input", function (hooks) { hbs`` ); - dateInput().value = "2019-01-02"; - dateInput().dispatchEvent(new Event("change")); + await fillIn(".date-picker", "2019-01-02"); + await triggerEvent(".date-picker", "change"); assert.true(this.date.isSame(moment("2019-01-02 14:45"))); }); @@ -74,12 +67,12 @@ module("Integration | Component | date-time-input", function (hooks) { await render( hbs`` ); - dateInput().dispatchEvent(new Event("change")); + await triggerEvent(".date-picker", "change"); assert.strictEqual(this.date.format(), "2023-05-05T12:00:00+01:00"); this.setProperties({ timezone: "Australia/Sydney" }); - dateInput().dispatchEvent(new Event("change")); + await triggerEvent(".date-picker", "change"); assert.strictEqual(this.date.format(), "2023-05-05T12:00:00+10:00"); }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/dialog-holder-test.js b/app/assets/javascripts/discourse/tests/integration/components/dialog-holder-test.js index e6bc3b2acf7..76d6dabbc6d 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/dialog-holder-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/dialog-holder-test.js @@ -1,6 +1,7 @@ import { click, fillIn, + find, render, settled, triggerKeyEvent, @@ -10,7 +11,6 @@ import { module, test } from "qunit"; import GroupDeleteDialogMessage from "discourse/components/dialog-messages/group-delete"; import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; import { i18n } from "discourse-i18n"; module("Integration | Component | dialog-holder", function (hooks) { @@ -30,7 +30,7 @@ module("Integration | Component | dialog-holder", function (hooks) { }); await settled(); - assert.true(query(".dialog-overlay").offsetWidth > 0, "overlay is visible"); + assert.true(find(".dialog-overlay").offsetWidth > 0, "overlay is visible"); assert .dom(".dialog-body") .hasText("This is an error", "dialog has error message"); @@ -39,11 +39,9 @@ module("Integration | Component | dialog-holder", function (hooks) { await click(".dialog-overlay"); assert.dom("#dialog-holder").exists("element is still in DOM"); - assert.strictEqual( - query(".dialog-overlay").offsetWidth, - 0, - "overlay is not visible" - ); + assert + .dom(".dialog-overlay") + .hasProperty("offsetWidth", 0, "overlay is not visible"); assert.dom("#dialog-holder").hasNoText("dialog is empty"); }); @@ -61,7 +59,7 @@ module("Integration | Component | dialog-holder", function (hooks) { }); await settled(); - assert.true(query(".dialog-overlay").offsetWidth > 0, "overlay is visible"); + assert.true(find(".dialog-overlay").offsetWidth > 0, "overlay is visible"); assert .dom(".dialog-body") .hasText("This is an error", "dialog has error message"); @@ -72,11 +70,9 @@ module("Integration | Component | dialog-holder", function (hooks) { assert.true(cancelCallbackCalled, "cancel callback called"); assert.dom("#dialog-holder").exists("element is still in DOM"); - assert.strictEqual( - query(".dialog-overlay").offsetWidth, - 0, - "overlay is not visible" - ); + assert + .dom(".dialog-overlay") + .hasProperty("offsetWidth", 0, "overlay is not visible"); assert.dom("#dialog-holder").hasNoText("dialog is empty"); }); @@ -106,11 +102,9 @@ module("Integration | Component | dialog-holder", function (hooks) { await click(".dialog-close"); assert.dom("#dialog-holder").exists("element is still in DOM"); - assert.strictEqual( - query(".dialog-overlay").offsetWidth, - 0, - "overlay is not visible" - ); + assert + .dom(".dialog-overlay") + .hasProperty("offsetWidth", 0, "overlay is not visible"); assert.dom("#dialog-holder").hasNoText("dialog is empty"); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js index 5e2a76c27c3..1e86331d687 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js @@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; module( "Integration | Component | form-template-field | input", @@ -33,10 +32,9 @@ module( .exists("a text input component exists"); assert.dom(".form-template-field__label").hasText("My text label"); - assert.strictEqual( - query(".form-template-field__input").placeholder, - "Enter text here" - ); + assert + .dom(".form-template-field__input") + .hasAttribute("placeholder", "Enter text here"); }); test("doesn't render a label when attribute is missing", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js index ca8e95c9f8d..803e9d6cb16 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js @@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; module( "Integration | Component | form-template-field | textarea", @@ -33,10 +32,9 @@ module( .exists("a textarea input component exists"); assert.dom(".form-template-field__label").hasText("My text label"); - assert.strictEqual( - query(".form-template-field__textarea").placeholder, - "Enter text here" - ); + assert + .dom(".form-template-field__textarea") + .hasAttribute("placeholder", "Enter text here"); }); test("doesn't render a label when attribute is missing", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/integration/components/home-logo-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/home-logo-test.gjs index a55c81384e9..7a9f9966a78 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/home-logo-test.gjs +++ b/app/assets/javascripts/discourse/tests/integration/components/home-logo-test.gjs @@ -4,7 +4,6 @@ import { module, test } from "qunit"; import HomeLogo from "discourse/components/header/home-logo"; import { withPluginApi } from "discourse/lib/plugin-api"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; const bigLogo = "/images/d-logo-sketch.png?test"; const smallLogo = "/images/d-logo-sketch-small.png?test"; @@ -178,12 +177,7 @@ module("Integration | Component | home-logo", function (hooks) { test("the home logo href url defaults to /", async function (assert) { await render(); - const anchorElement = query("#site-logo").closest("a"); - assert.strictEqual( - anchorElement.getAttribute("href"), - "/", - "home logo href equals /" - ); + assert.dom(".title a").hasAttribute("href", "/", "home logo href equals /"); }); test("api.registerHomeLogoHrefCallback can be used to change the logo href url", async function (assert) { @@ -193,11 +187,12 @@ module("Integration | Component | home-logo", function (hooks) { await render(); - const anchorElement = query("#site-logo").closest("a"); - assert.strictEqual( - anchorElement.getAttribute("href"), - "https://example.com", - "home logo href equals the one set by the callback" - ); + assert + .dom(".title a") + .hasAttribute( + "href", + "https://example.com", + "home logo href equals the one set by the callback" + ); }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js b/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js index 8c7ff26618a..c67e9727cd2 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js @@ -1,8 +1,7 @@ -import { render } from "@ember/test-helpers"; +import { find, render } from "@ember/test-helpers"; import { hbs } from "ember-cli-htmlbars"; import { module, test } from "qunit"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; module( "Integration | Component | consistent input/dropdown/button sizes", @@ -15,13 +14,13 @@ module( ); assert.strictEqual( - query(".btn:nth-child(1)").offsetHeight, - query(".btn:nth-child(2)").offsetHeight, + find(".btn:nth-child(1)").offsetHeight, + find(".btn:nth-child(2)").offsetHeight, "have equal height" ); assert.strictEqual( - query(".btn:nth-child(1)").offsetHeight, - query(".btn:nth-child(3)").offsetHeight, + find(".btn:nth-child(1)").offsetHeight, + find(".btn:nth-child(3)").offsetHeight, "have equal height" ); }); @@ -32,8 +31,8 @@ module( ); assert.strictEqual( - query("input").offsetHeight, - query(".btn").offsetHeight, + find("input").offsetHeight, + find(".btn").offsetHeight, "have equal height" ); }); @@ -44,8 +43,8 @@ module( ); assert.strictEqual( - query("input").offsetHeight, - query(".combo-box").offsetHeight, + find("input").offsetHeight, + find(".combo-box").offsetHeight, "have equal height" ); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/light-dark-img-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/light-dark-img-test.gjs index b8f9f405aca..cd35e2e6945 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/light-dark-img-test.gjs +++ b/app/assets/javascripts/discourse/tests/integration/components/light-dark-img-test.gjs @@ -3,7 +3,6 @@ import { render } from "@ember/test-helpers"; import { module, test } from "qunit"; import LightDarkImg from "discourse/components/light-dark-img"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; const lightSrc = { url: "/images/light.jpg", width: 376, height: 500 }; const darkSrc = { url: "/images/light.jpg", width: 432, height: 298 }; @@ -36,11 +35,9 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").doesNotExist("there is no picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - lightSrc.url, - "the img src is the light image" - ); + assert + .dom("img") + .hasAttribute("src", lightSrc.url, "the img src is the light image"); assert.dom("source").doesNotExist("there are no source tags"); }); @@ -54,11 +51,9 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").doesNotExist("there is no picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - lightSrc.url, - "the img src is the light image" - ); + assert + .dom("img") + .hasAttribute("src", lightSrc.url, "the img src is the light image"); assert.dom("source").doesNotExist("there are no source tags"); }); @@ -81,11 +76,9 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").doesNotExist("there is no picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - lightSrc.url, - "the img src is the light image" - ); + assert + .dom("img") + .hasAttribute("src", lightSrc.url, "the img src is the light image"); assert.dom("source").doesNotExist("there are no source tags"); }); @@ -99,17 +92,17 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").exists("there is a picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - lightSrc.url, - "the img src is the light image" - ); + assert + .dom("img") + .hasAttribute("src", lightSrc.url, "the img src is the light image"); assert.dom("source").exists("there is a source tag"); - assert.strictEqual( - query("source").getAttribute("srcset"), - darkSrc.url, - "the source srcset is the dark image" - ); + assert + .dom("source") + .hasAttribute( + "srcset", + darkSrc.url, + "the source srcset is the dark image" + ); }); test("dark theme with no images provided | dark mode not available", async function (assert) { @@ -131,11 +124,9 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").doesNotExist("there is no picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - lightSrc.url, - "the img src is the light image" - ); + assert + .dom("img") + .hasAttribute("src", lightSrc.url, "the img src is the light image"); assert.dom("source").doesNotExist("there are no source tags"); }); @@ -149,17 +140,17 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").exists("there is a picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - darkSrc.url, - "the img src is the dark image" - ); + assert + .dom("img") + .hasAttribute("src", darkSrc.url, "the img src is the dark image"); assert.dom("source").exists("there is a source tag"); - assert.strictEqual( - query("source").getAttribute("srcset"), - darkSrc.url, - "the source srcset is the dark image" - ); + assert + .dom("source") + .hasAttribute( + "srcset", + darkSrc.url, + "the source srcset is the dark image" + ); }); test("dark theme with no images provided | dark mode available", async function (assert) { @@ -181,11 +172,9 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").doesNotExist("there is no picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - lightSrc.url, - "the img src is the light image" - ); + assert + .dom("img") + .hasAttribute("src", lightSrc.url, "the img src is the light image"); assert.dom("source").doesNotExist("there are no source tags"); }); @@ -199,16 +188,16 @@ module("Integration | Component | light-dark-img", function (hooks) { assert.dom("picture").exists("there is a picture tag"); assert.dom("img").exists("there is an img tag"); - assert.strictEqual( - query("img").getAttribute("src"), - darkSrc.url, - "the img src is the dark image" - ); + assert + .dom("img") + .hasAttribute("src", darkSrc.url, "the img src is the dark image"); assert.dom("source").exists("there is a source tag"); - assert.strictEqual( - query("source").getAttribute("srcset"), - darkSrc.url, - "the source srcset is the dark image" - ); + assert + .dom("source") + .hasAttribute( + "srcset", + darkSrc.url, + "the source srcset is the dark image" + ); }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-decorator-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-decorator-test.gjs index eabc66f49de..c936edbff18 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-decorator-test.gjs +++ b/app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-decorator-test.gjs @@ -6,7 +6,6 @@ import PluginOutlet from "discourse/components/plugin-outlet"; import { withSilencedDeprecations } from "discourse/lib/deprecated"; import { withPluginApi } from "discourse/lib/plugin-api"; import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { query } from "discourse/tests/helpers/qunit-helpers"; import { registerTemporaryModule } from "../../helpers/temporary-module-helper"; const PREFIX = "discourse/plugins/some-plugin/templates/connectors"; @@ -39,12 +38,13 @@ module("Plugin Outlet - Decorator", function (hooks) { ); - const fooConnector = query(".my-outlet-name-outlet.foo"); - const barConnector = query(".my-outlet-name-outlet.bar"); - - assert.dom(fooConnector).exists(); - assert.strictEqual(fooConnector.style.backgroundColor, "yellow"); - assert.strictEqual(barConnector.style.backgroundColor, ""); + assert.dom(".my-outlet-name-outlet.foo").exists(); + assert + .dom(".my-outlet-name-outlet.foo") + .hasAttribute("style", "background-color: yellow;"); + assert + .dom(".my-outlet-name-outlet.bar") + .doesNotHaveStyle("backgroundColor"); await render(