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 | +} | ... | ... |