Created initial profile view data directive with two specs

Daniela Feitosa · Michel Felipe
1 parent 11f93c35
Showing 4 changed files with 81 additions and 0 deletions Show diff stats
src/app/components/noosfero-profile/profile-view.component.spec.ts
src/app/components/noosfero-profile/profile-view.component.ts
src/app/components/noosfero-profile/profile-view.html
src/languages/en.json
@@ -0,0 +1,54 @@
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {Profile} from "./../../models/interfaces";
+import * as helpers from "../../../spec/helpers";
+import {Component} from 'ng-forward'
+
+import {ProfileView} from './profile-view.component';
+
+import {INgForwardJQuery} from '../../../../node_modules/ng-forward/cjs/util/jqlite-extensions.d';
+
+let htmlTemplate = '<profile-view [profile]="ctrl.profile"></profile-view>'
+describe('Profile View Component', () => {
+    beforeEach(angular.mock.module('templates'))
+    @Component({
+        selector: 'test-profile-view-container',
+        directives: [ProfileView],
+        providers: helpers.provideFilters('translateFilter'),
+        template: htmlTemplate
+    })
+    class ProfileViewContainer {
+        profile: any = {
+            id: 1,
+            identifier: 'scarlet',
+            type: 'Profile',
+            name: 'Scarlet',
+            created_at: '2016-03-11'
+        }
+    }
+
+    it('render main content profile view', (done: Function) => {
+        helpers.createComponentFromClass(ProfileViewContainer).then((fixture) => {
+            expect(fixture.debugElement.query('div.profile-view').length).toEqual(1);
+
+            done();
+        })
+            .catch((e) => {
+                fail(e.message);
+                done();
+            });
+
+    });
+
+    it('render profile data', (done: Function) => {
+        helpers.createComponentFromClass(ProfileViewContainer).then((fixture) => {
+            let nameTag: INgForwardJQuery = fixture.debugElement.query('header > h2');
+            let container: ProfileViewContainer = fixture.componentInstance;
+
+
+            expect(nameTag.length).toEqual(1);
+            expect(nameTag.text()).toEqual(container.profile.name);
+
+            done();
+        })
+    });
+});
@@ -0,0 +1,11 @@
+import {Profile} from "../../models/interfaces";
+import {Component, Input} from 'ng-forward'
+
+@Component({
+    selector: 'profile-view',
+    templateUrl: 'app/components/noosfero-profile/profile-view.html'
+})
+export class ProfileView {
+    @Input()
+    profile: Profile
+}
@@ -0,0 +1,15 @@
+<div class='profile-view'>
+  <div class="col-lg-3 col-md-4 col-sm-4">
+    <div class="main-box clearfix">
+      <header class="main-box-header clearfix">
+        <h2>{{ctrl.profile.name}}</h2>
+      </header>
+      <div class="main-box-body clearfix">
+        <profile-image [profile]="ctrl.profile" class="profile-img img-responsive center-block"></profile-image>
+      </div>
+      <div class="profile-since">
+        {{"profile.created_at" | translate}}: {{ctrl.profile.created_at}}
+      </div>
+    </div>
+  </div>
+</div>
@@ -12,6 +12,7 @@
   "profile.wall": "Profile Wall",
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
+  "profile.member_since": "Member since"
   "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
   "auth.title": "Login",
   "auth.form.login": "Login / Email address",
...	...	@@ -0,0 +1,54 @@
	1	+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Profile} from "./../../models/interfaces";
	3	+import * as helpers from "../../../spec/helpers";
	4	+import {Component} from 'ng-forward'
	5	+
	6	+import {ProfileView} from './profile-view.component';
	7	+
	8	+import {INgForwardJQuery} from '../../../../node_modules/ng-forward/cjs/util/jqlite-extensions.d';
	9	+
	10	+let htmlTemplate = '<profile-view [profile]="ctrl.profile"></profile-view>'
	11	+describe('Profile View Component', () => {
	12	+ beforeEach(angular.mock.module('templates'))
	13	+ @Component({
	14	+ selector: 'test-profile-view-container',
	15	+ directives: [ProfileView],
	16	+ providers: helpers.provideFilters('translateFilter'),
	17	+ template: htmlTemplate
	18	+ })
	19	+ class ProfileViewContainer {
	20	+ profile: any = {
	21	+ id: 1,
	22	+ identifier: 'scarlet',
	23	+ type: 'Profile',
	24	+ name: 'Scarlet',
	25	+ created_at: '2016-03-11'
	26	+ }
	27	+ }
	28	+
	29	+ it('render main content profile view', (done: Function) => {
	30	+ helpers.createComponentFromClass(ProfileViewContainer).then((fixture) => {
	31	+ expect(fixture.debugElement.query('div.profile-view').length).toEqual(1);
	32	+
	33	+ done();
	34	+ })
	35	+ .catch((e) => {
	36	+ fail(e.message);
	37	+ done();
	38	+ });
	39	+
	40	+ });
	41	+
	42	+ it('render profile data', (done: Function) => {
	43	+ helpers.createComponentFromClass(ProfileViewContainer).then((fixture) => {
	44	+ let nameTag: INgForwardJQuery = fixture.debugElement.query('header > h2');
	45	+ let container: ProfileViewContainer = fixture.componentInstance;
	46	+
	47	+
	48	+ expect(nameTag.length).toEqual(1);
	49	+ expect(nameTag.text()).toEqual(container.profile.name);
	50	+
	51	+ done();
	52	+ })
	53	+ });
	54	+});
...	...
...	...	@@ -0,0 +1,11 @@
	1	+import {Profile} from "../../models/interfaces";
	2	+import {Component, Input} from 'ng-forward'
	3	+
	4	+@Component({
	5	+ selector: 'profile-view',
	6	+ templateUrl: 'app/components/noosfero-profile/profile-view.html'
	7	+})
	8	+export class ProfileView {
	9	+ @Input()
	10	+ profile: Profile
	11	+}
...	...
...	...	@@ -0,0 +1,15 @@
	1	+<div class='profile-view'>
	2	+ <div class="col-lg-3 col-md-4 col-sm-4">
	3	+ <div class="main-box clearfix">
	4	+ <header class="main-box-header clearfix">
	5	+ <h2>{{ctrl.profile.name}}</h2>
	6	+ </header>
	7	+ <div class="main-box-body clearfix">
	8	+ <profile-image [profile]="ctrl.profile" class="profile-img img-responsive center-block"></profile-image>
	9	+ </div>
	10	+ <div class="profile-since">
	11	+ {{"profile.created_at" \| translate}}: {{ctrl.profile.created_at}}
	12	+ </div>
	13	+ </div>
	14	+ </div>
	15	+</div>
...	...
...	...	@@ -12,6 +12,7 @@
12	12	"profile.wall": "Profile Wall",
13	13	"activities.create_article.description": "has published on",
14	14	"activities.add_member_in_community.description": "has joined the community",
	15	+ "profile.member_since": "Member since"
15	16	"activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
16	17	"auth.title": "Login",
17	18	"auth.form.login": "Login / Email address",
...	...