From 9e5071e0c36711eca98e1a7ad3663bcc5d2bbbba Mon Sep 17 00:00:00 2001
From: "Albert (AJ) St. Aubin" <astaubin@edx.org>
Date: Tue, 17 Nov 2020 14:23:54 -0500
Subject: [PATCH] [MICROBA-746] Improve this code to check for the availability
 of banner_images

---
 .../learner_dashboard/models/program_model.js |  6 ++--
 .../spec/program_card_view_spec.js            | 29 +++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/lms/static/js/learner_dashboard/models/program_model.js b/lms/static/js/learner_dashboard/models/program_model.js
index 46fdcc78d3..c3a9255ca2 100644
--- a/lms/static/js/learner_dashboard/models/program_model.js
+++ b/lms/static/js/learner_dashboard/models/program_model.js
@@ -12,9 +12,9 @@ class ProgramModel extends Backbone.Model {
         subtitle: data.subtitle,
         authoring_organizations: data.authoring_organizations,
         detailUrl: data.detail_url,
-        xsmallBannerUrl: data.banner_image['x-small'].url,
-        smallBannerUrl: data.banner_image.small.url,
-        mediumBannerUrl: data.banner_image.medium.url,
+        xsmallBannerUrl: (data.banner_image && data.banner_image['x-small']) ? data.banner_image['x-small'].url : '',
+        smallBannerUrl: (data.banner_image && data.banner_image.small) ? data.banner_image.small.url : '',
+        mediumBannerUrl: (data.banner_image && data.banner_image.medium) ? data.banner_image.medium.url : '',
         breakpoints: {
           max: {
             xsmall: '320px',
diff --git a/lms/static/js/learner_dashboard/spec/program_card_view_spec.js b/lms/static/js/learner_dashboard/spec/program_card_view_spec.js
index e08e5778d2..4f378a03ed 100644
--- a/lms/static/js/learner_dashboard/spec/program_card_view_spec.js
+++ b/lms/static/js/learner_dashboard/spec/program_card_view_spec.js
@@ -88,6 +88,7 @@ describe('Program card View', () => {
 
   it('should load the program-card based on passed in context', () => {
     cardRenders(view.$el);
+    expect(view.$el.find('.banner-image').attr('srcset')).toEqual(program.banner_image.small.url);
   });
 
   it('should call reEvaluatePicture if reLoadBannerImage is called', () => {
@@ -127,4 +128,32 @@ describe('Program card View', () => {
     cardRenders(view.$el);
     expect(view.$('.progress').length).toEqual(0);
   });
+
+  it('should render cards if there are missing banner images', () => {
+    view.remove();
+    const programNoBanner = JSON.parse(JSON.stringify(program));
+    delete programNoBanner.banner_image;
+    programModel = new ProgramModel(programNoBanner);
+    view = new ProgramCardView({
+      model: programModel,
+      context: {},
+    });
+    cardRenders(view.$el);
+    expect(view.$el.find('.banner-image').attr('srcset')).toEqual('');
+  });
+
+  it('should render cards if there are missing banner image sizes', () => {
+    view.remove();
+    const programNoBanner = JSON.parse(JSON.stringify(program));
+    delete programNoBanner.banner_image['x-small'];
+    delete programNoBanner.banner_image.small;
+
+    programModel = new ProgramModel(programNoBanner);
+    view = new ProgramCardView({
+      model: programModel,
+      context: {},
+    });
+    cardRenders(view.$el);
+    expect(view.$el.find('.banner-image').attr('srcset')).toEqual('');
+  });
 });