Add disqus-on-ready callback to dirDisqus

Fix for disqus unit test

Author: Michal Kurtak

package.json

@@ -6,6 +6,7 @@
   "author": "Michael Bromley",
   "license": "MIT",
   "devDependencies": {
+    "karma": "~0.12.0",
     "bower": "^1.3.1",
     "grunt": "~0.4.2",
     "grunt-contrib-copy": "^0.5.0",

src/directives/disqus/README.md

@@ -52,6 +52,7 @@ on the directive's element tag. For more information on the available config var
             disqus-config-language="{{ post.lang }}"
             disqus-remote-auth-s3="{{remote_auth_s3}}"
             disqus-api-key="{{public_api_key}}"
+            disqus-on-ready="ready()"
             ready-to-bind="{{ loaded }}"
             >
 </dir-disqus>
@@ -99,3 +100,8 @@ function myController($scope, $http) {
 
  If you omit the `ready-to-bind` attribute, the Disqus widget will be created immediately. This is okay so long as
  you don't rely on interpolated data which is not available on page load.
+
+ ## `disqus-on-ready` attribute
+
+ If Disqus is rendered, `disqus-on-ready` function will be called. Callback is registered to disqus by similar technique
+ as explained in [this post](https://help.disqus.com/customer/portal/articles/466258-capturing-disqus-commenting-activity-via-callbacks).

src/directives/disqus/dirDisqus.js

@@ -37,6 +37,7 @@
                 disqus_config_language : '@disqusConfigLanguage',
                 disqus_remote_auth_s3 : '@disqusRemoteAuthS3',
                 disqus_api_key : '@disqusApiKey',
+                disqus_on_ready: "&disqusOnReady",
                 readyToBind: "@"
             },
             template: '<div id="disqus_thread"></div><a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>',
@@ -56,7 +57,7 @@
                         isReady = "true";
                     }
                     if (scope.$eval(isReady)) {
-                      console.log('remote'+scope.disqus_remote_auth_s3);
+                        console.log('remote'+scope.disqus_remote_auth_s3);
                         // put the config variables into separate global vars so that the Disqus script can see them
                         $window.disqus_shortname = scope.disqus_shortname;
                         $window.disqus_identifier = scope.disqus_identifier;
@@ -67,8 +68,12 @@
                         $window.disqus_config =  function () {
                             this.language = scope.disqus_config_language;
                             this.page.remote_auth_s3 = scope.disqus_remote_auth_s3;
-                            this.page.api_key =scope.disqus_api_key;
-
+                            this.page.api_key = scope.disqus_api_key;
+                            if (scope.disqus_on_ready) {
+                                this.callbacks.onReady = [function () {
+                                    scope.disqus_on_ready();
+                                }];
+                            }
                         };
                         // get the remote Disqus script and insert it into the DOM, but only if it not already loaded (as that will cause warnings)
                         if (!$window.DISQUS) {
@@ -94,4 +99,4 @@
         };
     }]);
 
-})();
+})();

src/directives/disqus/dirDisqus.spec.js

@@ -3,7 +3,7 @@
  * them on their own using `ddescribe` works okay. Therefore this test is ignored in general unless specifically testing
  * this directive, in which case change `xdescribe` to `ddescribe`.
  */
-xdescribe('dirDisqus directive', function() {
+describe('dirDisqus directive', function() {
     var scope,
         elem,
         compiled,
@@ -19,6 +19,7 @@ xdescribe('dirDisqus directive', function() {
         'disqus-category-id="{{ post.catId }}"' +
         'disqus-disable-mobile="false"' +
         'disqus-config-language="{{ post.lang }}"' +
+        'disqus-on-ready="ready()"' +
         'ready-to-bind="{{ loaded }}">' +
         '</dir-disqus>';
 
@@ -33,6 +34,10 @@ xdescribe('dirDisqus directive', function() {
                 lang: 'en'
             };
             scope.loaded = false;
+            scope.readyCalled = false;
+            scope.ready = function() {
+                scope.readyCalled = true;
+            };
 
             //get the jqLite or jQuery element
             elem = angular.element(html);
@@ -41,14 +46,20 @@ xdescribe('dirDisqus directive', function() {
             compiled = $compile(elem);
 
             //run the compiled view.
-            compiled(scope);
+            var element = compiled(scope);
+
+            var div = document.createElement("div");
+            div.innerHTML = element.html();
 
-            //call digest on the scope!
-            scope.$digest();
+            // Just add disqus to document - it is needed to work embed.js properly
+            document.getElementsByTagName('body')[0].appendChild(div);
         });
     });
 
     it('should not do anything when ready to bind is false', function() {
+        //call digest on the scope!
+        scope.$digest();
+
         expect(elem.find("#disqus_thread")).toBeTruthy();
         expect($("script[src='//shortname.disqus.com/embed.js']").length).toEqual(0);
         expect(window.disqus_shortname).toBeFalsy();
@@ -57,6 +68,7 @@ xdescribe('dirDisqus directive', function() {
         expect(window.disqus_url).toBeFalsy();
         expect(window.disqus_category_id).toBeFalsy();
         expect(window.disqus_disable_mobile).toBeFalsy();
+        expect(scope.readyCalled).toBeFalsy();
         expect(window.language).toBeFalsy();
     });
 
@@ -70,7 +82,16 @@ xdescribe('dirDisqus directive', function() {
         expect(window.disqus_url).toEqual('http://www.test.com');
         expect(window.disqus_category_id).toEqual('999');
         expect(window.disqus_disable_mobile).toEqual('false');
+
+        window.page = {};
+        window.callbacks = {};
         window.disqus_config();
+
         expect(window.language).toEqual('en');
+        expect(window.callbacks.onReady).toBeDefined();
+        expect(window.callbacks.onReady.length).toEqual(1);
+        window.callbacks.onReady[0]();
+        expect(scope.readyCalled).toBeTruthy();
+
     });
 });