mirror of
https://github.com/discourse/discourse.git
synced 2026-08-09 21:45:25 +08:00
a7bbcfe485This simplifies the appearance of the drawer by hiding the header buttons when collapsed, some of them didn't even work in this state before <img width="400" alt="image" src="https://github.com/user-attachments/assets/ec542d3c-8a9b-47e3-9a83-1ed86826de5c" /> after <img width="400" alt="image" src="https://github.com/user-attachments/assets/5dd2ebe8-0ea7-4987-b37d-42d4280afa6c" /> clicking anywhere other than the x will expand the chat again, and when using keyboard nav we still show the expand button as an accessibility affordance: <img width="400" alt="image" src="https://github.com/user-attachments/assets/9d40b834-c47b-48ec-b312-3d8241e39969" /> the minimize icon change is similar to what we did for the composer in https://github.com/discourse/discourse/issues/42017
62 lines
2.1 KiB
Text
Vendored
62 lines
2.1 KiB
Text
Vendored
import { getOwner } from "@ember/owner";
|
|
import { click, render } from "@ember/test-helpers";
|
|
import { module, test } from "qunit";
|
|
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
|
import { i18n } from "discourse-i18n";
|
|
import ChatNavbarToggleDrawerButton from "discourse/plugins/chat/discourse/components/chat/navbar/toggle-drawer-button";
|
|
|
|
module("Component | ChatNavbar | ToggleDrawerButton", function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
hooks.beforeEach(function () {
|
|
this.chatStateManager = getOwner(this).lookup("service:chat-state-manager");
|
|
});
|
|
|
|
test("shows a collapse button when the drawer is expanded", async function (assert) {
|
|
this.chatStateManager.didExpandDrawer();
|
|
|
|
await render(<template><ChatNavbarToggleDrawerButton /></template>);
|
|
|
|
assert
|
|
.dom(".c-navbar__toggle-drawer-button")
|
|
.exists("the collapse button is shown")
|
|
.hasAttribute("title", i18n("chat.collapse"));
|
|
assert.dom(".c-navbar__toggle-drawer-button .d-icon-minus").exists();
|
|
});
|
|
|
|
test("shows an expand button when the drawer is collapsed", async function (assert) {
|
|
this.chatStateManager.didCollapseDrawer();
|
|
|
|
await render(<template><ChatNavbarToggleDrawerButton /></template>);
|
|
|
|
assert
|
|
.dom(".c-navbar__toggle-drawer-button")
|
|
.exists("the expand button is shown")
|
|
.hasAttribute("title", i18n("chat.expand"));
|
|
assert.dom(".c-navbar__toggle-drawer-button .d-icon-angles-up").exists();
|
|
});
|
|
|
|
test("expands the drawer when clicked", async function (assert) {
|
|
this.chatStateManager.didCollapseDrawer();
|
|
|
|
await render(<template><ChatNavbarToggleDrawerButton /></template>);
|
|
await click(".c-navbar__toggle-drawer-button");
|
|
|
|
assert.true(
|
|
this.chatStateManager.isDrawerExpanded,
|
|
"the drawer is expanded"
|
|
);
|
|
});
|
|
|
|
test("collapses the drawer when clicked", async function (assert) {
|
|
this.chatStateManager.didExpandDrawer();
|
|
|
|
await render(<template><ChatNavbarToggleDrawerButton /></template>);
|
|
await click(".c-navbar__toggle-drawer-button");
|
|
|
|
assert.false(
|
|
this.chatStateManager.isDrawerExpanded,
|
|
"the drawer is collapsed"
|
|
);
|
|
});
|
|
});
|
