Login block component - initial implementation

Carlos Purificação · Michel Felipe · Michel Felipe · Michel Felipe
1 parent 99531814
Showing 7 changed files with 210 additions and 4 deletions Show diff stats
src/app/layout/blocks/login-block/login-block.component.spec.ts
src/app/layout/blocks/login-block/login-block.component.ts
src/app/layout/blocks/login-block/login-block.html
src/app/login/session.service.ts
src/app/main/main.component.ts
src/spec/component-test-helper.ts
src/spec/mocks.ts
@@ -0,0 +1,108 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Injectable, Provider, provide} from "ng-forward";
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {LoginBlockComponent} from './login-block.component';
+import * as helpers from "./../../../../spec/helpers";
+import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../../login";
+
+const htmlTemplate: string = '<noosfero-login-block></noosfero-login-block>';
+
+describe("Components", () => {
+
+    describe("Login Block Component", () => {
+        let helper: ComponentTestHelper<LoginBlockComponent>;
+        let person: any = null;
+
+        /**
+         * Mock objects
+         */
+        let authService: any = helpers.mocks.authService;
+        let user = <noosfero.User>{ person: person };
+        let sessionService: any = <any>helpers.mocks.sessionWithCurrentUser(user);
+        let state = jasmine.createSpyObj("$state", ["go"]);
+        let scope = helpers.mocks.scopeWithEvents;
+
+        let providers = [
+            new Provider('SessionService', { useValue: sessionService }),
+            new Provider('$state', { useValue: state }),
+            new Provider('AuthService', { useValue: authService }),
+            new Provider('$scope', { useValue: scope })
+        ];
+
+        beforeEach( angular.mock.module("templates") );
+
+        beforeEach( (done: Function) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [LoginBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<LoginBlockComponent>(cls, done);
+        });
+
+        it("expect person to be null with no logged in user", () => {
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        it("expect person to be defined when user login", () => {
+            // Executes the login method on the component
+            doComponentLogin();
+            expect(helper.component.currentUser.person).toBe(person);
+        });
+
+        it("expect person to be null when user logout", () => {
+            // First do a login
+            doComponentLogin();
+            // The logout the user
+            doComponentLogout();
+            // Check if the current user was cleared
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        /**
+         * Execute the logout method on the target component
+         */
+        function doComponentLogout() {
+            // Create a mock for the AuthService logout method
+            spyOn(authService, "logout");
+            helper.component.logout();
+            expect(authService.logout).toHaveBeenCalled();
+            // After the component logout method execution, fire the
+            // AuthService event
+            simulateLogout();
+        }
+
+        /**
+         * Execute the login method on the target component
+         */
+        function doComponentLogin() {
+            // Create a mock for the AuthService login method
+            spyOn(authService, "login");
+            helper.component.login();
+            expect(authService.login).toHaveBeenCalled();
+            // After the component login method execution, fire the
+            // AuthService event
+            simulateLogin();
+        }
+
+        /**
+         * Simulate the AuthService loginSuccess event
+         */
+        function simulateLogin() {
+            let localScope: ng.IScope = helper.component["$scope"];
+            localScope.$emit(AUTH_EVENTS.loginSuccess);
+        }
+
+        /**
+         * Simulate the AuthService logoutSuccess event
+         */
+        function simulateLogout() {
+            let localScope: ng.IScope = helper.component["$scope"];
+            localScope.$emit(AUTH_EVENTS.logoutSuccess);
+        }
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,73 @@
+import {Input, Inject, Component} from "ng-forward";
+import {SessionService, AuthService, IAuthEvents, AUTH_EVENTS} from "./../../../login";
+
+/**
+ * @ngdoc controller
+ * @name layout.blocks.LoginBlockComponent
+ * @description
+ *  The Noosfero block responible for presenting a login form and user status 
+ */
+@Component({
+    selector: "noosfero-login-block",
+    templateUrl: 'app/layout/blocks/login-block/login-block.html',
+})
+@Inject("SessionService", "$state", 'AuthService', "$scope")
+export class LoginBlockComponent {
+
+    /**
+     * @ngdoc property
+     * @name currentUser
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The current loged in user
+     */
+    currentUser: noosfero.User;
+
+    /**
+     * @ngdoc property
+     * @name credentials
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The credentials of the currentUser
+     */
+    credentials: noosfero.Credentials;
+
+    constructor(
+        private session: SessionService,
+        private $state: ng.ui.IStateService,
+        private authService: AuthService,
+        private $scope: ng.IScope) {
+        this.currentUser = this.session.currentUser();
+
+        this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+        this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+    }
+
+    /**
+     * @ngdoc method
+     * @name login
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logs in the user using its credentials
+     */
+    login() {
+        this.authService.login(this.credentials);
+    }
+
+    /**
+     * @ngdoc method
+     * @name logout
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logout the user
+     */
+    logout() {
+        this.authService.logout();
+    };
+}
@@ -0,0 +1,23 @@
+<div class="logged-user-info" ng-show="ctrl.currentUser">
+    <h4>Logged in as {{ctrl.currentUser.person.identifier}}</h4>
+    <ul>
+      <li>User since {{ctrl.currentUser.created_at.month}}/{{ctrl.currentUser.created_at.year}}</li>
+      <li><a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})">Profile Homepage</a></li>
+    </ul>
+    <div class="user-actions">
+      <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+    </div>    
+</div>
+<div class="logged-user-info" ng-show="!ctrl.currentUser">
+  <form>
+    <div class="form-group">
+      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
+    </div>
+    <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
+  </form>
+</div>
 \ No newline at end of file
@@ -11,13 +11,11 @@ export class SessionService {
     create(data: UserResponse): noosfero.User {
         this.$localStorage.currentUser = data.user;
-        this.$log.debug('User session created.', this.$localStorage.currentUser);
         return this.$localStorage.currentUser;
     };
     destroy() {
         delete this.$localStorage.currentUser;
-        this.$log.debug('User session destroyed.');
     };
     currentUser(): noosfero.User {
@@ -9,6 +9,7 @@ import {BlockComponent} from &quot;../layout/blocks/block.component&quot;;
 import {EnvironmentComponent} from "../environment/environment.component";
 import {EnvironmentHomeComponent} from "../environment/environment-home.component";
 import {PeopleBlockComponent} from "../layout/blocks/people-block/people-block.component";
+import {LoginBlockComponent} from "../layout/blocks/login-block/login-block.component";
 import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list.component";
 import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents.component";
 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image-block/profile-image-block.component";
@@ -81,7 +82,7 @@ export class EnvironmentContent {
     template: '<div ng-view></div>',
     directives: [
         ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
-        EnvironmentComponent, PeopleBlockComponent,
+        EnvironmentComponent, PeopleBlockComponent, LoginBlockComponent,
         LinkListBlockComponent, CommunitiesBlockComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
@@ -2,6 +2,7 @@ import { Component } from &quot;ng-forward&quot;;
 import { TestComponentBuilder, ngClass } from 'ng-forward/cjs/testing/test-component-builder';
 import { INgForwardJQuery } from "ng-forward/cjs/util/jqlite-extensions";
 import { ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
+import * as helpers from './helpers';
 /**
  * @ngdoc object
@@ -135,6 +136,7 @@ export function createClass({
     providers = <any[]>[],
     properties = <any>{}
 }): any {
+    providers = providers.concat(helpers.provideFilters("translateFilter"));
     @Component({ selector: 'component-test-helper-container', template, directives, providers })
     class Test {
         constructor() {
@@ -41,7 +41,8 @@ export var mocks = {
         }
     },
     authService: {
-        logout: () => { }
+        logout: () => { },
+        login: () => { }
     },
     articleService: {
         getByProfile: (profileId: number, params?: any) => {
	@@ -0,0 +1,108 @@		@@ -0,0 +1,108 @@
		1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
		2	+import {Injectable, Provider, provide} from "ng-forward";
		3	+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
		4	+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
		5	+import {providers} from 'ng-forward/cjs/testing/providers';
		6	+import {LoginBlockComponent} from './login-block.component';
		7	+import * as helpers from "./../../../../spec/helpers";
		8	+import {SessionService, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../../../login";
		9	+
		10	+const htmlTemplate: string = '<noosfero-login-block></noosfero-login-block>';
		11	+
		12	+describe("Components", () => {
		13	+
		14	+ describe("Login Block Component", () => {
		15	+ let helper: ComponentTestHelper<LoginBlockComponent>;
		16	+ let person: any = null;
		17	+
		18	+ /**
		19	+ * Mock objects
		20	+ */
		21	+ let authService: any = helpers.mocks.authService;
		22	+ let user = <noosfero.User>{ person: person };
		23	+ let sessionService: any = <any>helpers.mocks.sessionWithCurrentUser(user);
		24	+ let state = jasmine.createSpyObj("$state", ["go"]);
		25	+ let scope = helpers.mocks.scopeWithEvents;
		26	+
		27	+ let providers = [
		28	+ new Provider('SessionService', { useValue: sessionService }),
		29	+ new Provider('$state', { useValue: state }),
		30	+ new Provider('AuthService', { useValue: authService }),
		31	+ new Provider('$scope', { useValue: scope })
		32	+ ];
		33	+
		34	+ beforeEach( angular.mock.module("templates") );
		35	+
		36	+ beforeEach( (done: Function) => {
		37	+ let cls = createClass({
		38	+ template: htmlTemplate,
		39	+ directives: [LoginBlockComponent],
		40	+ providers: providers,
		41	+ properties: {}
		42	+ });
		43	+ helper = new ComponentTestHelper<LoginBlockComponent>(cls, done);
		44	+ });
		45	+
		46	+ it("expect person to be null with no logged in user", () => {
		47	+ expect(helper.component.currentUser).toBeNull;
		48	+ });
		49	+
		50	+ it("expect person to be defined when user login", () => {
		51	+ // Executes the login method on the component
		52	+ doComponentLogin();
		53	+ expect(helper.component.currentUser.person).toBe(person);
		54	+ });
		55	+
		56	+ it("expect person to be null when user logout", () => {
		57	+ // First do a login
		58	+ doComponentLogin();
		59	+ // The logout the user
		60	+ doComponentLogout();
		61	+ // Check if the current user was cleared
		62	+ expect(helper.component.currentUser).toBeNull;
		63	+ });
		64	+
		65	+ /**
		66	+ * Execute the logout method on the target component
		67	+ */
		68	+ function doComponentLogout() {
		69	+ // Create a mock for the AuthService logout method
		70	+ spyOn(authService, "logout");
		71	+ helper.component.logout();
		72	+ expect(authService.logout).toHaveBeenCalled();
		73	+ // After the component logout method execution, fire the
		74	+ // AuthService event
		75	+ simulateLogout();
		76	+ }
		77	+
		78	+ /**
		79	+ * Execute the login method on the target component
		80	+ */
		81	+ function doComponentLogin() {
		82	+ // Create a mock for the AuthService login method
		83	+ spyOn(authService, "login");
		84	+ helper.component.login();
		85	+ expect(authService.login).toHaveBeenCalled();
		86	+ // After the component login method execution, fire the
		87	+ // AuthService event
		88	+ simulateLogin();
		89	+ }
		90	+
		91	+ /**
		92	+ * Simulate the AuthService loginSuccess event
		93	+ */
		94	+ function simulateLogin() {
		95	+ let localScope: ng.IScope = helper.component["$scope"];
		96	+ localScope.$emit(AUTH_EVENTS.loginSuccess);
		97	+ }
		98	+
		99	+ /**
		100	+ * Simulate the AuthService logoutSuccess event
		101	+ */
		102	+ function simulateLogout() {
		103	+ let localScope: ng.IScope = helper.component["$scope"];
		104	+ localScope.$emit(AUTH_EVENTS.logoutSuccess);
		1	Link here Michel Felipe @mfdeveloper 2016-05-09 18:48:05 UTC O uso de $emit para executar callbacks de eventos é uma abordagem do Angular 1.x que deve ser evitada. Ao invés disso, utilize o método `EventEmitter.next()` ou `EventEmitter.emit()` como sugerido pelo `ng-forward` Write Preview O uso de $emit para executar callbacks de eventos é uma abordagem do Angular 1.x que deve ser evitada. Ao invés disso, utilize o método `EventEmitter.next()` ou `EventEmitter.emit()` como sugerido pelo `ng-forward` Choose File ... File name... Cancel
		105	+ }
		106	+ });
		107	+
		108	+});
0	\ No newline at end of file	109	\ No newline at end of file
@@ -0,0 +1,73 @@		@@ -0,0 +1,73 @@
	1	+import {Input, Inject, Component} from "ng-forward";
	2	+import {SessionService, AuthService, IAuthEvents, AUTH_EVENTS} from "./../../../login";
	3	+
	4	+/**
	5	+ * @ngdoc controller
	6	+ * @name layout.blocks.LoginBlockComponent
	7	+ * @description
	8	+ * The Noosfero block responible for presenting a login form and user status
	9	+ */
	10	+@Component({
	11	+ selector: "noosfero-login-block",
	12	+ templateUrl: 'app/layout/blocks/login-block/login-block.html',
	13	+})
	14	+@Inject("SessionService", "$state", 'AuthService', "$scope")
	15	+export class LoginBlockComponent {
	16	+
	17	+ /**
	18	+ * @ngdoc property
	19	+ * @name currentUser
	20	+ * @propertyOf layout.blocks.LoginBlockComponent
	21	+ * @description
	22	+ * The current loged in user
	23	+ */
	24	+ currentUser: noosfero.User;
	25	+
	26	+ /**
	27	+ * @ngdoc property
	28	+ * @name credentials
	29	+ * @propertyOf layout.blocks.LoginBlockComponent
	30	+ * @description
	31	+ * The credentials of the currentUser
	32	+ */
	33	+ credentials: noosfero.Credentials;
	34	+
	35	+ constructor(
	36	+ private session: SessionService,
	37	+ private $state: ng.ui.IStateService,
	38	+ private authService: AuthService,
	39	+ private $scope: ng.IScope) {
	40	+ this.currentUser = this.session.currentUser();
	41	+
	42	+ this.$scope.$on(AUTH_EVENTS.loginSuccess, () => {
	1	Link here Michel Felipe @mfdeveloper 2016-05-09 18:44:24 UTC O uso de `$scope` para callback de eventos é uma abordagem do Angular 1.x que deve ser evitada. Ao invés disso, utilize a classe `EventEmitter` como sugerido pelo `ng-forward` Write Preview O uso de `$scope` para callback de eventos é uma abordagem do Angular 1.x que deve ser evitada. Ao invés disso, utilize a classe `EventEmitter` como sugerido pelo `ng-forward` Choose File ... File name... Cancel
	43	+ this.currentUser = this.session.currentUser();
	44	+ });
	45	+
	46	+ this.$scope.$on(AUTH_EVENTS.logoutSuccess, () => {
	47	+ this.currentUser = this.session.currentUser();
	48	+ });
	49	+
	50	+ }
	51	+
	52	+ /**
	53	+ * @ngdoc method
	54	+ * @name login
	55	+ * @methodOf layout.blocks.LoginBlockComponent
	56	+ * @description
	57	+ * Logs in the user using its credentials
	58	+ */
	59	+ login() {
	60	+ this.authService.login(this.credentials);
	61	+ }
	62	+
	63	+ /**
	64	+ * @ngdoc method
	65	+ * @name logout
	66	+ * @methodOf layout.blocks.LoginBlockComponent
	67	+ * @description
	68	+ * Logout the user
	69	+ */
	70	+ logout() {
	71	+ this.authService.logout();
	72	+ };
	73	+}
	@@ -0,0 +1,23 @@		@@ -0,0 +1,23 @@
		1	+<div class="logged-user-info" ng-show="ctrl.currentUser">
		2	+ <h4>Logged in as {{ctrl.currentUser.person.identifier}}</h4>
		3	+ <ul>
		4	+ <li>User since {{ctrl.currentUser.created_at.month}}/{{ctrl.currentUser.created_at.year}}</li>
		5	+ <li><a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})">Profile Homepage</a></li>
		6	+ </ul>
		7	+ <div class="user-actions">
		8	+ <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" \| translate}}</a>
		9	+ </div>
		10	+</div>
		11	+<div class="logged-user-info" ng-show="!ctrl.currentUser">
		12	+ <form>
		13	+ <div class="form-group">
		14	+ <label for="exampleInputEmail1">{{"auth.form.login" \| translate}}</label>
		15	+ <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
		16	+ </div>
		17	+ <div class="form-group">
		18	+ <label for="exampleInputPassword1">{{"auth.form.password" \| translate}}</label>
		19	+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
		20	+ </div>
		21	+ <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" \| translate}}</button>
		22	+ </form>
		23	+</div>
0	\ No newline at end of file	24	\ No newline at end of file
 @@ -41,7 +41,8 @@ export var mocks = {
          }
      },
      authService: {
--        logout: () => { }
++        logout: () => { },
+










Link here
 

Michel Felipe

@mfdeveloper


2016-05-09 18:46:12 UTC






Qual a diferença neste mock? Me pareceu que não houve alteração




Write


Preview




Qual a diferença neste mock? Me pareceu que não houve alteração











Choose File ...

 
File name...


Cancel
++        login: () => { }
      },
      articleService: {
          getByProfile: (profileId: number, params?: any) => {