Small formatting stuff

app/components/primer/alpha/stack.rb

@@ -30,11 +30,11 @@ def cache
           end
         end
 
-        def arg_name()
-          raise NotImplementedError, "Subclasses must implement #{__method__} method"
+        def arg_name
+          raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
         end
 
-        def to_data_attributes()
+        def to_data_attributes
           @data_attributes ||= data_attributes_for(self.class.arg_name, values)
         end
 
@@ -54,8 +54,8 @@ def fetch_or_fallback_all(allowed_values, given_values, default_value)
           end
         end
 
-        def values()
-          raise NotImplementedError, "Subclasses must implement #{__method__} method"
+        def values
+          raise NotImplementedError, "Subclasses must implement the `#{__method__}' method"
         end
       end
 
@@ -77,6 +77,7 @@ def initialize(values)
             MAPPING[value]
           end
         end
+
         def self.arg_name
           :justify
         end
@@ -94,6 +95,7 @@ class DirectionArg < ResponsiveArg
         def initialize(values)
           @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
         end
+
         def self.arg_name
           :direction
         end
@@ -114,6 +116,7 @@ class AlignArg < ResponsiveArg
         def initialize(values)
           @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
         end
+
         def self.arg_name
           :align
         end
@@ -131,6 +134,7 @@ class WrapArg < ResponsiveArg
         def initialize(values)
           @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
         end
+
         def self.arg_name
           :wrap
         end
@@ -150,6 +154,7 @@ class PaddingArg < ResponsiveArg
         def initialize(values)
           @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
         end
+
         def self.arg_name
           :padding
         end
@@ -169,6 +174,7 @@ class GapArg < ResponsiveArg
         def initialize(values)
           @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
         end
+
         def self.arg_name
           :gap
         end

test/components/alpha/stack_test.rb

@@ -13,45 +13,69 @@ def test_renders_content
     assert_text("content")
   end
 
-  # iterate over all responsive props and assert that they are rendered
-  def test_renders_responsive_props
-    render_inline(Primer::Box.new) do
+  def test_attaches_stack_class
+    render_inline(Primer::Alpha::Stack.new) do
       "content"
     end
 
-    assert_selector("div")
+    assert_selector(".Stack")
   end
 
+  def test_uses_div_as_default_tag
+    render_inline(Primer::Alpha::Stack.new) do
+      "content"
+    end
+
+    assert_selector("div.Stack")
+  end
+
+  def test_allows_customizing_tag
+    render_inline(Primer::Alpha::Stack.new(tag: :a)) do
+      "content"
+    end
+
+    assert_selector("a.Stack")
+  end
 
+  # Responsive arg tests, i.e. Stack.new(justify: [:center, :center, ...])
   Primer::Alpha::Stack::ResponsiveArg.descendants.each do |descendant|
     descendant::OPTIONS.each do |option|
       next unless option
-      define_method("test_renders_responsive_prop_#{descendant.arg_name}_with_#{option}_option") do
-        render_inline(Primer::Alpha::Stack.new(descendant.arg_name => [option]*(5))) do
-          "content"
-        end
 
-        assert_selector("div[data-#{descendant.arg_name.to_s.dasherize}=\"#{option.to_s.dasherize}\"]")
-        assert_selector("div[data-#{descendant.arg_name.to_s.dasherize}-narrow=\"#{option.to_s.dasherize}\"]")
-        assert_selector("div[data-#{descendant.arg_name.to_s.dasherize}-regular=\"#{option.to_s.dasherize}\"]")
-        assert_selector("div[data-#{descendant.arg_name.to_s.dasherize}-wide=\"#{option.to_s.dasherize}\"]")
+      define_method("test_renders_responsive_arg_#{descendant.arg_name}_with_#{option}_option") do
+        # create a Stack for rendering, eg. Stack.new(:justify, [five-element responsive values array])
+        stack = Primer::Alpha::Stack.new(
+          descendant.arg_name => [option] * Primer::Alpha::Stack::ResponsiveArg::BREAKPOINTS.size
+        )
+
+        render_inline(stack) { "content" }
+
+        dasherized_arg = descendant.arg_name.to_s.dasherize
+        dasherized_option = option.to_s.dasherize
+
+        assert_selector(".Stack[data-#{dasherized_arg}=\"#{dasherized_option}\"]")
+        assert_selector(".Stack[data-#{dasherized_arg}-narrow=\"#{dasherized_option}\"]")
+        assert_selector(".Stack[data-#{dasherized_arg}-regular=\"#{dasherized_option}\"]")
+        assert_selector(".Stack[data-#{dasherized_arg}-wide=\"#{dasherized_option}\"]")
       end
     end
   end
 
+  # Static arg tests, i.e. Stack.new(justify: :center)
   Primer::Alpha::Stack::ResponsiveArg.descendants.each do |descendant|
     descendant::OPTIONS.each do |option|
       next unless option
-      define_method("test_renders_static_prop_#{descendant.arg_name}_with_#{option}_option") do
+
+      define_method("test_renders_static_arg_#{descendant.arg_name}_with_#{option}_option") do
         render_inline(Primer::Alpha::Stack.new(descendant.arg_name => option)) do
           "content"
         end
 
-        assert_selector("div[data-#{descendant.arg_name.to_s.dasherize}=\"#{option.to_s.dasherize}\"]")
+        assert_selector(".Stack[data-#{descendant.arg_name.to_s.dasherize}=\"#{option.to_s.dasherize}\"]")
       end
     end
   end
-  
+
   def test_status
     assert_component_state(Primer::Alpha::Stack, :alpha)
   end