Adding counters to statistics block

Leandro Santos
1 parent c73e431e
Showing 7 changed files with 162 additions and 27 deletions Show diff stats
src/app/layout/blocks/statistics/statistics-block.component.spec.ts
src/app/layout/blocks/statistics/statistics-block.component.ts
src/app/layout/blocks/statistics/statistics-block.html
src/app/layout/blocks/statistics/statistics.scss
src/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/interfaces/statistics_block.ts
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Component} from 'ng-forward';
-
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
 import {StatisticsBlockComponent} from './statistics-block.component';
-
-const tcb = new TestComponentBuilder();
+import * as helpers from "../../../../spec/helpers";
 const htmlTemplate: string = '<noosfero-statistics-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-statistics-block>';
 describe("Components", () => {
     describe("Statistics Block Component", () => {
-
+        let helper: ComponentTestHelper<StatisticsBlockComponent>;
         beforeEach(angular.mock.module("templates"));
-        beforeEach(angular.mock.module("ngSanitize"));
-
-        it("display title stored in block attribute", done => {
-            @Component({
-                selector: 'test-container-component',
+        beforeEach((done) => {
+            let cls = createClass({
                 template: htmlTemplate,
                 directives: [StatisticsBlockComponent],
-            })
-            class CustomBlockType {
-                block: any = { settings: { user_counter: '<em>block content</em>' } };
-                owner: any = { name: 'profile-name' };
-            }
-            tcb.createAsync(CustomBlockType).then(fixture => {
-                expect(fixture.debugElement.query(".statistics-block").text().trim()).toEqual('block content');
-                done();
+                providers: helpers.provideFilters("translateFilter"),
+                properties: {
+                    block: {
+                        user_counter: 1, users: 10, enterprise_counter: 1, enterprises: 20,
+                        product_counter: 1, products: 30, community_counter: 1, communities: 40,
+                        category_counter: 1, categories: 50, tag_counter: 1, tags: 60,
+                        comment_counter: 1, comments: 70, hit_counter: 1, hits: 80
+                    }
+                }
+                // this.counters.push({ 'should_display': this.block.enterprise_counter, 'value': this.block.enterprises, 'name': 'enterprises' })
+                // this.counters.push({ 'should_display': this.block.product_counter, 'value': this.block.products, 'name': 'products' })
+                // this.counters.push({ 'should_display': this.block.community_counter, 'value': this.block.communities, 'name': 'communities' })
+                // this.counters.push({ 'should_display': this.block.category_counter, 'value': this.block.categories, 'name': 'categories' })
+                // this.counters.push({ 'should_display': this.block.tag_counter, 'value': this.block.tags, 'name': 'tags' })
+                // this.counters.push({ 'should_display': this.block.comment_counter, 'value': this.block.comments, 'name': 'comments' })
+                // this.counters.push({ 'should_display': this.block.hit_counter, 'value': this.block.hits, 'name': 'hits' })
             });
+            helper = new ComponentTestHelper<StatisticsBlockComponent>(cls, done);
         });
-    });
+        it("get user counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 10, 'name': 'users' });
+        });
+
+        it("get user enterprise information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 20, 'name': 'enterprises' });
+        });
+
+        it("get product counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 30, 'name': 'products' });
+        });
+
+        it("get community counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 40, 'name': 'communities' });
+        });
+
+        it("get category counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 50, 'name': 'categories' });
+        });
+        it("get tag counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 60, 'name': 'tags' });
+        });
+
+        it("get comment counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 70, 'name': 'comments' });
+        });
+
+        it("get hit counter information in array", () => {
+            helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey; });
+            expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 80, 'name': 'hits' });
+        });
+
+        it("should render the user count information", () => {
+            expect(helper.find('.list-group-item.users').length).toEqual(1, "The statistics-block should have a list item with users class");
+        });
+
+
+        // it("should not render user count information if has no configuration on block", () => {
+        //     helper.component.counters.forEach((obj: any) => { delete obj.$$hashKey });
+        //     expect(helper.component.counters).toContain({ 'should_display': 1, 'value': 30, 'name': 'enterprises' });
+        // });
+
+        // this.counters.push({ 'should_display': this.block.enterprise_counter, 'value': this.block.enterprises, 'name': 'enterprises' })
+        // this.counters.push({ 'should_display': this.block.product_counter, 'value': this.block.products, 'name': 'products' })
+        // this.counters.push({ 'should_display': this.block.community_counter, 'value': this.block.communities, 'name': 'communities' })
+        // this.counters.push({ 'should_display': this.block.category_counter, 'value': this.block.categories, 'name': 'categories' })
+        // this.counters.push({ 'should_display': this.block.tag_counter, 'value': this.block.tags, 'name': 'tags' })
+        // this.counters.push({ 'should_display': this.block.comment_counter, 'value': this.block.comments, 'name': 'comments' })
+        // this.counters.push({ 'should_display': this.block.hit_counter, 'value': this.block.hits, 'name': 'hits' })
+
+        /**
+         * There are helper functions to access the JQuery DOM like this.
+         */
+        // it("render the profile image for each person", () => {
+        //     expect(helper.all("list-group-item").length).toEqual(3);
+        // });
+
+        /**
+         * The main debugElement element is also available
+         */
+        // it("render the main noosfero people block", () => {
+        //    expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
+        // });
+
+        /**
+         * Just another example of a JQuery DOM helper function
+         */
+        //  it("render the noosfero people block div", () => {
+        //        let div = helper.findChildren("noosfero-people-block", "div");
+        //          expect(div.className).toBe('people-block', "The class should be people-block");
+        //        });
+    });
 });
-import {Component, Input} from "ng-forward";
+import {Input, Inject, Component} from "ng-forward";
 @Component({
     selector: "noosfero-statistics-block",
@@ -7,12 +7,20 @@ import {Component, Input} from &quot;ng-forward&quot;;
 export class StatisticsBlockComponent {
-    @Input() block: any;
+    @Input() block: noosfero.StatisticsBlock;
     @Input() owner: any;
-    html: string;
+    counters: any = [];
     ngOnInit() {
-        this.html = this.block.settings.user_counter;
+        this.counters.push({ 'should_display': this.block.user_counter, 'value': this.block.users, 'name': 'users' });
+        this.counters.push({ 'should_display': this.block.enterprise_counter, 'value': this.block.enterprises, 'name': 'enterprises' });
+        this.counters.push({ 'should_display': this.block.product_counter, 'value': this.block.products, 'name': 'products' });
+        this.counters.push({ 'should_display': this.block.community_counter, 'value': this.block.communities, 'name': 'communities' });
+        this.counters.push({ 'should_display': this.block.category_counter, 'value': this.block.categories, 'name': 'categories' });
+        this.counters.push({ 'should_display': this.block.tag_counter, 'value': this.block.tags, 'name': 'tags' });
+        this.counters.push({ 'should_display': this.block.comment_counter, 'value': this.block.comments, 'name': 'comments' });
+        this.counters.push({ 'should_display': this.block.hit_counter, 'value': this.block.hits, 'name': 'hits' });
+
     }
 }
-<div class="statistics-block" ng-bind-html="ctrl.html">
+<div class="statistics-block">
+  <ul class="list-group">
+    <li  ng-repeat="counter in ctrl.counters" class="list-group-item {{counter.name}}"  ng-show="counter.should_display" >
+      <span class="badge {{counter.name}}">{{counter.value}}</span>
+      {{"statistics." + counter.name | translate}}
+    </li>
+
+  </ul>
 </div>
@@ -0,0 +1,3 @@
+.statistics-block {
+  background-color: blue;
+}
@@ -46,5 +46,13 @@
   "article.basic_editor.success.message": "Article saved!",
   "article.basic_editor.visibility": "Visibility",
   "article.basic_editor.visibility.public": "Public",
-  "article.basic_editor.visibility.private": "Private"
+  "article.basic_editor.visibility.private": "Private",
+  "statistics.users": "Users",
+  "statistics.enterprises": "Enterprises",
+  "statistics.products": "Products",
+  "statistics.communities": "Communities",
+  "statistics.categories": "Categories",
+  "statistics.tags": "Tags",
+  "statistics.comments": "Comments",
+  "statistics.hits": "Hits"
 }
@@ -46,5 +46,13 @@
   "article.basic_editor.success.message": "Artigo salvo com sucesso!",
   "article.basic_editor.visibility": "Visibilidade",
   "article.basic_editor.visibility.public": "Público",
-  "article.basic_editor.visibility.private": "Privado"
+  "article.basic_editor.visibility.private": "Privado",
+  "statistics.users": "Usuários",
+  "statistics.enterprises": "Empreendimentos",
+  "statistics.products": "Produtos",
+  "statistics.communities": "Comunidades",
+  "statistics.categories": "Categorias",
+  "statistics.tags": "Tags",
+  "statistics.comments": "Comentários",
+  "statistics.hits": "Acessos"
 }
@@ -0,0 +1,20 @@
+namespace noosfero {
+    export interface StatisticsBlock extends Block {
+        user_counter: boolean;
+        users: number;
+        enterprise_counter: boolean;
+        enterprises: number;
+        product_counter: boolean;
+        products: number;
+        community_counter: boolean;
+        communities: number;
+        category_counter: boolean;
+        categories: number;
+        tag_counter: boolean;
+        tags: number;
+        comment_counter: boolean;
+        comments: number;
+        hit_counter: boolean;
+        hits: number;
+    }
+}
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	import {StatisticsBlockComponent} from './statistics-block.component';	2	import {StatisticsBlockComponent} from './statistics-block.component';
5	-
6	-const tcb = new TestComponentBuilder();	3	+import * as helpers from "../../../../spec/helpers";
7		4
8	const htmlTemplate: string = '<noosfero-statistics-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-statistics-block>';	5	const htmlTemplate: string = '<noosfero-statistics-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-statistics-block>';
9		6
10	describe("Components", () => {	7	describe("Components", () => {
11		8
12	describe("Statistics Block Component", () => {	9	describe("Statistics Block Component", () => {
13	-	10	+ let helper: ComponentTestHelper<StatisticsBlockComponent>;
14	beforeEach(angular.mock.module("templates"));	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	template: htmlTemplate,	15	template: htmlTemplate,
22	directives: [StatisticsBlockComponent],	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	});
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	</div>	9	</div>
@@ -0,0 +1,3 @@		@@ -0,0 +1,3 @@
	1	+.statistics-block {
	2	+ background-color: blue;
	3	+}
	@@ -46,5 +46,13 @@		@@ -46,5 +46,13 @@
46	"article.basic_editor.success.message": "Article saved!",	46	"article.basic_editor.success.message": "Article saved!",
47	"article.basic_editor.visibility": "Visibility",	47	"article.basic_editor.visibility": "Visibility",
48	"article.basic_editor.visibility.public": "Public",	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	}
@@ -0,0 +1,20 @@		@@ -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	+}