Download as
Browse Code »

Commit 07ad018c293c18dc5080618bc5590ba86877f52a

Authored by Caio Almeida
1 parent bcab3c27
Exists in updated_signup_page and in 1 other branch tags-block

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

Showing 8 changed files with 83 additions and 22 deletions   Show diff stats
@@ -14,3 +14,6 @@ typings @@ -14,3 +14,6 @@ typings
14 npm-debug.log 14 npm-debug.log
15 src/vendor.bundle.js* 15 src/vendor.bundle.js*
16 .vagrant/ 16 .vagrant/
  17 +*.swp
  18 +*.swo
  19 +*~
@@ -35,9 +35,10 @@ @@ -35,9 +35,10 @@
35 "angular-i18n": "^1.5.0", 35 "angular-i18n": "^1.5.0",
36 "angular-load": "^0.4.1", 36 "angular-load": "^0.4.1",
37 "angular-translate-interpolation-messageformat": "^2.10.0", 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 "devDependencies": { 43 "devDependencies": {
43 "angular-mocks": "~1.5.0" 44 "angular-mocks": "~1.5.0"
gulp/styles.js
  Diff comments   View file @07ad018
@@ -11,6 +11,8 @@ var $ = require('gulp-load-plugins')(); @@ -11,6 +11,8 @@ var $ = require('gulp-load-plugins')();
11 var wiredep = require('wiredep').stream; 11 var wiredep = require('wiredep').stream;
12 var _ = require('lodash'); 12 var _ = require('lodash');
13 13
  14 +var importCss = require('gulp-import-css');
  15 +
14 gulp.task('styles-reload', ['styles'], function() { 16 gulp.task('styles-reload', ['styles'], function() {
15 return buildStyles() 17 return buildStyles()
16 .pipe(browserSync.stream()); 18 .pipe(browserSync.stream());
@@ -55,5 +57,6 @@ var buildStyles = function() { @@ -55,5 +57,6 @@ var buildStyles = function() {
55 .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass')) 57 .pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
56 .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer')) 58 .pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
57 .pipe($.sourcemaps.write()) 59 .pipe($.sourcemaps.write())
  60 + .pipe(importCss())
58 .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/'))); 61 .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
59 }; 62 };
@@ -46,8 +46,9 @@ @@ -46,8 +46,9 @@
46 "gulp-eslint": "~1.0.0", 46 "gulp-eslint": "~1.0.0",
47 "gulp-filter": "~3.0.1", 47 "gulp-filter": "~3.0.1",
48 "gulp-flatten": "~0.2.0", 48 "gulp-flatten": "~0.2.0",
49 - "gulp-insert": "^0.5.0", 49 + "gulp-import-css": "^0.1.2",
50 "gulp-inject": "~3.0.0", 50 "gulp-inject": "~3.0.0",
  51 + "gulp-insert": "^0.5.0",
51 "gulp-load-plugins": "~0.10.0", 52 "gulp-load-plugins": "~0.10.0",
52 "gulp-merge-json": "^0.4.0", 53 "gulp-merge-json": "^0.4.0",
53 "gulp-minify-css": "~1.2.1", 54 "gulp-minify-css": "~1.2.1",
src/app/layout/blocks/tags/tags-block.component.spec.ts
  Diff comments   View file @07ad018
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 +});
src/app/layout/blocks/tags/tags-block.component.ts
  Diff comments   View file @07ad018
@@ -13,26 +13,33 @@ export class TagsBlockComponent { @@ -13,26 +13,33 @@ export class TagsBlockComponent {
13 13
14 profile: any; 14 profile: any;
15 tags: any; 15 tags: any;
16 -  
17 tagsLoaded: boolean = false; 16 tagsLoaded: boolean = false;
18 17
19 constructor(private environmentService: EnvironmentService, private $state: any) { 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 this.tags = []; 23 this.tags = [];
25 let tag = ''; 24 let tag = '';
  25 + let tags: any = [];
  26 + let that = this;
26 27
27 this.environmentService.getTags() 28 this.environmentService.getTags()
28 - .then((result: noosfero.RestResult<{}>) => { 29 + .then((result: any) => {
29 for (tag in result) { 30 for (tag in result) {
30 if (result.hasOwnProperty(tag)) { 31 if (result.hasOwnProperty(tag)) {
31 let size: number = result[tag]; 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 }
src/app/layout/blocks/tags/tags-block.html
  Diff comments   View file @07ad018
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>
src/app/layout/blocks/tags/tags-block.scss
  Diff comments   View file @07ad018
  1 +@import url('../../bower_components/angular-tag-cloud/src/css/ng-tag-cloud.css');
  2 +
1 .block.tagsblock { 3 .block.tagsblock {
2 .deckgrid[deckgrid]::before { 4 .deckgrid[deckgrid]::before {
3 font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */ 5 font-size: 0; /* See https://github.com/akoenig/angular-deckgrid/issues/14#issuecomment-35728861 */