Merge pull request #12290 from edx/zub/ecom-4281-add-receipt-page-analytics-event-js-test

Add js test for analytics event on LMS receipt page

lms/static/js/commerce/views/receipt_view.js

@@ -3,7 +3,7 @@
  */
 var edx = edx || {};
 
-(function ($, _, _s, Backbone) {
+(function ($, _, Backbone) {
     'use strict';
 
     edx.commerce = edx.commerce || {};
@@ -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();
         },
 
@@ -124,17 +119,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]});
@@ -145,10 +139,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',
@@ -163,9 +157,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'
             });
@@ -305,7 +299,7 @@ var edx = edx || {};
         el: $('#receipt-container')
     });
 
-})(jQuery, _, _.str, Backbone);
+})(jQuery, _, Backbone);     // jshint ignore:line
 
 function completeOrder(event) {     // jshint ignore:line
     var courseKey = $(event).data("course-key"),

lms/static/js/fixtures/commerce/checkout_receipt.html

+<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>
+
+<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>

lms/static/js/spec/commerce/receipt_spec.js

+define([
+        'js/commerce/views/receipt_view'
+    ],
+    function (){
+        'use strict';
+        describe("edx.commerce.ReceiptView", function(ReceiptView) {
+            var view, data = null;
+
+            beforeEach(function(){
+                loadFixtures("js/fixtures/commerce/checkout_receipt.html");
+
+                var receiptFixture = readFixtures("templates/commerce/receipt.underscore");
+                appendSetFixtures(
+                    "<script id=\"receipt-tpl\" type=\"text/template\" >" + receiptFixture + "</script>"
+                );
+                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"
+                                    }
+                                ],
+                                "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"
+                };
+                view = new ReceiptView({el: $('#receipt-container')});
+                view.renderReceipt(data);
+            });
+            it("sends analytic event when receipt is rendered", function() {
+                expect(window.analytics.track).toHaveBeenCalledWith(
+                    "Completed Order",
+                    {
+                        orderId: "EDX-123456",
+                        total: "10.00",
+                        currency: "USD"
+                    }
+                );
+
+            });
+
+        });
+    }
+);

lms/static/js/spec/main.js

@@ -98,6 +98,7 @@
             'js/bookmarks/views/bookmarks_list': 'js/bookmarks/views/bookmarks_list',
             'js/bookmarks/views/bookmark_button': 'js/bookmarks/views/bookmark_button',
             'js/views/message_banner': 'js/views/message_banner',
+            'js/commerce/views/receipt_view': 'js/commerce/views/receipt_view',
 
             // edxnotes
             'annotator_1.2.9': 'xmodule_js/common_static/js/vendor/edxnotes/annotator-full.min',
@@ -317,6 +318,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': {
@@ -763,7 +768,8 @@
         'js/spec/learner_dashboard/collection_list_view_spec.js',
         'js/spec/learner_dashboard/sidebar_view_spec.js',
         'js/spec/learner_dashboard/program_card_view_spec.js',
-        'js/spec/learner_dashboard/certificate_view_spec.js'
+        'js/spec/learner_dashboard/certificate_view_spec.js',
+        'js/spec/commerce/receipt_spec.js'
     ];
 
     for (var i = 0; i < testFiles.length; i++) {

lms/static/karma_lms.conf.js

@@ -118,7 +118,8 @@ var fixtureFiles = [
     {pattern: 'support/templates/**/*.*', included: false},
     {pattern: 'templates/bookmarks/**/*.*', included: false},
     {pattern: 'templates/learner_dashboard/**/*.*', included: false},
-    {pattern: 'templates/ccx/**/*.*', included: false}
+    {pattern: 'templates/ccx/**/*.*', included: false},
+    {pattern: 'templates/commerce/receipt.underscore', included: false}
 ];
 
 // override fixture path and other config.