DEV: Fix and improve chat system test for editing name and slug (#21810)

This commit introduces a couple of changes:

1. When editing a chat channel's slug, we were using `this.model.set("title", title)` when the `set`
   function does not exist. This was actually throwing the error in the
   "can edit slug" system test where the modal was not closed after
   saving and was flashing an error.

2. Introduce `PageObjects::Pages::ChatChannelAbout` and
   `PageObjects::Modals::ChatChannelEdit` page object to encapsulate
   logic better.

plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js

@@ -46,7 +46,7 @@ export default class ChatChannelEditTitleController extends Controller.extend(
         slug: this.editedSlug || this.autoGeneratedSlug || this.model.slug,
       })
       .then((result) => {
-        this.model.set("title", result.channel.title);
+        this.model.title = result.channel.title;
         this.send("closeModal");
       })
       .catch(flashAjaxError(this));

plugins/chat/spec/system/channel_about_page_spec.rb

@@ -4,6 +4,7 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
   fab!(:channel_1) { Fabricate(:category_channel) }
 
   let(:chat_page) { PageObjects::Pages::Chat.new }
+  let(:chat_channel_about_page) { PageObjects::Pages::ChatChannelAbout.new }
 
   before { chat_system_bootstrap }
 
@@ -79,15 +80,16 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
 
     it "can edit name" do
       chat_page.visit_channel_about(channel_1)
-      find(".edit-name-slug-btn").click
 
-      expect(find(".chat-channel-edit-name-slug-modal__name-input").value).to eq(channel_1.title)
+      edit_modal = chat_channel_about_page.open_edit_modal
+
+      expect(edit_modal).to have_name_input(channel_1.title)
 
       name = "A new name"
-      find(".chat-channel-edit-name-slug-modal__name-input").fill_in(with: name)
-      find(".create").click
 
-      expect(page).to have_content(name)
+      edit_modal.fill_and_save_name(name)
+
+      expect(chat_channel_about_page).to have_name(name)
     end
 
     it "can edit description" do
@@ -108,30 +110,29 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
 
     it "can edit slug" do
       chat_page.visit_channel_about(channel_1)
-      find(".edit-name-slug-btn").click
-
-      expect(find(".chat-channel-edit-name-slug-modal__slug-input").value).to eq(channel_1.slug)
+      edit_modal = chat_channel_about_page.open_edit_modal
 
       slug = "gonzo-slug"
-      find(".chat-channel-edit-name-slug-modal__slug-input").fill_in(with: slug)
-      find(".create").click
 
-      expect(page).to have_content(slug)
+      expect(edit_modal).to have_slug_input(channel_1.slug)
+
+      edit_modal.fill_and_save_slug(slug)
+
+      expect(chat_channel_about_page).to have_slug(slug)
     end
 
     it "can clear the slug to use the autogenerated version based on the name" do
       channel_1.update!(name: "test channel")
       chat_page.visit_channel_about(channel_1)
-      find(".edit-name-slug-btn").click
+      edit_modal = chat_channel_about_page.open_edit_modal
 
-      slug_input = find(".chat-channel-edit-name-slug-modal__slug-input")
-      expect(slug_input.value).to eq(channel_1.slug)
+      expect(edit_modal).to have_slug_input(channel_1.slug)
 
-      slug_input.fill_in(with: "")
-      wait_for_attribute(slug_input, :placeholder, "test-channel")
-      find(".create").click
+      edit_modal.fill_in_slug_input("")
+      edit_modal.wait_for_auto_generated_slug
+      edit_modal.save_changes
 
-      expect(page).to have_content("test-channel")
+      expect(chat_channel_about_page).to have_slug("test-channel")
     end
   end
 end

plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class ChatChannelAbout < PageObjects::Pages::Base
+      EDIT_MODAL_SELECTOR = ".chat-channel-edit-name-slug-modal"
+
+      def open_edit_modal
+        click_button(class: "edit-name-slug-btn")
+        find(EDIT_MODAL_SELECTOR) # wait for modal to appear
+        PageObjects::Modals::ChatChannelEdit.new
+      end
+
+      def has_slug?(slug)
+        page.has_css?(".channel-info-about-view__slug", text: slug)
+      end
+
+      def has_name?(name)
+        page.has_css?(".channel-info-about-view__name", text: name)
+      end
+    end
+  end
+end

plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Modals
+    class ChatChannelEdit < PageObjects::Modals::Base
+      include SystemHelpers
+
+      EDIT_MODAL_SELECTOR = PageObjects::Pages::ChatChannelAbout::EDIT_MODAL_SELECTOR
+      SLUG_INPUT_SELECTOR = ".chat-channel-edit-name-slug-modal__slug-input"
+      NAME_INPUT_SELECTOR = ".chat-channel-edit-name-slug-modal__name-input"
+
+      def fill_in_slug(slug)
+        within(EDIT_MODAL_SELECTOR) { find(SLUG_INPUT_SELECTOR).fill_in(with: slug) }
+
+        self
+      end
+
+      def wait_for_auto_generated_slug
+        wait_for_attribute(page.find(SLUG_INPUT_SELECTOR), :placeholder, "test-channel")
+      end
+
+      def fill_in_slug_input(slug)
+        within(EDIT_MODAL_SELECTOR) { find(SLUG_INPUT_SELECTOR).fill_in(with: slug) }
+      end
+
+      def save_changes(successful: true)
+        within(EDIT_MODAL_SELECTOR) { click_button(I18n.t("js.save")) }
+
+        # ensures modal is closed after successfully saving
+        page.has_no_css?(EDIT_MODAL_SELECTOR) if successful
+      end
+
+      def fill_and_save_slug(slug)
+        fill_in_slug_input(slug)
+        save_changes
+        self
+      end
+
+      def fill_in_name_input(name)
+        within(EDIT_MODAL_SELECTOR) { find(NAME_INPUT_SELECTOR).fill_in(with: name) }
+      end
+
+      def fill_and_save_name(name)
+        fill_in_name_input(name)
+        save_changes
+        self
+      end
+
+      def has_slug_input?(value)
+        within(EDIT_MODAL_SELECTOR) { find(SLUG_INPUT_SELECTOR).value == value }
+      end
+
+      def has_name_input?(value)
+        within(EDIT_MODAL_SELECTOR) { find(NAME_INPUT_SELECTOR).value == value }
+      end
+    end
+  end
+end