From 7218da7510db9e99982af4c2037fa6c32736c1ed Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Tue, 30 May 2023 01:00:59 +0900 Subject: [PATCH] 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. --- .../chat-channel-edit-name-slug.js | 2 +- .../spec/system/channel_about_page_spec.rb | 37 ++++++------ .../page_objects/chat/chat_channel_about.rb | 23 ++++++++ .../page_objects/modals/chat_edit_modal.rb | 58 +++++++++++++++++++ 4 files changed, 101 insertions(+), 19 deletions(-) create mode 100644 plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb create mode 100644 plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js index 35be0c97a41..82bc6c59b2e 100644 --- a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js +++ b/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)); diff --git a/plugins/chat/spec/system/channel_about_page_spec.rb b/plugins/chat/spec/system/channel_about_page_spec.rb index a52666c850d..4cb8d3e229b 100644 --- a/plugins/chat/spec/system/channel_about_page_spec.rb +++ b/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 diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb new file mode 100644 index 00000000000..795893346a7 --- /dev/null +++ b/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 diff --git a/plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb b/plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb new file mode 100644 index 00000000000..d678db64485 --- /dev/null +++ b/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