Update character count with textarea changes

- also improve tests, remove redundant data attributes test (component doesn't accept data attributes)
alphagov · Jan 21, 2025 · a96a8d0 · a96a8d0
1 parent 01dfe58
commit a96a8d0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/app/views/govuk_publishing_components/components/_character_count.html.erb b/app/views/govuk_publishing_components/components/_character_count.html.erb
@@ -1,9 +1,14 @@
 <%
+  add_gem_component_stylesheet("error-message")
+  add_gem_component_stylesheet("character-count")
+
   id ||= "character-count-#{SecureRandom.hex(4)}"
   maxlength ||= nil
   maxwords ||= nil
   threshold ||= nil
   textarea ||= {}
+
+  textarea[:textarea_id] = id
 %>
 <% if maxlength || maxwords %>
   <%= content_tag :div,
@@ -15,14 +20,10 @@
       threshold: threshold
     } do %>
 
-    <%= render "govuk_publishing_components/components/textarea", { id: id, character_count: true }.merge(textarea.symbolize_keys) %>
+    <%= render "govuk_publishing_components/components/textarea", { textarea_id: id, character_count: true, margin_bottom: 1 }.merge(textarea.symbolize_keys) %>
 
     <div id="<%= id %>-info" class="govuk-hint govuk-character-count__message">
       <%= t("components.character_count.body", number: maxlength || maxwords, type: maxwords ? t("components.character_count.type.words") : t("components.character_count.type.characters")) %>
     </div>
   <% end %>
 <% end %>
-<%
-  add_gem_component_stylesheet("error-message")
-  add_gem_component_stylesheet("character-count")
-%>
diff --git a/spec/components/character_count_spec.rb b/spec/components/character_count_spec.rb
@@ -9,38 +9,46 @@ def component_name
     assert_empty render_component({})
   end
 
-  it "renders character count with textarea" do
+  it "renders character count with minimal data passed" do
     render_component(
-      name: "character-count",
       textarea: {
-        label: { text: "Can you provide more detail?" },
         name: "more-details",
       },
-      data: {
-        module: "character-count",
-      },
       maxlength: "100",
     )
+    assert_select ".govuk-character-count .govuk-textarea[name='more-details']"
+  end
 
-    assert_select ".govuk-character-count .govuk-textarea"
-
+  it "renders character count with more options" do
+    render_component(
+      textarea: {
+        label: { text: "Can you provide more detail?" },
+        name: "more-details",
+      },
+      maxlength: "100",
+      maxwords: "3",
+      threshold: "11",
+    )
+    assert_select ".gem-c-character-count[data-maxlength='100']"
+    assert_select ".gem-c-character-count[data-maxwords='3']"
+    assert_select ".gem-c-character-count[data-threshold='11']"
+    assert_select ".govuk-character-count .govuk-textarea[name='more-details']"
     assert_select ".govuk-character-count .govuk-label", text: "Can you provide more detail?"
   end
 
-  it "renders character count with data attributes" do
+  it "renders character count with the correct id for the textarea" do
     render_component(
-      name: "character-count",
       textarea: {
         label: { text: "Can you provide more detail?" },
         name: "more-details",
-      },
-      data: {
-        module: "character-count",
+        textarea_id: "textarea-element-id",
+        id: "textarea-component-id",
       },
       maxlength: "100",
+      id: "character-count-id",
     )
-
-    assert_select ".govuk-character-count[data-module='govuk-character-count']"
-    assert_select ".govuk-character-count[data-maxlength='100']"
+    assert_select "#textarea-component-id.gem-c-textarea"
+    assert_select "textarea#character-count-id"
+    assert_select "#textarea-element-id", false
   end
 end