block-content.component.spec.ts
4.06 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
import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
import {Input, provide, Component} from 'ng-forward';
import {BlockContentComponent} from './block-content.component';
const tcb = new TestComponentBuilder();
const htmlTemplate: string = '<noosfero-block-content [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block-content>';
describe("Components", () => {
describe("Block 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 Block will be load on our tests
beforeEach(angular.mock.module("templates"));
it("receives the block and the owner as inputs", done => {
// Creating a container component (BlockContainerComponent) to include
// the component under test (Block)
@Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] })
class BlockContainerComponent {
block = { type: 'Block' };
owner = { name: 'profile-name' };
constructor() {
}
}
// uses the TestComponentBuilder instance to initialize the component
tcb
.createAsync(BlockContainerComponent).then(fixture => {
// and here we can inspect and run the test assertions
let myComponent: BlockContentComponent = fixture.componentInstance;
// assure the block object inside the Block matches
// the provided through the parent component
expect(myComponent.block.type).toEqual("Block");
expect(myComponent.owner.name).toEqual("profile-name");
done();
});
});
it("renders a component which matches to the block type", done => {
// CustomBlock component created to check if it will be used
// when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
// *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
@Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
class CustomBlock {
@Input() block: any;
@Input() owner: any;
}
@Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent, CustomBlock] })
class CustomBlockType {
block = { type: 'CustomBlock' };
owner = { name: 'profile-name' };
constructor() {
}
}
tcb
.createAsync(CustomBlockType).then(fixture => {
let myComponent: CustomBlockType = fixture.componentInstance;
expect(myComponent.block.type).toEqual("CustomBlock");
expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
done();
});
});
it("renders the default block when hasn't defined a block type", done => {
@Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] })
class CustomBlockType {
block: any = { type: null };
owner: any = { name: 'profile-name' };
constructor() {
}
}
tcb
.createAsync(CustomBlockType).then(fixture => {
let myComponent: CustomBlockType = fixture.componentInstance;
expect(myComponent.block.type).toBeNull();
expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
done();
});
});
});
});