REFACTOR: naming and state refactor (#19187)

- better handling of drawer state using chat state manager
- removes various float and topic occurrences to use drawer
- ensures user can chat before doing a lot of chat setup
- fixes a bug which was creating presence errors in tests
- removes dead code
This commit is contained in:
Joffrey JAFFEUX
2022-11-25 14:15:38 +01:00
committed by GitHub
parent cad2fe6089
commit 84c1cc70d6
43 changed files with 401 additions and 391 deletions

View File

@ -15,6 +15,8 @@ acceptance(
needs.settings({
chat_enabled: true,
enable_sidebar: false,
enable_experimental_sidebar_hamburger: false,
});
needs.pretender((server, helper) => {

View File

@ -18,7 +18,7 @@ import {
} from "../helpers/chat-pretenders";
acceptance("Discourse Chat - Composer", function (needs) {
needs.user({ id: 1, has_chat_enabled: true });
needs.user({ has_chat_enabled: true });
needs.settings({ chat_enabled: true, enable_rich_text_paste: true });
needs.pretender((server, helper) => {
baseChatPretenders(server, helper);

View File

@ -5,7 +5,6 @@ import {
loggedInUser,
query,
queryAll,
visible,
} from "discourse/tests/helpers/qunit-helpers";
import {
click,
@ -84,9 +83,9 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
test("channel selector opens channel in float", async function (assert) {
await visit("/latest");
await showModal("chat-channel-selector-modal");
await settled();
assert.ok(exists("#chat-channel-selector-modal-inner"));
// All channels should show because the input is blank
@ -110,7 +109,8 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
);
await triggerKeyEvent(document.body, "keyup", "Enter");
assert.ok(exists(".topic-chat-container.visible"));
assert.ok(exists(".chat-drawer.is-expanded"));
assert.notOk(exists("#chat-channel-selector-modal-inner"));
assert.equal(currentURL(), "/latest");
});
@ -164,28 +164,24 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
test("switching channel with alt+arrow keys in float", async function (assert) {
await visit("/latest");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click("#chat-channel-row-4");
assert.ok(visible(".topic-chat-float-container"), "chat float is open");
assert.ok(query(".topic-chat-container").classList.contains("channel-4"));
assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="4"]`));
await triggerKeyEvent(document.body, "keydown", "ArrowDown", {
altKey: true,
});
assert.ok(query(".topic-chat-container").classList.contains("channel-10"));
assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="10`));
await triggerKeyEvent(document.body, "keydown", "ArrowUp", {
altKey: true,
});
assert.ok(query(".topic-chat-container").classList.contains("channel-4"));
assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="4"]`));
});
test("simple composer formatting shortcuts", async function (assert) {
this.chatService.set("sidebarActive", false);
await visit("/latest");
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
@ -230,7 +226,6 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
const stagedMessageText = "This is a test";
await visit("/latest");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
await fillIn(".chat-composer-input", stagedMessageText);
@ -246,7 +241,6 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
test("insert link shortcut", async function (assert) {
await visit("/latest");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
@ -276,32 +270,7 @@ acceptance("Discourse Chat - Keyboard shortcuts", function (needs) {
);
});
test("Dash key (-) opens chat float", async function (assert) {
await visit("/latest");
this.chatService.set("sidebarActive", false);
await triggerKeyEvent(document.body, "keydown", "-");
assert.ok(exists(".topic-chat-drawer-content"), "chat float is open");
});
test("Pressing Escape when drawer is opened", async function (assert) {
this.chatService.set("sidebarActive", false);
await visit("/latest");
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
const composerInput = query(".chat-composer-input");
await focus(composerInput);
await triggerKeyEvent(composerInput, "keydown", "Escape");
assert.ok(
exists(".topic-chat-float-container.hidden"),
"it closes the drawer"
);
});
test("Pressing Escape when full page is opened", async function (assert) {
this.chatService.set("sidebarActive", false);
await visit("/chat/channel/75/@hawk");
const composerInput = query(".chat-composer-input");
await focus(composerInput);

View File

@ -110,7 +110,7 @@ acceptance("Discourse Chat | Quoting in composer", async function (needs) {
await visit("/t/internationalization-localization/280");
await click(".header-dropdown-toggle.open-chat");
assert.ok(visible(".topic-chat-float-container"), "chat float is open");
assert.ok(visible(".chat-drawer-container"), "chat drawer is open");
assert.ok(exists(".chat-message-container"));
const firstMessage = query(".chat-message-container");

View File

@ -61,6 +61,7 @@ acceptance(
needs.settings({
chat_enabled: true,
chat_allow_archiving_channels: true,
enable_sidebar: false,
});
needs.pretender((server, helper) => {

View File

@ -65,6 +65,7 @@ acceptance("Discourse Chat - without unread", function (needs) {
has_chat_enabled: true,
});
needs.settings({
enable_sidebar: false,
chat_enabled: true,
});
needs.pretender((server, helper) => {
@ -144,8 +145,8 @@ acceptance("Discourse Chat - without unread", function (needs) {
await visit("/t/internationalization-localization/280");
await click(".header-dropdown-toggle.current-user");
await click("#quick-access-notifications .chat-mention");
assert.ok(visible(".topic-chat-float-container"), "chat float is open");
assert.ok(query(".topic-chat-container").classList.contains("channel-9"));
assert.ok(visible(".chat-drawer-container"), "drawer is open");
assert.ok(query(".chat-drawer-container").classList.contains("channel-9"));
});
test("notifications for current user and here/all are highlighted", async function (assert) {
@ -366,20 +367,18 @@ acceptance("Discourse Chat - without unread", function (needs) {
});
test("Reply-to is stored in draft", async function (assert) {
this.chatService.set("sidebarActive", false);
await visit("/latest");
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
await settled();
await click(".topic-chat-drawer-header__return-to-channels-btn");
await click(".chat-drawer-header__return-to-channels-btn");
await click(".chat-channel-row.chat-channel-9");
await triggerEvent(".chat-message-container[data-id='174']", "mouseenter");
await click(".chat-message-actions-container[data-id='174'] .reply-btn");
// Reply-to line is present
assert.ok(exists(".chat-composer-message-details .chat-reply"));
await click(".topic-chat-drawer-header__return-to-channels-btn");
await click(".chat-drawer-header__return-to-channels-btn");
await click(".chat-channel-row.chat-channel-11");
// Reply-to line is gone since switching channels
assert.notOk(exists(".chat-composer-message-details .chat-reply"));
@ -390,13 +389,13 @@ acceptance("Discourse Chat - without unread", function (needs) {
await click(".cancel-message-action");
// Go back to channel 9 and check that reply-to is present
await click(".topic-chat-drawer-header__return-to-channels-btn");
await click(".chat-drawer-header__return-to-channels-btn");
await click(".chat-channel-row.chat-channel-9");
// Now reply-to should be back and loaded from draft
assert.ok(exists(".chat-composer-message-details .chat-reply"));
// Go back one for time to channel 7 and make sure reply-to is gone
await click(".topic-chat-drawer-header__return-to-channels-btn");
await click(".chat-drawer-header__return-to-channels-btn");
await click(".chat-channel-row.chat-channel-11");
assert.notOk(exists(".chat-composer-message-details .chat-reply"));
});
@ -725,7 +724,7 @@ Widget.triangulate(arg: "test")
});
test("creating a new direct message channel from popup chat works", async function (assert) {
await visit("/t/internationalization-localization/280");
await visit("/chat");
await click(".open-draft-channel-page-btn");
await fillIn(".filter-usernames", "hawk");
await click('.chat-user-avatar-container[data-user-card="hawk"]');
@ -978,9 +977,8 @@ acceptance(
test("Expand button takes you to full page chat on the correct channel", async function (assert) {
await visit("/t/internationalization-localization/280");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click(".topic-chat-drawer-header__full-screen-btn");
await click(".chat-drawer-header__full-screen-btn");
assert.equal(currentURL(), `/chat/channel/11/another-category`);
});
@ -1032,7 +1030,7 @@ acceptance(
);
acceptance(
"Discourse Chat - Expand and collapse chat drawer (topic-chat-float)",
"Discourse Chat - Expand and collapse drawer (chat-drawer)",
function (needs) {
needs.user({
admin: false,
@ -1061,62 +1059,59 @@ acceptance(
});
});
test("chat drawer can be collapsed and expanded", async function (assert) {
test("drawer can be collapsed and expanded", async function (assert) {
await visit("/t/internationalization-localization/280");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
assert.ok(
visible(".topic-chat-drawer-header__top-line--expanded"),
"chat float is expanded"
visible(".chat-drawer-header__top-line--expanded"),
"drawer is expanded"
);
await click(".topic-chat-drawer-header__expand-btn");
await click(".chat-drawer-header__expand-btn");
assert.ok(
visible(".topic-chat-drawer-header__top-line--collapsed"),
"chat float is collapsed"
visible(".chat-drawer-header__top-line--collapsed"),
"drawer is collapsed"
);
await click(".topic-chat-drawer-header__expand-btn");
await click(".chat-drawer-header__expand-btn");
assert.ok(
visible(".topic-chat-drawer-header__top-line--expanded"),
"chat float is expanded"
visible(".chat-drawer-header__top-line--expanded"),
"drawer is expanded"
);
});
test("chat drawer title links to channel info when expanded", async function (assert) {
test("drawer title links to channel info when expanded", async function (assert) {
await visit("/t/internationalization-localization/280");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
assert.ok(
visible(".topic-chat-drawer-header__top-line--expanded"),
"chat float is expanded"
visible(".chat-drawer-header__top-line--expanded"),
"drawer is expanded"
);
await click("#chat-channel-row-9");
await click(".topic-chat-drawer-header__title");
await click(".chat-drawer-header__title");
assert.equal(currentURL(), `/chat/channel/9/site/info/members`);
});
test("chat drawer title expands the chat drawer when collapsed", async function (assert) {
test("drawer title expands the drawer when collapsed", async function (assert) {
await visit("/t/internationalization-localization/280");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
assert.ok(
visible(".topic-chat-drawer-header__top-line--expanded"),
"chat float is expanded"
visible(".chat-drawer-header__top-line--expanded"),
"drawer is expanded"
);
await click(".topic-chat-drawer-header__expand-btn");
await click(".chat-drawer-header__expand-btn");
assert.ok(
visible(".topic-chat-drawer-header__top-line--collapsed"),
"chat float is collapsed"
visible(".chat-drawer-header__top-line--collapsed"),
"drawer is collapsed"
);
await click(".topic-chat-drawer-header__title");
await click(".chat-drawer-header__title");
assert.ok(
visible(".topic-chat-drawer-header__top-line--expanded"),
"chat float is expanded"
visible(".chat-drawer-header__top-line--expanded"),
"drawer is expanded"
);
});
}
@ -1164,14 +1159,12 @@ acceptance(
);
});
test("Chat float open to DM channel with unread messages with sidebar off", async function (assert) {
test("drawer open to DM channel with unread messages with sidebar off", async function (assert) {
await visit("/t/internationalization-localization/280");
this.chatService.set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click("#chat-channel-row-75");
const chatContainer = query(".topic-chat-container");
assert.ok(chatContainer.classList.contains("channel-75"));
const chatContainer = query(".chat-drawer");
assert.strictEqual(chatContainer.dataset.chatChannelId, "75");
});
test("Chat full page open to DM channel with unread messages with sidebar on", async function (assert) {
@ -1400,10 +1393,10 @@ acceptance("Discourse Chat - image uploads", function (needs) {
test("uploading files in chat works", async function (assert) {
await visit("/t/internationalization-localization/280");
this.container.lookup("service:chat").set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
assert.ok(visible(".topic-chat-float-container"), "chat float is open");
assert.ok(exists(".chat-drawer.is-expanded"), "drawer is open");
const appEvents = loggedInUser().appEvents;
const done = assert.async();
@ -1462,7 +1455,7 @@ acceptance("Discourse Chat - image uploads", function (needs) {
this.container.lookup("service:chat").set("sidebarActive", false);
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row");
assert.ok(visible(".topic-chat-float-container"), "chat float is open");
assert.ok(visible(".chat-drawer-container"), "drawer is open");
const appEvents = loggedInUser().appEvents;
const done = assert.async();
@ -1811,34 +1804,6 @@ acceptance("Discourse Chat - Direct Message Creator", function (needs) {
});
});
acceptance("Discourse Chat - Drawer", function (needs) {
needs.user({ has_chat_enabled: true });
needs.settings({ chat_enabled: true });
needs.pretender((server, helper) => {
baseChatPretenders(server, helper);
chatChannelPretender(server, helper);
});
needs.hooks.beforeEach(function () {
Object.defineProperty(this, "chatService", {
get: () => this.container.lookup("service:chat"),
});
});
test("Position after closing reduced composer", async function (assert) {
await visit("/t/internationalization-localization/280");
await click(".btn.create");
await click(".toggle-preview");
await click(".header-dropdown-toggle.open-chat");
await click(".save-or-cancel .cancel");
const float = document.querySelector(".topic-chat-float-container");
const key = "--composer-right";
const value = getComputedStyle(float).getPropertyValue(key);
assert.strictEqual(value, "15px");
});
});
function createFile(name, type = "image/png") {
// the blob content doesn't matter at all, just want it to be random-ish
const file = new Blob([(Math.random() + 1).toString(36).substring(2)], {

View File

@ -418,7 +418,7 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
await click(".sidebar-section-chat-dms .sidebar-section-header-button");
assert.ok(exists(".direct-message-creator"));
assert.ok(exists(".topic-chat-container.expanded.visible"));
assert.ok(exists(".chat-drawer.is-expanded"));
assert.strictEqual(currentURL(), "/");
});

View File

@ -4,8 +4,6 @@ import {
acceptance,
exists,
loggedInUser,
query,
visible,
} from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import {
@ -82,7 +80,6 @@ acceptance("Discourse Chat - User card test", function (needs) {
});
test("user card has chat button that opens the correct channel", async function (assert) {
this.chatService.set("sidebarActive", false);
await visit("/");
await click(".header-dropdown-toggle.open-chat");
await click(".chat-channel-row.chat-channel-9");
@ -92,8 +89,7 @@ acceptance("Discourse Chat - User card test", function (needs) {
await click(".user-card-chat-btn");
assert.ok(visible(".topic-chat-float-container"), "chat float is open");
assert.ok(query(".topic-chat-container").classList.contains("channel-75"));
assert.ok(exists(`.chat-drawer.is-expanded[data-chat-channel-id="75"]`));
});
});

View File

@ -32,7 +32,7 @@ module("Discourse Chat | Component | sidebar-channels", function (hooks) {
template: hbs`{{sidebar-channels}}`,
beforeEach() {
setupChatStub(this, { fullScreenChatOpen: true });
setupChatStub(this, {});
},
afterEach() {
@ -48,7 +48,7 @@ module("Discourse Chat | Component | sidebar-channels", function (hooks) {
template: hbs`{{sidebar-channels}}`,
beforeEach() {
setupChatStub(this, { userCanChat: false, fullScreenChatOpen: false });
setupChatStub(this, { userCanChat: false });
},
afterEach() {

View File

@ -4,12 +4,10 @@ import Service from "@ember/service";
let publicChannels;
let userCanChat;
let fullScreenChatOpen;
class ChatStub extends Service {
userCanChat = userCanChat;
publicChannels = publicChannels;
fullScreenChatOpen = fullScreenChatOpen;
}
export function setup(context, options = {}) {
@ -20,13 +18,9 @@ export function setup(context, options = {}) {
? options.publicChannels
: [fabricators.chatChannel()];
userCanChat = isPresent(options.userCanChat) ? options.userCanChat : true;
fullScreenChatOpen = isPresent(options.fullScreenChatOpen)
? options.fullScreenChatOpen
: false;
}
export function teardown() {
publicChannels = [];
userCanChat = true;
fullScreenChatOpen = false;
}

View File

@ -71,12 +71,63 @@ module(
assert.strictEqual(this.subject.lastKnownAppURL, "/bar");
});
test("isFullPage", function (assert) {
test("isFullPageActive", function (assert) {
sinon.stub(this.subject.router, "currentRouteName").value("foo");
assert.notOk(this.subject.isFullPage);
assert.notOk(this.subject.isFullPageActive);
sinon.stub(this.subject.router, "currentRouteName").value("chat");
assert.ok(this.subject.isFullPage);
assert.ok(this.subject.isFullPageActive);
});
test("didCollapseDrawer", function (assert) {
this.subject.didCollapseDrawer();
assert.strictEqual(this.subject.isDrawerExpanded, false);
assert.strictEqual(this.subject.isDrawerActive, true);
});
test("didExpandDrawer", function (assert) {
const stub = sinon.stub(
this.owner.lookup("service:chat"),
"updatePresence"
);
this.subject.didExpandDrawer();
assert.strictEqual(this.subject.isDrawerExpanded, true);
assert.strictEqual(this.subject.isDrawerActive, true);
sinon.assert.calledOnce(stub);
});
test("didCloseDrawer", function (assert) {
const stub = sinon.stub(
this.owner.lookup("service:chat"),
"updatePresence"
);
this.subject.didCloseDrawer();
assert.strictEqual(this.subject.isDrawerExpanded, false);
assert.strictEqual(this.subject.isDrawerActive, false);
sinon.assert.calledOnce(stub);
});
test("didOpenDrawer", function (assert) {
const stub = sinon.stub(
this.owner.lookup("service:chat"),
"updatePresence"
);
this.subject.didOpenDrawer();
assert.strictEqual(this.subject.isDrawerExpanded, true);
assert.strictEqual(this.subject.isDrawerActive, true);
assert.strictEqual(this.subject.lastKnownChatURL, "/chat");
this.subject.didOpenDrawer("/foo");
assert.strictEqual(this.subject.lastKnownChatURL, "/foo");
sinon.assert.calledTwice(stub);
});
}
);