Merge pull request #714 from coursemology-collab/weiqingtoh/progressbar

Add progress_bar view helper

app/helpers/application_widgets_helper.rb

@@ -164,4 +164,18 @@ def deduce_resource_object_name(resource)
       model_name_from_record_or_class(resource).param_key
     end
   end
+
+  # Display a progress_bar with the given percentage and styling. The percentage is assumed to
+  # be a number ranging from 0-100. In addition, a block can be passed to add custom text.
+  #
+  # @param [Fixnum] percentage The percentage to be displayed on the progress bar.
+  # @param [Array<String>] classes An array of classes to apply to the progress bar.
+  # @yield The HTML text which will be passed to the partial as text to be shown in the bar.
+  # @return [String] HTML string to render the progress bar.
+  def display_progress_bar(percentage, classes = ['progress-bar-info'])
+    render layout: 'layouts/progress_bar', locals: { percentage: percentage,
+                                                     progress_bar_classes: classes } do
+      yield if block_given?
+    end
+  end
 end

app/views/course/users/invitations.html.slim

@@ -5,10 +5,8 @@
 
 - accepted_course_users = @course_users.each.select { |user| !user.invited? }.size
 - progress = accepted_course_users * 100 / [@course_users.length, 1].max
-div.progress
-  div.progress-bar role='progressbar' aria-valuenow=progress aria-valuemin='0' aria-valuemax='100' style="width: #{progress}%"
-    span
-      = t('.progress', accepted: accepted_course_users, total: @course_users.size)
+= display_progress_bar progress, [] do
+  = t('.progress', accepted: accepted_course_users, total: @course_users.size)
 
 = simple_format t('.manual_acceptance')
 

app/views/layouts/_progress_bar.html.slim

@@ -0,0 +1,5 @@
+div.progress
+  div.progress-bar [ class=progress_bar_classes role='progressbar' aria-valuenow="#{percentage}"
+                     aria-valuemin='0' aria-valuemax='100' style="width: #{percentage}%" ]
+    span.sr-only #{percentage}% Complete
+    = yield

spec/helpers/application_widgets_helper_spec.rb

@@ -180,5 +180,34 @@ def stub_resource_button
         end
       end
     end
+
+    describe '#display_progress_bar' do
+      let(:default_class) { 'progress-bar-info' }
+      subject { helper.send(:display_progress_bar, 50) }
+      it 'returns a progress bar' do
+        expect(subject).to have_tag('div.progress-bar', with: { role: 'progressbar' })
+      end
+
+      it 'specifies the correct percentage of the progress bar' do
+        expect(subject).to have_tag('div.progress-bar', style: 'width: 50%')
+      end
+
+      it 'defaults to .progress-bar-info' do
+        expect(subject).to include(default_class)
+      end
+
+      context 'when classes are specified' do
+        it 'is reflected in the progress bar' do
+          expect(helper.send(:display_progress_bar, 50, ['progress-bar-striped'])).
+            to have_tag('div.progress-bar.progress-bar-striped')
+        end
+      end
+
+      context 'when a block is given' do
+        it 'appends the text within the progress bar' do
+          expect(helper.send(:display_progress_bar, 50) { '30%' }).to include('30%')
+        end
+      end
+    end
   end
 end