diff --git a/test/javascripts/acceptance/emoji-picker-test.js.es6 b/test/javascripts/acceptance/emoji-picker-test.js.es6 index 1c17b3223b7..96c5baf37e9 100644 --- a/test/javascripts/acceptance/emoji-picker-test.js.es6 +++ b/test/javascripts/acceptance/emoji-picker-test.js.es6 @@ -1,164 +1,164 @@ -// import { acceptance } from "helpers/qunit-helpers"; -// import { IMAGE_VERSION as v } from "pretty-text/emoji/version"; -// import { resetCache } from "discourse/components/emoji-picker"; -// -// acceptance("EmojiPicker", { -// loggedIn: true, -// beforeEach() { -// resetCache(); -// } -// }); -// -// QUnit.test("emoji picker can be opened/closed", async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// -// await click("button.emoji.btn"); -// assert.notEqual( -// find(".emoji-picker") -// .html() -// .trim(), -// "", -// "it opens the picker" -// ); -// -// await click("button.emoji.btn"); -// assert.equal( -// find(".emoji-picker") -// .html() -// .trim(), -// "", -// "it closes the picker" -// ); -// }); -// -// QUnit.test("emojis can be hovered to display info", async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// -// await click("button.emoji.btn"); -// $(".emoji-picker button[title='grinning']").trigger("mouseover"); -// assert.equal( -// find(".emoji-picker .info") -// .html() -// .trim(), -// ` :grinning:`, -// "it displays emoji info when hovering emoji" -// ); -// }); -// -// QUnit.test("emoji picker triggers event when picking emoji", async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// await click("button.emoji.btn"); -// -// await click(".emoji-picker button[title='grinning']"); -// assert.equal( -// find(".d-editor-input").val(), -// ":grinning:", -// "it adds the emoji code in the editor when selected" -// ); -// }); -// -// QUnit.test("emoji picker has a list of recently used emojis", async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// await click("button.emoji.btn"); -// -// await click( -// ".emoji-picker .section[data-section='smileys_&_emotion'] button.emoji[title='grinning']" -// ); -// assert.equal( -// find('.emoji-picker .section[data-section="recent"]').css("display"), -// "block", -// "it shows recent section" -// ); -// -// assert.equal( -// find( -// '.emoji-picker .section[data-section="recent"] .section-group button.emoji' -// ).length, -// 1, -// "it adds the emoji code to the recently used emojis list" -// ); -// -// await click(".emoji-picker .clear-recent"); -// assert.equal( -// find( -// '.emoji-picker .section[data-section="recent"] .section-group button.emoji' -// ).length, -// 0, -// "it has cleared recent emojis" -// ); -// -// assert.equal( -// find('.emoji-picker .section[data-section="recent"]').css("display"), -// "none", -// "it hides recent section" -// ); -// -// assert.equal( -// find('.emoji-picker .category-icon button.emoji[data-section="recent"]') -// .parent() -// .css("display"), -// "none", -// "it hides recent category icon" -// ); -// }); -// -// QUnit.test( -// "emoji picker correctly orders recently used emojis", -// async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// -// await click("button.emoji.btn"); -// await click(".emoji-picker button[title='sunglasses']"); -// await click(".emoji-picker button[title='grinning']"); -// assert.equal( -// find('.section[data-section="recent"] .section-group button.emoji') -// .length, -// 2, -// "it has multiple recent emojis" -// ); -// -// assert.equal( -// /grinning/.test( -// find('.section[data-section="recent"] .section-group button.emoji') -// .first() -// .css("background-image") -// ), -// true, -// "it puts the last used emoji in first" -// ); -// } -// ); -// -// QUnit.test("emoji picker lazy loads emojis", async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// -// await click("button.emoji.btn"); -// -// assert.equal( -// find('.emoji-picker button[title="massage_woman"]').css("background-image"), -// "none", -// "it doesn't load invisible emojis" -// ); -// }); -// -// QUnit.test("emoji picker persists state", async assert => { -// await visit("/t/internationalization-localization/280"); -// await click("#topic-footer-buttons .btn.create"); -// -// await click("button.emoji.btn"); -// await click(".emoji-picker a.diversity-scale.medium-dark"); -// await click("button.emoji.btn"); -// -// await click("button.emoji.btn"); -// assert.equal( -// find(".emoji-picker .diversity-scale.medium-dark").hasClass("selected"), -// true, -// "it stores diversity scale" -// ); -// }); +import { acceptance } from "helpers/qunit-helpers"; +import { IMAGE_VERSION as v } from "pretty-text/emoji/version"; +import { resetCache } from "discourse/components/emoji-picker"; + +acceptance("EmojiPicker", { + loggedIn: true, + beforeEach() { + resetCache(); + } +}); + +QUnit.skip("emoji picker can be opened/closed", async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + + await click("button.emoji.btn"); + assert.notEqual( + find(".emoji-picker") + .html() + .trim(), + "", + "it opens the picker" + ); + + await click("button.emoji.btn"); + assert.equal( + find(".emoji-picker") + .html() + .trim(), + "", + "it closes the picker" + ); +}); + +QUnit.skip("emojis can be hovered to display info", async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + + await click("button.emoji.btn"); + $(".emoji-picker button[title='grinning']").trigger("mouseover"); + assert.equal( + find(".emoji-picker .info") + .html() + .trim(), + ` :grinning:`, + "it displays emoji info when hovering emoji" + ); +}); + +QUnit.skip("emoji picker triggers event when picking emoji", async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + await click("button.emoji.btn"); + + await click(".emoji-picker button[title='grinning']"); + assert.equal( + find(".d-editor-input").val(), + ":grinning:", + "it adds the emoji code in the editor when selected" + ); +}); + +QUnit.skip("emoji picker has a list of recently used emojis", async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + await click("button.emoji.btn"); + + await click( + ".emoji-picker .section[data-section='smileys_&_emotion'] button.emoji[title='grinning']" + ); + assert.equal( + find('.emoji-picker .section[data-section="recent"]').css("display"), + "block", + "it shows recent section" + ); + + assert.equal( + find( + '.emoji-picker .section[data-section="recent"] .section-group button.emoji' + ).length, + 1, + "it adds the emoji code to the recently used emojis list" + ); + + await click(".emoji-picker .clear-recent"); + assert.equal( + find( + '.emoji-picker .section[data-section="recent"] .section-group button.emoji' + ).length, + 0, + "it has cleared recent emojis" + ); + + assert.equal( + find('.emoji-picker .section[data-section="recent"]').css("display"), + "none", + "it hides recent section" + ); + + assert.equal( + find('.emoji-picker .category-icon button.emoji[data-section="recent"]') + .parent() + .css("display"), + "none", + "it hides recent category icon" + ); +}); + +QUnit.skip( + "emoji picker correctly orders recently used emojis", + async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + + await click("button.emoji.btn"); + await click(".emoji-picker button[title='sunglasses']"); + await click(".emoji-picker button[title='grinning']"); + assert.equal( + find('.section[data-section="recent"] .section-group button.emoji') + .length, + 2, + "it has multiple recent emojis" + ); + + assert.equal( + /grinning/.test( + find('.section[data-section="recent"] .section-group button.emoji') + .first() + .css("background-image") + ), + true, + "it puts the last used emoji in first" + ); + } +); + +QUnit.skip("emoji picker lazy loads emojis", async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + + await click("button.emoji.btn"); + + assert.equal( + find('.emoji-picker button[title="massage_woman"]').css("background-image"), + "none", + "it doesn't load invisible emojis" + ); +}); + +QUnit.skip("emoji picker persists state", async assert => { + await visit("/t/internationalization-localization/280"); + await click("#topic-footer-buttons .btn.create"); + + await click("button.emoji.btn"); + await click(".emoji-picker a.diversity-scale.medium-dark"); + await click("button.emoji.btn"); + + await click("button.emoji.btn"); + assert.equal( + find(".emoji-picker .diversity-scale.medium-dark").hasClass("selected"), + true, + "it stores diversity scale" + ); +}); diff --git a/test/javascripts/components/ace-editor-test.js.es6 b/test/javascripts/components/ace-editor-test.js.es6 index d099e79f037..d798db50551 100644 --- a/test/javascripts/components/ace-editor-test.js.es6 +++ b/test/javascripts/components/ace-editor-test.js.es6 @@ -1,50 +1,54 @@ -// import componentTest from "helpers/component-test"; -// -// moduleForComponent("ace-editor", { integration: true }); -// -// componentTest("css editor", { -// template: '{{ace-editor mode="css"}}', -// test(assert) { -// assert.expect(1); -// assert.ok(find(".ace_editor").length, "it renders the ace editor"); -// } -// }); -// -// componentTest("html editor", { -// template: '{{ace-editor mode="html" content="wat"}}', -// test(assert) { -// assert.expect(1); -// assert.ok(find(".ace_editor").length, "it renders the ace editor"); -// } -// }); -// -// componentTest("sql editor", { -// template: '{{ace-editor mode="sql" content="SELECT * FROM users"}}', -// test(assert) { -// assert.expect(1); -// assert.ok(find(".ace_editor").length, "it renders the ace editor"); -// } -// }); -// -// componentTest("disabled editor", { -// template: -// '{{ace-editor mode="sql" content="SELECT * FROM users" disabled=true}}', -// test(assert) { -// const $ace = find(".ace_editor"); -// assert.expect(3); -// assert.ok($ace.length, "it renders the ace editor"); -// assert.equal( -// $ace -// .parent() -// .data() -// .editor.getReadOnly(), -// true, -// "it sets ACE to read-only mode" -// ); -// assert.equal( -// $ace.parent().attr("data-disabled"), -// "true", -// "ACE wrapper has `data-disabled` attribute set to true" -// ); -// } -// }); +import componentTest from "helpers/component-test"; + +moduleForComponent("ace-editor", { integration: true }); + +componentTest("css editor", { + skip: true, + template: '{{ace-editor mode="css"}}', + test(assert) { + assert.expect(1); + assert.ok(find(".ace_editor").length, "it renders the ace editor"); + } +}); + +componentTest("html editor", { + skip: true, + template: '{{ace-editor mode="html" content="wat"}}', + test(assert) { + assert.expect(1); + assert.ok(find(".ace_editor").length, "it renders the ace editor"); + } +}); + +componentTest("sql editor", { + skip: true, + template: '{{ace-editor mode="sql" content="SELECT * FROM users"}}', + test(assert) { + assert.expect(1); + assert.ok(find(".ace_editor").length, "it renders the ace editor"); + } +}); + +componentTest("disabled editor", { + skip: true, + template: + '{{ace-editor mode="sql" content="SELECT * FROM users" disabled=true}}', + test(assert) { + const $ace = find(".ace_editor"); + assert.expect(3); + assert.ok($ace.length, "it renders the ace editor"); + assert.equal( + $ace + .parent() + .data() + .editor.getReadOnly(), + true, + "it sets ACE to read-only mode" + ); + assert.equal( + $ace.parent().attr("data-disabled"), + "true", + "ACE wrapper has `data-disabled` attribute set to true" + ); + } +}); diff --git a/test/javascripts/components/d-editor-test.js.es6 b/test/javascripts/components/d-editor-test.js.es6 index dd40e4657cd..6419c6be41f 100644 --- a/test/javascripts/components/d-editor-test.js.es6 +++ b/test/javascripts/components/d-editor-test.js.es6 @@ -1,5 +1,5 @@ import componentTest from "helpers/component-test"; -// import { withPluginApi } from "discourse/lib/plugin-api"; +import { withPluginApi } from "discourse/lib/plugin-api"; import formatTextWithSelection from "helpers/d-editor-helper"; import { setTextareaSelection, @@ -672,32 +672,33 @@ testCase(`doesn't jump to bottom with long text`, async function( assert.equal($(textarea).scrollTop(), 0, "it stays scrolled up"); }); -// componentTest("emoji", { -// template: "{{d-editor value=value}}", -// beforeEach() { -// // Test adding a custom button -// withPluginApi("0.1", api => { -// api.onToolbarCreate(toolbar => { -// toolbar.addButton({ -// id: "emoji", -// group: "extras", -// icon: "far-smile", -// action: () => toolbar.context.send("emoji") -// }); -// }); -// }); -// this.set("value", "hello world."); -// }, -// async test(assert) { -// jumpEnd(find("textarea.d-editor-input")[0]); -// await click("button.emoji"); -// -// await click( -// '.emoji-picker .section[data-section="smileys_&_emotion"] button.emoji[title="grinning"]' -// ); -// assert.equal(this.value, "hello world.:grinning:"); -// } -// }); +componentTest("emoji", { + skip: true, + template: "{{d-editor value=value}}", + beforeEach() { + // Test adding a custom button + withPluginApi("0.1", api => { + api.onToolbarCreate(toolbar => { + toolbar.addButton({ + id: "emoji", + group: "extras", + icon: "far-smile", + action: () => toolbar.context.send("emoji") + }); + }); + }); + this.set("value", "hello world."); + }, + async test(assert) { + jumpEnd(find("textarea.d-editor-input")[0]); + await click("button.emoji"); + + await click( + '.emoji-picker .section[data-section="smileys_&_emotion"] button.emoji[title="grinning"]' + ); + assert.equal(this.value, "hello world.:grinning:"); + } +}); testCase("replace-text event by default", async function(assert) { this.set("value", "red green blue");