Use govuk_summary_list helper for personal details summary

app/views/users/account/index.html.erb

@@ -6,68 +6,36 @@
     <h2 class="govuk-heading-m">
       Personal details
     </h2>
-    <dl class="govuk-summary-list">
-      <div class="govuk-summary-list__row">
-        <dt class="govuk-summary-list__key">
-          Name
-        </dt>
-        <dd class="govuk-summary-list__value">
-          <%= current_user.name %>
-        </dd>
-        <dd class="govuk-summary-list__actions">
-          <a class="govuk-link" href="/users/account/personal_details" id="change-name">
-            Change<span class="govuk-visually-hidden">
-              name</span>
-          </a>
-        </dd>
-      </div>
-      <div class="govuk-summary-list__row">
-        <dt class="govuk-summary-list__key">
-          Email address
-        </dt>
-        <dd class="govuk-summary-list__value">
-          <%= current_user.email %>
-        </dd>
-        <dd class="govuk-summary-list__actions">
-          <a class="govuk-link" href="/users/account/personal_details" id="change-email">
-            Change<span class="govuk-visually-hidden">
-              email address</span>
-          </a>
-        </dd>
-      </div>
-      <div class="govuk-summary-list__row">
-        <dt class="govuk-summary-list__key">
-          Password
-        </dt>
-        <dd class="govuk-summary-list__value">
-          ••••••••
-        </dd>
-        <dd class="govuk-summary-list__actions">
-          <%= govuk_link_to "Change", edit_user_registration_path, id: "change-password" %>
-        </dd>
-      </div>
-      <div class="govuk-summary-list__row">
-        <dt class="govuk-summary-list__key">
-          Organisation
-        </dt>
-        <dd class="govuk-summary-list__value">
-          <%= current_user.organisation %>
-        </dd>
-        <dd class="govuk-summary-list__actions">
-          <a class="govuk-link" href=""></a>
-        </dd>
-      </div>
-      <div class="govuk-summary-list__row">
-        <dt class="govuk-summary-list__key">
-          Role
-        </dt>
-        <dd class="govuk-summary-list__value">
-          <%= current_user.role %>
-        </dd>
-        <dd class="govuk-summary-list__actions">
-          <a class="govuk-link" href=""></a>
-        </dd>
-      </div>
-    </dl>
+    <%= govuk_summary_list do |summary_list| %>
+      <%= summary_list.row do |row|
+        row.key { 'Name' }
+        row.value { current_user.name }
+        row.action(visually_hidden_text: 'name', href: '/users/account/personal_details', html_attributes: { 'data-qa': 'change-name' })
+      end %>
+
+      <%= summary_list.row() do |row|
+        row.key { 'Email address' }
+        row.value { current_user.email }
+        row.action(visually_hidden_text: 'email address', href: '/users/account/personal_details', html_attributes: { 'data-qa': 'change-email' })
+      end %>
+
+      <%= summary_list.row do |row|
+        row.key { 'Password' }
+        row.value { '••••••••' }
+        row.action(visually_hidden_text: 'password', href: edit_user_registration_path, html_attributes: { 'data-qa': 'change-password' })
+      end %>
+
+      <%= summary_list.row do |row|
+        row.key { 'Organisation' }
+        row.value { current_user.organisation }
+        row.action()
+      end %>
+
+      <%= summary_list.row do |row|
+        row.key { 'Role' }
+        row.value { current_user.role }
+        row.action()
+      end %>
+    <% end %>
   </div>
 </div>

spec/features/user_spec.rb

@@ -112,7 +112,7 @@ RSpec.describe "User Features" do
 
     it "can navigate to change your password page from main account page" do
       visit("/users/account")
-      click_link("change-password")
+      find('[data-qa="change-password"]').click
       expect(page).to have_content("Change your password")
       fill_in("user[current_password]", with: "pAssword1")
       fill_in("user[password]", with: "Password123!")
@@ -122,7 +122,7 @@ RSpec.describe "User Features" do
 
     it "allow user to change name" do
       visit("/users/account")
-      click_link("change-name")
+      find('[data-qa="change-name"]').click
       expect(page).to have_content("Change your personal details")
       fill_in("user[name]", with: "Test New")
       click_button("Save changes")