Added tests for section input image directive

spira · Oct 18, 2015 · be56efb · be56efb
1 parent dc942f0
commit be56efb
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 13 deletions.
diff --git a/...on/directives/contentSectionsInput/sectionInputBlockquote/sectionInputBlockquote.tpl.html b/...on/directives/contentSectionsInput/sectionInputBlockquote/sectionInputBlockquote.tpl.html
@@ -1,4 +1,4 @@
-<ng-form class="sections-input-blockquote" name="SectionInputBlockquoteController.blockquoteForm" >
+<ng-form class="section-input-blockquote" name="SectionInputBlockquoteController.blockquoteForm" >
 
     <md-input-container flex>
         <label>Quote</label>

diff --git a/app/src/common/directives/contentSectionsInput/sectionInputImage/sectionInputImage.spec.ts b/app/src/common/directives/contentSectionsInput/sectionInputImage/sectionInputImage.spec.ts
@@ -0,0 +1,103 @@
+namespace common.directives.contentSectionsInput.sectionInputImage {
+
+    interface TestScope extends ng.IRootScopeService {
+        section: any;
+        SectionInputImageController: SectionInputImageController;
+    }
+
+    describe('Section input image directive', () => {
+
+        let $compile:ng.ICompileService,
+            $rootScope:ng.IRootScopeService,
+            directiveScope:TestScope,
+            compiledElement: ng.IAugmentedJQuery,
+            directiveController: SectionInputImageController,
+            $q:ng.IQService
+        ;
+
+        beforeEach(()=> {
+
+            module('app');
+
+            inject((_$compile_, _$rootScope_, _$q_) => {
+                $compile = _$compile_;
+                $rootScope = _$rootScope_;
+                $q = _$q_;
+            });
+
+            //only initialise the directive once to speed up the testing
+            if (!directiveController){
+
+                directiveScope = <TestScope>$rootScope.$new();
+
+                directiveScope.section = common.models.SectionMock.entity({
+                    type: common.models.sections.Image.contentType,
+                    content: common.models.sections.ImageMock.entity(),
+                });
+
+
+                compiledElement = $compile(`
+                    <section-input-image
+                        section="section"
+                    ></section-input-image>
+                `)(directiveScope);
+
+                $rootScope.$digest();
+
+                directiveController = (<TestScope>compiledElement.isolateScope()).SectionInputImageController;
+
+                let stubbedShow = sinon.stub();
+                stubbedShow.onCall(0).returns($q.when(true));
+                (<any>directiveController).$mdDialog.show = stubbedShow;
+
+            }
+
+        });
+
+        it('should initialise the directive', () => {
+
+            expect($(compiledElement).hasClass('section-input-image')).to.be.true;
+        });
+
+        it('should be able to add a image section', () => {
+
+            let currentImageCount = directiveController.section.content.images.length;
+
+            directiveController.addImage();
+
+            expect(directiveController.section.content.images).to.have.length(currentImageCount + 1);
+        });
+
+        it('should be able to remove an image with prompt', (done) => {
+
+            let currentImageCount = directiveController.section.content.images.length;
+
+            let removePromise = directiveController.removeImage(_.last(directiveController.section.content.images));
+
+            $rootScope.$digest();
+
+            expect(removePromise).eventually.to.be.fulfilled;
+            removePromise.then(() => {
+                expect(directiveController.section.content.images).to.have.length(currentImageCount - 1);
+                done();
+            });
+
+        });
+
+        it('should default an image content caption to the images alt tag when image is changed and no caption is set', () => {
+
+            let tabCount = directiveController.addImage();
+            let newImageTab = directiveController.section.content.images[tabCount - 1];
+
+            expect(newImageTab.caption).to.be.null;
+
+            newImageTab._image = common.models.ImageMock.entity();
+            directiveController.imageChanged(newImageTab);
+
+            expect(newImageTab.caption).to.equal(newImageTab._image.alt);
+        });
+
+
+    });
+
+}
diff --git a/app/src/common/directives/contentSectionsInput/sectionInputImage/sectionInputImage.tpl.html b/app/src/common/directives/contentSectionsInput/sectionInputImage/sectionInputImage.tpl.html
@@ -1,4 +1,4 @@
-<div class="sections-input-rich-text">
+<div class="section-input-image">
 
     <md-tabs md-selected="SectionInputImageController.selectedIndex" md-dynamic-height md-border-bottom md-autoselect>
         <md-tab ng-repeat="imageContent in SectionInputImageController.section.content.images" label="Image {{$index + 1}}">

diff --git a/app/src/common/directives/contentSectionsInput/sectionInputImage/sectionInputImage.ts b/app/src/common/directives/contentSectionsInput/sectionInputImage/sectionInputImage.ts
@@ -2,7 +2,7 @@ namespace common.directives.contentSectionsInput.sectionInputImage {
 
     export const namespace = 'common.directives.contentSectionsInput.sectionInputImage';
 
-    class SectionInputImageController {
+    export class SectionInputImageController {
 
         public selectedIndex:number = 0;
         public section:common.models.Section<common.models.sections.Image>;
@@ -17,9 +17,13 @@ namespace common.directives.contentSectionsInput.sectionInputImage {
             this.sizeOptions = common.models.sections.Image.sizeOptions;
         }
 
-        public addImage():void{
+        /**
+         * Add empty image tab
+         * @returns {number}
+         */
+        public addImage():number{
 
-            this.section.content.images.push({
+            return this.section.content.images.push({
                 _image:null,
                 caption:null,
                 size:null,
@@ -28,6 +32,10 @@ namespace common.directives.contentSectionsInput.sectionInputImage {
 
         }
 
+        /**
+         * When image content changes update caption to alt by default
+         * @param imageContent
+         */
         public imageChanged(imageContent:common.models.sections.IImageContent):void {
 
             if (!imageContent.caption){
@@ -36,6 +44,11 @@ namespace common.directives.contentSectionsInput.sectionInputImage {
 
         }
 
+        /**
+         * Delete an image with prompt
+         * @param image
+         * @returns {IPromise<number>}
+         */
         public removeImage(image):ng.IPromise<number> {
 
             var confirm = this.$mdDialog.confirm()

diff --git a/app/src/common/directives/contentSectionsInput/sectionInputPromo/sectionInputPromo.tpl.html b/app/src/common/directives/contentSectionsInput/sectionInputPromo/sectionInputPromo.tpl.html
@@ -1,4 +1,4 @@
-<ng-form class="sections-input-promo" name="SectionInputPromoController.promoForm" >
+<ng-form class="section-input-promo" name="SectionInputPromoController.promoForm" >
 
     <h2>Promo</h2>
 

diff --git a/...common/directives/contentSectionsInput/sectionInputRichText/sectionInputRichText.tpl.html b/...common/directives/contentSectionsInput/sectionInputRichText/sectionInputRichText.tpl.html
@@ -1,4 +1,4 @@
-<ng-form class="sections-input-rich-text" name="SectionInputRichTextController.richTextForm" >
+<ng-form class="section-input-rich-text" name="SectionInputRichTextController.richTextForm" >
 
     <md-input-container flex>
 

diff --git a/app/src/common/models/section/sections/imageModel.mock.ts b/app/src/common/models/section/sections/imageModel.mock.ts
@@ -11,12 +11,14 @@ namespace common.models.sections {
             let seededChance = new Chance(Math.random());
 
             return {
-                images: {
-                    _image: common.models.ImageMock.entity(),
-                    caption: seededChance.sentence(),
-                    size: _.pick<common.models.sections.ISizeOption, common.models.sections.ISizeOption[]>(common.models.sections.Image.sizeOptions).key,
-                    alignment: _.pick<common.models.sections.IAlignmentOption, common.models.sections.IAlignmentOption[]>(common.models.sections.Image.alignmentOptions).key,
-                }
+                images: [
+                    {
+                        _image: common.models.ImageMock.entity(),
+                        caption: seededChance.sentence(),
+                        size: _.pick<common.models.sections.ISizeOption, common.models.sections.ISizeOption[]>(common.models.sections.Image.sizeOptions).key,
+                        alignment: _.pick<common.models.sections.IAlignmentOption, common.models.sections.IAlignmentOption[]>(common.models.sections.Image.alignmentOptions).key,
+                    }
+                ]
             };
         }