LEARNER-1040 Only show congratulations message on the program details page once…

LEARNER-1040 Only show congratulations message on the program details page once the program certificate has been earned.

lms/static/js/spec/learner_dashboard/program_details_view_spec.js

@@ -460,12 +460,17 @@ define([
                     'pref-lang': 'en'
                 }
             },
-            data = options.programData;
+            data = options.programData,
+            initView;
+
+        initView = function(updates) {
+            var viewOptions = $.extend({}, options, updates);
+
+            return new ProgramDetailsView(viewOptions);
+        };
 
         beforeEach(function() {
             setFixtures('<div class="js-program-details-wrapper"></div>');
-            view = new ProgramDetailsView(options);
-            view.render();
         });
 
         afterEach(function() {
@@ -473,10 +478,14 @@ define([
         });
 
         it('should exist', function() {
+            view = initView();
+            view.render();
             expect(view).toBeDefined();
         });
 
         it('should render the header', function() {
+            view = initView();
+            view.render();
             expect(view.$('.js-program-header h2').html()).toEqual(data.title);
             expect(view.$('.js-program-header .org-logo')[0].src).toEqual(
               data.authoring_organizations[0].logo_image_url
@@ -486,7 +495,9 @@ define([
             );
         });
 
-        it('should render the program heading', function() {
+        it('should render the program heading program journey message if program not completed', function() {
+            view = initView();
+            view.render();
             expect(view.$('.program-heading-title').text()).toEqual('Your Program Journey');
             expect(view.$('.program-heading-message').text().trim()
                        .replace(/\s+/g, ' ')).toEqual(
@@ -495,7 +506,26 @@ define([
             );
         });
 
+        it('should render the program heading congratulations message if all courses completed', function() {
+            view = initView({
+                // Remove remaining courses so all courses are complete
+                courseData: $.extend({}, options.courseData, {
+                    in_progress: [],
+                    not_started: []
+                })
+            });
+            view.render();
+
+            expect(view.$('.program-heading-title').text()).toEqual('Congratulations!');
+            expect(view.$('.program-heading-message').text().trim()
+                       .replace(/\s+/g, ' ')).toEqual(
+              'You have successfully completed all the requirements for the Test Course Title Test.'
+            );
+        });
+
         it('should render the course list headings', function() {
+            view = initView();
+            view.render();
             expect(view.$('.course-list-heading .status').text()).toEqual(
               'COURSES IN PROGRESSREMAINING COURSESCOMPLETED COURSES'
             );
@@ -503,18 +533,24 @@ define([
         });
 
         it('should render the basic course card information', function() {
+            view = initView();
+            view.render();
             expect($(view.$('.course-title')[0]).text().trim()).toEqual('Star Trek: The Next Generation');
             expect($(view.$('.enrolled')[0]).text().trim()).toEqual('Enrolled:');
             expect($(view.$('.run-period')[0]).text().trim()).toEqual('Mar 20, 2017 - Mar 31, 2017');
         });
 
         it('should render certificate information', function() {
+            view = initView();
+            view.render();
             expect($(view.$('.upgrade-message .card-msg')).text().trim()).toEqual('Certificate Status:');
             expect($(view.$('.upgrade-message .price')).text().trim()).toEqual('$10.00');
             expect($(view.$('.upgrade-button')[0]).text().trim()).toEqual('Buy Certificate');
         });
 
         it('should render enrollment information', function() {
+            view = initView();
+            view.render();
             expect(view.$('.run-select')[0].options.length).toEqual(2);
             expect($(view.$('.select-choice')[0]).attr('for')).toEqual($(view.$('.run-select')[0]).attr('id'));
             expect($(view.$('.enroll-button button')[0]).text().trim()).toEqual('Enroll Now');

lms/templates/learner_dashboard/program_details_view.underscore

 <header class="js-program-header program-header full-width-banner"></header>
 <section class="program-details-content">
     <div class="program-heading">
-            <% if (inProgressCount === totalCount) { %>
+            <% if (completedCount === totalCount) { %>
                 <h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
                 <div class="program-heading-message">
                     <div><%- interpolate(gettext(