Merge pull request #287 from joelmats/fix-double-render-fb-popup

fix facebook share, double render error
carrot · Feb 17, 2016 · e18752e · e18752e
2 parents 5b3e7e8 + 868d517
commit e18752e
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 12 deletions.
diff --git a/src/share-button.js b/src/share-button.js
@@ -492,11 +492,12 @@ class ShareButton extends ShareUtils {
    */
   _networkFacebook(element) {
     if (this.config.networks.facebook.loadSdk) {
-      if (!window.FB)
-        return console.error('The Facebook JS SDK hasn\'t loaded yet.');
-      this._updateHref(element, 'https://www.facebook.com/sharer/sharer.php', {
-        u: this.config.networks.facebook.url
-      });
+      if (!window.FB) {
+        console.error('The Facebook JS SDK hasn\'t loaded yet.');
+        return this._updateHref(element, 'https://www.facebook.com/sharer/sharer.php', {
+          u: this.config.networks.facebook.url
+        });
+      }
       return FB.ui({
         method:'feed',
         name: this.config.networks.facebook.title,
@@ -505,13 +506,14 @@ class ShareButton extends ShareUtils {
         caption: this.config.networks.facebook.caption,
         description: this.config.networks.facebook.description
       });
-    } else
+    } else {
       return this._updateHref(
         element,
         'https://www.facebook.com/sharer/sharer.php', {
           u: this.config.networks.facebook.url
         }
       );
+    }
   }
 
   /**

diff --git a/tests/features/facebook.feature b/tests/features/facebook.feature
@@ -1,11 +1,29 @@
 Feature: Facebook Network
 
   Background:
-    Given I create a Facebook Share Button
+    Given I create a Facebook Share Button with SDK enabled
 
   @facebook
-  Scenario: Facebook network should be displayed and have the correct URL
+  Scenario: Facebook network should be displayed and have no url
     When I click the Facebook Share Button
     Then I should see the Facebook button
     When I click the Facebook button
-    Then I should have a correct Facebook share url
+    Then I should have no url
+
+  @facebook
+  Scenario: Facebook network should be displayed and have the fallback URL
+    When I click the Facebook Share Button
+    Then I should see the Facebook button
+    When the FB SDK is not loaded
+    And I click the Facebook button
+    Then I should have a PHP Facebook share url
+
+  Background:
+    Given I create a Facebook Share Button with SDK disabled
+
+  @facebook
+  Scenario: Facebook network should be displayed and have the fallback URL
+    When I click the Facebook Share Button
+    Then I should see the Facebook button
+    When I click the Facebook button
+    Then I should have a PHP Facebook share url
diff --git a/tests/fixtures/facebook.html b/tests/fixtures/facebook.html
@@ -39,7 +39,8 @@
           title: "FB Title",
           caption: "FB Caption",
           description: "FB Description",
-          image: "http://carrot.is/img/fb-share.jpg"
+          image: "http://carrot.is/img/fb-share.jpg",
+          loadSdk: true
         }
       },
       ui: {

diff --git a/tests/fixtures/facebook_no_sdk.html b/tests/fixtures/facebook_no_sdk.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Share Button Test: Facebook</title>
+  <link rel="stylesheet" type="text/css" href="../../dist/share-button.min.css">
+  <style>
+    html {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    share-button {
+      position: relative;
+      top: 0;
+      left: 50%;
+      bottom: 0;
+      right: 0;
+      z-index: 100;
+    }
+  </style>
+</head>
+
+<body>
+  <share-button></share-button>
+  <script src='../../dist/share-button.min.js'></script>
+  <script>
+    var shareButton = new ShareButton({
+      networks: {
+        pinterest: { enabled: false },
+        twitter: { enabled: false },
+        whatsapp: { enabled: false },
+        googlePlus: { enabled: false },
+        reddit: { enabled: false },
+        linkedin: { enabled: false },
+        email: { enabled: false },
+        facebook: {
+          url: 'http://www.example.com',
+          title: "FB Title",
+          caption: "FB Caption",
+          description: "FB Description",
+          image: "http://carrot.is/img/fb-share.jpg",
+          loadSdk: false
+        }
+      },
+      ui: {
+        flyout: 'center bottom'
+      }
+    });
+  </script>
+</body>
+
+</html>
diff --git a/tests/steps/facebook.coffee b/tests/steps/facebook.coffee
@@ -1,7 +1,10 @@
 module.exports = ->
-  @Given /^I create a Facebook Share Button$/, () ->
+  @Given /^I create a Facebook Share Button with SDK enabled$/, () ->
     @driver.visit("http://localhost:8000/tests/fixtures/facebook.html")
 
+  @Given /^I create a Facebook Share Button with SDK disabled$/, () ->
+    @driver.visit("http://localhost:8000/tests/fixtures/facebook_no_sdk.html")
+
   @When /^I click the Facebook Share Button$/, () ->
     new @Widgets.ShareButton().click()
 
@@ -19,6 +22,10 @@ module.exports = ->
       )
       .should.eventually.have.length(1)
 
+  @When /^the FB SDK is not loaded$/, () ->
+    # Simulate FB didn't load.
+    new @Widgets.ShareButton().removeFacebookSDK()
+
   @When /^I click the Facebook button$/, () ->
     new @Widgets
       .ShareButtonNetworks()
@@ -28,7 +35,7 @@ module.exports = ->
       .then (list) ->
         list[0].click('a')
 
-  @Then /^I should have a correct Facebook share url$/, () ->
+  @Then /^I should have a PHP Facebook share url$/, () ->
     new @Widgets
       .ShareButtonNetworks()
       .filter( (item) ->
@@ -39,3 +46,15 @@ module.exports = ->
           selector: 'a',
           attribute: 'href'
         ).should.eventually.eq('https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com')
+
+  @Then /^I should have no url$/, () ->
+    new @Widgets
+      .ShareButtonNetworks()
+      .filter( (item) ->
+        item.hasClass('facebook')
+      )
+      .then (list) ->
+        list[0].getAttribute(
+          selector: 'a',
+          attribute: 'href'
+        ).should.eventually.eq(null)
diff --git a/tests/widgets/shareButton.coffee b/tests/widgets/shareButton.coffee
@@ -15,6 +15,9 @@ module.exports = ->
     addAnimate: ->
       @addClass('animate')
 
+    removeFacebookSDK: ->
+      @driver.executeScript('window.FB = null')
+
   @Widgets.SBDiv = @Widget.extend
     root: 'div'