diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html b/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html index 2b3c77dfa7..5f4d71b098 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html @@ -1,7 +1,7 @@
- {{displayName}} + {{nameFile}}
diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.spec.ts new file mode 100644 index 0000000000..d38ec4dbf1 --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.spec.ts @@ -0,0 +1,55 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, expect, it, inject, beforeEach } from '@angular/core/testing'; +import { TestComponentBuilder } from '@angular/compiler/testing'; +import { ImgViewerComponent } from './imgViewer.component'; + +describe('Img viewer component ', () => { + + let imgViewerComponentFixture, element, component; + + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(ImgViewerComponent) + .then(fixture => { + imgViewerComponentFixture = fixture; + element = fixture.nativeElement; + component = fixture.componentInstance; + }); + })); + + it('If no url is passed should thrown an error', () => { + expect(() => { + component.ngOnChanges(); + }).toThrow(new Error('Attribute urlFile is required')); + }); + + it('If url is passed should not thrown an error', () => { + component.urlFile = 'fake-url'; + expect(() => { + component.ngOnChanges(); + }).not.toThrow(new Error('Attribute urlFile is required')); + }); + + it('The file Name should be present in the alt attribute', () => { + component.nameFile = 'fake-name'; + imgViewerComponentFixture.detectChanges(); + expect(element.querySelector('#viewer-image').getAttribute('alt')).toEqual('fake-name'); + }); +}); + diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.spec.ts new file mode 100644 index 0000000000..10b005e7dd --- /dev/null +++ b/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.spec.ts @@ -0,0 +1,56 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, expect, it, inject, beforeEach } from '@angular/core/testing'; +import { TestComponentBuilder } from '@angular/compiler/testing'; +import { MediaPlayerComponent } from './mediaPlayer.component'; + +describe('Media player component ', () => { + + let mediaPlayerComponentFixture, element, component; + + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(MediaPlayerComponent) + .then(fixture => { + mediaPlayerComponentFixture = fixture; + element = fixture.nativeElement; + component = fixture.componentInstance; + }); + })); + + it('If no url is passed should thrown an error', () => { + expect(() => { + component.ngOnChanges(); + }).toThrow(new Error('Attribute urlFile is required')); + }); + + it('If url is passed should not thrown an error', () => { + component.urlFile = 'fake-url'; + expect(() => { + component.ngOnChanges(); + }).not.toThrow(new Error('Attribute urlFile is required')); + }); + + it('If url is passed should not thrown an error', () => { + component.urlFile = 'fake-url'; + expect(() => { + component.ngOnChanges(); + }).not.toThrow(new Error('Attribute urlFile is required')); + }); +}); + diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts b/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts index a4d618cbc8..df1b4a039f 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts +++ b/ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts @@ -15,21 +15,17 @@ * limitations under the License. */ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Input } from '@angular/core'; declare let __moduleName: string; @Component({ moduleId: __moduleName, selector: 'media-player', templateUrl: './mediaPlayer.component.html', - styleUrls: ['./mediaPlayer.component.css'], - encapsulation: ViewEncapsulation.None + styleUrls: ['./mediaPlayer.component.css'] }) export class MediaPlayerComponent { - @Input() - nameFile: string; - @Input() urlFile: string; diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts index fc511ef881..ca4d0e670b 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts @@ -15,57 +15,47 @@ * limitations under the License. */ -import { describe, expect, it, inject } from '@angular/core/testing'; +import { describe, expect, it, inject, beforeEach } from '@angular/core/testing'; import { TestComponentBuilder } from '@angular/compiler/testing'; import { NotSupportedFormat } from './notSupportedFormat.component'; describe('Not Supported Format View', () => { + let notSupportedFixture, element, component; + + beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { + return tcb + .createAsync(NotSupportedFormat) + .then(fixture => { + notSupportedFixture = fixture; + element = fixture.nativeElement; + component = fixture.componentInstance; + fixture.detectChanges(); + }); + })); + describe('View', () => { - it('Download button should be present', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(NotSupportedFormat) - .then((fixture) => { - let element = fixture.nativeElement; - fixture.detectChanges(); + it('Download button should be present', () => { + expect(element.querySelector('#viewer-download-button')).not.toBeNull(); + }); - expect(element.querySelector('#viewer-download-button')).not.toBeNull(); - }); - })); - it('should display the name of the file', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(NotSupportedFormat) - .then((fixture) => { - let element = fixture.nativeElement; - let component = fixture.componentInstance; - component.nameFile = 'Example Content.xls'; - - fixture.detectChanges(); - - expect(element.querySelector('h4 span').innerHTML).toEqual('Example Content.xls'); - }); - })); + it('should display the name of the file', () => { + component.nameFile = 'Example Content.xls'; + notSupportedFixture.detectChanges(); + expect(element.querySelector('h4 span').innerHTML).toEqual('Example Content.xls'); + }); }); describe('User Interaction', () => { - it('Click on Download button should call download method', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb - .createAsync(NotSupportedFormat) - .then((fixture) => { - let element = fixture.nativeElement; - let component = fixture.componentInstance; + it('Click on Download button should call download method', () => { + spyOn(window, 'open'); - fixture.detectChanges(); + let downloadButton = element.querySelector('#viewer-download-button'); + downloadButton.click(); - spyOn(component, 'download'); - - let downloadButton = element.querySelector('#viewer-download-button'); - downloadButton.click(); - - expect(component.download).toHaveBeenCalled(); - }); - })); + expect(window.open).toHaveBeenCalled(); + }); }); }); diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css b/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css index 8dc903e7ba..98e4fa099a 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css @@ -32,7 +32,7 @@ top: 80px; right:35px; width:auto; - position:fixed; + position:absolute; border-radius: 10px; background: #3E3E3E; color: white; @@ -44,7 +44,7 @@ top: 80px; left:35px; width:auto; - position:fixed; + position:absolute; border-radius: 10px; background: #3E3E3E; color: white; @@ -93,5 +93,4 @@ cursor: pointer; background: grey; border-radius: 24px; - } diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css index 677f0acbf3..35c46deaef 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css +++ b/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css @@ -38,8 +38,6 @@ .viewer-overlay-view { position: fixed; - width: 100%; - height: 100%; top: 0px; left: 0px; z-index: 1000; @@ -55,3 +53,8 @@ img-viewer { justify-content: center; } +.all-space{ + width: 100%; + height: 100%; + background-color: #515151; +} diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html index 0e586a295b..ff7f56479e 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html +++ b/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html @@ -1,17 +1,19 @@ -
+
-
+
-
-
+
+ +
- {{displayName}} + {{displayName}} @@ -21,7 +23,8 @@
- + -
+
- - - - - + + + + + -
+
-
- -
-
- -
-
- -
-
- -
+
+ +
+
+ +
+
+ +
+
+ +
- - - - - + + + + +
diff --git a/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts index 8323392fcf..2b1b16daed 100644 --- a/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts +++ b/ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts @@ -59,75 +59,75 @@ describe('ViewerComponent', () => { }); describe('View', () => { - it('shadow overlay should be present if is overlay mode', () => { - expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull(); - }); - it('header should be present if is overlay mode', () => { - expect(element.querySelector('header')).not.toBeNull(); - }); + describe('Overlay mode true', () => { - it('header should be NOT be present if is not overlay mode', () => { - component.overlayMode = false; - - viewerComponentFixture.detectChanges(); - - expect(element.querySelector('header')).toBeNull(); - }); - - it('Name File should be present if is overlay mode ', () => { - component.overlayMode = true; - - component.ngOnChanges().then(() => { + beforeEach(() => { + component.overlayMode = true; viewerComponentFixture.detectChanges(); - expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf'); + }); + + it('shadow overlay should be present if is overlay mode', () => { + expect(element.querySelector('#viewer-shadow-transparent')).not.toBeNull(); + }); + + it('header should be present if is overlay mode', () => { + expect(element.querySelector('header')).not.toBeNull(); + }); + + it('Name File should be present if is overlay mode ', () => { + component.ngOnChanges().then(() => { + viewerComponentFixture.detectChanges(); + expect(element.querySelector('#viewer-name-file').innerHTML).toEqual('fake-test-file.pdf'); + }); + }); + + it('Close button should be present if overlay mode', () => { + expect(element.querySelector('#viewer-close-button')).not.toBeNull(); + }); + + it('Click on close button should hide the viewer', () => { + element.querySelector('#viewer-close-button').click(); + viewerComponentFixture.detectChanges(); + expect(element.querySelector('#viewer-main-container')).toBeNull(); + }); + + it('Esc button should hide the viewer', () => { + EventMock.keyDown(27); + viewerComponentFixture.detectChanges(); + expect(element.querySelector('#viewer-main-container')).toBeNull(); + }); + + it('all-space class should not be present if is in overlay mode', () => { + expect(element.querySelector('#viewer').getAttribute('class')).toBeNull(); }); }); - it('Close button should be present if overlay mode', () => { - component.overlayMode = true; + describe('Overlay mode false', () => { - viewerComponentFixture.detectChanges(); + beforeEach(() => { + component.overlayMode = false; + viewerComponentFixture.detectChanges(); + }); - expect(element.querySelector('#viewer-close-button')).not.toBeNull(); + it('header should be NOT be present if is not overlay mode', () => { + expect(element.querySelector('header')).toBeNull(); + }); + + it('Close button should be not present if is not overlay mode', () => { + expect(element.querySelector('#viewer-close-button')).toBeNull(); + }); + + it('Esc button should not hide the viewerls if is not overlay mode', () => { + EventMock.keyDown(27); + viewerComponentFixture.detectChanges(); + expect(element.querySelector('#viewer-main-container')).not.toBeNull(); + }); + + it('all-space class should be present if is not overlay mode', () => { + expect(element.querySelector('#viewer').getAttribute('class')).toEqual('all-space'); + }); }); - - it('Close button should be not present if is not overlay mode', () => { - component.overlayMode = false; - - viewerComponentFixture.detectChanges(); - - expect(element.querySelector('#viewer-close-button')).toBeNull(); - }); - - it('Click on close button should hide the viewer', () => { - component.overlayMode = true; - - viewerComponentFixture.detectChanges(); - element.querySelector('#viewer-close-button').click(); - viewerComponentFixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).toBeNull(); - - }); - - it('Esc button should not hide the viewerls if is not overlay mode', () => { - component.overlayMode = false; - - viewerComponentFixture.detectChanges(); - EventMock.keyDown(27); - viewerComponentFixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).not.toBeNull(); - }); - - it('Esc button should hide the viewer', () => { - component.overlayMode = true; - - viewerComponentFixture.detectChanges(); - EventMock.keyDown(27); - viewerComponentFixture.detectChanges(); - expect(element.querySelector('#viewer-main-container')).toBeNull(); - }); - }); describe('Attribute', () => {