Skip to content

Commit

Permalink
Add js test for analytics event on LMS receipt page
Browse files Browse the repository at this point in the history
ECOM-4281
  • Loading branch information
Ahsan Ulhaq committed May 12, 2016
1 parent 76449b6 commit 6d41a0d
Show file tree
Hide file tree
Showing 7 changed files with 237 additions and 18 deletions.
26 changes: 10 additions & 16 deletions lms/static/js/commerce/views/receipt_view.js
Expand Up @@ -3,7 +3,7 @@
*/
var edx = edx || {};

(function ($, _, _s, Backbone) {
(function ($, _, Backbone) {
'use strict';

edx.commerce = edx.commerce || {};
Expand All @@ -19,11 +19,6 @@ var edx = edx || {};
this.useEcommerceApi = this.ecommerceBasketId || this.ecommerceOrderNumber;
_.bindAll(this, 'renderReceipt', 'renderError', 'getProviderData', 'renderProvider', 'getCourseData');

/* Mix non-conflicting functions from underscore.string (all but include, contains, and reverse) into
* the Underscore namespace.
*/
_.mixin(_s.exports());

this.render();
},

Expand Down Expand Up @@ -125,17 +120,16 @@ var edx = edx || {};
* @return {object} JQuery Promise.
*/
getReceiptData: function (orderId) {
var urlFormat = '/shoppingcart/receipt/%s/';
var urlFormat = '/shoppingcart/receipt/{orderId}/';

if (this.ecommerceOrderNumber) {
urlFormat = '/api/commerce/v1/orders/%s/';
urlFormat = '/api/commerce/v1/orders/{orderId}/';
} else if (this.ecommerceBasketId){
urlFormat = '/api/commerce/v0/baskets/%s/order/';
urlFormat = '/api/commerce/v0/baskets/{orderId}/order/';
}


return $.ajax({
url: _.sprintf(urlFormat, orderId),
url: edx.StringUtils.interpolate(urlFormat, {orderId: orderId}),
type: 'GET',
dataType: 'json'
}).retry({times: 5, timeout: 2000, statusCodes: [404]});
Expand All @@ -146,10 +140,10 @@ var edx = edx || {};
* @return {object} JQuery Promise.
*/
getProviderData: function (providerId) {
var providerUrl = '/api/credit/v1/providers/%s/';
var providerUrl = '/api/credit/v1/providers/{providerId}/';

return $.ajax({
url: _.sprintf(providerUrl, providerId),
url: edx.StringUtils.interpolate(providerUrl, {providerId: providerId}),
type: 'GET',
dataType: 'json',
contentType: 'application/json',
Expand All @@ -164,9 +158,9 @@ var edx = edx || {};
* @return {object} JQuery Promise.
*/
getCourseData: function (courseId) {
var courseDetailUrl = '/api/course_structure/v0/courses/%s/';
var courseDetailUrl = '/api/course_structure/v0/courses/{courseId}/';
return $.ajax({
url: _.sprintf(courseDetailUrl, courseId),
url: edx.StringUtils.interpolate(courseDetailUrl, {courseId: courseId}),
type: 'GET',
dataType: 'json'
});
Expand Down Expand Up @@ -306,7 +300,7 @@ var edx = edx || {};
el: $('#receipt-container')
});

})(jQuery, _, _.str, Backbone); // jshint ignore:line
})(jQuery, _, Backbone); // jshint ignore:line

function completeOrder(event) { // jshint ignore:line
var courseKey = $(event).data("course-key"),
Expand Down
18 changes: 18 additions & 0 deletions lms/static/js/fixtures/commerce/checkout_receipt.html
@@ -0,0 +1,18 @@
<div id="error-container" class="hidden">
<div id="error" class="wrapper-msg wrapper-msg-activate">
<div class=" msg msg-activate">
<span class="msg-icon icon fa fa-exclamation-triangle" aria-hidden="true"></span>

<div class="msg-content">
<h3 class="title">
Error
</h3>
<div class="copy">
<p>dummy error text</p>
</div>
</div>
</div>
</div>
</div>


9 changes: 9 additions & 0 deletions lms/static/js/fixtures/commerce/non_verified_receipt.html
@@ -0,0 +1,9 @@
<div class="container">
<section class="wrapper carousel">
<div id="receipt-container" class="pay-and-verify hidden" data-is-payment-complete='True'
data-platform-name='edx-platform' data-verified='False' data-username='user-1'>
<h2>Loading Order Data...</h2>
<span>Please wait while we retrieve your order details.</span>
</div>
</section>
</div>
9 changes: 9 additions & 0 deletions lms/static/js/fixtures/commerce/verified_receipt.html
@@ -0,0 +1,9 @@
<div class="container">
<section class="wrapper carousel">
<div id="receipt-container" class="pay-and-verify hidden" data-is-payment-complete='True'
data-platform-name='edx-platform' data-verified='True' data-username='user-1'>
<h2>Loading Order Data...</h2>
<span>Please wait while we retrieve your order details.</span>
</div>
</section>
</div>
182 changes: 182 additions & 0 deletions lms/static/js/spec/commerce/receipt_spec.js
@@ -0,0 +1,182 @@
define([
'jquery', 'jquery.ajax-retry',
'js/commerce/views/receipt_view', 'common/js/spec_helpers/ajax_helpers'
],
function ($, AjaxRetry, ReceiptView, AjaxHelpers){
'use strict';
describe('edx.commerce.ReceiptView', function() {
var data, courseResponseData, providerResponseData = null;

var createReceiptView = function() {
return new ReceiptView({el: $('#receipt-container')});
};

var loadReceiptFixture = function() {
var receiptFixture = readFixtures('templates/commerce/receipt.underscore');
appendSetFixtures(
'<script id=\"receipt-tpl\" type=\"text/template\" >' + receiptFixture + '</script>'
);
};

var loadNonVerifiedReceiptFixture = function() {
var receiptFixture = readFixtures('js/fixtures/commerce/non_verified_receipt.html');
appendSetFixtures(receiptFixture);
};

var loadVerifiedReceiptFixture = function() {
var receiptFixture = readFixtures('js/fixtures/commerce/verified_receipt.html');
appendSetFixtures(receiptFixture);
};

var mockRequests = function(requests, method, apiUrl, responseData) {
AjaxHelpers.expectRequest(requests, method, apiUrl);
AjaxHelpers.respondWithJson(requests, responseData);
};

var mockRender = function() {
var requests = AjaxHelpers.requests(this);
var view = createReceiptView();
view.useEcommerceApi = true;
view.ecommerceOrderNumber = 'EDX-123456';
view.render();
mockRequests(requests, 'GET', '/api/commerce/v1/orders/EDX-123456/', data);

mockRequests(
requests, 'GET', '/api/course_structure/v0/courses/course-v1:edx+dummy+2015_T3/', courseResponseData
);

mockRequests(requests, 'GET', '/api/credit/v1/providers/edx/', providerResponseData);
};

beforeEach(function(){
loadFixtures('js/fixtures/commerce/checkout_receipt.html');

data = {
"status": "Open",
"billed_to": {
"city": "dummy city",
"first_name": "john",
"last_name": "doe",
"country": "AL",
"line2": "line2",
"line1": "line1",
"state": "",
"postcode": "12345"
},
"lines": [
{
"status": "Open",
"unit_price_excl_tax": "10.00",
"product": {
"attribute_values": [
{
"name": "certificate_type",
"value": "verified"
},
{
"name": "course_key",
"value": "course-v1:edx+dummy+2015_T3"
},
{
"name": "credit_provider",
"value": "edx"
}
],
"stockrecords": [
{
"price_currency": "USD",
"product": 123,
"partner_sku": "1234ABC",
"partner": 1,
"price_excl_tax": "10.00",
"id": 123
}
],
"product_class": "Seat",
"title": "Dummy title",
"url": "https://ecom.edx.org/api/v2/products/123/",
"price": "10.00",
"expires": null,
"is_available_to_buy": true,
"id": 123,
"structure": "child"
},
"line_price_excl_tax": "10.00",
"description": "dummy description",
"title": "dummy title",
"quantity": 1
}
],
"number": "EDX-123456",
"date_placed": "2016-01-01T01:01:01Z",
"currency": "USD",
"total_excl_tax": "10.00"
};
providerResponseData = {
"id": "edx",
"display_name": "edX",
"url": "http://www.edx.org",
"status_url": "http://www.edx.org/status",
"description": "Nothing",
"enable_integration": false,
"fulfillment_instructions": "",
"thumbnail_url": "http://edx.org/thumbnail.png"
};
courseResponseData = {
"id": "course-v1:edx+dummy+2015_T3",
"name": "receipt test",
"category": "course",
"org": "edx",
"run": "2015_T2",
"course": "CS420",
"uri": "http://test.com/api/course_structure/v0/courses/course-v1:edx+dummy+2015_T3/",
"image_url": "/test.jpg",
"start": "2030-01-01T00:00:00Z",
"end": null
};

});

it('sends analytic event when verified receipt is rendered', function() {
loadVerifiedReceiptFixture();
loadReceiptFixture();
mockRender();
expect(window.analytics.track).toHaveBeenCalledWith(
'Completed Order',
{
orderId: 'EDX-123456',
total: '10.00',
currency: 'USD'
}
);

});

it('sends analytic event when non verified receipt is rendered', function() {
loadNonVerifiedReceiptFixture();
loadReceiptFixture();
mockRender();
expect(window.analytics.track).toHaveBeenCalledWith(
'Completed Order',
{
orderId: 'EDX-123456',
total: '10.00',
currency: 'USD'
}
);

});

it('renders a receipt correctly', function() {
var view;
loadVerifiedReceiptFixture();
loadReceiptFixture();
view = createReceiptView();

mockRender();
expect(view.$('.course_name_placeholder').text()).toContain('receipt test');
});

});
}
);
7 changes: 7 additions & 0 deletions lms/static/js/spec/main.js
Expand Up @@ -14,6 +14,7 @@
'jquery.markitup': 'xmodule_js/common_static/js/vendor/markitup/jquery.markitup',
'jquery.leanModal': 'xmodule_js/common_static/js/vendor/jquery.leanModal',
'jquery.ajaxQueue': 'xmodule_js/common_static/js/vendor/jquery.ajaxQueue',
'jquery.ajax-retry':'js/vendor/jquery.ajax-retry',
'jquery.smoothScroll': 'xmodule_js/common_static/js/vendor/jquery.smooth-scroll.min',
'jquery.scrollTo': 'xmodule_js/common_static/js/vendor/jquery.scrollTo-1.4.2-min',
'jquery.timepicker': 'xmodule_js/common_static/js/vendor/timepicker/jquery.timepicker',
Expand Down Expand Up @@ -72,6 +73,7 @@

// Manually specify LMS files that are not converted to RequireJS
'history': 'js/vendor/history',
'js/commerce/views/receipt_view': 'js/commerce/views/receipt_view',
'js/staff_debug_actions': 'js/staff_debug_actions',
'js/vendor/jquery.qubit': 'js/vendor/jquery.qubit',
'js/utils/navigation': 'js/utils/navigation',
Expand Down Expand Up @@ -314,6 +316,10 @@
exports: 'js/ccx/schedule',
deps: ['jquery', 'underscore', 'backbone', 'gettext', 'moment']
},
'js/commerce/views/receipt_view': {
exports: 'edx.commerce.ReceiptView',
deps: ['jquery', 'backbone', 'underscore', 'string_utils']
},

// Backbone classes loaded explicitly until they are converted to use RequireJS
'js/instructor_dashboard/ecommerce': {
Expand Down Expand Up @@ -762,6 +768,7 @@
'js/spec/learner_dashboard/program_card_view_spec.js',
'js/spec/learner_dashboard/certificate_view_spec.js',
'js/spec/api_admin/catalog_preview_spec.js',
'js/spec/commerce/receipt_spec.js'
];

for (var i = 0; i < testFiles.length; i++) {
Expand Down
4 changes: 2 additions & 2 deletions lms/templates/commerce/receipt.underscore
Expand Up @@ -89,13 +89,13 @@
<% if ( verified || is_request_in_themed_site) { %>
<a class="next action-primary right" href="/dashboard"><%- gettext( "Go to Dashboard" ) %></a>
<% } else { %>
<a id="verify_later_button" class="next action-secondary verify-later nav-link" href="/dashboard" data-tooltip="<%- _.sprintf( gettext( "If you don't verify your identity now, you can still explore your course from your dashboard. You will receive periodic reminders from %(platformName)s to verify your identity." ), { platformName: platformName } ) %>">
<a id="verify_later_button" class="next action-secondary verify-later nav-link" href="/dashboard" data-tooltip="<%- edx.StringUtils.interpolate( gettext( "If you don't verify your identity now, you can still explore your course from your dashboard. You will receive periodic reminders from {platformName} to verify your identity." ), { platformName: platformName } ) %>">
<%- gettext( "Want to confirm your identity later?" ) %>
</a>

<a id="verify_now_button"
class="next action-primary right"
href="<%- _.sprintf( '/verify_student/verify-now/%(courseKey)s/', { courseKey: courseKey } ) %>"
href="<%- edx.StringUtils.interpolate( '/verify_student/verify-now/{courseKey}/', { courseKey: courseKey } ) %>"
>
<%- gettext( "Verify Now" ) %>
</a>
Expand Down

0 comments on commit 6d41a0d

Please sign in to comment.