From 07ad018c293c18dc5080618bc5590ba86877f52a Mon Sep 17 00:00:00 2001 From: Caio SBA Date: Tue, 24 May 2016 13:35:03 -0300 Subject: [PATCH] Ticket #45: Displaying tags as a tag cloud and implementing tests for tags block --- .gitignore | 3 +++ bower.json | 7 ++++--- gulp/styles.js | 3 +++ package.json | 3 ++- src/app/layout/blocks/tags/tags-block.component.spec.ts | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- src/app/layout/blocks/tags/tags-block.component.ts | 19 +++++++++++++------ src/app/layout/blocks/tags/tags-block.html | 12 +----------- src/app/layout/blocks/tags/tags-block.scss | 2 ++ 8 files changed, 83 insertions(+), 22 deletions(-) diff --git a/.gitignore b/.gitignore index a2d7b49..f7a8b95 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,6 @@ typings npm-debug.log src/vendor.bundle.js* .vagrant/ +*.swp +*.swo +*~ diff --git a/bower.json b/bower.json index d620d14..62612d5 100644 --- a/bower.json +++ b/bower.json @@ -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" diff --git a/gulp/styles.js b/gulp/styles.js index acc96ae..da300a8 100644 --- a/gulp/styles.js +++ b/gulp/styles.js @@ -11,6 +11,8 @@ var $ = require('gulp-load-plugins')(); 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/'))); }; diff --git a/package.json b/package.json index 79301b0..2c58139 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/layout/blocks/tags/tags-block.component.spec.ts b/src/app/layout/blocks/tags/tags-block.component.spec.ts index 70b786d..69ed146 100644 --- a/src/app/layout/blocks/tags/tags-block.component.spec.ts +++ b/src/app/layout/blocks/tags/tags-block.component.spec.ts @@ -1 +1,55 @@ -// 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 = ''; + +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(); + }); + }); + }); +}); diff --git a/src/app/layout/blocks/tags/tags-block.component.ts b/src/app/layout/blocks/tags/tags-block.component.ts index b562ff1..8a3165d 100644 --- a/src/app/layout/blocks/tags/tags-block.component.ts +++ b/src/app/layout/blocks/tags/tags-block.component.ts @@ -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; + } } diff --git a/src/app/layout/blocks/tags/tags-block.html b/src/app/layout/blocks/tags/tags-block.html index a459fd4..d70ae5b 100644 --- a/src/app/layout/blocks/tags/tags-block.html +++ b/src/app/layout/blocks/tags/tags-block.html @@ -1,11 +1 @@ - - + diff --git a/src/app/layout/blocks/tags/tags-block.scss b/src/app/layout/blocks/tags/tags-block.scss index 18fa676..587fe2b 100644 --- a/src/app/layout/blocks/tags/tags-block.scss +++ b/src/app/layout/blocks/tags/tags-block.scss @@ -1,3 +1,5 @@ +@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 */ -- libgit2 0.21.2