Ticket #45: Displaying tags as a tag cloud and implementing tests for tags block

Caio Almeida
1 parent bcab3c27
Showing 8 changed files with 83 additions and 22 deletions Show diff stats
.gitignore
bower.json
gulp/styles.js
package.json
src/app/layout/blocks/tags/tags-block.component.spec.ts
src/app/layout/blocks/tags/tags-block.component.ts
src/app/layout/blocks/tags/tags-block.html
src/app/layout/blocks/tags/tags-block.scss
@@ -14,3 +14,6 @@ typings
 npm-debug.log
 src/vendor.bundle.js*
 .vagrant/
+*.swp
+*.swo
+*~
@@ -35,9 +35,10 @@
     "angular-i18n": "^1.5.0",
     "angular-load": "^0.4.1",
     "angular-translate-interpolation-messageformat": "^2.10.0",
-  	"angular-bind-html-compile": "^1.2.1",
-	  "angular-click-outside": "^2.7.1",
-	  "ng-ckeditor": "^0.2.1"
+    "angular-bind-html-compile": "^1.2.1",
+    "angular-click-outside": "^2.7.1",
+    "ng-ckeditor": "^0.2.1",
+    "angular-tag-cloud": "^0.3.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.5.0"
@@ -11,6 +11,8 @@ var $ = require(&#39;gulp-load-plugins&#39;)();
 var wiredep = require('wiredep').stream;
 var _ = require('lodash');
  
+var importCss = require('gulp-import-css');
+
 gulp.task('styles-reload', ['styles'], function() {
   return buildStyles()
     .pipe(browserSync.stream());
@@ -55,5 +57,6 @@ var buildStyles = function() {
     .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
     .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
     .pipe($.sourcemaps.write())
+    .pipe(importCss())
     .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
 };
@@ -46,8 +46,9 @@
     "gulp-eslint": "~1.0.0",
     "gulp-filter": "~3.0.1",
     "gulp-flatten": "~0.2.0",
-    "gulp-insert": "^0.5.0",
+    "gulp-import-css": "^0.1.2",
     "gulp-inject": "~3.0.0",
+    "gulp-insert": "^0.5.0",
     "gulp-load-plugins": "~0.10.0",
     "gulp-merge-json": "^0.4.0",
     "gulp-minify-css": "~1.2.1",
-// TODO
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {TagsBlockComponent} from './tags-block.component';
+
+const htmlTemplate: string = '<noosfero-tags-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-tags-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Tags Block Component", () => {
+
+        let settingsObj = {};
+        let mockedEnvironmentService = {
+            getTags: (): any => {
+                return Promise.resolve({ foo: 10, bar: 20 });
+            }
+        };
+        let profile = { name: 'profile-name' };
+        beforeEach(angular.mock.module("templates"));
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+
+        function getProviders() {
+            return [
+                new Provider('$state', { useValue: state }),
+                new Provider('EnvironmentService', {
+                    useValue: mockedEnvironmentService
+                }),
+            ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
+        }
+        let componentClass: any = null;
+
+        function getComponent() {
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [TagsBlockComponent], providers: getProviders() })
+            class BlockContainerComponent {
+                block = { type: 'Block', settings: settingsObj };
+                owner = profile;
+                constructor() {
+                }
+            }
+            return BlockContainerComponent;
+        }
+
+
+        it("get tags from the environment service", done => {
+            tcb.createAsync(getComponent()).then(fixture => {
+                let tagsBlock: TagsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(tagsBlock.tags).toEqual([{ text: "foo", weight: '10', link: '/tag/foo' }, { text: "bar", weight: '20', link: '/tag/bar' }]);
+                done();
+            });
+        });
+    });
+});
@@ -13,26 +13,33 @@ export class TagsBlockComponent {
  
     profile: any;
     tags: any;
-
     tagsLoaded: boolean = false;
  
     constructor(private environmentService: EnvironmentService, private $state: any) {
+        this.loadTags();
     }
  
-    ngOnInit() {
-        this.profile = this.owner;
+    loadTags() {
         this.tags = [];
         let tag = '';
+        let tags: any = [];
+        let that = this;
  
         this.environmentService.getTags()
-        .then((result: noosfero.RestResult<{}>) => {
+        .then((result: any) => {
             for (tag in result) {
                 if (result.hasOwnProperty(tag)) {
                     let size: number = result[tag];
-                    this.tags.push({ text: tag, weight: size, link: '/tag/' + tag });
+                    tags.push({ text: tag.toString(), weight: size.toString(), link: '/tag/' + tag });
                 }
             }
-            this.tagsLoaded = true;
+
+            that.tagsLoaded = true;
+            that.tags = tags.slice();
         });
     }
+
+    ngOnInit() {
+        this.profile = this.owner;
+    }
 }
-<!--
-<div deckgrid source="ctrl.tags" class="deckgrid">
-  <div class="a-card panel media" ng-click="mother.ctrl.openTag(card);">
-    <div class="header media-body">
-      <h5 class="title media-heading" ng-bind="card.name"></h5>
-      <div class="subheader" ng-bind="card.count"></div>
-    </div>
-  </div>
-</div>
--->
-<ng-tag-cloud cloud-width="250" cloud-height="250" cloud-data="ctrl.tags"></ng-tag-cloud>
+<ng-tag-cloud cloud-width="200" cloud-height="150" cloud-data="ctrl.tags"></ng-tag-cloud>
+@import url('../../bower_components/angular-tag-cloud/src/css/ng-tag-cloud.css');
+
 .block.tagsblock {
   .deckgrid[deckgrid]::before {
     font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
...	...	@@ -14,3 +14,6 @@ typings
14	14	npm-debug.log
15	15	src/vendor.bundle.js*
16	16	.vagrant/
	17	+*.swp
	18	+*.swo
	19	+*~
...	...
...	...	@@ -35,9 +35,10 @@
35	35	"angular-i18n": "^1.5.0",
36	36	"angular-load": "^0.4.1",
37	37	"angular-translate-interpolation-messageformat": "^2.10.0",
38		- "angular-bind-html-compile": "^1.2.1",
39		- "angular-click-outside": "^2.7.1",
40		- "ng-ckeditor": "^0.2.1"
	38	+ "angular-bind-html-compile": "^1.2.1",
	39	+ "angular-click-outside": "^2.7.1",
	40	+ "ng-ckeditor": "^0.2.1",
	41	+ "angular-tag-cloud": "^0.3.0"
41	42	},
42	43	"devDependencies": {
43	44	"angular-mocks": "~1.5.0"
...	...
...	...	@@ -11,6 +11,8 @@ var $ = require('gulp-load-plugins')();
11	11	var wiredep = require('wiredep').stream;
12	12	var _ = require('lodash');
13	13
	14	+var importCss = require('gulp-import-css');
	15	+
14	16	gulp.task('styles-reload', ['styles'], function() {
15	17	return buildStyles()
16	18	.pipe(browserSync.stream());
...	...	@@ -55,5 +57,6 @@ var buildStyles = function() {
55	57	.pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
56	58	.pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
57	59	.pipe($.sourcemaps.write())
	60	+ .pipe(importCss())
58	61	.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
59	62	};
...	...
...	...	@@ -46,8 +46,9 @@
46	46	"gulp-eslint": "~1.0.0",
47	47	"gulp-filter": "~3.0.1",
48	48	"gulp-flatten": "~0.2.0",
49		- "gulp-insert": "^0.5.0",
	49	+ "gulp-import-css": "^0.1.2",
50	50	"gulp-inject": "~3.0.0",
	51	+ "gulp-insert": "^0.5.0",
51	52	"gulp-load-plugins": "~0.10.0",
52	53	"gulp-merge-json": "^0.4.0",
53	54	"gulp-minify-css": "~1.2.1",
...	...
1		-// TODO
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Provider, Input, provide, Component} from 'ng-forward';
	3	+import {provideFilters} from '../../../../spec/helpers';
	4	+import {TagsBlockComponent} from './tags-block.component';
	5	+
	6	+const htmlTemplate: string = '<noosfero-tags-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-tags-block>';
	7	+
	8	+const tcb = new TestComponentBuilder();
	9	+
	10	+describe("Components", () => {
	11	+ describe("Tags Block Component", () => {
	12	+
	13	+ let settingsObj = {};
	14	+ let mockedEnvironmentService = {
	15	+ getTags: (): any => {
	16	+ return Promise.resolve({ foo: 10, bar: 20 });
	17	+ }
	18	+ };
	19	+ let profile = { name: 'profile-name' };
	20	+ beforeEach(angular.mock.module("templates"));
	21	+
	22	+ let state = jasmine.createSpyObj("state", ["go"]);
	23	+
	24	+
	25	+ function getProviders() {
	26	+ return [
	27	+ new Provider('$state', { useValue: state }),
	28	+ new Provider('EnvironmentService', {
	29	+ useValue: mockedEnvironmentService
	30	+ }),
	31	+ ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
	32	+ }
	33	+ let componentClass: any = null;
	34	+
	35	+ function getComponent() {
	36	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [TagsBlockComponent], providers: getProviders() })
	37	+ class BlockContainerComponent {
	38	+ block = { type: 'Block', settings: settingsObj };
	39	+ owner = profile;
	40	+ constructor() {
	41	+ }
	42	+ }
	43	+ return BlockContainerComponent;
	44	+ }
	45	+
	46	+
	47	+ it("get tags from the environment service", done => {
	48	+ tcb.createAsync(getComponent()).then(fixture => {
	49	+ let tagsBlock: TagsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	50	+ expect(tagsBlock.tags).toEqual([{ text: "foo", weight: '10', link: '/tag/foo' }, { text: "bar", weight: '20', link: '/tag/bar' }]);
	51	+ done();
	52	+ });
	53	+ });
	54	+ });
	55	+});
...	...
...	...	@@ -13,26 +13,33 @@ export class TagsBlockComponent {
13	13
14	14	profile: any;
15	15	tags: any;
16		-
17	16	tagsLoaded: boolean = false;
18	17
19	18	constructor(private environmentService: EnvironmentService, private $state: any) {
	19	+ this.loadTags();
20	20	}
21	21
22		- ngOnInit() {
23		- this.profile = this.owner;
	22	+ loadTags() {
24	23	this.tags = [];
25	24	let tag = '';
	25	+ let tags: any = [];
	26	+ let that = this;
26	27
27	28	this.environmentService.getTags()
28		- .then((result: noosfero.RestResult<{}>) => {
	29	+ .then((result: any) => {
29	30	for (tag in result) {
30	31	if (result.hasOwnProperty(tag)) {
31	32	let size: number = result[tag];
32		- this.tags.push({ text: tag, weight: size, link: '/tag/' + tag });
	33	+ tags.push({ text: tag.toString(), weight: size.toString(), link: '/tag/' + tag });
33	34	}
34	35	}
35		- this.tagsLoaded = true;
	36	+
	37	+ that.tagsLoaded = true;
	38	+ that.tags = tags.slice();
36	39	});
37	40	}
	41	+
	42	+ ngOnInit() {
	43	+ this.profile = this.owner;
	44	+ }
38	45	}
...	...
1		-<!--
2		-<div deckgrid source="ctrl.tags" class="deckgrid">
3		- <div class="a-card panel media" ng-click="mother.ctrl.openTag(card);">
4		- <div class="header media-body">
5		- <h5 class="title media-heading" ng-bind="card.name"></h5>
6		- <div class="subheader" ng-bind="card.count"></div>
7		- </div>
8		- </div>
9		-</div>
10		--->
11		-<ng-tag-cloud cloud-width="250" cloud-height="250" cloud-data="ctrl.tags"></ng-tag-cloud>
	1	+<ng-tag-cloud cloud-width="200" cloud-height="150" cloud-data="ctrl.tags"></ng-tag-cloud>
...	...
	1	+@import url('../../bower_components/angular-tag-cloud/src/css/ng-tag-cloud.css');
	2	+
1	3	.block.tagsblock {
2	4	.deckgrid[deckgrid]::before {
3	5	font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */
...	...