Skip to content

E
edx-platform
Commit f3b9ea43 by Mushtaq Ali
Options

Send transcript credentials data to backend 

Add Cielo Username

- EDUCATOR-1456
parent 6634b92c
Showing with 130 additions and 125 deletions
cms/static/js/spec/views/course_video_settings_spec.js
......@@ -11,14 +11,17 @@ define(
verifyTranscriptPreferences,
verifyTranscriptPreferencesView,
verifyOrganizationCredentialsView,
verifyCredentialFieldsPresent,
verifyOrganizationCredentialField,
verifyMessage,
verifyPreferanceErrorState,
selectPreference,
verifyProviderList,
verifyProviderSelectedView,
verifyCredentialsSaved,
resetProvider,
changeProvider,
submitOrganizationCredentials,
transcriptPreferencesUrl = '/transcript_preferences/course-v1:edX+DemoX+Demo_Course',
transcriptCredentialsHandlerUrl = '/transcript_credentials/course-v1:edX+DemoX+Demo_Course',
activeTranscriptPreferences = {
......@@ -198,6 +201,21 @@ define(
expect($courseVideoSettingsEl.find('.organization-credentials-content')).toExist();
};
verifyCredentialFieldsPresent = function(fields) {
// Verify correct number of input fields are shown.
expect(
$courseVideoSettingsEl.find(
'.organization-credentials-wrapper .transcript-preferance-wrapper input'
).length
).toEqual(_.keys(fields).length
);
// Verify individual field has correct label and key.
_.each(fields, function(label, fieldName) {
verifyOrganizationCredentialField(fieldName, label);
});
};
verifyOrganizationCredentialField = function(fieldName, label) {
var elementSelector = courseVideoSettingsView.selectedProvider + '-' + fieldName;
// Verify that correct label is shown.
......@@ -211,6 +229,22 @@ define(
).toExist();
};
verifyCredentialsSaved = function() {
// Verify that success message is shown.
verifyMessage(
'success',
transcriptionPlans[courseVideoSettingsView.selectedProvider].display_name + ' credentials saved'
);
// Also verify that transcript credential state is updated.
expect(
courseVideoSettingsView.transcriptOrganizationCredentials[courseVideoSettingsView.selectedProvider]
).toBeTruthy();
// Verify that selected provider view after credentials are saved.
verifyProviderSelectedView();
};
changeProvider = function(selectedProvider) {
// If Provider Selected view is show, first click on "Change Provider" button to
// show all list of providers.
......@@ -236,6 +270,42 @@ define(
AjaxHelpers.respondWithJson(requests, {});
};
submitOrganizationCredentials = function(fieldValues, errorMessage) {
var requests = AjaxHelpers.requests(this);
// Click change button to render organization credentials view.
$courseVideoSettingsEl.find('.action-change-provider').click();
// Provide organization credentials.
_.each(fieldValues, function(key) {
$courseVideoSettingsEl.find('.' + courseVideoSettingsView.selectedProvider + '-' + key).val(key);
});
// Click save organization credentials button to save credentials.
$courseVideoSettingsEl.find('.action-update-org-credentials').click();
AjaxHelpers.expectRequest(
requests,
'POST',
transcriptCredentialsHandlerUrl,
JSON.stringify(
_.extend(
{provider: courseVideoSettingsView.selectedProvider},
fieldValues,
{global: false}
)
)
);
if (errorMessage) {
// Send error response.
AjaxHelpers.respondWithError(requests, 400, {
error: errorMessage
});
} else {
// Send empty response.
AjaxHelpers.respondWithJson(requests, {});
}
};
beforeEach(function() {
setFixtures(
'<div class="video-transcript-settings-wrapper"></div>' +
......@@ -570,30 +640,27 @@ define(
verifyOrganizationCredentialsView();
});
it('shows api secret input field if selected provider is 3Play Media', function() {
// Set selected provider to 3Play Media
changeProvider('3PlayMedia');
it('shows cielo specific organization credentials fields only', function() {
verifyProviderSelectedView();
// Click change button to render organization credentials view.
$courseVideoSettingsEl.find('.action-change-provider').click();
// Verify 3play api secret and api key are present.
verifyOrganizationCredentialField('api-secret', 'API Secret');
verifyOrganizationCredentialField('api-key', 'API Key');
// Verify api key is present.
verifyCredentialFieldsPresent({
'api-key': 'API Key',
username: 'Username'
});
});
it('does not show api secret input field if selected provider is not 3Play Media', function() {
verifyProviderSelectedView();
// Click change button to render organization credentials view.
$courseVideoSettingsEl.find('.action-change-provider').click();
// Verify 3Play Media api secret is not present.
expect(
$courseVideoSettingsEl.find('.' + courseVideoSettingsView.selectedProvider + '-api-secret')
).not.toExist();
it('shows 3play specific organization credentials fields only', function() {
// Set selected provider to 3Play Media
changeProvider('3PlayMedia');
// Verify api key is present.
verifyOrganizationCredentialField('api-key', 'API Key');
// Verify api key and api secret input fields are present.
verifyCredentialFieldsPresent({
'api-key': 'API Key',
'api-secret': 'API Secret'
});
});
it('shows warning message when changing organization credentials if present already', function() {
......@@ -647,119 +714,40 @@ define(
);
});
it('saves organization credentials on clicking save credentials button', function() {
var requests = AjaxHelpers.requests(this);
it('saves cielo organization credentials on clicking save credentials button', function() {
verifyProviderSelectedView();
// Click change button to render organization credentials view.
$courseVideoSettingsEl.find('.action-change-provider').click();
// Set organization credentials so as to pass validations.
$courseVideoSettingsEl.find('.' + courseVideoSettingsView.selectedProvider + '-api-key').val('testkey');
// Click save organization credentials button to save credentials.
$courseVideoSettingsEl.find('.action-update-org-credentials').click();
AjaxHelpers.expectRequest(
requests,
'POST',
transcriptCredentialsHandlerUrl,
JSON.stringify({
provider: activeTranscriptPreferences.provider,
global: false
})
);
// Send empty response.
AjaxHelpers.respondWithJson(requests, {});
submitOrganizationCredentials({
api_key: 'api-key',
username: 'username'
});
// Verify that success message is shown.
verifyMessage(
'success',
transcriptionPlans[courseVideoSettingsView.selectedProvider].display_name + ' credentials saved'
);
verifyCredentialsSaved();
});
it('shows selected provider view afer organization credentials saved', function() {
var requests = AjaxHelpers.requests(this);
renderCourseVideoSettingsView(null, transcriptionPlans);
// Verify selected provider view is not shown.
expect(
$courseVideoSettingsEl.find('.transcript-provider-wrapper .selected-transcript-provider')
).not.toExist();
// Verify provider list view is shown.
verifyProviderList(providers.none);
// Check Cielo24 provider
changeProvider('Cielo24');
verifyProviderList(providers.Cielo24);
// Set organization credentials so as to pass validations.
$courseVideoSettingsEl.find('.' + courseVideoSettingsView.selectedProvider + '-api-key').val('testkey');
// Click save organization credentials button to save credentials.
$courseVideoSettingsEl.find('.action-update-org-credentials').click();
AjaxHelpers.expectRequest(
requests,
'POST',
transcriptCredentialsHandlerUrl,
JSON.stringify({
provider: activeTranscriptPreferences.provider,
global: false
})
);
// Send empty response.
AjaxHelpers.respondWithJson(requests, {});
it('saves 3Play organization credentials on clicking save credentials button', function() {
verifyProviderSelectedView();
// Verify that success message is shown.
verifyMessage(
'success',
transcriptionPlans[courseVideoSettingsView.selectedProvider].display_name + ' credentials saved'
);
// Set selected provider to 3Play Media
changeProvider('3PlayMedia');
// Shows selected provider view after credentials are saved.
verifyProviderSelectedView();
submitOrganizationCredentials({
api_key: 'api-key',
api_secret_key: 'api-secret'
});
// Verify provider list view is not shown.
expect(
$courseVideoSettingsEl.find('.transcript-provider-wrapper .transcript-provider-group')
).not.toExist();
verifyCredentialsSaved();
});
it('shows error message on saving organization credentials if server sends error', function() {
var requests = AjaxHelpers.requests(this);
verifyProviderSelectedView();
// Click change button to render organization credentials view.
$courseVideoSettingsEl.find('.action-change-provider').click();
// Set organization credentials so as to pass validations.
$courseVideoSettingsEl.find('.' + courseVideoSettingsView.selectedProvider + '-api-key').val('testkey');
// Click save organization credentials button to save credentials.
$courseVideoSettingsEl.find('.action-update-org-credentials').click();
AjaxHelpers.expectRequest(
requests,
'POST',
transcriptCredentialsHandlerUrl,
JSON.stringify({
provider: activeTranscriptPreferences.provider,
global: false
})
);
// Send error response.
AjaxHelpers.respondWithError(requests, 400, {
error: 'Error message'
});
submitOrganizationCredentials({
api_key: 'api-key',
username: 'username'
}, 'Error saving credentials');
// Verify that error message is shown.
verifyMessage('error', 'Error message');
verifyMessage('error', 'Error saving credentials');
});
// TODO: Add more tests like clicking on add language, remove and their scenarios and some other tests
......
cms/static/js/views/course_video_settings.js
......@@ -606,6 +606,7 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
validateOrganizationCredentials: function() {
var $OrganizationApiSecretWrapperEl,
$OrganizationUsernameWrapperEl,
isValid = true,
$OrganizationApiKeyWrapperEl = this.$el.find('.' + this.selectedProvider + '-api-key-wrapper');
......@@ -630,6 +631,14 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
} else {
this.clearPreferenceErrorState($OrganizationApiSecretWrapperEl);
}
} else {
$OrganizationUsernameWrapperEl = this.$el.find('.' + this.selectedProvider + '-username-wrapper');
if ($OrganizationUsernameWrapperEl.find('input').val() === '') {
isValid = false;
this.addErrorState($OrganizationUsernameWrapperEl);
} else {
this.clearPreferenceErrorState($OrganizationUsernameWrapperEl);
}
}
return isValid;
......@@ -673,14 +682,25 @@ function($, Backbone, _, gettext, moment, ViewUtils, HtmlUtils, StringUtils, Tra
},
saveOrganizationCredentials: function() {
var self = this;
var self = this,
username,
apiSecret,
apiKey = this.$el.find('.' + this.selectedProvider + '-api-key').val();
// First clear response status if present already
this.clearResponseStatus();
// TODO: Send actual organization credentials.
if (this.selectedProvider === THREE_PLAY_MEDIA) {
apiSecret = this.$el.find('.' + this.selectedProvider + '-api-secret').val();
} else {
username = this.$el.find('.' + this.selectedProvider + '-username').val();
}
$.postJSON(self.transcriptCredentialsHandlerUrl, {
provider: self.selectedProvider,
api_key: apiKey,
api_secret_key: apiSecret,
username: username,
global: false // Do not trigger global AJAX error handler
}, function() {
self.$el.find('.organization-credentials-wrapper').hide();
......
cms/static/sass/views/_video-upload.scss
......@@ -86,13 +86,10 @@
.organization-credentials-content {
margin-top: ($baseline*1.6);
.org-credentials-wrapper input {
width: 75%;
margin: ($baseline*0.8) 0;
}
.action-update-org-credentials {
margin-top: ($baseline*1.6);
width: 65%;
margin-top: ($baseline*0.8);
display: inline-block;
}
}
.transcript-preferance-wrapper {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment