decidim-forms 0.27.7 → 0.28.0.rc4

data/lib/decidim/forms/test/shared_examples/has_questionnaire.rb

@@ -7,16 +7,14 @@ shared_examples_for "has questionnaire" do
     it "does not allow answering the questionnaire" do
       visit questionnaire_public_path
 
-      expect(page).to have_i18n_content(questionnaire.title, upcase: true)
-      expect(page).to have_i18n_content(questionnaire.description, strip_tags: true)
+      expect(page).to have_i18n_content(questionnaire.title)
+      expect(page).to have_i18n_content(questionnaire.description)
 
       expect(page).not_to have_css(".form.answer-questionnaire")
 
-      within ".questionnaire-question_readonly" do
+      within "[data-question-readonly]" do
         expect(page).to have_i18n_content(question.body)
       end
-
-      expect(page).to have_content("Sign in with your account or sign up to answer the form.")
     end
   end
 
@@ -28,8 +26,8 @@ shared_examples_for "has questionnaire" do
     it "allows answering the questionnaire" do
       visit questionnaire_public_path
 
-      expect(page).to have_i18n_content(questionnaire.title, upcase: true)
-      expect(page).to have_i18n_content(questionnaire.description, strip_tags: true)
+      expect(page).to have_i18n_content(questionnaire.title)
+      expect(page).to have_i18n_content(questionnaire.description)
 
       fill_in question.body["en"], with: "My first answer"
 
@@ -39,9 +37,7 @@ shared_examples_for "has questionnaire" do
         click_button "Submit"
       end
 
-      within ".success.flash" do
-        expect(page).to have_content("successfully")
-      end
+      expect(page).to have_admin_callout(callout_success)
 
       visit questionnaire_public_path
 
@@ -50,31 +46,31 @@ shared_examples_for "has questionnaire" do
     end
 
     context "with multiple steps" do
-      let!(:separator) { create(:questionnaire_question, questionnaire: questionnaire, position: 1, question_type: :separator) }
-      let!(:question2) { create(:questionnaire_question, questionnaire: questionnaire, position: 2) }
+      let!(:separator) { create(:questionnaire_question, questionnaire:, position: 1, question_type: :separator) }
+      let!(:question2) { create(:questionnaire_question, questionnaire:, position: 2) }
 
       before do
         visit questionnaire_public_path
       end
 
       it "allows answering the first questionnaire" do
-        expect(page).to have_content("STEP 1 OF 2")
+        expect(page).to have_content("Step 1 of 2")
 
-        within ".answer-questionnaire__submit" do
-          expect(page).to have_no_content("Back")
+        within ".answer-questionnaire__submit", match: :first do
+          expect(page).not_to have_content("Back")
         end
 
         answer_first_questionnaire
 
-        expect(page).to have_no_selector(".success.flash")
+        expect(page).not_to have_selector(".success.flash")
       end
 
       it "allows revisiting previously-answered questionnaires with my answers" do
         answer_first_questionnaire
 
-        click_link "Back"
+        click_button "Back"
 
-        expect(page).to have_content("STEP 1 OF 2")
+        expect(page).to have_content("Step 1 of 2")
         expect(page).to have_field("questionnaire_responses_0", with: "My first answer")
       end
 
@@ -84,9 +80,7 @@ shared_examples_for "has questionnaire" do
         check "questionnaire_tos_agreement"
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
+        expect(page).to have_admin_callout(callout_success)
 
         visit questionnaire_public_path
 
@@ -94,13 +88,13 @@ shared_examples_for "has questionnaire" do
       end
 
       def answer_first_questionnaire
-        expect(page).to have_no_selector("#questionnaire_tos_agreement")
+        within "#step-0" do
+          expect(page).not_to have_selector("#questionnaire_tos_agreement")
 
-        fill_in question.body["en"], with: "My first answer"
-        within ".answer-questionnaire__submit" do
-          click_link "Continue"
+          fill_in question.body["en"], with: "My first answer"
+          click_button "Continue"
         end
-        expect(page).to have_content("STEP 2 OF 2")
+        expect(page).to have_content("Step 2 of 2")
       end
     end
 
@@ -110,7 +104,7 @@ shared_examples_for "has questionnaire" do
       fill_in question.body["en"], with: "My first answer"
 
       dismiss_page_unload do
-        page.find(".logo-wrapper a").click
+        page.find(".main-bar__logo a").click
       end
 
       expect(page).to have_current_path questionnaire_public_path
@@ -120,7 +114,7 @@ shared_examples_for "has questionnaire" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "single_option",
           position: 0,
           options: [
@@ -131,7 +125,7 @@ shared_examples_for "has questionnaire" do
       end
 
       before do
-        answer = create(:answer, id: 1, questionnaire: questionnaire, question: question)
+        answer = create(:answer, id: 1, questionnaire:, question:)
 
         answer.choices.create!(
           answer_option: Decidim::Forms::AnswerOption.first,
@@ -142,21 +136,24 @@ shared_examples_for "has questionnaire" do
       it "does not leak defaults from other answers" do
         visit questionnaire_public_path
 
-        expect(page).to have_no_selector("input[type=radio]:checked")
+        expect(page).not_to have_field(type: "radio", checked: true)
       end
     end
 
     shared_examples_for "a correctly ordered questionnaire" do
       it "displays the questions ordered by position starting with one" do
-        form_fields = all(".answer-questionnaire .row")
+        form_fields = all(".answer-questionnaire__question")
 
-        expect(form_fields[0]).to have_i18n_content(question.body).and have_content("1. ")
-        expect(form_fields[1]).to have_i18n_content(other_question.body).and have_content("2. ")
+        expect(form_fields[0]).to have_i18n_content(question.body)
+        expect(form_fields[1]).to have_i18n_content(other_question.body)
+        2.times do |index|
+          expect(form_fields[index]).to have_css("[data-answer-idx='#{index + 1}']")
+        end
       end
     end
 
     context "and submitting a fresh form" do
-      let!(:other_question) { create(:questionnaire_question, questionnaire: questionnaire, position: 1) }
+      let!(:other_question) { create(:questionnaire_question, questionnaire:, position: 1) }
 
       before do
         visit questionnaire_public_path
@@ -166,7 +163,7 @@ shared_examples_for "has questionnaire" do
     end
 
     context "and rendering a form after errors" do
-      let!(:other_question) { create(:questionnaire_question, questionnaire: questionnaire, position: 1) }
+      let!(:other_question) { create(:questionnaire_question, questionnaire:, position: 1) }
 
       before do
         visit questionnaire_public_path
@@ -180,7 +177,7 @@ shared_examples_for "has questionnaire" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "short_answer",
           position: 0,
           mandatory: true
@@ -208,7 +205,7 @@ shared_examples_for "has questionnaire" do
       context "when max_characters value is 0" do
         let(:max_characters) { 0 }
 
-        it "doesn't show message indicating number of characters left" do
+        it "does not show message indicating number of characters left" do
           visit questionnaire_public_path
 
           expect(page).not_to have_content("characters left")
@@ -224,11 +221,8 @@ shared_examples_for "has questionnaire" do
       end
 
       it "submits the form and shows errors" do
-        within ".alert.flash" do
-          expect(page).to have_content("problem")
-        end
-
-        expect(page).to have_content("can't be blank")
+        expect(page).to have_admin_callout(callout_failure)
+        expect(page).to have_content("cannot be blank")
       end
     end
 
@@ -240,12 +234,12 @@ shared_examples_for "has questionnaire" do
       end
 
       it "shows errors without submitting the form" do
-        expect(page).to have_no_selector ".alert.flash"
+        expect(page).not_to have_selector ".alert.flash"
         different_error = I18n.t("decidim.forms.questionnaires.answer.max_choices_alert")
         expect(different_error).to eq("There are too many choices selected")
         expect(page).not_to have_content(different_error)
 
-        expect(page).to have_content("can't be blank")
+        expect(page).to have_content("cannot be blank")
       end
     end
 
@@ -253,7 +247,7 @@ shared_examples_for "has questionnaire" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "single_option",
           position: 0,
           mandatory: true,
@@ -273,16 +267,13 @@ shared_examples_for "has questionnaire" do
       end
 
       it "submits the form and shows errors" do
-        within ".alert.flash" do
-          expect(page).to have_content("problem")
-        end
-
-        expect(page).to have_content("can't be blank")
+        expect(page).to have_admin_callout(callout_failure)
+        expect(page).to have_content("cannot be blank")
       end
     end
 
     context "when a question has a rich text description" do
-      let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, position: 0, description: { en: "<b>This question is important</b>" }) }
+      let!(:question) { create(:questionnaire_question, questionnaire:, position: 0, description: { en: "<b>This question is important</b>" }) }
 
       it "properly interprets HTML descriptions" do
         visit questionnaire_public_path
@@ -297,9 +288,9 @@ shared_examples_for "has questionnaire" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
-          question_type: question_type,
-          max_characters: max_characters,
+          questionnaire:,
+          question_type:,
+          max_characters:,
           position: 1,
           options: [
             { "body" => answer_option_bodies[0] },
@@ -312,7 +303,7 @@ shared_examples_for "has questionnaire" do
       let!(:other_question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "multiple_option",
           max_choices: 2,
           position: 2,
@@ -332,7 +323,7 @@ shared_examples_for "has questionnaire" do
         let(:question_type) { "single_option" }
 
         it "renders them as radio buttons with attached text fields disabled by default" do
-          expect(page).to have_selector(".radio-button-collection input[type=radio]", count: 3)
+          expect(page).to have_selector(".js-radio-button-collection input[type=radio]", count: 3)
 
           expect(page).to have_field("questionnaire_responses_0_choices_2_custom_body", disabled: true, count: 1)
 
@@ -348,10 +339,7 @@ shared_examples_for "has questionnaire" do
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".success.flash" do
-            expect(page).to have_content("successfully")
-          end
-
+          expect(page).to have_admin_callout(callout_success)
           expect(Decidim::Forms::Answer.first.choices.first.custom_body).to eq("Cacatua")
         end
 
@@ -366,10 +354,7 @@ shared_examples_for "has questionnaire" do
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".alert.flash" do
-            expect(page).to have_content("There was a problem answering")
-          end
-
+          expect(page).to have_admin_callout("There was a problem answering")
           expect(page).to have_field("questionnaire_responses_0_choices_2_custom_body", with: "Cacatua")
         end
 
@@ -380,7 +365,7 @@ shared_examples_for "has questionnaire" do
         let(:question_type) { "multiple_option" }
 
         it "renders them as check boxes with attached text fields disabled by default" do
-          expect(page.first(".check-box-collection")).to have_selector("input[type=checkbox]", count: 3)
+          expect(page.first(".js-check-box-collection")).to have_field(type: "checkbox", count: 3)
 
           expect(page).to have_field("questionnaire_responses_0_choices_2_custom_body", disabled: true, count: 1)
 
@@ -396,10 +381,7 @@ shared_examples_for "has questionnaire" do
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".success.flash" do
-            expect(page).to have_content("successfully")
-          end
-
+          expect(page).to have_admin_callout(callout_success)
           expect(Decidim::Forms::Answer.first.choices.first.custom_body).to eq("Cacatua")
         end
 
@@ -414,10 +396,7 @@ shared_examples_for "has questionnaire" do
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".alert.flash" do
-            expect(page).to have_content("There was a problem answering")
-          end
-
+          expect(page).to have_admin_callout("There was a problem answering")
           expect(page).to have_field("questionnaire_responses_0_choices_2_custom_body", with: "Cacatua")
         end
 
@@ -427,7 +406,7 @@ shared_examples_for "has questionnaire" do
 
     context "when question type is long answer" do
       let(:max_characters) { 0 }
-      let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, question_type: "long_answer", max_characters: max_characters) }
+      let!(:question) { create(:questionnaire_question, questionnaire:, question_type: "long_answer", max_characters:) }
 
       it "renders the answer as a textarea" do
         visit questionnaire_public_path
@@ -440,12 +419,12 @@ shared_examples_for "has questionnaire" do
 
     context "when question type is short answer" do
       let(:max_characters) { 0 }
-      let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, question_type: "short_answer", max_characters: max_characters) }
+      let!(:question) { create(:questionnaire_question, questionnaire:, question_type: "short_answer", max_characters:) }
 
       it "renders the answer as a text field" do
         visit questionnaire_public_path
 
-        expect(page).to have_selector("input[type=text]#questionnaire_responses_0")
+        expect(page).to have_field(id: "questionnaire_responses_0")
       end
 
       it_behaves_like "question has a character limit"
@@ -453,12 +432,12 @@ shared_examples_for "has questionnaire" do
 
     context "when question type is single option" do
       let(:answer_options) { Array.new(2) { { "body" => Decidim::Faker::Localized.sentence } } }
-      let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, question_type: "single_option", options: answer_options) }
+      let!(:question) { create(:questionnaire_question, questionnaire:, question_type: "single_option", options: answer_options) }
 
       it "renders answers as a collection of radio buttons" do
         visit questionnaire_public_path
 
-        expect(page).to have_selector(".radio-button-collection input[type=radio]", count: 2)
+        expect(page).to have_selector(".js-radio-button-collection input[type=radio]", count: 2)
 
         choose answer_options[0]["body"][:en]
 
@@ -466,9 +445,7 @@ shared_examples_for "has questionnaire" do
 
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
+        expect(page).to have_admin_callout(callout_success)
 
         visit questionnaire_public_path
 
@@ -479,14 +456,14 @@ shared_examples_for "has questionnaire" do
 
     context "when question type is multiple option" do
       let(:answer_options) { Array.new(3) { { "body" => Decidim::Faker::Localized.sentence } } }
-      let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, question_type: "multiple_option", options: answer_options) }
+      let!(:question) { create(:questionnaire_question, questionnaire:, question_type: "multiple_option", options: answer_options) }
 
       it "renders answers as a collection of radio buttons" do
         visit questionnaire_public_path
 
-        expect(page).to have_selector(".check-box-collection input[type=checkbox]", count: 3)
+        expect(page).to have_selector(".js-check-box-collection input[type=checkbox]", count: 3)
 
-        expect(page).to have_no_content("Max choices:")
+        expect(page).not_to have_content("Max choices:")
 
         check answer_options[0]["body"][:en]
         check answer_options[1]["body"][:en]
@@ -495,9 +472,7 @@ shared_examples_for "has questionnaire" do
 
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
+        expect(page).to have_admin_callout(callout_success)
 
         visit questionnaire_public_path
 
@@ -522,29 +497,23 @@ shared_examples_for "has questionnaire" do
 
         accept_confirm { click_button "Submit" }
 
-        within ".alert.flash" do
-          expect(page).to have_content("There was a problem answering")
-        end
-
+        expect(page).to have_admin_callout("There was a problem answering")
         expect(page).to have_content("are too many")
 
         uncheck answer_options[2]["body"][:en]
 
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
+        expect(page).to have_admin_callout(callout_success)
       end
     end
 
-    context "when question type is sorting and mandatory" do
+    context "when question type is sorting" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "sorting",
-          mandatory: true,
           options: [
             { "body" => { "en" => "chocolate" } },
             { "body" => { "en" => "like" } },
@@ -555,90 +524,32 @@ shared_examples_for "has questionnaire" do
         )
       end
 
-      it "renders the question answers as a collection of check boxes sortable on click" do
+      it "renders the question answers as a collection of divs sortable on drag and drop" do
         visit questionnaire_public_path
 
-        expect(page).to have_selector(".sortable-check-box-collection input[type=checkbox]", count: 5)
-
-        expect(page).to have_content("chocolate\nlike\nWe\ndark\nall")
+        expect(page).to have_selector("div.answer-questionnaire__sorting.js-collection-input", count: 5)
 
-        check "We"
-        check "all"
-        check "like"
-        check "dark"
-        check "chocolate"
-
-        expect(page).to have_content("1. We\n2. all\n3. like\n4. dark\n5. chocolate")
+        %w(We all like dark chocolate).each do |term|
+          expect(page).to have_content(term)
+        end
       end
 
       it "properly saves valid sortings" do
         visit questionnaire_public_path
 
-        check "We"
-        check "all"
-        check "like"
-        check "dark"
-        check "chocolate"
+        %w(We all like dark chocolate).reverse.each do |text|
+          find("div.answer-questionnaire__sorting", text:).drag_to(find("div.answer-questionnaire__sorting", match: :first))
+        end
 
         check "questionnaire_tos_agreement"
 
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
-
+        expect(page).to have_admin_callout(callout_success)
         expect(Decidim::Forms::Answer.first.choices.pluck(:position, :body)).to eq(
           [[0, "We"], [1, "all"], [2, "like"], [3, "dark"], [4, "chocolate"]]
         )
       end
-
-      it "displays errors on incomplete sortings" do
-        visit questionnaire_public_path
-
-        check "We"
-
-        accept_confirm { click_button "Submit" }
-
-        within ".alert.flash" do
-          expect(page).to have_content("problem")
-        end
-
-        expect(page).to have_content("are not complete")
-      end
-
-      it "displays maintains sorting order if errors" do
-        visit questionnaire_public_path
-
-        check "We"
-        check "dark"
-        check "chocolate"
-
-        accept_confirm { click_button "Submit" }
-
-        within ".alert.flash" do
-          expect(page).to have_content("problem")
-        end
-
-        # Check the next round to ensure a re-submission conserves status
-        expect(page).to have_content("are not complete")
-        expect(page).to have_content("1. We\n2. dark\n3. chocolate\nlike\nall")
-
-        checkboxes = page.all("input[type=checkbox]")
-
-        checkboxes[0].uncheck
-        check "We"
-        check "all"
-
-        accept_confirm { click_button "Submit" }
-
-        within ".alert.flash" do
-          expect(page).to have_content("problem")
-        end
-
-        expect(page).to have_content("are not complete")
-        expect(page).to have_content("1. dark\n2. chocolate\n3. We\n4. all\nlike")
-      end
     end
 
     context "when question type is matrix_single" do
@@ -649,23 +560,23 @@ shared_examples_for "has questionnaire" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "matrix_single",
           rows: matrix_rows,
           options: answer_options,
-          mandatory: mandatory
+          mandatory:
         )
       end
 
       it "renders the question answers as a collection of radio buttons" do
         visit questionnaire_public_path
 
-        expect(page).to have_selector(".radio-button-collection input[type=radio]", count: 4)
+        expect(page).to have_selector(".js-radio-button-collection input[type=radio]", count: 4)
 
         expect(page).to have_content(matrix_rows.map { |row| row["body"]["en"] }.join("\n"))
         expect(page).to have_content(answer_options.map { |option| option["body"]["en"] }.join(" "))
 
-        radio_buttons = page.all(".radio-button-collection input[type=radio]")
+        radio_buttons = page.all(".js-radio-button-collection input[type=radio]")
 
         choose radio_buttons.first[:id]
         choose radio_buttons.last[:id]
@@ -674,9 +585,7 @@ shared_examples_for "has questionnaire" do
 
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
+        expect(page).to have_admin_callout(callout_success)
 
         visit questionnaire_public_path
 
@@ -692,16 +601,14 @@ shared_examples_for "has questionnaire" do
       it "preserves the chosen answers if submission not correct" do
         visit questionnaire_public_path
 
-        radio_buttons = page.all(".radio-button-collection input[type=radio]")
+        radio_buttons = page.all(".js-radio-button-collection input[type=radio]")
         choose radio_buttons[1][:id]
 
         accept_confirm { click_button "Submit" }
 
-        within ".alert.flash" do
-          expect(page).to have_content("There was a problem answering")
-        end
+        expect(page).to have_admin_callout("There was a problem answering")
 
-        radio_buttons = page.all(".radio-button-collection input[type=radio]")
+        radio_buttons = page.all(".js-radio-button-collection input[type=radio]")
         expect(radio_buttons.pluck(:checked)).to eq([nil, "true", nil, nil])
       end
 
@@ -711,16 +618,13 @@ shared_examples_for "has questionnaire" do
         it "shows an error if the question is mandatory and the answer is not complete" do
           visit questionnaire_public_path
 
-          radio_buttons = page.all(".radio-button-collection input[type=radio]")
+          radio_buttons = page.all(".js-radio-button-collection input[type=radio]")
           choose radio_buttons[0][:id]
 
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".alert.flash" do
-            expect(page).to have_content("There was a problem answering")
-          end
-
+          expect(page).to have_admin_callout("There was a problem answering")
           expect(page).to have_content("Choices are not complete")
         end
       end
@@ -735,24 +639,24 @@ shared_examples_for "has questionnaire" do
       let!(:question) do
         create(
           :questionnaire_question,
-          questionnaire: questionnaire,
+          questionnaire:,
           question_type: "matrix_multiple",
           rows: matrix_rows,
           options: answer_options,
-          max_choices: max_choices,
-          mandatory: mandatory
+          max_choices:,
+          mandatory:
         )
       end
 
       it "renders the question answers as a collection of check boxes" do
         visit questionnaire_public_path
 
-        expect(page).to have_selector(".check-box-collection input[type=checkbox]", count: 6)
+        expect(page).to have_selector(".js-check-box-collection input[type=checkbox]", count: 6)
 
         expect(page).to have_content(matrix_rows.map { |row| row["body"]["en"] }.join("\n"))
         expect(page).to have_content(answer_options.map { |option| option["body"]["en"] }.join(" "))
 
-        checkboxes = page.all(".check-box-collection input[type=checkbox]")
+        checkboxes = page.all(".js-check-box-collection input[type=checkbox]")
 
         check checkboxes[0][:id]
         check checkboxes[1][:id]
@@ -762,9 +666,7 @@ shared_examples_for "has questionnaire" do
 
         accept_confirm { click_button "Submit" }
 
-        within ".success.flash" do
-          expect(page).to have_content("successfully")
-        end
+        expect(page).to have_admin_callout(callout_success)
 
         visit questionnaire_public_path
 
@@ -786,7 +688,7 @@ shared_examples_for "has questionnaire" do
 
           expect(page).to have_content("Max choices: 2")
 
-          checkboxes = page.all(".check-box-collection input[type=checkbox]")
+          checkboxes = page.all(".js-check-box-collection input[type=checkbox]")
 
           check checkboxes[0][:id]
           check checkboxes[1][:id]
@@ -809,21 +711,16 @@ shared_examples_for "has questionnaire" do
 
           accept_confirm { click_button "Submit" }
 
-          within ".alert.flash" do
-            expect(page).to have_content("There was a problem answering")
-          end
-
+          expect(page).to have_admin_callout("There was a problem answering")
           expect(page).to have_content("are too many")
 
-          checkboxes = page.all(".check-box-collection input[type=checkbox]")
+          checkboxes = page.all(".js-check-box-collection input[type=checkbox]")
 
           uncheck checkboxes[5][:id]
 
           accept_confirm { click_button "Submit" }
 
-          within ".success.flash" do
-            expect(page).to have_content("successfully")
-          end
+          expect(page).to have_admin_callout(callout_success)
         end
       end
 
@@ -833,16 +730,13 @@ shared_examples_for "has questionnaire" do
         it "shows an error" do
           visit questionnaire_public_path
 
-          checkboxes = page.all(".check-box-collection input[type=checkbox]")
+          checkboxes = page.all(".js-check-box-collection input[type=checkbox]")
           check checkboxes[0][:id]
 
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".alert.flash" do
-            expect(page).to have_content("There was a problem answering")
-          end
-
+          expect(page).to have_admin_callout("There was a problem answering")
           expect(page).to have_content("Choices are not complete")
         end
       end
@@ -853,7 +747,7 @@ shared_examples_for "has questionnaire" do
         it "preserves the chosen answers" do
           visit questionnaire_public_path
 
-          checkboxes = page.all(".check-box-collection input[type=checkbox]")
+          checkboxes = page.all(".js-check-box-collection input[type=checkbox]")
           check checkboxes[0][:id]
           check checkboxes[1][:id]
           check checkboxes[2][:id]
@@ -862,11 +756,9 @@ shared_examples_for "has questionnaire" do
           check "questionnaire_tos_agreement"
           accept_confirm { click_button "Submit" }
 
-          within ".alert.flash" do
-            expect(page).to have_content("There was a problem answering")
-          end
+          expect(page).to have_admin_callout("There was a problem answering")
 
-          checkboxes = page.all(".check-box-collection input[type=checkbox]")
+          checkboxes = page.all(".js-check-box-collection input[type=checkbox]")
           expect(checkboxes.pluck(:checked)).to eq(["true", "true", "true", nil, nil, "true"])
         end
       end
@@ -882,11 +774,11 @@ shared_examples_for "has questionnaire" do
         end
       end
       let(:condition_question_options) { [] }
-      let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, position: 2) }
+      let!(:question) { create(:questionnaire_question, questionnaire:, position: 2) }
       let!(:conditioned_question_id) { "#questionnaire_responses_1" }
       let!(:condition_question) do
         create(:questionnaire_question,
-               questionnaire: questionnaire,
+               questionnaire:,
                question_type: condition_question_type,
                position: 1,
                options: condition_question_options)
@@ -897,8 +789,8 @@ shared_examples_for "has questionnaire" do
           let!(:display_condition) do
             create(:display_condition,
                    condition_type: "answered",
-                   question: question,
-                   condition_question: condition_question)
+                   question:,
+                   condition_question:)
           end
 
           before do
@@ -989,8 +881,8 @@ shared_examples_for "has questionnaire" do
           let!(:display_condition) do
             create(:display_condition,
                    condition_type: "not_answered",
-                   question: question,
-                   condition_question: condition_question)
+                   question:,
+                   condition_question:)
           end
 
           before do
@@ -1069,8 +961,8 @@ shared_examples_for "has questionnaire" do
           let!(:display_condition) do
             create(:display_condition,
                    condition_type: "equal",
-                   question: question,
-                   condition_question: condition_question,
+                   question:,
+                   condition_question:,
                    answer_option: condition_question.answer_options.first)
           end
 
@@ -1125,8 +1017,8 @@ shared_examples_for "has questionnaire" do
           let!(:display_condition) do
             create(:display_condition,
                    condition_type: "not_equal",
-                   question: question,
-                   condition_question: condition_question,
+                   question:,
+                   condition_question:,
                    answer_option: condition_question.answer_options.first)
           end
 
@@ -1182,9 +1074,9 @@ shared_examples_for "has questionnaire" do
           let!(:display_condition) do
             create(:display_condition,
                    condition_type: "match",
-                   question: question,
-                   condition_question: condition_question,
-                   condition_value: condition_value)
+                   question:,
+                   condition_question:,
+                   condition_value:)
           end
 
           before do
@@ -1197,7 +1089,7 @@ shared_examples_for "has questionnaire" do
             it "shows the question only if the condition is fulfilled" do
               expect_question_to_be_visible(false)
 
-              fill_in "questionnaire_responses_0", with: "Aren't we all expecting #{condition_value[:en]}?"
+              fill_in "questionnaire_responses_0", with: "Are not we all expecting #{condition_value[:en]}?"
               change_focus
 
               expect_question_to_be_visible(true)
@@ -1220,7 +1112,7 @@ shared_examples_for "has questionnaire" do
             it "shows the question only if the condition is fulfilled" do
               expect_question_to_be_visible(false)
 
-              fill_in "questionnaire_responses_0", with: "Aren't we all expecting #{condition_value[:en]}?"
+              fill_in "questionnaire_responses_0", with: "Are not we all expecting #{condition_value[:en]}?"
               change_focus
 
               expect_question_to_be_visible(true)
@@ -1318,13 +1210,13 @@ shared_examples_for "has questionnaire" do
             [
               create(:display_condition,
                      condition_type: "answered",
-                     question: question,
-                     condition_question: condition_question,
+                     question:,
+                     condition_question:,
                      mandatory: true),
               create(:display_condition,
                      condition_type: "not_equal",
-                     question: question,
-                     condition_question: condition_question,
+                     question:,
+                     condition_question:,
                      mandatory: true,
                      answer_option: condition_question.answer_options.second)
             ]
@@ -1350,14 +1242,14 @@ shared_examples_for "has questionnaire" do
             [
               create(:display_condition,
                      condition_type: "equal",
-                     question: question,
-                     condition_question: condition_question,
+                     question:,
+                     condition_question:,
                      mandatory: false,
                      answer_option: condition_question.answer_options.first),
               create(:display_condition,
                      condition_type: "not_equal",
-                     question: question,
-                     condition_question: condition_question,
+                     question:,
+                     condition_question:,
                      mandatory: false,
                      answer_option: condition_question.answer_options.third)
             ]
@@ -1383,19 +1275,19 @@ shared_examples_for "has questionnaire" do
 
         context "when a mandatory question has conditions that have not been fulfilled" do
           let!(:condition_question_type) { "short_answer" }
-          let!(:question) { create(:questionnaire_question, questionnaire: questionnaire, position: 2, mandatory: true) }
+          let!(:question) { create(:questionnaire_question, questionnaire:, position: 2, mandatory: true) }
           let!(:display_conditions) do
             [
               create(:display_condition,
                      condition_type: "match",
-                     question: question,
-                     condition_question: condition_question,
+                     question:,
+                     condition_question:,
                      condition_value: { en: "hey", es: "ey", ca: "ei" },
                      mandatory: true)
             ]
           end
 
-          it "doesn't throw error" do
+          it "does not throw error" do
             visit questionnaire_public_path
 
             fill_in condition_question.body["en"], with: "My first answer"
@@ -1404,9 +1296,7 @@ shared_examples_for "has questionnaire" do
 
             accept_confirm { click_button "Submit" }
 
-            within ".success.flash" do
-              expect(page).to have_content("successfully")
-            end
+            expect(page).to have_admin_callout(callout_success)
           end
         end
       end
@@ -1415,7 +1305,7 @@ shared_examples_for "has questionnaire" do
     private
 
     def expect_question_to_be_visible(visible)
-      expect(page).to have_css(conditioned_question_id, visible: visible)
+      expect(page).to have_css(conditioned_question_id, visible:)
     end
 
     def change_focus