ECOM-4906 Add the program editor fix to allow creation of Micromasters programs (#13064)

cms/static/js/programs/models/program_model.js

@@ -3,9 +3,10 @@ define([
         'jquery',
         'js/programs/utils/api_config',
         'js/programs/models/auto_auth_model',
+        'gettext',
         'jquery.cookie'
     ],
-    function( Backbone, $, apiConfig, AutoAuthModel ) {
+    function( Backbone, $, apiConfig, AutoAuthModel, gettext ) {
         'use strict';
 
         return AutoAuthModel.extend({
@@ -23,8 +24,7 @@ define([
                 },
                 category: {
                     required: true,
-                    // XSeries is currently the only valid Program type.
-                    oneOf: ['xseries']
+                    oneOf: ['xseries', 'micromasters']
                 },
                 organizations: 'validateOrganizations',
                 marketing_slug: {

cms/static/js/programs/utils/validation_config.js

@@ -4,7 +4,7 @@ define([
         'underscore',
         'gettext'
     ],
-    function( Backbone, BackboneValidation, _ ) {
+    function( Backbone, BackboneValidation, _, gettext ) {
         'use strict';
 
         var errorClass = 'has-error',
@@ -24,7 +24,7 @@ define([
             minLength: gettext( '{0} must be at least {1} characters' ),
             maxLength: gettext( '{0} must be at most {1} characters' ),
             rangeLength: gettext( '{0} must be between {1} and {2} characters' ),
-            oneOf: gettext( '{0} must be one of: gettext( {1}' ),
+            oneOf: gettext( '{0} must be one of: {1}' ),
             equalTo: gettext( '{0} must be the same as {1}' ),
             digits: gettext( '{0} must only contain digits' ),
             number: gettext( '{0} must be a number' ),

cms/static/js/spec/views/programs/program_creator_spec.js

@@ -26,12 +26,7 @@ define([
                     }],
                     next: null
                 },
-                sampleInput = {
-                    organizations: 'test-org-key',
-                    name: 'Test Course Name',
-                    subtitle: 'Test Course Subtitle',
-                    marketing_slug: 'test-management'
-                },
+                sampleInput,
                 completeForm = function( data ) {
                     view.$el.find('#program-name').val( data.name );
                     view.$el.find('#program-subtitle').val( data.subtitle );
@@ -63,6 +58,13 @@ define([
                     expect( $errorMsg.find('.field-message-content').html() ).toEqual( inputErrorMsg );
                 };
 
+            var validateFormSubmitted = function(view, programId){
+                expect( $.ajax ).toHaveBeenCalled();
+                expect( view.saveSuccess ).toHaveBeenCalled();
+                expect( view.goToView ).toHaveBeenCalledWith( String( programId ) );
+                expect( view.saveError ).not.toHaveBeenCalled();
+            };
+
             beforeEach( function() {
                 // Set the DOM
                 setFixtures( '<div class="js-program-admin"></div>' );
@@ -74,6 +76,14 @@ define([
                 spyOn( ProgramCreatorView.prototype, 'saveError' ).and.callThrough();
                 spyOn( Router.prototype, 'goHome' );
 
+                sampleInput = {
+                    category: 'xseries',
+                    organizations: 'test-org-key',
+                    name: 'Test Course Name',
+                    subtitle: 'Test Course Subtitle',
+                    marketing_slug: 'test-management'
+                };
+
                 view = new ProgramCreatorView({
                     router: new Router({
                         homeUrl: '/author/home'
@@ -116,10 +126,22 @@ define([
 
                 view.$el.find('.js-create-program').click();
 
-                expect( $.ajax ).toHaveBeenCalled();
-                expect( view.saveSuccess ).toHaveBeenCalled();
-                expect( view.goToView ).toHaveBeenCalledWith( String( programId ) );
-                expect( view.saveError ).not.toHaveBeenCalled();
+                validateFormSubmitted(view, programId);
+            });
+
+            it( 'should submit the form correctly when creating micromasters program ', function(){
+                var programId = 221;
+                sampleInput.category = 'micromasters';
+                
+                completeForm( sampleInput );
+
+                spyOn( $, 'ajax' ).and.callFake( function( event ) {
+                    event.success({ id: programId });
+                });
+
+                view.$el.find('.js-create-program').click();
+
+                validateFormSubmitted(view, programId);
             });
 
             it( 'should run the saveError when model save failures occur', function() {
@@ -152,6 +174,19 @@ define([
                 expect( view.model.get('marketing_slug') ).toEqual( sampleInput.marketing_slug );
             });
 
+            it( 'should not set the model when bad program type selected', function() {
+                var invalidInput = $.extend({}, sampleInput);
+                spyOn( view.model, 'save' );
+
+                // No name provided.
+                invalidInput.category = '';
+                verifyValidation( invalidInput, 'category' );
+
+                // bad program type name
+                invalidInput.name = 'badprogramtype';
+                verifyValidation( invalidInput, 'category' );
+            });
+
             it( 'should not set the model when an invalid program name is submitted', function() {
                 var invalidInput = $.extend({}, sampleInput);
 

cms/templates/js/programs/program_creator_form.underscore

@@ -3,8 +3,10 @@
     <fieldset class="form-group bg-white">
         <div class="field">
             <label class="field-label" for="program-type"><%- gettext('Program type') %></label>
-            <select id="program-type" class="field-input input-select program-type" name="category" disabled>
+            <select id="program-type" class="field-input input-select program-type" name="category">
+                <option value=""><%- gettext('Select a type') %></option>
                 <option value="xseries"><%- gettext('XSeries') %></option>
+                <option value="micromasters"><%- gettext('MicroMasters') %></option>
             </select>
             <div class="field-message">
                 <span class="field-message-content"></span>