From 921551c269a2664d4fd39e1fd253fdd0e7f8a272 Mon Sep 17 00:00:00 2001 From: Michel Felipe de Oliveira Ferreira Date: Tue, 8 Mar 2016 17:17:03 -0300 Subject: [PATCH] Refactor Blog unit test and implement a new spec --- src/app/components/noosfero-articles/blog/blog.component.spec.ts | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------ 1 file changed, 56 insertions(+), 72 deletions(-) diff --git a/src/app/components/noosfero-articles/blog/blog.component.spec.ts b/src/app/components/noosfero-articles/blog/blog.component.spec.ts index 1b20fc8..2df0a5b 100644 --- a/src/app/components/noosfero-articles/blog/blog.component.spec.ts +++ b/src/app/components/noosfero-articles/blog/blog.component.spec.ts @@ -1,6 +1,7 @@ +import {providers} from 'ng-forward/cjs/testing/providers'; + import { Input, - provide, Component } from 'ng-forward'; import { @@ -12,26 +13,16 @@ import { quickCreateComponent, provideEmptyObjects, createProviderToValue, - getAngularService + getAngularService, + provideFilters } from "../../../../spec/helpers.ts"; - // this htmlTemplate will be re-used between the container components in this spec file const htmlTemplate: string = ''; -let articleService: { - getChildren: Function -} = < any > {}; - describe("Blog Component", () => { - - // the karma preprocessor html2js transform the templates html into js files which put - // the templates to the templateCache into the module templates - // we need to load the module templates here as the template for the - // component Noosfero ArtileView will be load on our tests - beforeEach(angular.mock.module("templates")); - - function promiseResultTemplate(response ? : {}) { + + function promiseResultTemplate(response?: {}) { let thenFuncEmpty = (func: Function) => { // does nothing }; @@ -50,48 +41,54 @@ describe("Blog Component", () => { } } - beforeAll(() => { - // creating mock for articleService - articleService = { - getChildren: (article_id: number, filters: {}) => { - return promiseResultTemplate(null); - } + let articleService = { + getChildren: (article_id: number, filters: {}) => { + return promiseResultTemplate(null); + } + }; + + @Component({ + selector: 'test-container-component', + template: htmlTemplate, + directives: [ArticleBlog], + providers: [ + provideEmptyObjects('Restangular'), + createProviderToValue('ArticleService', articleService), + provideFilters('truncateFilter') + ] + }) + class BlogContainerComponent { + article = { + type: 'anyArticleType' + }; + profile = { + name: 'profile-name' }; + } + + beforeEach(() => { + + // the karma preprocessor html2js transform the templates html into js files which put + // the templates to the templateCache into the module templates + // we need to load the module templates here as the template for the + // component Noosfero ArtileView will be load on our tests + angular.mock.module("templates") + + providers((provide: any) => { + return [ + provide('ArticleService', { useValue: articleService }) + ] + }); }); it("renders the blog content", (done: Function) => { - // Creating a container component (ArticleContainerComponent) to include - // the component under test (ArticleView) - @Component({ - selector: 'test-container-component', - template: htmlTemplate, - directives: [ArticleBlog], - providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)] - }) - class BlogContainerComponent { - article = { - type: 'anyArticleType' - }; - profile = { - name: 'profile-name' - }; - } - createComponentFromClass(BlogContainerComponent).then((fixture) => { expect(fixture.debugElement.query('div.blog').length).toEqual(1); done(); }); - - - - }); - - it("get $q service", () => { - let $q = getAngularService("$q"); - console.log($q); }); it("verify the blog data", (done: Function) => { @@ -102,44 +99,31 @@ describe("Blog Component", () => { headers: (headerName: string) => { return 1; }, - data: < any > { - articles: [] + data: { + articles: [{ + id: 1, + title: 'The article test' + }] } }); }; - @Component({ - selector: 'test-container-component', - template: htmlTemplate, - directives: [ArticleBlog], - providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)] - }) - class BlogContainerComponent { - article = { - type: 'anyArticleType' - }; - profile = { - name: 'profile-name' - }; - } - createComponentFromClass(BlogContainerComponent).then((fixture) => { // gets the children component of BlogContainerComponent let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance; - // check if the component property are the provided by the mocked articleService - expect(( < any > articleBlog)["posts"]).toEqual([]); - expect(( < any > articleBlog)["totalPosts"]).toEqual(1); - + // check if the component property are the provided by the mocked articleService + var post = { + id: 1, + title: 'The article test' + }; + expect((articleBlog)["posts"][0]).toEqual(jasmine.objectContaining(post)); + expect((articleBlog)["totalPosts"]).toEqual(1); - // done needs to be called (it isn't really needed, as we can read in - // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync) - // because createAsync in ng-forward is not really async, but as the intention - // here is write tests in angular 2 ways, this is recommended done(); }); }); -}); \ No newline at end of file +}); -- libgit2 0.21.2