Commit 5af8017d525310c9e9dcfaa67a27850cd6a192c3
1 parent
c73e431e
Exists in
master
and in
26 other branches
Adding counters to statistics block
Showing
7 changed files
with
162 additions
and
27 deletions
Show diff stats
src/app/layout/blocks/statistics/statistics-block.component.spec.ts
1 | -import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder'; | |
2 | -import {Component} from 'ng-forward'; | |
3 | - | |
1 | +import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper'; | |
4 | 2 | import {StatisticsBlockComponent} from './statistics-block.component'; |
5 | - | |
6 | -const tcb = new TestComponentBuilder(); | |
3 | +import * as helpers from "../../../../spec/helpers"; | |
7 | 4 | |
8 | 5 | const htmlTemplate: string = '<noosfero-statistics-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-statistics-block>'; |
9 | 6 | |
10 | 7 | describe("Components", () => { |
11 | 8 | |
12 | 9 | describe("Statistics Block Component", () => { |
13 | - | |
10 | + let helper: ComponentTestHelper<StatisticsBlockComponent>; | |
14 | 11 | beforeEach(angular.mock.module("templates")); |
15 | - beforeEach(angular.mock.module("ngSanitize")); | |
16 | - | |
17 | - it("display title stored in block attribute", done => { | |
18 | 12 | |
19 | - @Component({ | |
20 | - selector: 'test-container-component', | |
13 | + beforeEach((done) => { | |
14 | + let cls = createClass({ | |
21 | 15 | template: htmlTemplate, |
22 | 16 | directives: [StatisticsBlockComponent], |
23 | - }) | |
24 | - class CustomBlockType { | |
25 | - block: any = { settings: { user_counter: '<em>block content</em>' } }; | |
26 | - owner: any = { name: 'profile-name' }; | |
27 | - } | |
28 | - tcb.createAsync(CustomBlockType).then(fixture => { | |
29 | - expect(fixture.debugElement.query(".statistics-block").text().trim()).toEqual('block content'); | |
30 | - done(); | |
17 | + providers: helpers.provideFilters("translateFilter"), | |
18 | + properties: { | |
19 | + block: { | |
20 | + user_counter: 1, users: 10, enterprise_counter: 1, enterprises: 20, | |
21 | + product_counter: 1, products: 30, community_counter: 1, communities: 40, | |
22 | + category_counter: 1, categories: 50, tag_counter: 1, tags: 60, | |
23 | + comment_counter: 1, comments: 70, hit_counter: 1, hits: 80 | |
24 | + } | |
25 | + } | |
26 | + // this.counters.push({ 'should_display': this.block.enterprise_counter, 'value': this.block.enterprises, 'name': 'enterprises' }) | |
27 | + // this.counters.push({ 'should_display': this.block.product_counter, 'value': this.block.products, 'name': 'products' }) | |
28 | + // this.counters.push({ 'should_display': this.block.community_counter, 'value': this.block.communities, 'name': 'communities' }) | |
29 | + // this.counters.push({ 'should_display': this.block.category_counter, 'value': this.block.categories, 'name': 'categories' }) | |
30 | + // this.counters.push({ 'should_display': this.block.tag_counter, 'value': this.block.tags, 'name': 'tags' }) | |
31 | + // this.counters.push({ 'should_display': this.block.comment_counter, 'value': this.block.comments, 'name': 'comments' }) | |
32 | + // this.counters.push({ 'should_display': this.block.hit_counter, 'value': this.block.hits, 'name': 'hits' }) | |
31 | 33 | }); |
34 | + helper = new ComponentTestHelper<StatisticsBlockComponent>(cls, done); | |
32 | 35 | }); |
33 | 36 | |
34 | - }); | |
37 | + it("get user counter information in array", () => { | |
38 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
39 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 10, 'name': 'users' }); | |
40 | + }); | |
41 | + | |
42 | + it("get user enterprise information in array", () => { | |
43 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
44 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 20, 'name': 'enterprises' }); | |
45 | + }); | |
46 | + | |
47 | + it("get product counter information in array", () => { | |
48 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
49 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 30, 'name': 'products' }); | |
50 | + }); | |
51 | + | |
52 | + it("get community counter information in array", () => { | |
53 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
54 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 40, 'name': 'communities' }); | |
55 | + }); | |
56 | + | |
57 | + it("get category counter information in array", () => { | |
58 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
59 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 50, 'name': 'categories' }); | |
60 | + }); | |
35 | 61 | |
62 | + it("get tag counter information in array", () => { | |
63 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
64 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 60, 'name': 'tags' }); | |
65 | + }); | |
66 | + | |
67 | + it("get comment counter information in array", () => { | |
68 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
69 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 70, 'name': 'comments' }); | |
70 | + }); | |
71 | + | |
72 | + it("get hit counter information in array", () => { | |
73 | + helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; }); | |
74 | + expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 80, 'name': 'hits' }); | |
75 | + }); | |
76 | + | |
77 | + it("should render the user count information", () => { | |
78 | + expect(helper.find('.list-group-item.users').length).toEqual(1, "The statistics-block should have a list item with users class"); | |
79 | + }); | |
80 | + | |
81 | + | |
82 | + // it("should not render user count information if has no configuration on block", () => { | |
83 | + // helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey }); | |
84 | + // expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 30, 'name': 'enterprises' }); | |
85 | + // }); | |
86 | + | |
87 | + // this.counters.push({ 'should_display': this.block.enterprise_counter, 'value': this.block.enterprises, 'name': 'enterprises' }) | |
88 | + // this.counters.push({ 'should_display': this.block.product_counter, 'value': this.block.products, 'name': 'products' }) | |
89 | + // this.counters.push({ 'should_display': this.block.community_counter, 'value': this.block.communities, 'name': 'communities' }) | |
90 | + // this.counters.push({ 'should_display': this.block.category_counter, 'value': this.block.categories, 'name': 'categories' }) | |
91 | + // this.counters.push({ 'should_display': this.block.tag_counter, 'value': this.block.tags, 'name': 'tags' }) | |
92 | + // this.counters.push({ 'should_display': this.block.comment_counter, 'value': this.block.comments, 'name': 'comments' }) | |
93 | + // this.counters.push({ 'should_display': this.block.hit_counter, 'value': this.block.hits, 'name': 'hits' }) | |
94 | + | |
95 | + /** | |
96 | + * There are helper functions to access the JQuery DOM like this. | |
97 | + */ | |
98 | + // it("render the profile image for each person", () => { | |
99 | + // expect(helper.all("list-group-item").length).toEqual(3); | |
100 | + // }); | |
101 | + | |
102 | + /** | |
103 | + * The main debugElement element is also available | |
104 | + */ | |
105 | + // it("render the main noosfero people block", () => { | |
106 | + // expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children"); | |
107 | + // }); | |
108 | + | |
109 | + /** | |
110 | + * Just another example of a JQuery DOM helper function | |
111 | + */ | |
112 | + // it("render the noosfero people block div", () => { | |
113 | + // let div = helper.findChildren("noosfero-people-block", "div"); | |
114 | + // expect(div.className).toBe('people-block', "The class should be people-block"); | |
115 | + // }); | |
116 | + }); | |
36 | 117 | }); | ... | ... |
src/app/layout/blocks/statistics/statistics-block.component.ts
1 | -import {Component, Input} from "ng-forward"; | |
1 | +import {Input, Inject, Component} from "ng-forward"; | |
2 | 2 | |
3 | 3 | @Component({ |
4 | 4 | selector: "noosfero-statistics-block", |
... | ... | @@ -7,12 +7,20 @@ import {Component, Input} from "ng-forward"; |
7 | 7 | |
8 | 8 | export class StatisticsBlockComponent { |
9 | 9 | |
10 | - @Input() block: any; | |
10 | + @Input() block: noosfero.StatisticsBlock; | |
11 | 11 | @Input() owner: any; |
12 | 12 | |
13 | - html: string; | |
13 | + counters: any = []; | |
14 | 14 | |
15 | 15 | ngOnInit() { |
16 | - this.html = this.block.settings.user_counter; | |
16 | + this.counters.push({ 'should_display': this.block.user_counter, 'value': this.block.users, 'name': 'users' }); | |
17 | + this.counters.push({ 'should_display': this.block.enterprise_counter, 'value': this.block.enterprises, 'name': 'enterprises' }); | |
18 | + this.counters.push({ 'should_display': this.block.product_counter, 'value': this.block.products, 'name': 'products' }); | |
19 | + this.counters.push({ 'should_display': this.block.community_counter, 'value': this.block.communities, 'name': 'communities' }); | |
20 | + this.counters.push({ 'should_display': this.block.category_counter, 'value': this.block.categories, 'name': 'categories' }); | |
21 | + this.counters.push({ 'should_display': this.block.tag_counter, 'value': this.block.tags, 'name': 'tags' }); | |
22 | + this.counters.push({ 'should_display': this.block.comment_counter, 'value': this.block.comments, 'name': 'comments' }); | |
23 | + this.counters.push({ 'should_display': this.block.hit_counter, 'value': this.block.hits, 'name': 'hits' }); | |
24 | + | |
17 | 25 | } |
18 | 26 | } | ... | ... |
src/app/layout/blocks/statistics/statistics-block.html
1 | -<div class="statistics-block" ng-bind-html="ctrl.html"> | |
1 | +<div class="statistics-block"> | |
2 | + <ul class="list-group"> | |
3 | + <li ng-repeat="counter in ctrl.counters" class="list-group-item {{counter.name}}" ng-show="counter.should_display" > | |
4 | + <span class="badge {{counter.name}}">{{counter.value}}</span> | |
5 | + {{"statistics." + counter.name | translate}} | |
6 | + </li> | |
7 | + | |
8 | + </ul> | |
2 | 9 | </div> | ... | ... |
src/languages/en.json
... | ... | @@ -46,5 +46,13 @@ |
46 | 46 | "article.basic_editor.success.message": "Article saved!", |
47 | 47 | "article.basic_editor.visibility": "Visibility", |
48 | 48 | "article.basic_editor.visibility.public": "Public", |
49 | - "article.basic_editor.visibility.private": "Private" | |
49 | + "article.basic_editor.visibility.private": "Private", | |
50 | + "statistics.users": "Users", | |
51 | + "statistics.enterprises": "Enterprises", | |
52 | + "statistics.products": "Products", | |
53 | + "statistics.communities": "Communities", | |
54 | + "statistics.categories": "Categories", | |
55 | + "statistics.tags": "Tags", | |
56 | + "statistics.comments": "Comments", | |
57 | + "statistics.hits": "Hits" | |
50 | 58 | } | ... | ... |
src/languages/pt.json
... | ... | @@ -46,5 +46,13 @@ |
46 | 46 | "article.basic_editor.success.message": "Artigo salvo com sucesso!", |
47 | 47 | "article.basic_editor.visibility": "Visibilidade", |
48 | 48 | "article.basic_editor.visibility.public": "Público", |
49 | - "article.basic_editor.visibility.private": "Privado" | |
49 | + "article.basic_editor.visibility.private": "Privado", | |
50 | + "statistics.users": "Usuários", | |
51 | + "statistics.enterprises": "Empreendimentos", | |
52 | + "statistics.products": "Produtos", | |
53 | + "statistics.communities": "Comunidades", | |
54 | + "statistics.categories": "Categorias", | |
55 | + "statistics.tags": "Tags", | |
56 | + "statistics.comments": "Comentários", | |
57 | + "statistics.hits": "Acessos" | |
50 | 58 | } | ... | ... |
... | ... | @@ -0,0 +1,20 @@ |
1 | +namespace noosfero { | |
2 | + export interface StatisticsBlock extends Block { | |
3 | + user_counter: boolean; | |
4 | + users: number; | |
5 | + enterprise_counter: boolean; | |
6 | + enterprises: number; | |
7 | + product_counter: boolean; | |
8 | + products: number; | |
9 | + community_counter: boolean; | |
10 | + communities: number; | |
11 | + category_counter: boolean; | |
12 | + categories: number; | |
13 | + tag_counter: boolean; | |
14 | + tags: number; | |
15 | + comment_counter: boolean; | |
16 | + comments: number; | |
17 | + hit_counter: boolean; | |
18 | + hits: number; | |
19 | + } | |
20 | +} | ... | ... |