Use updated "Add another" component in app

- Update `Gemfile.lock` for v.51.0.0 of govuk_publishing_components gem
- Update partial to use updated component
- Update button text
- Update tests for updated UI

Gemfile.lock

@@ -256,7 +256,7 @@ GEM
     govuk_personalisation (1.1.0)
       plek (>= 1.9.0)
       rails (>= 6, < 9)
-    govuk_publishing_components (50.0.1)
+    govuk_publishing_components (51.0.0)
       govuk_app_config
       govuk_personalisation (>= 0.7.0)
       kramdown

app/views/editions/secondary_nav_tabs/_related_external_links.html.erb

@@ -5,11 +5,8 @@
     <%= form_for @edition.artefact, url: update_related_external_links_edition_path(@resource) do %>
       <%
         if @edition.artefact.external_links.count == 0
-          items = [{
-            fields: render(partial: "secondary_nav_tabs/related_external_links/add-another_fieldset", locals: { index: 0, id: nil }),
-            destroy_checkbox: render(partial: "secondary_nav_tabs/related_external_links/add-another_checkbox", locals: {index: 0}),
-          }]
-          empty = render(partial: "secondary_nav_tabs/related_external_links/add-another_fieldset", locals: { index: 1, id: nil })
+          items = []
+          empty = render(partial: "secondary_nav_tabs/related_external_links/add-another_fieldset", locals: { index: 0, id: nil })
         else
           items = @edition.artefact.external_links.each_with_index.map do | external_link, index |
             {
@@ -23,7 +20,8 @@
 
       <%= render "govuk_publishing_components/components/add_another", {
         fieldset_legend: "Link",
-        add_button_text: "Add another link",
+        add_button_text: "Add related external link",
+        empty_fields: true,
         items: items,
         empty: empty,
       } %>

test/integration/edition_edit_test.rb

@@ -604,20 +604,11 @@ class EditionEditTest < IntegrationTest
       end
 
       should "render an empty 'Add another' form" do
-        # Link 1
         assert page.has_css?("legend", text: "Link 1")
-        assert page.has_css?("input[name='artefact[external_links_attributes][0][_destroy]']")
         assert_equal "Title", page.find("label[for='artefact_external_links_attributes_0_title']").text
         assert_equal "URL", page.find("label[for='artefact_external_links_attributes_0_url']").text
         assert_equal "", page.find("input[name='artefact[external_links_attributes][0][title]']").value
         assert_equal "", page.find("input[name='artefact[external_links_attributes][0][url]']").value
-
-        # Link 2 (empty fields)
-        assert page.has_css?("legend", text: "Link 2")
-        assert_equal "Title", page.find("label[for='artefact_external_links_attributes_1_title']").text
-        assert_equal "URL", page.find("label[for='artefact_external_links_attributes_1_url']").text
-        assert_equal "", page.find("input[name='artefact[external_links_attributes][1][title]']").value
-        assert_equal "", page.find("input[name='artefact[external_links_attributes][1][url]']").value
       end
     end
 
@@ -653,7 +644,7 @@ class EditionEditTest < IntegrationTest
       end
 
       should "render a pre-populated 'Add another' form" do
-        within :css, ".gem-c-add-another .js-add-another__fieldset:first-of-type" do
+        within :css, ".gem-c-add-another .js-add-another__empty" do
           fill_in "Title", with: "A new external link"
           fill_in "URL", with: "https://foo.com"
         end
@@ -691,20 +682,11 @@ class EditionEditTest < IntegrationTest
 
         click_button("Save")
 
-        # Link 1
         assert page.has_css?("legend", text: "Link 1")
-        assert page.has_css?("input[name='artefact[external_links_attributes][0][_destroy]']")
         assert_equal "Title", page.find("label[for='artefact_external_links_attributes_0_title']").text
         assert_equal "URL", page.find("label[for='artefact_external_links_attributes_0_url']").text
         assert_equal "", page.find("input[name='artefact[external_links_attributes][0][title]']").value
         assert_equal "", page.find("input[name='artefact[external_links_attributes][0][url]']").value
-
-        # Link 2
-        assert page.has_css?("legend", text: "Link 2")
-        assert_equal "Title", page.find("label[for='artefact_external_links_attributes_1_title']").text
-        assert_equal "URL", page.find("label[for='artefact_external_links_attributes_1_url']").text
-        assert_equal "", page.find("input[name='artefact[external_links_attributes][1][title]']").value
-        assert_equal "", page.find("input[name='artefact[external_links_attributes][1][url]']").value
       end
     end
   end

test/integration/edition_external_links_test.rb

@@ -21,14 +21,14 @@ class EditionExternalLinksTest < JavascriptIntegrationTest
     end
 
     context "Edition does not already have related external links" do
-      should "render an empty 'Add another' form when the page loads" do
-        assert page.has_css?("legend", text: "Link 1")
+      should "render the form containing just the 'Add related external link' button when the page loads" do
+        assert page.has_no_css?("legend", text: "Link 1")
         assert page.has_no_css?("input[name='artefact[external_links_attributes][0][_destroy]']")
-        assert_equal "Title", page.find("label[for='artefact_external_links_attributes_0_title']").text
-        assert_equal "URL", page.find("label[for='artefact_external_links_attributes_0_url']").text
-        assert_equal "", page.find("input[name='artefact[external_links_attributes][0][title]']").value
-        assert_equal "", page.find("input[name='artefact[external_links_attributes][0][url]']").value
-        assert page.has_css?("button", text: "Add another link")
+        assert page.has_no_css?("label[for='artefact_external_links_attributes_0_title']")
+        assert page.has_no_css?("label[for='artefact_external_links_attributes_0_url']")
+        assert page.has_no_css?("input[name='artefact[external_links_attributes][0][title]']")
+        assert page.has_no_css?("input[name='artefact[external_links_attributes][0][url]']")
+        assert page.has_css?("button", text: "Add related external link")
       end
     end
 
@@ -46,50 +46,38 @@ class EditionExternalLinksTest < JavascriptIntegrationTest
         assert_equal "URL", page.find("label[for='artefact_external_links_attributes_0_url']").text
         assert_equal "Link one", page.find("input[name='artefact[external_links_attributes][0][title]']").value
         assert_equal "https://one.com", page.find("input[name='artefact[external_links_attributes][0][url]']").value
-        assert page.has_css?("button", text: "Add another link")
+        assert page.has_css?("button", text: "Add related external link")
       end
     end
 
-    should "display 'Delete' buttons and a second set of inputs when 'Add another link' is clicked" do
-      click_button("Add another link")
+    should "display a 'Delete' button and a set of inputs when the Add button is clicked" do
+      click_button("Add related external link")
 
       assert page.has_css?("legend", text: "Link 1")
       assert page.has_no_css?("input[name='artefact[external_links_attributes][0][_destroy]']")
       assert_equal "Title", page.find("label[for='artefact_external_links_attributes_0_title']").text
       assert_equal "URL", page.find("label[for='artefact_external_links_attributes_0_url']").text
       assert_equal "", page.find("input[name='artefact[external_links_attributes][0][title]']").value
       assert_equal "", page.find("input[name='artefact[external_links_attributes][0][url]']").value
-      assert page.has_css?("legend", text: "Link 2")
-      assert page.has_no_css?("input[name='artefact[external_links_attributes][1][_destroy]']")
-      assert_equal "Title", page.find("label[for='artefact_external_links_attributes_1_title']").text
-      assert_equal "URL", page.find("label[for='artefact_external_links_attributes_1_url']").text
-      assert_equal "", page.find("input[name='artefact[external_links_attributes][1][title]']").value
-      assert_equal "", page.find("input[name='artefact[external_links_attributes][1][url]']").value
-      assert page.has_css?("button", text: "Add another link")
-      within :css, ".gem-c-add-another .js-add-another__fieldset:nth-of-type(1)" do
-        assert page.has_css?("button", text: "Delete")
-      end
-      within :css, ".gem-c-add-another .js-add-another__fieldset:nth-of-type(2)" do
+      assert page.has_css?("button", text: "Add related external link")
+      within :css, ".gem-c-add-another .js-add-another__fieldset" do
         assert page.has_css?("button", text: "Delete")
       end
     end
 
-    should "delete the first set of fields when the user clicks the first “Delete” button" do
-      click_button("Add another link")
+    should "delete the set of fields when the user clicks the 'Delete' button" do
+      click_button("Add related external link")
 
-      within :css, ".gem-c-add-another .js-add-another__fieldset:nth-of-type(1)" do
+      within :css, ".gem-c-add-another .js-add-another__fieldset" do
         click_button("Delete")
       end
 
-      assert page.has_css?("legend", text: "Link 1")
+      assert page.has_no_css?("legend", text: "Link 1")
       assert page.has_no_css?("label[for='artefact_external_links_attributes_0_title']")
       assert page.has_no_css?("label[for='artefact_external_links_attributes_0_url']")
-      assert_equal "Title", page.find("label[for='artefact_external_links_attributes_1_title']").text
-      assert_equal "URL", page.find("label[for='artefact_external_links_attributes_1_url']").text
-      assert page.has_css?("button", text: "Add another link")
-      within :css, ".gem-c-add-another .js-add-another__fieldset:nth-of-type(2)" do
-        assert page.has_css?("button", text: "Delete")
-      end
+      assert page.has_no_css?("label[for='artefact_external_links_attributes_1_title']")
+      assert page.has_no_css?("label[for='artefact_external_links_attributes_1_url']")
+      assert page.has_css?("button", text: "Add related external link")
     end
   end