DEV: upgrade avatar-selector modal to glimmer component (#24192)

* DEV: upgrade avatar-selector modal

* DEV: add system test for avatar selection in account preferences

spec/system/page_objects/modals/avatar_selector.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+module PageObjects
+  module Modals
+    class AvatarSelector < PageObjects::Modals::Base
+      BODY_SELECTOR = ".avatar-selector"
+      MODAL_SELECTOR = ".avatar-selector-modal"
+
+      def select_avatar_upload_option
+        body.choose("avatar", option: "custom")
+      end
+
+      def select_system_assigned_option
+        body.choose("avatar", option: "system")
+      end
+
+      def click_avatar_upload_button
+        body.find_button(I18n.t("js.user.change_avatar.upload_title")).click
+      end
+
+      def has_user_avatar_image_uploaded?
+        body.has_css?(".avatar[src*='uploads/default']")
+      end
+    end
+  end
+end

spec/system/page_objects/pages/user_preferences_account.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class UserPreferencesAccount < PageObjects::Pages::Base
+      def visit(user)
+        page.visit("/u/#{user.username}/preferences/account")
+        self
+      end
+
+      def click_edit_avatar_button
+        page.find_button("edit-avatar").click
+      end
+
+      def open_avatar_selector_modal(user)
+        visit(user).click_edit_avatar_button
+      end
+
+      def has_custom_uploaded_avatar_image?
+        has_css?(".pref-avatar img.avatar[src*='user_avatar']")
+      end
+
+      def has_system_avatar_image?
+        has_css?(".pref-avatar img.avatar[src*='letter_avatar']")
+      end
+    end
+  end
+end

spec/system/user_page/user_preferences_account_spec.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+describe "User preferences for Account", type: :system do
+  fab!(:user) { Fabricate(:user) }
+  let(:user_account_preferences_page) { PageObjects::Pages::UserPreferencesAccount.new }
+  let(:avatar_selector_modal) { PageObjects::Modals::AvatarSelector.new }
+  before { sign_in(user) }
+
+  describe "avatar-selector modal" do
+    it "saves custom picture and system assigned pictures" do
+      user_account_preferences_page.open_avatar_selector_modal(user)
+      expect(avatar_selector_modal).to be_open
+
+      avatar_selector_modal.select_avatar_upload_option
+      file_path = File.absolute_path(file_from_fixtures("logo.jpg"))
+      attach_file(file_path) { avatar_selector_modal.click_avatar_upload_button }
+      expect(avatar_selector_modal).to have_user_avatar_image_uploaded
+      avatar_selector_modal.click_primary_button
+      expect(avatar_selector_modal).to be_closed
+      expect(user_account_preferences_page).to have_custom_uploaded_avatar_image
+
+      user_account_preferences_page.open_avatar_selector_modal(user)
+      avatar_selector_modal.select_system_assigned_option
+      avatar_selector_modal.click_primary_button
+      expect(avatar_selector_modal).to be_closed
+      expect(user_account_preferences_page).to have_system_avatar_image
+    end
+  end
+end