blog.component.spec.ts
4.12 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
import {Input, provide, Component} from 'ng-forward';
import {ArticleBlog} from './blog.component';
import {createComponentFromClass, quickCreateComponent, provideEmptyObjects, createProviderToValue} from "../../../../spec/helpers.ts";
// this htmlTemplate will be re-used between the container components in this spec file
const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';
let articleService: { getChildren: Function } = <any>{};
describe("Blog Component", () => {
// 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"));
function promiseResultTemplate(response?: {}) {
let thenFuncEmpty = (func: Function) => {
// does nothing
};
if (response) {
return {
then: (func: (response: any) => void) => {
func(response);
}
};
} else {
return {
then: (func: (response: any) => void) => {
// does nothing
}
};
}
}
beforeAll(() => {
// creating mock for articleService
articleService = {
getChildren: (article_id: number, filters: {}) => {
return promiseResultTemplate(null);
}
};
});
it("renders the blog content", (done: Function) => {
// Creating a container component (ArticleContainerComponent) to include
// the component under test (ArticleView)
@Component({
selector: 'test-container-component',
template: htmlTemplate,
directives: [ArticleBlog],
providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)]
})
class BlogContainerComponent {
article = { type: 'anyArticleType' };
profile = { name: 'profile-name' };
}
createComponentFromClass(BlogContainerComponent).then((fixture) => {
expect(fixture.debugElement.query('div.blog').length).toEqual(1);
done();
});
});
it("verify the blog data", (done: Function) => {
// defining a mock result to articleService.getChildren method
articleService.getChildren = (article_id: number, filters: {}) => {
return promiseResultTemplate({
headers: (headerName: string) => {
return 1;
},
data: <any>{
articles: []
}
});
};
@Component({
selector: 'test-container-component',
template: htmlTemplate,
directives: [ArticleBlog],
providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)]
})
class BlogContainerComponent {
article = { type: 'anyArticleType' };
profile = { name: 'profile-name' };
}
createComponentFromClass(BlogContainerComponent).then((fixture) => {
// gets the children component of BlogContainerComponent
let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
// check if the component property are the provided by the mocked articleService
expect((<any>articleBlog)["posts"]).toEqual([]);
expect((<any>articleBlog)["totalPosts"]).toEqual(1);
// 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();
});
});
});