Extract component to render answers additional information

app/components/polls/questions/read_more_answer_component.html.erb

@@ -0,0 +1,60 @@
+<div class="small-12 medium-6 column end answer <%= cycle("first", "") %>" id="answer_<%= answer.id %>">
+  <h3><%= answer.title %></h3>
+
+  <% if answer.images.any? %>
+    <%= render "polls/gallery", answer: answer %>
+  <% end %>
+
+  <% if answer.description.present? %>
+    <div class="margin-top">
+      <div id="answer_description_<%= answer.id %>" class="answer-description short" data-toggler="short">
+        <%= wysiwyg(answer.description) %>
+      </div>
+      <div class="read-more">
+        <button type="button" id="read_more_<%= answer.id %>"
+            data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
+            data-toggler="hide">
+          <%= t("polls.show.read_more", answer: answer.title) %>
+        </button>
+        <button type="button" id="read_less_<%= answer.id %>"
+            data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
+            data-toggler="hide"
+            class="hide">
+          <%= t("polls.show.read_less", answer: answer.title) %>
+        </button>
+      </div>
+    </div>
+  <% end %>
+
+  <% if answer.documents.present? %>
+    <div class="document-link">
+      <p>
+        <span class="icon-document"></span>&nbsp;
+        <strong><%= t("polls.show.documents") %></strong>
+      </p>
+
+      <% answer.documents.each do |document| %>
+          <%= link_to document.title,
+                      document.attachment,
+                      target: "_blank",
+                      rel: "nofollow" %><br>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if answer.videos.present? %>
+    <div class="video-link">
+      <p>
+        <span class="icon-video"></span>&nbsp;
+        <strong><%= t("polls.show.videos") %></strong>
+      </p>
+
+      <% answer.videos.each do |video| %>
+          <%= link_to video.title,
+                      video.url,
+                      target: "_blank",
+                      rel: "nofollow" %><br>
+      <% end %>
+    </div>
+  <% end %>
+</div>

app/components/polls/questions/read_more_answer_component.rb

@@ -0,0 +1,9 @@
+class Polls::Questions::ReadMoreAnswerComponent < ApplicationComponent
+  with_collection_parameter :answer
+  attr_reader :answer
+  delegate :wysiwyg, to: :helpers
+
+  def initialize(answer:)
+    @answer = answer
+  end
+end

app/views/polls/show.html.erb

@@ -46,68 +46,7 @@
 
   <div id="poll_more_info_answers" class="expanded poll-more-info-answers">
     <div class="row padding">
-      <% @poll_questions_answers.each do |answer| %>
-        <div class="small-12 medium-6 column end answer <%= cycle("first", "") %>" id="answer_<%= answer.id %>">
-          <h3><%= answer.title %></h3>
-
-          <% if answer.images.any? %>
-            <%= render "gallery", answer: answer %>
-          <% end %>
-
-          <% if answer.description.present? %>
-            <div class="margin-top">
-              <div id="answer_description_<%= answer.id %>" class="answer-description short" data-toggler="short">
-                <%= wysiwyg(answer.description) %>
-              </div>
-              <div class="read-more">
-                <button type="button" id="read_more_<%= answer.id %>"
-                   data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
-                   data-toggler="hide">
-                  <%= t("polls.show.read_more", answer: answer.title) %>
-                </button>
-                <button type="button" id="read_less_<%= answer.id %>"
-                   data-toggle="answer_description_<%= answer.id %> read_more_<%= answer.id %> read_less_<%= answer.id %>"
-                   data-toggler="hide"
-                   class="hide">
-                  <%= t("polls.show.read_less", answer: answer.title) %>
-                </button>
-              </div>
-            </div>
-          <% end %>
-
-          <% if answer.documents.present? %>
-            <div class="document-link">
-              <p>
-                <span class="icon-document"></span>&nbsp;
-                <strong><%= t("polls.show.documents") %></strong>
-              </p>
-
-              <% answer.documents.each do |document| %>
-                  <%= link_to document.title,
-                              document.attachment,
-                              target: "_blank",
-                              rel: "nofollow" %><br>
-              <% end %>
-            </div>
-          <% end %>
-
-          <% if answer.videos.present? %>
-            <div class="video-link">
-              <p>
-                <span class="icon-video"></span>&nbsp;
-                <strong><%= t("polls.show.videos") %></strong>
-              </p>
-
-              <% answer.videos.each do |video| %>
-                  <%= link_to video.title,
-                              video.url,
-                              target: "_blank",
-                              rel: "nofollow" %><br>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-      <% end %>
+      <%= render Polls::Questions::ReadMoreAnswerComponent.with_collection(@poll_questions_answers) %>
     </div>
   </div>
 

spec/components/polls/questions/read_more_answer_component_spec.rb

@@ -0,0 +1,32 @@
+require "rails_helper"
+
+describe Polls::Questions::ReadMoreAnswerComponent do
+  include Rails.application.routes.url_helpers
+  let(:poll) { create(:poll) }
+  let(:question) { create(:poll_question, poll: poll) }
+  let(:answer) { create(:poll_question_answer, question: question) }
+
+  it "renders answers with videos" do
+    create(:poll_answer_video, answer: answer, title: "Awesome video", url: "youtube.com/watch?v=123")
+
+    render_inline Polls::Questions::ReadMoreAnswerComponent.new(answer: answer)
+
+    expect(page).to have_link("Awesome video", href: "youtube.com/watch?v=123")
+  end
+
+  it "renders answers with images" do
+    create(:image, imageable: answer, title: "The yes movement")
+
+    render_inline Polls::Questions::ReadMoreAnswerComponent.new(answer: answer)
+
+    expect(page).to have_css "img[alt='The yes movement']"
+  end
+
+  it "renders answers with documents" do
+    create(:document, documentable: answer, title: "The yes movement")
+
+    render_inline Polls::Questions::ReadMoreAnswerComponent.new(answer: answer)
+
+    expect(page).to have_link("The yes movement")
+  end
+end

spec/system/polls/polls_spec.rb

@@ -152,14 +152,6 @@
       expect(page).to have_current_path(poll_path(poll.slug))
     end
 
-    scenario "Show answers with videos" do
-      create(:poll_answer_video, poll: poll, title: "Awesome video", url: "youtube.com/watch?v=123")
-
-      visit poll_path(poll)
-
-      expect(page).to have_link("Awesome video", href: "youtube.com/watch?v=123")
-    end
-
     scenario "Lists questions from proposals as well as regular ones" do
       normal_question = create(:poll_question, poll: poll)
       proposal_question = create(:poll_question, poll: poll, proposal: create(:proposal))
@@ -203,15 +195,6 @@
       end
     end
 
-    scenario "Answer images are shown" do
-      question = create(:poll_question, :yes_no, poll: poll)
-      create(:image, imageable: question.question_answers.first, title: "The yes movement")
-
-      visit poll_path(poll)
-
-      expect(page).to have_css "img[alt='The yes movement']"
-    end
-
     scenario "Buttons to slide through images work back and forth" do
       question = create(:poll_question, :yes_no, poll: poll)
       create(:image, imageable: question.question_answers.last, title: "The no movement")