Add retrieve and display user info from the store

betagouv · Aug 1, 2017 · f702b47 · f702b47
1 parent e3522ae
commit f702b47
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 21 deletions.
diff --git a/live/app/components/user-logged-menu.js b/live/app/components/user-logged-menu.js
@@ -11,7 +11,7 @@ export default Ember.Component.extend({
 
   init() {
     this._super(...arguments);
-    this.set('_user', this.get('store').queryRecord('user', {}).then((user) => user));
+    this.get('store').queryRecord('user', {}).then((user) => this.set('_user', user));
   },
 
   actions: {

diff --git a/live/app/templates/components/user-logged-menu.hbs b/live/app/templates/components/user-logged-menu.hbs
@@ -1,7 +1,25 @@
-<div class="logged-user-name" {{action 'toggleUserMenu'}} role="button" aria-haspopup="true"
-     aria-expanded="{{_canDisplayMenu}}">
-  <a href="#" role="button" class="logged-user-name__link">
-    {{concat  user.firstName ' '  user.lastName}}
-    <span class="caret"></span>
-  </a>
-</div>
+{{#if _user}}
+  <div class="logged-user-name" {{action 'toggleUserMenu'}} role="button" aria-haspopup="true"
+       aria-expanded="{{_canDisplayMenu}}">
+    <a href="#" role="button" class="logged-user-name__link">
+      {{concat  _user.firstName ' '  _user.lastName}}
+      <span class="caret"></span>
+    </a>
+  </div>
+  {{#if _canDisplayMenu}}
+    <div class="logged-user-menu">
+      <ul class="logged-user-menu__list">
+        <li class="logged-user-menu__item user-menu-item">
+          <div class="user-menu-item__details-firstname"> {{_user.firstName}}</div>
+          <div class="user-menu-item__details-email">{{_user.email}}</div>
+          <div class="user-menu-item__account-link">
+            <button>Mon compte</button>
+          </div>
+
+        </li>
+        <li class="logged-user-menu__item user-menu__item--logout">
+          {{#link-to 'logout' class="logged-user-menu__item-logout"}}se déconnecter{{/link-to}}</li>
+      </ul>
+    </div>
+  {{/if}}
+{{/if}}
diff --git a/live/tests/integration/components/user-logged-menu-test.js b/live/tests/integration/components/user-logged-menu-test.js
@@ -2,15 +2,29 @@ import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import { setupComponentTest } from 'ember-mocha';
 import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+import wait from 'ember-test-helpers/wait';
 
-describe.only('Integration | Component | user logged menu', function() {
+describe('Integration | Component | user logged menu', function() {
   setupComponentTest('user-logged-menu', {
     integration: true
   });
 
-  describe('Default rendering', function() {
+  describe('Default rendering for logged user', function() {
 
     beforeEach(function() {
+      // given
+      this.register('service:store', Ember.Service.extend({
+        queryRecord() {
+          return Ember.RSVP.resolve({
+            firstName: 'FHI',
+            lastName: '4EVER',
+            email: 'FHI@4EVER.fr'
+          });
+        }
+      }));
+      this.inject.service('store', { as: 'store' });
+
       // when
       this.render(hbs`{{user-logged-menu}}`);
     });
@@ -24,7 +38,82 @@ describe.only('Integration | Component | user logged menu', function() {
       // then
       expect(this.$('.logged-user-name')).to.have.length(1);
       expect(this.$('.logged-user-name__link')).to.have.length(1);
+      expect(this.$('.logged-user-name__link').text().trim()).to.be.equal('FHI 4EVER');
+    });
+
+  });
+
+  describe('behavior on user menu', function() {
+
+    it('should hide user menu, when no action on user-name', function() {
+      // when
+      this.render(hbs`{{user-logged-menu}}`);
+
+      // then
+      expect(this.$('.logged-user-menu')).to.have.length(0);
     });
 
+    beforeEach(function() {
+      this.register('service:store', Ember.Service.extend({
+        queryRecord() {
+          return Ember.RSVP.resolve({
+            firstName: 'FHI',
+            lastName: '4EVER',
+            email: 'FHI@4EVER.fr'
+          });
+        }
+      }));
+      this.inject.service('store', { as: 'store' });
+    });
+
+    it('should display a user menu, when user-name is clicked', function() {
+      // given
+      this.render(hbs`{{user-logged-menu}}`);
+
+      // when
+      this.$('.logged-user-name').click();
+
+      return wait().then(() => {
+        // then
+        expect(this.$('.logged-user-menu')).to.have.length(1);
+        expect(this.$('.user-menu-item__details-firstname').text().trim()).to.equal('FHI');
+        expect(this.$('.user-menu-item__details-email').text().trim()).to.equal('FHI@4EVER.fr');
+      });
+    });
+
+    it('should hide user menu, when it was previously open and user-name is clicked one more time', function() {
+      // when
+      this.render(hbs`{{user-logged-menu}}`);
+      this.$('.logged-user-name').click();
+      this.$('.logged-user-name').click();
+
+      return wait().then(() => {
+        // then
+        expect(this.$('.logged-user-menu')).to.have.length(0);
+      });
+    });
+
+  });
+
+  describe('behavior when user is unlogged or not found', function() {
+
+    beforeEach(function() {
+      this.register('service:store', Ember.Service.extend({
+        queryRecord() {
+          return Ember.RSVP.reject();
+        }
+      }));
+      this.inject.service('store', { as: 'store' });
+    });
+
+    it('should not display user information, for unlogged', function() {
+      // when
+      this.render(hbs`{{user-logged-menu}}`);
+
+      // then
+      return wait().then(() => {
+        expect(this.$('.logged-user-name')).to.have.length(0);
+      });
+    });
   });
 });
diff --git a/live/tests/unit/components/user-logged-menu-test.js b/live/tests/unit/components/user-logged-menu-test.js
@@ -3,7 +3,7 @@ import { beforeEach, describe, it } from 'mocha';
 import { setupTest } from 'ember-mocha';
 import Ember from 'ember';
 
-describe.only('Unit | Component | User logged Menu', function() {
+describe('Unit | Component | User logged Menu', function() {
   setupTest('component:user-logged-menu', {});
 
   describe('action#toggleUserMenu', function() {
@@ -64,19 +64,12 @@ describe.only('Unit | Component | User logged Menu', function() {
         this.inject.service('store', { as: 'store' });
       });
 
-      it('should return user info details', function() {
+      it('should correctly call store', function() {
         // when
-        const component = this.subject();
+        this.subject();
 
         // then
-        return component.get('_user').then((user) => {
-          expect(user).to.deep.equal({
-            firstName: 'FHI',
-            lastName: '4EVER',
-            email: 'FHI@4EVER.fr'
-          });
-          expect(queryRecordArgs).to.deep.equal(['user', {}]);
-        });
+        expect(queryRecordArgs).to.deep.equal(['user', {}]);
       });
 
     });