Commit 8edc8a6f5f23da7bec4720f1a31882aef8af595e
1 parent
50a53289
Exists in
master
and in
35 other branches
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
| @@ -9,7 +9,7 @@ var _ = require('lodash'); | @@ -9,7 +9,7 @@ var _ = require('lodash'); | ||
| 9 | var wiredep = require('wiredep'); | 9 | var wiredep = require('wiredep'); |
| 10 | 10 | ||
| 11 | var pathSrcHtml = [ | 11 | var pathSrcHtml = [ |
| 12 | - path.join(conf.paths.src, '/**/*.html') | 12 | + path.join('./src/app/**/*.html') |
| 13 | ]; | 13 | ]; |
| 14 | 14 | ||
| 15 | var glob = require("glob"); | 15 | var glob = require("glob"); |
| @@ -75,7 +75,7 @@ module.exports = function (config) { | @@ -75,7 +75,7 @@ module.exports = function (config) { | ||
| 75 | 75 | ||
| 76 | ngHtml2JsPreprocessor: { | 76 | ngHtml2JsPreprocessor: { |
| 77 | stripPrefix: conf.paths.src + '/', | 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,7 +132,7 @@ module.exports = function (config) { | ||
| 132 | // 'src/**/*.js': ['sourcemap'], | 132 | // 'src/**/*.js': ['sourcemap'], |
| 133 | // 'src/**/*.[sS]pec.ts': ['sourcemap'] | 133 | // 'src/**/*.[sS]pec.ts': ['sourcemap'] |
| 134 | // }; | 134 | // }; |
| 135 | - | 135 | + |
| 136 | pathSrcHtml.forEach(function (path) { | 136 | pathSrcHtml.forEach(function (path) { |
| 137 | configuration.preprocessors[path] = ['ng-html2js']; | 137 | configuration.preprocessors[path] = ['ng-html2js']; |
| 138 | }); | 138 | }); |
package.json
| @@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
| 7 | "moment": "^2.11.2" | 7 | "moment": "^2.11.2" |
| 8 | }, | 8 | }, |
| 9 | "scripts": { | 9 | "scripts": { |
| 10 | - "test": "webpack -w & karma start", | 10 | + "test": "concurrently \"webpack -w\" \"karma start\"", |
| 11 | "postinstall": "npm install -g bower && bower install", | 11 | "postinstall": "npm install -g bower && bower install", |
| 12 | "start": "concurrently \"webpack -w\" \"gulp serve\"" | 12 | "start": "concurrently \"webpack -w\" \"gulp serve\"" |
| 13 | }, | 13 | }, |
src/app/components/noosfero-articles/article/article.directive.spec.ts
| @@ -7,39 +7,62 @@ import {ArticleDirective} from './article.directive'; | @@ -7,39 +7,62 @@ import {ArticleDirective} from './article.directive'; | ||
| 7 | // In ng2 you inject tcb. | 7 | // In ng2 you inject tcb. |
| 8 | const tcb = new TestComponentBuilder(); | 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 | it("receives the article and profile as inputs", done => { | 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 | tcb | 35 | tcb |
| 26 | - .createAsync(TestArticleDirective).then(fixture => { | 36 | + .createAsync(ArticleContainerComponent).then(fixture => { |
| 37 | + // and here we can inspect and run the test assertions | ||
| 27 | let myComponent: ArticleDirective = fixture.componentInstance; | 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 | expect(myComponent.profile.name).toEqual("profile-name"); | 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 | done(); | 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 | class CustomArticleType { | 66 | class CustomArticleType { |
| 44 | article = { type: 'TinyMceArticle' }; | 67 | article = { type: 'TinyMceArticle' }; |
| 45 | profile = { name: 'profile-name' }; | 68 | profile = { name: 'profile-name' }; |
| @@ -50,8 +73,7 @@ describe("Article Directive", () => { | @@ -50,8 +73,7 @@ describe("Article Directive", () => { | ||
| 50 | .createAsync(CustomArticleType).then(fixture => { | 73 | .createAsync(CustomArticleType).then(fixture => { |
| 51 | let myComponent: CustomArticleType = fixture.componentInstance; | 74 | let myComponent: CustomArticleType = fixture.componentInstance; |
| 52 | expect(myComponent.article.type).toEqual("TinyMceArticle"); | 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 | done(); | 77 | done(); |
| 56 | }); | 78 | }); |
| 57 | }); | 79 | }); |
src/app/components/noosfero-articles/article/article.directive.ts