Move milestones progress bars partial to a component

app/assets/stylesheets/application.scss

@@ -27,6 +27,7 @@
 @import "layout/**/*";
 @import "machine_learning/**/*";
 @import "management/**/*";
+@import "milestones/**/*";
 @import "moderation/**/*";
 @import "polls/**/*";
 @import "proposals/**/*";

app/assets/stylesheets/milestones.scss

@@ -1,40 +1,3 @@
-$progress-bar-background: #fef0e2;
-$progress-bar-color:      #fea230;
-
-.tab-milestones {
-
-  .progress-bars {
-    margin-bottom: $line-height * 2;
-    margin-top: $line-height;
-
-    h5 {
-      font-size: rem-calc(24);
-    }
-
-    .progress {
-      background: $progress-bar-background;
-      border-radius: rem-calc(6);
-      position: relative;
-    }
-
-    .progress-meter {
-      background: $progress-bar-color;
-      border-radius: rem-calc(6);
-    }
-
-    .progress-meter-text {
-      color: color-pick-contrast($progress-bar-background);
-      right: 12px;
-      text-align: right;
-      transform: translate(0%, -50%);
-    }
-
-    .milestone-progress .row {
-      margin-bottom: calc($line-height / 2);
-    }
-  }
-}
-
 .tab-milestones .timeline li {
   margin: 0 auto;
   position: relative;

app/assets/stylesheets/milestones/progress_bars.scss

@@ -0,0 +1,36 @@
+$progress-bar-background: #fef0e2;
+$progress-bar-color:      #fea230;
+
+.tab-milestones {
+
+  .progress-bars {
+    margin-bottom: $line-height * 2;
+    margin-top: $line-height;
+
+    h5 {
+      font-size: rem-calc(24);
+    }
+
+    .progress {
+      background: $progress-bar-background;
+      border-radius: rem-calc(6);
+      position: relative;
+    }
+
+    .progress-meter {
+      background: $progress-bar-color;
+      border-radius: rem-calc(6);
+    }
+
+    .progress-meter-text {
+      color: color-pick-contrast($progress-bar-background);
+      right: 12px;
+      text-align: right;
+      transform: translate(0%, -50%);
+    }
+
+    .milestone-progress .row {
+      margin-bottom: calc($line-height / 2);
+    }
+  }
+}

app/components/milestones/progress_bars_component.html.erb

@@ -0,0 +1,22 @@
+<section class="progress-bars">
+  <h5><%= t("milestones.index.progress") %></h5>
+
+  <div class="margin">
+    <%= progress_tag_for(milestoneable.primary_progress_bar) %>
+  </div>
+
+  <% if milestoneable.secondary_progress_bars.any? %>
+    <div class="milestone-progress">
+      <% milestoneable.secondary_progress_bars.each do |progress_bar| %>
+        <div class="row margin-bottom">
+          <div class="small-12 medium-6 large-4 column">
+            <%= progress_bar.title %>
+          </div>
+          <div class="small-12 medium-6 large-8 column end">
+            <%= progress_tag_for(progress_bar) %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</section>

app/components/milestones/progress_bars_component.rb

@@ -0,0 +1,28 @@
+class Milestones::ProgressBarsComponent < ApplicationComponent
+  attr_reader :milestoneable
+
+  def initialize(milestoneable)
+    @milestoneable = milestoneable
+  end
+
+  def render?
+    milestoneable.primary_progress_bar
+  end
+
+  private
+
+    def progress_tag_for(progress_bar)
+      text = number_to_percentage(progress_bar.percentage, precision: 0)
+
+      tag.div class: "progress",
+              role: "progressbar",
+              "aria-valuenow": progress_bar.percentage,
+              "aria-valuetext": "#{progress_bar.percentage}%",
+              "aria-valuemax": ProgressBar::RANGE.max,
+              "aria-valuemin": "0",
+              tabindex: "0" do
+        tag.span(class: "progress-meter", style: "width: #{progress_bar.percentage}%;") +
+          tag.p(text, class: "progress-meter-text")
+      end
+    end
+end

app/helpers/milestones_helper.rb

@@ -1,16 +0,0 @@
-module MilestonesHelper
-  def progress_tag_for(progress_bar)
-    text = number_to_percentage(progress_bar.percentage, precision: 0)
-
-    tag.div class: "progress",
-            role: "progressbar",
-            "aria-valuenow": progress_bar.percentage,
-            "aria-valuetext": "#{progress_bar.percentage}%",
-            "aria-valuemax": ProgressBar::RANGE.max,
-            "aria-valuemin": "0",
-            tabindex: "0" do
-      tag.span(class: "progress-meter", style: "width: #{progress_bar.percentage}%;") +
-        tag.p(text, class: "progress-meter-text")
-    end
-  end
-end

app/views/milestones/_milestones_content.html.erb

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="small-12 column">
-    <%= render "milestones/progress_bars", milestoneable: milestoneable %>
+    <%= render Milestones::ProgressBarsComponent.new(milestoneable) %>
 
     <% if milestoneable.milestones.blank? %>
       <div class="callout primary text-center margin-top">

app/views/milestones/_progress_bars.html.erb

@@ -1,24 +0,0 @@
-<% if milestoneable.primary_progress_bar %>
-  <section class="progress-bars">
-    <h5><%= t("milestones.index.progress") %></h5>
-
-    <div class="margin">
-      <%= progress_tag_for(milestoneable.primary_progress_bar) %>
-    </div>
-
-    <% if milestoneable.secondary_progress_bars.any? %>
-      <div class="milestone-progress">
-        <% milestoneable.secondary_progress_bars.each do |progress_bar| %>
-          <div class="row margin-bottom">
-            <div class="small-12 medium-6 large-4 column">
-              <%= progress_bar.title %>
-            </div>
-            <div class="small-12 medium-6 large-8 column end">
-              <%= progress_tag_for(progress_bar) %>
-            </div>
-          </div>
-        <% end %>
-      </div>
-    <% end %>
-  </section>
-<% end %>

spec/components/milestones/progress_bars_component_spec.rb

@@ -0,0 +1,33 @@
+require "rails_helper"
+
+describe Milestones::ProgressBarsComponent do
+  let(:milestoneable) { create(:legislation_process) }
+
+  it "is not rendered without a main progress bar" do
+    create(:progress_bar, :secondary, progressable: milestoneable, title: "Defeat Evil Lords")
+
+    render_inline Milestones::ProgressBarsComponent.new(milestoneable)
+
+    expect(page).not_to be_rendered
+  end
+
+  it "renders a main progress bar" do
+    create(:progress_bar, progressable: milestoneable)
+
+    render_inline Milestones::ProgressBarsComponent.new(milestoneable)
+
+    expect(page).to have_content "Progress"
+    expect(page).to have_css "[role=progressbar]", count: 1
+  end
+
+  it "renders both main and secondary progress bars" do
+    create(:progress_bar, progressable: milestoneable)
+    create(:progress_bar, :secondary, progressable: milestoneable, title: "Build laboratory")
+
+    render_inline Milestones::ProgressBarsComponent.new(milestoneable)
+
+    expect(page).to have_content "Progress"
+    expect(page).to have_content "Build laboratory"
+    expect(page).to have_css "[role=progressbar]", count: 2
+  end
+end

spec/system/legislation/processes_spec.rb

@@ -430,17 +430,7 @@ describe "Legislation" do
         end
       end
 
-      scenario "With main progress bar" do
+      scenario "With progress bars" do
-        create(:progress_bar, progressable: process)
-
-        visit milestones_legislation_process_path(process)
-
-        within(".tab-milestones") do
-          expect(page).to have_content "Progress"
-        end
-      end
-
-      scenario "With main and secondary progress bar" do
         create(:progress_bar, progressable: process)
         create(:progress_bar, :secondary, progressable: process, title: "Build laboratory")
 
@@ -451,17 +441,6 @@ describe "Legislation" do
           expect(page).to have_content "Build laboratory"
         end
       end
-
-      scenario "No main progress bar" do
-        create(:progress_bar, :secondary, progressable: process, title: "Defeat Evil Lords")
-
-        visit milestones_legislation_process_path(process)
-
-        within(".tab-milestones") do
-          expect(page).not_to have_content "Progress"
-          expect(page).not_to have_content "Defeat Evil Lords"
-        end
-      end
     end
   end
 end