From e4df8ee5f7d4668f9135cb766937c0a4b504eb2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rog=C3=A9rio=20Rodrigues=20de=20Alc=C3=A2ntara?= Date: Wed, 13 Jul 2016 10:13:23 -0300 Subject: [PATCH 1/4] refactor(message-component): Rename file `message-type.enum` to `message-type.type` The message type is a type and not an Enum. As such, the file was renamed to reflect its content properly. --- src/app/shared/message/index.ts | 2 +- .../message/{message-type.enum.ts => message-type.type.ts} | 0 src/app/shared/message/message.model.ts | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/app/shared/message/{message-type.enum.ts => message-type.type.ts} (100%) diff --git a/src/app/shared/message/index.ts b/src/app/shared/message/index.ts index 650c8a6..d1be057 100644 --- a/src/app/shared/message/index.ts +++ b/src/app/shared/message/index.ts @@ -1,4 +1,4 @@ export { Message } from './message.model'; export { MessageComponent } from './message.component'; export { MessageService } from './message.service'; -export { MessageType } from './message-type.enum'; \ No newline at end of file +export { MessageType } from './message-type.type'; diff --git a/src/app/shared/message/message-type.enum.ts b/src/app/shared/message/message-type.type.ts similarity index 100% rename from src/app/shared/message/message-type.enum.ts rename to src/app/shared/message/message-type.type.ts diff --git a/src/app/shared/message/message.model.ts b/src/app/shared/message/message.model.ts index f217bff..a413d81 100644 --- a/src/app/shared/message/message.model.ts +++ b/src/app/shared/message/message.model.ts @@ -1,4 +1,4 @@ -import { MessageType } from './message-type.enum'; +import { MessageType } from './message-type.type'; export class Message { constructor(public type?: MessageType, public title?: String, public description?: String) {} -} \ No newline at end of file +} From 0fa3015e95e7ab36c9d1eff2177257b36f14a0c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rog=C3=A9rio=20Rodrigues=20de=20Alc=C3=A2ntara?= Date: Wed, 13 Jul 2016 10:14:47 -0300 Subject: [PATCH 2/4] test(message-component): Add message-type specification --- .../shared/message/message-type.type.spec.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/app/shared/message/message-type.type.spec.ts diff --git a/src/app/shared/message/message-type.type.spec.ts b/src/app/shared/message/message-type.type.spec.ts new file mode 100644 index 0000000..9d5bd3a --- /dev/null +++ b/src/app/shared/message/message-type.type.spec.ts @@ -0,0 +1,21 @@ +import { + beforeEach, beforeEachProviders, + describe, xdescribe, + expect, it, xit, + async, inject +} from '@angular/core/testing'; + +import { MessageType } from './message-type.type'; + +let type: MessageType; + +describe('Type: MessageType', () => { + it('should accept value "success"', () => { + this.type = 'success'; + expect(this.type).toEqual('success'); + }); + it('should accept value "error"', () => { + this.type = 'error'; + expect(this.type).toEqual('error'); + }); +}); From d783b6b21498f5e2f1293de49db604e1015c7610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rog=C3=A9rio=20Rodrigues=20de=20Alc=C3=A2ntara?= Date: Wed, 13 Jul 2016 10:15:52 -0300 Subject: [PATCH 3/4] test(message-component): Add message model specification Add message model unit tests --- src/app/shared/message/message.model.spec.ts | 23 ++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/app/shared/message/message.model.spec.ts diff --git a/src/app/shared/message/message.model.spec.ts b/src/app/shared/message/message.model.spec.ts new file mode 100644 index 0000000..f8fc177 --- /dev/null +++ b/src/app/shared/message/message.model.spec.ts @@ -0,0 +1,23 @@ +import { + beforeEach, beforeEachProviders, + describe, xdescribe, + expect, it, xit, + async, inject +} from '@angular/core/testing'; + +import { Message } from './message.model'; + +describe('Model: Message', () => { + it('should construct without Type, Title nor Description', () => { + this.model = new Message(); + expect(this.model.type).toBeUndefined(); + expect(this.model.title).toBeUndefined(); + expect(this.model.description).toBeUndefined(); + }); + it('should construct with Type, Title and Description', () => { + this.model = new Message('success', 'title', 'description'); + expect(this.model.type).toBe('success'); + expect(this.model.title).toBe('title'); + expect(this.model.description).toBe('description'); + }); +}); From dc0db0edeb478178824aa107e9be759cbb560003 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rog=C3=A9rio=20Rodrigues=20de=20Alc=C3=A2ntara?= Date: Wed, 13 Jul 2016 18:37:50 -0300 Subject: [PATCH 4/4] test(message-component): Add message component specification Add message component page object Add message component unit tests --- src/app/shared/message/message.component.html | 4 +- .../shared/message/message.component.po.ts | 24 ++++ .../shared/message/message.component.spec.ts | 121 +++++++++++++++++- src/app/shared/message/message.component.ts | 9 +- 4 files changed, 147 insertions(+), 11 deletions(-) create mode 100644 src/app/shared/message/message.component.po.ts diff --git a/src/app/shared/message/message.component.html b/src/app/shared/message/message.component.html index ecb1744..5d477f6 100644 --- a/src/app/shared/message/message.component.html +++ b/src/app/shared/message/message.component.html @@ -1,8 +1,8 @@ - + {{message.title}}

{{message.description}}

- \ No newline at end of file + diff --git a/src/app/shared/message/message.component.po.ts b/src/app/shared/message/message.component.po.ts new file mode 100644 index 0000000..2d6aed5 --- /dev/null +++ b/src/app/shared/message/message.component.po.ts @@ -0,0 +1,24 @@ +export class MessageComponentPage { + + private mdCard:HTMLElement; + + constructor(private element:HTMLElement) { + this.mdCard = element.querySelector('md-card'); + } + + isVisible():boolean { + return this.mdCard != null && this.mdCard != undefined; + } + + getClass():String { + return this.mdCard.classList.item(0); + } + + getTitle():String { + return this.mdCard.querySelector('md-card-title').innerHTML; + } + + getContent():String { + return this.mdCard.querySelector('md-card-content p').innerHTML; + } +} diff --git a/src/app/shared/message/message.component.spec.ts b/src/app/shared/message/message.component.spec.ts index 049e6c9..a1d2de6 100644 --- a/src/app/shared/message/message.component.spec.ts +++ b/src/app/shared/message/message.component.spec.ts @@ -5,16 +5,22 @@ import { expect, it, inject, + async } from '@angular/core/testing'; import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing'; import { Component } from '@angular/core'; import { By } from '@angular/platform-browser'; + +import { Message } from './message.model'; import { MessageComponent } from './message.component'; +import { MessageComponentPage } from './message.component.po'; +import { MessageType } from './message-type.type'; describe('Component: Message', () => { let builder: TestComponentBuilder; beforeEachProviders(() => [MessageComponent]); + beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) { builder = tcb; })); @@ -24,21 +30,130 @@ describe('Component: Message', () => { })); it('should create the component', inject([], () => { - return builder.createAsync(MessageComponentTestController) + return builder.createAsync(MessageComponentControllerUsingObject) .then((fixture: ComponentFixture) => { let query = fixture.debugElement.query(By.directive(MessageComponent)); expect(query).toBeTruthy(); expect(query.componentInstance).toBeTruthy(); }); })); + + describe('Using message object', () => { + + let componentDebugElement, + componentInstance: MessageComponent, + componentControllerInstance: MessageComponentControllerUsingObject, + po: MessageComponentPage; + + it('should render a message', () => { + return builder.createAsync(MessageComponentControllerUsingObject).then((fixture: ComponentFixture) => { + componentDebugElement = fixture.debugElement.query(By.directive(MessageComponent)); + componentControllerInstance = fixture.debugElement.componentInstance; + componentInstance = componentDebugElement.componentInstance; + + let type: MessageType = 'success' + let title: String = 'YAY'; + let description: String = `There's a success!`; + let success = new Message(type, title, description); + componentControllerInstance.message = success; + fixture.detectChanges(); + + po = new MessageComponentPage(componentDebugElement.nativeElement); + expect(componentInstance.message).toBe(success); + expect(po.isVisible()).toBe(true); + expect(po.getClass()).toBe(type); + expect(po.getTitle()).toBe(title); + expect(po.getContent()).toContain(description); + }); + }); + + it('should not render a message when a message is not given or has no type', ()=> { + return builder.createAsync(MessageComponentControllerUsingObject).then((fixture: ComponentFixture) => { + componentDebugElement = fixture.debugElement.query(By.directive(MessageComponent)); + componentControllerInstance = fixture.debugElement.componentInstance; + componentInstance = componentDebugElement.componentInstance; + + let messageNull = null; + let messageWithoutType = new Message(null, 'a title', 'some description'); + [messageNull, messageWithoutType].forEach((message)=> { + + componentControllerInstance.message = message; + fixture.detectChanges(); + + po = new MessageComponentPage(componentDebugElement.nativeElement); + expect(po.isVisible()).toBe(false); + }) + }); + }); + }); + + describe('Using parameters', () => { + + let componentDebugElement, + componentInstance: MessageComponent, + componentControllerInstance: MessageComponentControllerUsingParameters, + po: MessageComponentPage; + + it('should render a message', () => { + return builder.createAsync(MessageComponentControllerUsingParameters).then((fixture: ComponentFixture) => { + componentDebugElement = fixture.debugElement.query(By.directive(MessageComponent)); + componentControllerInstance = fixture.debugElement.componentInstance; + componentInstance = componentDebugElement.componentInstance; + + let type: MessageType = 'error' + let title: String = 'Ops!'; + let description: String = `There's a problem!`; + componentControllerInstance.type = type + componentControllerInstance.title = title + componentControllerInstance.description = description + fixture.detectChanges(); + + po = new MessageComponentPage(componentDebugElement.nativeElement); + expect(po.isVisible()).toBe(true); + expect(po.getClass()).toBe(type); + expect(po.getTitle()).toBe(title); + expect(po.getContent()).toContain(description); + }); + }); + + it('should not render a message when type is not given', () => { + return builder.createAsync(MessageComponentControllerUsingParameters).then((fixture: ComponentFixture) => { + componentDebugElement = fixture.debugElement.query(By.directive(MessageComponent)); + componentControllerInstance = fixture.debugElement.componentInstance; + componentInstance = componentDebugElement.componentInstance; + + componentControllerInstance.type = null; + componentControllerInstance.title = 'Ops!'; + componentControllerInstance.description = `There's a problem!`; + fixture.detectChanges(); + + po = new MessageComponentPage(componentDebugElement.nativeElement); + expect(po.isVisible()).toBe(false); + }); + }); + }); }); @Component({ selector: 'test', template: ` - + + `, + directives: [MessageComponent] +}) +class MessageComponentControllerUsingObject { + message:Message = null; +} + +@Component({ + selector: 'test', + template: ` + `, directives: [MessageComponent] }) -class MessageComponentTestController { +class MessageComponentControllerUsingParameters { + type:String = null; + title:String = null; + description:String = null; } diff --git a/src/app/shared/message/message.component.ts b/src/app/shared/message/message.component.ts index 087dfba..ad5a3e0 100644 --- a/src/app/shared/message/message.component.ts +++ b/src/app/shared/message/message.component.ts @@ -18,11 +18,8 @@ export class MessageComponent implements OnInit { constructor() {} ngOnInit() { - if(!this.message && this.type && this.title && this.description) { - this.message = new Message(this.type, this.title, this.description); - } - if(this.message && (!this.message.type || !this.message.title || !this.message.description)) { - this.message = null; + if(!this.message && (this.type && this.title && this.description)) { + this.message = new Message(this.type, this.title, this.description) } } -} \ No newline at end of file +}