perf(login-fire-social): use paper-social-buton and add tests

masonlouchart · masonlouchart · commit a5a771fa0fbf · 2018-08-31T01:04:18.000+02:00
Before this commit the `login-fire-social` element was using the `login-fire-button` element. This
one was embedded behaviors for i18n and authentication. So, when the login-fire-social was
displaying 5 buttons, the behaviors for localize texts and the behaviors for sign-in/up was imported
5 times. Now, using the `paper-social-button` (that does not include behavior at all) the
`login-fire-social` element is lighter, simpler to understand and maintain. This commit also adds
unit test suites.
diff --git a/demo/login-fire-social.html b/demo/login-fire-social.html
@@ -189,10 +189,7 @@ <h3>Signing Out</h3>
             <script>
               function signout() {
                 const demoSnippet = document.getElementById('signing-out-demo');
-                // NOTE: the login-fire-social element is outside of the demo-snippet's shadow root.
-                demoSnippet.querySelector('login-fire-social').$$('login-fire-button').signOut();
-                // You can also use:
-                // demoSnippet.querySelector('login-fire-social').signOut();
+                demoSnippet.querySelector('login-fire-social').signOut();
               }
             </script>
           </template>
diff --git a/login-fire-social.html b/login-fire-social.html
@@ -5,9 +5,10 @@
 LICENSE file or at https://github.com/convoo/login-fire/blob/master/LICENSE.
 -->
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="./login-fire-common-behavior.html">
+<link rel="import" href="./localize-behavior.html">
+<link rel="import" href="./login-fire-social-behavior.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="./login-fire-button.html">
+<link rel="import" href="./paper-social-button.html">
 
 <!--
 A panel of buttons to authenticate a user with federated identity providers such as
@@ -25,30 +26,12 @@
 <login-fire-social app-name="myApp" providers="google, facebook, twitter, github, anonymous"></login-fire-social>
 ```
 
-### Localization
-
-You can specify the following codes and language in a JSON file passed to the
-`localesFile` property to update the text used. Here are the defaults:
-
-```
-"en": {
-  "lf-signup-facebook": "Sign up with Facebook",
-  "lf-signup-google": "Sign up with Google",
-  "lf-signup-twitter": "Sign up with Twitter",
-  "lf-signup-github": "Sign up with GitHub",
-  "lf-signup-anonymous": "Sign up anonymously",
-  "lf-signin-facebook": "Sign in with Facebook",
-  "lf-signin-google": "Sign in with Google",
-  "lf-signin-twitter": "Sign in with Twitter",
-  "lf-signin-github": "Sign in with GitHub",
-  "lf-signin-anonymous": "Sign in anonymously"
-}
-```
-
 ### Styling
 
 Style the buttons with CSS as you would a normal DOM element. The following
-custom properties and mixins are available:
+custom properties and mixins are available. You can find more custom CSS
+properties in the "Styling" section of the `paper-social-button` element
+documentation.
 
 Custom property | Description | Default
 -- | -- | --
@@ -77,55 +60,48 @@
         @apply --login-fire-social;
       }
 
-      login-fire-button {
+      paper-social-button {
         width: 100%;
         margin-bottom: 10px;
       }
 
-      :host([horizontal]) login-fire-button {
+      :host([horizontal]) paper-social-button {
         width: inherit;
         min-width: 140px;
         margin-bottom: 0;
       }
     </style>
 
-    <template is="dom-if" if="[[_showOneButton]]">
-      <login-fire-button
-        app-name="[[appName]]"
-        user="{{_user}}"
-        status-known="{{_statusKnown}}"
-        signed-in="{{_signedIn}}"
+    <template is="dom-if" if="[[_showOneButton]]" restamp>
+      <paper-social-button
+        signed-in="[[_signedIn]]"
         mini$="[[mini]]"
         flat$="[[flat]]"
-        no-sign-in="[[noSignIn]]"
-        no-sign-out="[[noSignOut]]"
-        show-sign-up="{{showSignUp}}"
+        no-sign-in
         locales-file="[[localesFile]]"
         language="[[language]]"
-        debug="[[debug]]">
-      </login-fire-button>
+        in-progress="[[inProgress]]"
+        disabled$="[[inProgress]]"
+        on-tap="signOut">
+      </paper-social-button>
     </template>
 
-    <template is="dom-if" if="[[!_showOneButton]]">
+    <template is="dom-if" if="[[!_showOneButton]]" restamp>
       <template is="dom-repeat" items="{{_providers}}">
-        <login-fire-button
-          id="lfb[[item.id]]"
-          app-name="[[appName]]"
-          provider="[[item.id]]"
-          scopes="[[item.scopes]]"
-          user="{{_user}}"
-          status-known="{{_statusKnown}}"
-          signed-in="{{_signedIn}}"
+        <paper-social-button
+          provider="[[item]]"
+          signed-in="[[_signedIn]]"
           mini$="[[mini]]"
           flat$="[[flat]]"
-          redirect="[[redirect]]"
           no-sign-in="[[noSignIn]]"
           no-sign-out="[[noSignOut]]"
           show-sign-up="{{showSignUp}}"
           locales-file="[[localesFile]]"
           language="[[language]]"
-          debug="[[debug]]">
-        </login-fire-button>
+          in-progress="[[inProgress]]"
+          disabled$="[[inProgress]]"
+          on-tap="_onClick">
+        </paper-social-button>
       </template>
     </template>
 
@@ -135,7 +111,10 @@
   Polymer({
     is: 'login-fire-social',
 
-    behaviors: [Convoo.LoginFireCommonBehavior],
+    behaviors: [
+      Convoo.LocalizeBehavior,
+      Convoo.LoginFireSocialBehavior
+    ],
 
     properties: {
 
@@ -149,6 +128,16 @@
         value: false
       },
 
+      /**
+       * Flat buttons, yes or no.
+       *
+       * @type {Boolean}
+       */
+      flat: {
+        type: Boolean,
+        value: false
+      },
+
       /**
        * Providers names. A list of the providers names, seperated by comma, to
        * use for authentication. A button is displayed for each provider.
@@ -219,22 +208,15 @@
       '_scopesChanged(facebookScopes, githubScopes, googleScopes)'
     ],
 
-    /**
-     * Signs the user out. The provider used for the sign-in has no incidence.
-     */
-    signOut: function() {
-      this.$$('login-fire-button').signOut();
-    },
-
     /**
      * Signs the user in using the target provider.
      *
      * @param  {String} provider name
      */
     signInWith: function(provider) {
-      var btn = this.$$('#lfb' + provider);
-      if (btn) {
-        btn.signIn();
+      let prov = this._providers.find(p => p.id == provider);
+      if (prov) {
+        this._signInWithProvider(prov);
       }
     },
 
@@ -277,12 +259,27 @@
         'github': githubScopes,
         'google': googleScopes
       };
-      this._providers.forEach(function(provider, index) {
+      this._providers.forEach((provider, index) => {
         if (provider.isSocialNetwork) {
           provider.scopes = scopes[provider.id];
           this.notifyPath('_providers.' + index + '.scopes');
         }
-      }.bind(this));
+      });
+    },
+
+    _onClick: function(event) {
+      this._signInWithProvider(event.target.provider);
+    },
+
+    /**
+     * Signs in using the given provider.
+     *
+     * @param {Object} provider the provider to be used to sign in
+     */
+    _signInWithProvider: function(provider) {
+      this.set('provider', provider.id);
+      this.set('scopes', provider.scopes);
+      this.signInOrOut();
     }
   });
   </script>
diff --git a/test/login-fire-social_test.html b/test/login-fire-social_test.html
@@ -0,0 +1,122 @@
+<!doctype html>
+
+<html>
+
+<head>
+  <title>login-fire-social test</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <link rel="import" src="../../test-fixture/test-fixture.html">
+
+  <link rel="import" href="../../polymerfire/firebase-app.html">
+  <link rel="import" href="../login-fire-social.html">
+</head>
+
+<body>
+
+  <firebase-app name="loginFireSocialTest" api-key="AIzaSyAhoCXxkY-ffNwA_7L7HIwBVpASYj1btNE" auth-domain="convoo-login-demo.firebaseapp.com" database-url="https://convoo-login-demo.firebaseio.com">
+  </firebase-app>
+
+  <test-fixture id="Default">
+    <template>
+      <login-fire-social app-name="loginFireSocialTest"></login-fire-social>
+    </template>
+  </test-fixture>
+
+  <script>
+    /**
+     * Adds delay to a function call. Used for assertions after templates "dom-if"
+     * and "dom-repeat" restamping. Seems those tempaltes need time for re-redering.
+     */
+    const afterNextRender = (f, delay = 5) => setTimeout(f, delay);
+
+    describe('Behavior Audit - Fixture: Default', function() {
+      let social;
+
+      beforeEach(function(done) {
+        social = fixture('Default');
+        afterNextRender(done);
+      });
+
+      it('Should display only "Anonymous" button', function() {
+        let buttons = (social.shadowRoot || social).querySelectorAll('paper-social-button');
+        expect(typeof buttons).to.be.Array;
+        expect(buttons.length).to.be.equal(1);
+      });
+
+      it('Should have only "Anonymous" provider in its list', function() {
+        expect(social.providers).to.be.equal('anonymous');
+        expect(social._providers.length).to.be.equal(1);
+        expect(social._providers[0].id).to.be.equal('anonymous');
+      });
+
+      it('Should display buttons in same order as its provider list', function() {
+        social.providers = 'twitter, google, facebook';
+        expect(social._providers.length).to.be.equal(3);
+        expect(social._providers[0].id).to.be.equal('twitter');
+        expect(social._providers[1].id).to.be.equal('google');
+        expect(social._providers[2].id).to.be.equal('facebook');
+      });
+
+      it('Should ignore invalid providers', function() {
+        social.providers = 'facebook, gooooogle, , twitter';
+        expect(social._providers.length).to.be.equal(2);
+        expect(social._providers[0].id).to.be.equal('facebook');
+        expect(social._providers[1].id).to.be.equal('twitter');
+      });
+
+      it('Should sign-in with the provider associated to the clicked button', function(done) {
+        social.providers = 'facebook, google, twitter';
+        afterNextRender(() => {
+          const button = (social.shadowRoot || social).querySelectorAll('paper-social-button')[1];
+          stub('login-fire-social', {
+            signInOrOut: null,
+          });
+          button.addEventListener('click', function(event) {
+            expect(social.provider).to.be.equal('google');
+            expect(social.provider).to.be.equal(event.target.provider.id);
+            done();
+          })
+          button.click();
+        });
+      });
+
+      it('Should display only a sign-out button when user is signed-in', function(done) {
+        social.addEventListener('signedin', function() {
+          afterNextRender(() => {
+            expect(social.signedIn).to.be.true;
+            let buttons = (social.shadowRoot || social).querySelectorAll('paper-social-button');
+            expect(buttons.length).to.be.equal(1);
+            expect(buttons[0]._text).to.contain('Sign out');
+            done();
+          });
+        });
+        (social.shadowRoot || social).querySelector('paper-social-button').click();
+      });
+
+      it('Should apply attribute "flat" on all buttons', function() {
+        social.flat = true;
+        let buttons = social.root.querySelectorAll('paper-social-button');
+        for (const button of buttons) {
+          expect(button.flat).to.be.true;
+        }
+      });
+
+      it('Should apply attribute "mini" on all buttons', function() {
+        social.mini = true;
+        let buttons = social.root.querySelectorAll('paper-social-button');
+        for (const button of buttons) {
+          expect(button.mini).to.be.true;
+        }
+      });
+    });
+
+    a11ySuite('Default', [], function() {
+      social = fixture('Default');
+    });
+  </script>
+</body>
+
+</html>
