article-view-component.spec.ts
6.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import {Input, provide, Component} from 'ng-forward';
import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
import * as helpers from "../../spec/helpers";
// this htmlTemplate will be re-used between the container components in this spec file
const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
describe("Components", () => {
// the karma preprocessor html2js transform the templates html into js files which put
// the templates to the templateCache into the module templates
// we need to load the module templates here as the template for the
// component Noosfero ArtileView will be load on our tests
beforeEach(angular.mock.module("templates"));
describe("ArticleView Component", () => {
let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
it("renders the default component when no specific component is found", (done: Function) => {
// Creating a container component (ArticleContainerComponent) to include
// the component under test (ArticleView)
@Component({
selector: 'test-container-component',
template: htmlTemplate,
directives: [ArticleViewComponent],
providers: [
helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
helpers.provideFilters("translateFilter"),
helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
helpers.createProviderToValue('$state', state)
]
})
class ArticleContainerComponent {
article = { type: 'anyArticleType' };
profile = { name: 'profile-name' };
}
helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
// and here we can inspect and run the test assertions
// gets the children component of ArticleContainerComponent
let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
// and checks if the article View rendered was the Default Article View
expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
// done needs to be called (it isn't really needed, as we can read in
// here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
// because createAsync in ng-forward is not really async, but as the intention
// here is write tests in angular 2 ways, this is recommended
done();
});
});
it("receives the article and profile as inputs", (done: Function) => {
// Creating a container component (ArticleContainerComponent) to include
// the component under test (ArticleView)
@Component({
selector: 'test-container-component',
template: htmlTemplate,
directives: [ArticleViewComponent],
providers: [
helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
helpers.provideFilters("translateFilter"),
helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
helpers.createProviderToValue('$state', state)
]
})
class ArticleContainerComponent {
article = { type: 'anyArticleType' };
profile = { name: 'profile-name' };
}
// uses the TestComponentBuilder instance to initialize the component
helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
// and here we can inspect and run the test assertions
let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
// assure the article object inside the ArticleView matches
// the provided through the parent component
expect(articleView.article.type).toEqual("anyArticleType");
expect(articleView.profile.name).toEqual("profile-name");
// done needs to be called (it isn't really needed, as we can read in
// here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
// because createAsync in ng-forward is not really async, but as the intention
// here is write tests in angular 2 ways, this is recommended
done();
});
});
it("renders a article view which matches to the article type", done => {
// NoosferoTinyMceArticle component created to check if it will be used
// when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
// *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
@Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
class TinyMceArticleView {
@Input() article: any;
@Input() profile: any;
}
// Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
@Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
class CustomArticleType {
article = { type: 'TinyMceArticle' };
profile = { name: 'profile-name' };
}
helpers.createComponentFromClass(CustomArticleType).then(fixture => {
let myComponent: CustomArticleType = fixture.componentInstance;
expect(myComponent.article.type).toEqual("TinyMceArticle");
expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
done();
});
});
});
});