Files
discourse/plugins/chat/test/javascripts/components/chat-header-icon-test.gjs
David Taylor b15c1d28c9 DEV: Introduce experimental viewport-based mobile mode (#32859)
Introduces the viewport_based_mobile_mode experimental site setting.
When enabled, user-agent-based mobile/desktop detection will be replaced
with viewport-width logic. 'mobile mode' is enabled for any viewport
less than our 'sm' breakpoint (40rem, or 640px at default font size).

When this mode is enabled, mobile/desktop toggle buttons are hidden,
since they are non-functional.

Tests are also updated to use a consistent method for force-enabling the
legacy mobile mode. All state is now stored in `lib/mobile`, and the
`Site` model references that via a getter.
2025-05-23 13:01:04 +01:00

95 lines
3.1 KiB
Plaintext

import { render } from "@ember/test-helpers";
import { module, test } from "qunit";
import sinon from "sinon";
import { forceMobile } from "discourse/lib/mobile";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { i18n } from "discourse-i18n";
import Icon from "discourse/plugins/chat/discourse/components/chat/header/icon";
import { HEADER_INDICATOR_PREFERENCE_ALL_NEW } from "discourse/plugins/chat/discourse/controllers/preferences-chat";
module("Discourse Chat | Component | chat-header-icon", function (hooks) {
setupRenderingTest(hooks);
test("full page - never separated sidebar mode", async function (assert) {
this.currentUser.user_option.chat_separate_sidebar_mode = "never";
sinon
.stub(this.owner.lookup("service:chat-state-manager"), "isFullPageActive")
.value(true);
await render(<template><Icon /></template>);
assert
.dom(".icon.btn-flat")
.hasAttribute("title", i18n("chat.title_capitalized"))
.hasAttribute("href", "/chat");
assert.dom(".d-icon-d-chat").exists();
});
test("full page - always separated mode", async function (assert) {
this.currentUser.user_option.chat_separate_sidebar_mode = "always";
sinon
.stub(this.owner.lookup("service:chat-state-manager"), "isFullPageActive")
.value(true);
await render(<template><Icon /></template>);
assert
.dom(".icon.btn-flat")
.hasAttribute("title", i18n("sidebar.panels.forum.label"))
.hasAttribute("href", "/latest");
assert.dom(".d-icon-shuffle").exists();
});
test("mobile", async function (assert) {
forceMobile();
await render(<template><Icon /></template>);
assert
.dom(".icon.btn-flat")
.hasAttribute("title", i18n("chat.title_capitalized"))
.hasAttribute("href", "/chat");
assert.dom(".d-icon-d-chat").exists();
});
test("full page - with unread", async function (assert) {
this.currentUser.user_option.chat_separate_sidebar_mode = "always";
this.currentUser.user_option.chat_header_indicator_preference =
HEADER_INDICATOR_PREFERENCE_ALL_NEW;
sinon
.stub(this.owner.lookup("service:chat-state-manager"), "isFullPageActive")
.value(true);
await render(<template><Icon @urgentCount={{1}} /></template>);
assert
.dom(".icon.btn-flat")
.hasAttribute("title", i18n("sidebar.panels.forum.label"))
.hasAttribute("href", "/latest");
assert.dom(".d-icon-shuffle").exists();
assert.dom(".chat-channel-unread-indicator__number").doesNotExist();
});
test("drawer - with unread", async function (assert) {
this.currentUser.user_option.chat_separate_sidebar_mode = "always";
this.currentUser.user_option.chat_header_indicator_preference =
HEADER_INDICATOR_PREFERENCE_ALL_NEW;
await render(<template><Icon @urgentCount={{1}} /></template>);
assert
.dom(".icon.btn-flat")
.hasAttribute("title", i18n("sidebar.panels.chat.label"))
.hasAttribute("href", "/chat");
assert.dom(".d-icon-d-chat").exists();
assert
.dom(".chat-channel-unread-indicator__number")
.exists()
.containsText("1");
});
});