Add test selector, fix name label association

app/forms/settings/form_decorator.rb

@@ -113,7 +113,7 @@ module Settings
     # @param button_options [Hash] Options for individual radio buttons
     # @param options [Hash] Additional options for the radio button group
     # @return [Object] The radio button group
-    def radio_button_group(name:, values: [], disabled: false, button_options: {}, **options)
+    def radio_button_group(name:, values: [], disabled: false, button_options: {}, **options) # rubocop:disable Metrics/AbcSize
       values = values.presence || setting_allowed_values(name)
       radio_group_options = options.reverse_merge(
         label: setting_label(name),

frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts

@@ -66,7 +66,7 @@ import { uniqueId } from 'lodash';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin implements OnInit {
-  @Input() public textareaSelector:string;
+  @Input() public textAreaId:string;
 
   @Input() public previewContext:string;
 
@@ -144,7 +144,9 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
     this.halResource = this.resource ? this.halResourceService.createHalResource(this.resource, true) : undefined;
 
     this.formElement = this.element.closest<HTMLFormElement>('form') as HTMLFormElement;
-    this.wrappedTextArea = this.formElement.querySelector(this.textareaSelector) as HTMLTextAreaElement;
+
+    this.wrappedTextArea = document.getElementById(this.textAreaId) as HTMLTextAreaElement;
+
     this.wrappedTextArea.style.display = 'none';
     this.wrappedTextArea.required = false;
     this.initialContent = this.wrappedTextArea.value;
@@ -286,8 +288,7 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl
   }
 
   private setLabel() {
-    const textareaId = this.textareaSelector.substring(1);
-    const label = document.querySelector<HTMLLabelElement>(`label[for=${textareaId}]`)!;
+    const label = document.querySelector<HTMLLabelElement>(`label[for=${this.textAreaId}]`)!;
 
     const ckContent = this.element.querySelector<HTMLElement>('.ck-content')!;
 

lib/open_project/text_formatting/formats/markdown/helper.rb

@@ -51,7 +51,7 @@ module OpenProject::TextFormatting::Formats
         resource = context.fetch(:resource, {})
         helpers.angular_component_tag "opce-ckeditor-augmented-textarea",
                                       inputs: {
-                                        textareaSelector: "##{field_id}",
+                                        textAreaId: field_id,
                                         editorType: context[:editor_type] || "full",
                                         previewContext: context[:preview_context],
                                         resource:,

lib/primer/open_project/forms/rich_text_area.html.erb

@@ -1,11 +1,13 @@
 <%= render(FormControl.new(input: @input)) do %>
   <%= content_tag(:div, hidden: true) do %>
-    <%= builder.text_area(@input.name, **@input.input_arguments, id: @text_area_id) %>
+    <%= builder.text_area(@input.name,
+                          id: @text_area_id,
+                          **@input.input_arguments) %>
   <% end %>
   <%= angular_component_tag "opce-ckeditor-augmented-textarea",
                             inputs: @rich_text_options.reverse_merge(
                               {
-                                textareaSelector: "##{@text_area_id}",
+                                textAreaId: @text_area_id,
                                 macros: false,
                                 turboMode: true
                               }

lib/primer/open_project/forms/rich_text_area.rb

@@ -13,8 +13,9 @@ module Primer
           super()
           @input = input
           @rich_text_data = rich_text_options.delete(:data) { {} }
+          @rich_text_data[:"test-selector"] ||= "augmented-text-area-#{@input.name}"
           @rich_text_options = rich_text_options
-          @text_area_id = rich_text_options[:text_area_id] || SecureRandom.alphanumeric(16)
+          @text_area_id = rich_text_options.delete(:text_area_id) || builder.field_id(@input.name)
         end
       end
     end

spec/components/projects/settings/general/show_component_spec.rb

@@ -60,7 +60,7 @@ RSpec.describe Projects::Settings::General::ShowComponent, type: :component do
     it "renders fields" do
       expect(render_component).to have_field "Name", required: true
       expect(render_component).to have_element "opce-ckeditor-augmented-textarea",
-                                               "data-textarea-selector": "\"#project_description\""
+                                               "data-test-selector": "augmented-text-area-description"
     end
   end
 
@@ -70,8 +70,9 @@ RSpec.describe Projects::Settings::General::ShowComponent, type: :component do
     it "renders fields" do
       expect(render_component).to have_element "opce-autocompleter",
                                                "data-input-name": "\"project[status_code]\""
+
       expect(render_component).to have_element "opce-ckeditor-augmented-textarea",
-                                               "data-textarea-selector": "\"#project_status_explanation\""
+                                               "data-test-selector": "augmented-text-area-description"
     end
   end
 

spec/forms/projects/settings/description_form_spec.rb

@@ -38,7 +38,6 @@ RSpec.describe Projects::Settings::DescriptionForm, type: :forms do
   it "renders field" do
     expect(page).to have_field "Description", with: "example description", visible: :hidden
     expect(page).to have_element "opce-ckeditor-augmented-textarea",
-                                 "data-textarea-selector": "\"#project_description\""
-    expect(page).to have_element "opce-ckeditor-augmented-textarea", "data-qa-field-name": "description"
+                                 "data-test-selector": "augmented-text-area-description"
   end
 end

spec/forms/projects/settings/status_form_spec.rb

@@ -51,7 +51,7 @@ RSpec.describe Projects::Settings::StatusForm, type: :forms do
   it "renders status description field" do
     expect(page).to have_field "Project status description", with: "example status info", visible: :hidden
     expect(page).to have_element "opce-ckeditor-augmented-textarea",
-                                 "data-textarea-selector": "\"#project_status_explanation\""
+                                 "data-test-selector": "augmented-text-area-status_explanation"
     expect(page).to have_element "opce-ckeditor-augmented-textarea", "data-qa-field-name": "statusExplanation"
   end
 end

spec/support/form_fields/primerized/editor_form_field.rb

@@ -14,7 +14,7 @@ module FormFields
       end
 
       def field_container
-        augmented_textarea = page.find("[data-textarea-selector='\"#project_custom_field_values_#{property.id}\"']")
+        augmented_textarea = page.find("[data-text-area-id='\"project_custom_field_values_#{property.id}\"']")
         augmented_textarea.first(:xpath, ".//..")
       end
 

spec/support/pages/admin/system_settings/general.rb

@@ -39,7 +39,7 @@ module Pages::Admin::SystemSettings
     end
 
     def welcome_text_selector
-      'opce-ckeditor-augmented-textarea[data-textarea-selector="\"#settings_welcome_text\""]'
+      'opce-ckeditor-augmented-textarea[data-text-area-id="\"settings_welcome_text\""]'
     end
   end
 end