Extract component to render the status of a poll

We're renaming the existing HTML class in order to be consistent with
the name of the component.

app/assets/stylesheets/polls/access_status.scss

@@ -0,0 +1,55 @@
+.poll .access-status {
+  border-bottom: 60px solid transparent;
+  border-top: 0;
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 0;
+
+  &.cant-answer::after,
+  &.not-logged-in::after,
+  &.already-answer::after,
+  &.unverified::after {
+    font-family: "icons" !important;
+    left: 34px;
+    position: absolute;
+    top: 5px;
+  }
+
+  &.cant-answer {
+    border-right: 60px solid $alert-bg;
+
+    &::after {
+      color: $color-alert;
+      content: "\74";
+    }
+  }
+
+  &.not-logged-in {
+    border-right: 60px solid $info-bg;
+
+    &::after {
+      color: $color-info;
+      content: "\6f";
+    }
+  }
+
+  &.unverified {
+    border-right: 60px solid $warning-bg;
+
+    &::after {
+      color: $color-warning;
+      content: "\6f";
+    }
+  }
+
+  &.already-answer {
+    border-right: 60px solid $success-bg;
+
+    &::after {
+      color: $color-success;
+      content: "\59";
+    }
+  }
+}

app/assets/stylesheets/polls/poll.scss

@@ -12,62 +12,6 @@
     }
   }
 
-  .icon-poll-answer {
-    border-bottom: 60px solid transparent;
-    border-top: 0;
-    height: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 0;
-
-    &.cant-answer::after,
-    &.not-logged-in::after,
-    &.already-answer::after,
-    &.unverified::after {
-      font-family: "icons" !important;
-      left: 34px;
-      position: absolute;
-      top: 5px;
-    }
-
-    &.cant-answer {
-      border-right: 60px solid $alert-bg;
-
-      &::after {
-        color: $color-alert;
-        content: "\74";
-      }
-    }
-
-    &.not-logged-in {
-      border-right: 60px solid $info-bg;
-
-      &::after {
-        color: $color-info;
-        content: "\6f";
-      }
-    }
-
-    &.unverified {
-      border-right: 60px solid $warning-bg;
-
-      &::after {
-        color: $color-warning;
-        content: "\6f";
-      }
-    }
-
-    &.already-answer {
-      border-right: 60px solid $success-bg;
-
-      &::after {
-        color: $color-success;
-        content: "\59";
-      }
-    }
-  }
-
   .dates {
     color: $text-medium;
     font-size: $small-font-size;

app/components/polls/access_status_component.html.erb

@@ -0,0 +1,19 @@
+<% if current_user %>
+  <% if current_user.unverified? %>
+    <div class="access-status unverified" title="<%= t("polls.index.unverified") %>">
+      <span class="show-for-sr"><%= t("polls.index.unverified") %></span>
+    </div>
+  <% elsif cannot?(:answer, poll) %>
+    <div class="access-status cant-answer" title="<%= t("polls.index.cant_answer") %>">
+      <span class="show-for-sr"><%= t("polls.index.cant_answer") %></span>
+    </div>
+  <% elsif !poll.votable_by?(current_user) %>
+    <div class="access-status already-answer" title="<%= t("polls.index.already_answer") %>">
+      <span class="show-for-sr"><%= t("polls.index.already_answer") %></span>
+    </div>
+  <% end %>
+<% else %>
+  <div class="access-status not-logged-in" title="<%= t("polls.index.not_logged_in") %>">
+    <span class="show-for-sr"><%= t("polls.index.not_logged_in") %></span>
+  </div>
+<% end %>

app/components/polls/access_status_component.rb

@@ -0,0 +1,8 @@
+class Polls::AccessStatusComponent < ApplicationComponent
+  attr_reader :poll
+  use_helpers :cannot?, :current_user
+
+  def initialize(poll)
+    @poll = poll
+  end
+end

app/components/polls/poll_component.html.erb

@@ -1,23 +1,6 @@
 <div class="poll with-image">
-  <% if current_user %>
+  <%= render Polls::AccessStatusComponent.new(poll) %>
-    <% if current_user.unverified? %>
+
-      <div class="icon-poll-answer unverified" title="<%= t("polls.index.unverified") %>">
-        <span class="show-for-sr"><%= t("polls.index.unverified") %></span>
-      </div>
-    <% elsif cannot?(:answer, poll) %>
-      <div class="icon-poll-answer cant-answer" title="<%= t("polls.index.cant_answer") %>">
-        <span class="show-for-sr"><%= t("polls.index.cant_answer") %></span>
-      </div>
-    <% elsif !poll.votable_by?(current_user) %>
-      <div class="icon-poll-answer already-answer" title="<%= t("polls.index.already_answer") %>">
-        <span class="show-for-sr"><%= t("polls.index.already_answer") %></span>
-      </div>
-    <% end %>
-  <% else %>
-    <div class="icon-poll-answer not-logged-in" title="<%= t("polls.index.not_logged_in") %>">
-      <span class="show-for-sr"><%= t("polls.index.not_logged_in") %></span>
-    </div>
-  <% end %>
   <div class="row" data-equalizer data-equalize-on="medium">
     <div class="small-12 medium-3 column">
       <div class="image-container" data-equalizer-watch>

app/components/polls/poll_component.rb

@@ -1,6 +1,6 @@
 class Polls::PollComponent < ApplicationComponent
   attr_reader :poll
-  use_helpers :cannot?, :current_user, :link_to_poll
+  use_helpers :link_to_poll
 
   def initialize(poll)
     @poll = poll

spec/components/polls/access_status_component_spec.rb

@@ -0,0 +1,40 @@
+require "rails_helper"
+
+describe Polls::AccessStatusComponent do
+  it "asks anonymous users to sign in" do
+    render_inline Polls::AccessStatusComponent.new(create(:poll))
+
+    expect(page).to have_css ".not-logged-in", count: 1
+    expect(page).to have_content "You must sign in or sign up to participate"
+  end
+
+  it "asks unverified users to verify their account" do
+    sign_in(create(:user))
+
+    render_inline Polls::AccessStatusComponent.new(create(:poll))
+
+    expect(page).to have_css ".unverified", count: 1
+    expect(page).to have_content "You must verify your account to participate"
+  end
+
+  it "tell users from different geozones that the poll isn't available" do
+    sign_in(create(:user, :level_two))
+
+    render_inline Polls::AccessStatusComponent.new(create(:poll, geozone_restricted: true))
+
+    expect(page).to have_css ".cant-answer", count: 1
+    expect(page).to have_content "This poll is not available on your geozone"
+  end
+
+  it "informs users when they've already participated" do
+    user = create(:user, :level_two)
+    poll = create(:poll)
+    create(:poll_voter, user: user, poll: poll)
+
+    sign_in(user)
+    render_inline Polls::AccessStatusComponent.new(poll)
+
+    expect(page).to have_css ".already-answer", count: 1
+    expect(page).to have_content "You already have participated in this poll"
+  end
+end

spec/components/polls/poll_component_spec.rb

@@ -3,45 +3,6 @@ require "rails_helper"
 describe Polls::PollComponent do
   include Rails.application.routes.url_helpers
 
-  describe "status message" do
-    it "asks anonymous users to sign in" do
-      render_inline Polls::PollComponent.new(create(:poll))
-
-      expect(page).to have_css ".not-logged-in", count: 1
-      expect(page).to have_content "You must sign in or sign up to participate"
-    end
-
-    it "asks unverified users to verify their account" do
-      sign_in(create(:user))
-
-      render_inline Polls::PollComponent.new(create(:poll))
-
-      expect(page).to have_css ".unverified", count: 1
-      expect(page).to have_content "You must verify your account to participate"
-    end
-
-    it "tell users from different geozones that the poll isn't available" do
-      sign_in(create(:user, :level_two))
-
-      render_inline Polls::PollComponent.new(create(:poll, geozone_restricted: true))
-
-      expect(page).to have_css ".cant-answer", count: 1
-      expect(page).to have_content "This poll is not available on your geozone"
-    end
-
-    it "informs users when they've already participated" do
-      user = create(:user, :level_two)
-      poll = create(:poll)
-      create(:poll_voter, user: user, poll: poll)
-
-      sign_in(user)
-      render_inline Polls::PollComponent.new(poll)
-
-      expect(page).to have_css ".already-answer", count: 1
-      expect(page).to have_content "You already have participated in this poll"
-    end
-  end
-
   describe "dates" do
     it "renders the dates inside an HTML tag" do
       poll = create(:poll, starts_at: "2015-07-15", ends_at: "2015-07-22")