Download as
Browse Code »

Commit 8edc8a6f5f23da7bec4720f1a31882aef8af595e

Authored by ABNER SILVA DE OLIVEIRA
1 parent 50a53289
Exists in master and in 35 other branches activities_block, btn-new-post, cleaning-the-house, cosmetic_changes_people_and_communities_block, coverage, edit-blocks, edit-header-footer, env-tags-block, forgot_password, header_and_footer, helpers-evolution, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, profile-article-resolvers, profile-blocks-sass, profile-view, profile_description_block_component, profile_page_improvements, profile_search, recent-activities, remove-article-confirmation, responsive-fixes, seo, signup_page, skin-small-change, staging, tags-block, theme-skin-yellow, translations, updated_signup_page, users_profile_page

article directive spec well documented to serve as a starting point to test the … 

…noosfero angular components
Showing 4 changed files with 47 additions and 25 deletions   Show diff stats
karma.conf.js
  Diff comments   View file @8edc8a6
... ... @@ -9,7 +9,7 @@ var _ = require('lodash');
9 9 var wiredep = require('wiredep');
10 10  
11 11 var pathSrcHtml = [
12   - path.join(conf.paths.src, '/**/*.html')
  12 + path.join('./src/app/**/*.html')
13 13 ];
14 14  
15 15 var glob = require("glob");
... ... @@ -75,7 +75,7 @@ module.exports = function (config) {
75 75  
76 76 ngHtml2JsPreprocessor: {
77 77 stripPrefix: conf.paths.src + '/',
78   - moduleName: 'angular'
  78 + moduleName: 'templates'
79 79 },
80 80  
81 81  
... ... @@ -132,7 +132,7 @@ module.exports = function (config) {
132 132 // 'src/**/*.js': ['sourcemap'],
133 133 // 'src/**/*.[sS]pec.ts': ['sourcemap']
134 134 // };
135   -
  135 +
136 136 pathSrcHtml.forEach(function (path) {
137 137 configuration.preprocessors[path] = ['ng-html2js'];
138 138 });
... ...
package.json
  Diff comments   View file @8edc8a6
... ... @@ -7,7 +7,7 @@
7 7 "moment": "^2.11.2"
8 8 },
9 9 "scripts": {
10   - "test": "webpack -w & karma start",
  10 + "test": "concurrently \"webpack -w\" \"karma start\"",
11 11 "postinstall": "npm install -g bower && bower install",
12 12 "start": "concurrently \"webpack -w\" \"gulp serve\""
13 13 },
... ...
src/app/components/noosfero-articles/article/article.directive.spec.ts
  Diff comments   View file @8edc8a6
... ... @@ -7,39 +7,62 @@ import {ArticleDirective} from './article.directive';
7 7 // In ng2 you inject tcb.
8 8 const tcb = new TestComponentBuilder();
9 9  
  10 +// this htmlTemplate will be re-used between the container components in this spec file
  11 +const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
10 12  
11   -let html = '<noosfero-article [article]="ctr.article" [profile]="ctrl.profile"></noosfero-article>';
12 13  
13   -// Create a component to include your testing component
14   -@Component({ selector: 'my-test', template: html, directives: [ArticleDirective] })
15   -class TestArticleDirective {
16   - article = { type: 'TinyMceArticle' };
17   - profile = { name: 'profile-name' };
18   - constructor() {
19   - }
20   -}
  14 +describe("Article Directive", () => {
21 15  
  16 + // the karma preprocessor html2js transform the templates html into js files which put
  17 + // the templates to the templateCache into the module templates
  18 + // we need to load the module templates here as the template for the
  19 + // component NoosferoArtileDirective will be load on our tests
  20 + beforeEach(angular.mock.module("templates"));
22 21  
23   -describe("Article Directive", () => {
24 22 it("receives the article and profile as inputs", done => {
  23 +
  24 + // Creating a container component (ArticleContainerComponent) to include
  25 + // the component under test (ArticleDirective)
  26 + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] })
  27 + class ArticleContainerComponent {
  28 + article = { type: 'anyArticleType' };
  29 + profile = { name: 'profile-name' };
  30 + constructor() {
  31 + }
  32 + }
  33 +
  34 + // uses the TestComponentBuilder instance to initialize the component
25 35 tcb
26   - .createAsync(TestArticleDirective).then(fixture => {
  36 + .createAsync(ArticleContainerComponent).then(fixture => {
  37 + // and here we can inspect and run the test assertions
27 38 let myComponent: ArticleDirective = fixture.componentInstance;
28   - expect(myComponent.article.type).toEqual("TinyMceArticle");
  39 +
  40 + // assure the article object inside the ArticleDirective matches
  41 + // the provided through the parent component
  42 + expect(myComponent.article.type).toEqual("anyArticleType");
29 43 expect(myComponent.profile.name).toEqual("profile-name");
30   - console.log(fixture.debugElement);
  44 +
  45 + // done needs to be called (it isn't really needed, as we can read in
  46 + // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
  47 + // because createAsync in ng-forward is not really async, but as the intention
  48 + // here is write tests in angular 2 ways, this is recommended
31 49 done();
32 50 });
33 51 });
34 52  
35   - it("renders a directive corresponding to the article type", done => {
36   -
37   - @Component({ selector: 'noosfero-TinyMceArticle', template: "<h1>custom component</h1>" })
38   - class CustomArticleComponent {
39 53  
  54 + it("renders a directive which matches to the article type", done => {
  55 + // NoosferoTinyMceArticle component created to check if it will be used
  56 + // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective)
  57 + // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
  58 + @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
  59 + class NoosferoTinyMceArticle {
  60 + @Input() article: any;
  61 + @Input() profile: any;
40 62 }
41 63  
42   - @Component({ selector: 'custom-article-type-test', template: html, directives: [ArticleDirective, CustomArticleComponent] })
  64 + // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
  65 + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] })
43 66 class CustomArticleType {
44 67 article = { type: 'TinyMceArticle' };
45 68 profile = { name: 'profile-name' };
... ... @@ -50,8 +73,7 @@ describe(&quot;Article Directive&quot;, () =&gt; {
50 73 .createAsync(CustomArticleType).then(fixture => {
51 74 let myComponent: CustomArticleType = fixture.componentInstance;
52 75 expect(myComponent.article.type).toEqual("TinyMceArticle");
53   - expect(myComponent.profile.name).toEqual("profile-name");
54   - console.log(fixture.debugElement);
  76 + expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
55 77 done();
56 78 });
57 79 });
... ...
src/app/components/noosfero-articles/article/article.directive.ts
  Diff comments   View file @8edc8a6
... ... @@ -11,7 +11,7 @@ export class ArticleView {
11 11 @Input() profile: any;
12 12  
13 13 constructor() {
14   - console.log("ARTICLE VIEW");
  14 +
15 15 }
16 16 }
17 17  
... ...