Action list description test selector (#2984)

Co-authored-by: Sam Partington <[email protected]>

Author: camertron

.changeset/loud-shoes-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Add ability to attach a test selector to ActionList items

app/components/primer/alpha/action_list/item.html.erb

@@ -28,11 +28,7 @@
         <%= render(Primer::BaseComponent.new(tag: :span, **@label_arguments)) do %>
           <%= @label || content %>
         <% end %>
-        <% if description? %>
-          <span class="ActionListItem-description">
-            <%= description %>
-          </span>
-        <% end %>
+      <%= description if description? %>
       <% end %>
       <% if trailing_visual %>
         <span class="ActionListItem-visual ActionListItem-visual--trailing">

app/components/primer/alpha/action_list/item.rb

@@ -38,9 +38,13 @@ class Item < Primer::Component
         }
         TRUNCATION_BEHAVIOR_OPTIONS = TRUNCATION_BEHAVIOR_MAPPINGS.keys.freeze
 
-        # Description content that complements the item's label. See `ActionList`'s `description_scheme` argument
-        # for layout options.
-        renders_one :description
+        # Description content that complements the item's label, with optional test_selector.
+        # See `ActionList`'s `description_scheme` argument for layout options.
+        #
+        # @param test_selector [String] The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element.
+        renders_one :description, -> (test_selector: nil) do
+          Primer::BaseComponent.new(tag: "span", classes: "ActionListItem-description", test_selector: test_selector) { content }
+        end
 
         # An icon, avatar, SVG, or custom content that will render to the left of the label.
         #

previews/primer/alpha/action_list_preview.rb

@@ -380,7 +380,7 @@ def item_with_description
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_description.with_content("This is a description")
+            item.with_description(test_selector: "some-selector").with_content("This is a description")
           end
         end
       end

test/components/alpha/action_list_test.rb

@@ -29,6 +29,16 @@ def test_avatar_item
         assert_selector(".ActionListItem-description", text: "Bruce Banner")
       end
 
+      def test_item_description_test_selector
+        render_inline(Primer::Alpha::ActionList.new(aria: { label: "List" })) do |component|
+          component.with_item(label: "Item 1", href: "/item1") do |item|
+            item.with_description(test_selector: "foo") { "My description" }
+          end
+        end
+
+        assert_selector(".ActionListItem-description[data-test-selector='foo']", text: "My description")
+      end
+
       def test_item_trailing_visual_text
         render_preview(:item, params: { trailing_visual_text: "trailing visual text" })