discourse/plugins/chat/spec/system/navigation_spec.rb
Joffrey JAFFEUX d2e24f9569
DEV: start glimmer-ification and optimisations of chat plugin (#19531)
Note this is a very large PR, and some of it could have been splited, but keeping it one chunk made it to merge conflicts and to revert if necessary. Actual new code logic is also not that much, as most of the changes are removing js tests, adding system specs or moving things around.

To make it possible this commit is doing the following changes:

- converting (and adding new) existing js acceptances tests into system tests. This change was necessary to ensure as little regressions as possible while changing paradigm
- moving away from store. Using glimmer and tracked properties requires to have class objects everywhere and as a result works well with models. However store/adapters are suffering from many bugs and limitations. As a workaround the `chat-api` and `chat-channels-manager` are an answer to this problem by encapsulating backend calls and frontend storage logic; while still using js models.
- dropping `appEvents` as much as possible. Using tracked properties and a better local storage of channel models, allows to be much more reactive and doesn’t require arbitrary manual updates everywhere in the app.
- while working on replacing store, the existing work of a chat api (backend) has been continued to support more cases.
- removing code from the `chat` service to separate concerns, `chat-subscriptions-manager` and `chat-channels-manager`, being the largest examples of where the code has been rewritten/moved.

Future wok:
- improve behavior when closing/deleting a channel, it's already slightly buggy on live, it's rare enough that it's not a big issue, but should be improved
- improve page objects used in chat
- move more endpoints to the API
- finish temporarily skipped tests
- extract more code from the `chat` service
- use glimmer for `chat-messages`
- separate concerns in `chat-live-pane`
- eventually add js tests for `chat-api`, `chat-channels-manager` and `chat-subscriptions-manager`, they are indirectly heavy tested through system tests but it would be nice to at least test the public API

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2022-12-21 13:21:02 +01:00

323 lines
10 KiB
Ruby

# frozen_string_literal: true
RSpec.describe "Navigation", type: :system, js: true do
fab!(:category) { Fabricate(:category) }
fab!(:topic) { Fabricate(:topic) }
fab!(:post) { Fabricate(:post, topic: topic) }
fab!(:user) { Fabricate(:admin) }
fab!(:category_channel) { Fabricate(:category_channel) }
fab!(:category_channel_2) { Fabricate(:category_channel) }
fab!(:message) { Fabricate(:chat_message, chat_channel: category_channel) }
let(:chat_page) { PageObjects::Pages::Chat.new }
let(:sidebar_page) { PageObjects::Pages::Sidebar.new }
let(:chat_drawer_page) { PageObjects::Pages::ChatDrawer.new }
before do
chat_system_bootstrap(user, [category_channel, category_channel_2])
sign_in(user)
end
context "when clicking chat icon and drawer is viewing channel" do
it "navigates to index" do
chat_page.open_from_header
chat_drawer_page.open_channel(category_channel_2)
chat_page.open_from_header
expect(page).to have_content(I18n.t("js.chat.direct_messages.title"))
end
end
context "when clicking chat icon on mobile and is viewing channel" do
it "navigates to index", mobile: true do
visit("/chat")
chat_page.visit_channel(category_channel_2)
chat_page.open_from_header
expect(page).to have_current_path(chat_path)
end
end
context "when clicking chat icon on desktop and is viewing channel" do
it "stays on channel page" do
visit("/chat")
chat_page.visit_channel(category_channel_2)
chat_page.open_from_header
expect(page).to have_current_path(
chat.channel_path(category_channel_2.id, category_channel_2.slug),
)
end
end
context "when visiting /chat" do
it "opens full page" do
chat_page.open
expect(page).to have_current_path(
chat.channel_path(category_channel.id, category_channel.slug),
)
expect(page).to have_css("html.has-full-page-chat")
expect(page).to have_css(".chat-message-container[data-id='#{message.id}']")
end
end
context "when opening chat" do
it "opens the drawer by default" do
visit("/")
chat_page.open_from_header
expect(page).to have_css(".chat-drawer.is-expanded")
end
end
context "when opening chat with full page as preferred mode" do
it "opens the full page" do
visit("/")
chat_page.open_from_header
chat_drawer_page.maximize
expect(page).to have_current_path(
chat.channel_path(category_channel.id, category_channel.slug),
)
visit("/")
chat_page.open_from_header
expect(page).to have_current_path(
chat.channel_path(category_channel.id, category_channel.slug),
)
end
end
context "when opening chat with drawer as preferred mode" do
it "opens the full page" do
chat_page.open
chat_page.minimize_full_page
expect(page).to have_css(".chat-drawer.is-expanded")
visit("/")
chat_page.open_from_header
expect(page).to have_css(".chat-drawer.is-expanded")
end
end
context "when collapsing full page with no previous state" do
it "redirects to home page" do
chat_page.open
chat_page.minimize_full_page
expect(page).to have_current_path(latest_path)
end
end
context "when collapsing full page with previous state" do
it "redirects to previous state" do
visit("/t/-/#{topic.id}")
chat_page.open_from_header
chat_drawer_page.maximize
chat_page.minimize_full_page
expect(page).to have_current_path("/t/#{topic.slug}/#{topic.id}")
expect(page).to have_css(".chat-message-container[data-id='#{message.id}']")
end
end
context "when opening full page with a link containing a message id" do
it "highlights correct message" do
visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}?messageId=#{message.id}")
expect(page).to have_css(
".full-page-chat .chat-message-container.highlighted[data-id='#{message.id}']",
)
end
end
context "when opening drawer with a link containing a message id" do
it "highlights correct message" do
Fabricate(
:post,
topic: topic,
raw:
"<a href=\"/chat/channel/#{category_channel.id}/#{category_channel.slug}?messageId=#{message.id}\">foo</a>",
)
visit("/t/-/#{topic.id}")
find("a", text: "foo").click
expect(page).to have_css(
".chat-drawer.is-expanded .chat-message-container.highlighted[data-id='#{message.id}']",
)
end
end
context "when sidebar is configured as the navigation menu" do
before { SiteSetting.navigation_menu = "sidebar" }
context "when opening channel from sidebar with drawer preferred" do
it "opens channel in drawer" do
visit("/t/-/#{topic.id}")
chat_page.open_from_header
chat_drawer_page.close
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
expect(page).to have_css(".chat-message-container[data-id='#{message.id}']")
end
end
context "when opening channel from sidebar with full page preferred" do
it "opens channel in full page" do
visit("/")
chat_page.open_from_header
chat_drawer_page.maximize
visit("/")
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
expect(page).to have_current_path(
chat.channel_path(category_channel.id, category_channel.slug),
)
end
end
context "when starting draft from sidebar with drawer preferred" do
it "opens draft in drawer" do
visit("/")
sidebar_page.open_draft_channel
expect(page).to have_current_path("/")
expect(page).to have_css(".chat-drawer.is-expanded .direct-message-creator")
end
end
context "when starting draft from drawer with drawer preferred" do
it "opens draft in drawer" do
visit("/")
chat_page.open_from_header
chat_drawer_page.open_draft_channel
expect(page).to have_current_path("/")
expect(page).to have_css(".chat-drawer.is-expanded .direct-message-creator")
end
end
context "when starting draft from sidebar with full page preferred" do
it "opens draft in full page" do
visit("/")
chat_page.open_from_header
chat_drawer_page.maximize
visit("/")
sidebar_page.open_draft_channel
expect(page).to have_current_path("/chat/draft-channel")
expect(page).not_to have_css(".chat-drawer.is-expanded")
end
end
context "when opening browse page from drawer in drawer mode" do
it "opens browser page in full page" do
visit("/")
chat_page.open_from_header
chat_drawer_page.open_browse
expect(page).to have_current_path("/chat/browse/open")
expect(page).not_to have_css(".chat-drawer.is-expanded")
end
end
context "when opening browse page from sidebar in drawer mode" do
it "opens browser page in full page" do
visit("/")
chat_page.open_from_header
sidebar_page.open_browse
expect(page).to have_current_path("/chat/browse/open")
expect(page).not_to have_css(".chat-drawer.is-expanded")
end
end
context "when re-opening drawer after navigating to a channel" do
it "opens drawer on correct channel" do
visit("/")
chat_page.open_from_header
chat_drawer_page.open_channel(category_channel_2)
chat_drawer_page.open_index
chat_drawer_page.close
chat_page.open_from_header
expect(page).to have_current_path("/")
expect(page).to have_css(".chat-drawer.is-expanded")
expect(page).to have_content(category_channel_2.title)
end
end
context "when re-opening full page chat after navigating to a channel" do
it "opens full page chat on correct channel" do
visit("/")
chat_page.open_from_header
chat_drawer_page.maximize
sidebar_page.open_channel(category_channel_2)
find("#site-logo").click
chat_page.open_from_header
expect(page).to have_current_path(
chat.channel_path(category_channel_2.id, category_channel_2.slug),
)
expect(page).to have_content(category_channel_2.title)
end
end
context "when opening a channel in full page" do
it "activates the channel in the sidebar" do
visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}")
expect(page).to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
end
end
context "when going back to channel from channel settings in full page" do
it "activates the channel in the sidebar" do
visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}/info/settings")
find(".chat-full-page-header__back-btn").click
expect(page).to have_content(message.message)
end
end
context "when clicking logo from a channel in full page" do
it "deactivates the channel in the sidebar" do
visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}")
find("#site-logo").click
expect(page).not_to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
end
end
context "when opening a channel in drawer" do
it "activates the channel in the sidebar" do
visit("/")
chat_page.open_from_header
find("a[class*='#{category_channel.slug}']").click
expect(page).to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
end
end
context "when closing drawer in a channel" do
it "deactivates the channel in the sidebar" do
visit("/")
chat_page.open_from_header
find("a[class*='sidebar-section-link-#{category_channel.slug}']").click
chat_drawer_page.close
expect(page).not_to have_css(
".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
)
end
end
end
end