inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix not overlay mode problems and improve test

Browse Source
This commit is contained in:
Eugenio Romano
2016-09-02 15:24:58 +01:00
parent 3ee567ff65
commit 769371ee12
9 changed files with 247 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.html
View File

@@ -1,7 +1,7 @@
<div class="viewer-image-content">
<div class="viewer-image-row">
<div class="viewer-image-cell">
<img src="{{urlFile}}" alt="{{displayName}}" id="viewer-image" class="center-element viewer-image"/>
<img id="viewer-image" src="{{urlFile}}" alt="{{nameFile}}" class="center-element viewer-image"/>
</div>
</div>
</div>

55
ng2-components/ng2-alfresco-viewer/src/componets/imgViewer.component.spec.ts Normal file
View File

@@ -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');
});
});

56
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.spec.ts Normal file
View File

@@ -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'));
});
});

8
ng2-components/ng2-alfresco-viewer/src/componets/mediaPlayer.component.ts
View File

@@ -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;

66
ng2-components/ng2-alfresco-viewer/src/componets/notSupportedFormat.component.spec.ts
View File

@@ -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();
});
});
});

5
ng2-components/ng2-alfresco-viewer/src/componets/pdfViewer.component.css
View File

@@ -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;
}

7
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.css
View File

@@ -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;
}

69
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.html
View File

@@ -1,17 +1,19 @@
<div *ngIf="showViewer">
<div id="viewer" *ngIf="showViewer" [ngClass]="{'all-space': !overlayMode }">
<div *ngIf="overlayMode">
<div id="viewer-shadow-transparent" class="viewer-shadow-transparent"></div>
</div>
<div id="viewer-main-container" class="viewer-main-container" [ngClass]="{'viewer-overlay-view': overlayMode }" >
<div id="viewer-main-container" class="all-space" [ngClass]="{'viewer-overlay-view': overlayMode }">
<!-- Start Layout -->
<div mdl [ngClass]="{'mdl-layout mdl-js-layout mdl-layout--fixed-header': overlayMode }" >
<header *ngIf="overlayMode" class="mdl-layout__header">
<div mdl
[ngClass]="{'mdl-layout mdl-js-layout mdl-layout--fixed-header': overlayMode, 'all-space': !overlayMode}">
<header *ngIf="overlayMode" class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- File Title -->
<span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
<span id="viewer-name-file" class="mdl-layout-title viewer-name-file">{{displayName}}</span>
<span class="vertical-divider"></span>
@@ -21,7 +23,8 @@
<nav class="mdl-navigation">
<div id="viewer-toolbar-view-options">
<button *ngIf="overlayMode"
class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="close()">
class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
(click)="close()">
<i id="viewer-close-button" class="icon material-icons">close</i>
</button>
</div>
@@ -30,44 +33,48 @@
</div>
</header>
<!--<div class="mdl-layout__drawer">-->
<!--<span class="mdl-layout-title">Thumbnail</span>-->
<!--<span class="mdl-layout-title">Thumbnail</span>-->
<!--</div>-->
<main id="page-content" class="mdl-layout__content">
<main id="page-content" class="mdl-layout__content" [ngClass]="{'all-space': !overlayMode }">
<div class="mdl-grid">
<!--<div id="viewer-previous-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="previousFile()">-->
<!--<i class="icon material-icons ">keyboard_arrow_left</i>-->
<!--</button>-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="previousFile()">-->
<!--<i class="icon material-icons ">keyboard_arrow_left</i>-->
<!--</button>-->
<!--</div>-->
<div id="viewer-content-container" *ngIf="isLoaded()" class="center-element mdl-cell mdl-cell--12-col" >
<div id="viewer-content-container" *ngIf="isLoaded()"
class="center-element mdl-cell mdl-cell--12-col">
<!-- Start View Switch-->
<div *ngIf="isPdf()">
<pdf-viewer [showToolbar]="showToolbar" [urlFile]="urlFileContent" [nameFile]="displayName" ></pdf-viewer>
</div>
<div class="center-element" *ngIf="isImage()" >
<img-viewer [urlFile]="urlFileContent" [nameFile]="displayName"></img-viewer>
</div>
<div class="center-element" *ngIf="isMedia()" >
<media-player [urlFile]="urlFileContent" [mimeType]="mimeType" [nameFile]="displayName"></media-player>
</div>
<div *ngIf="!supportedExtension()">
<not-supported-format [urlFile]="urlFileContent" [nameFile]="displayName" ></not-supported-format>
</div>
<div *ngIf="isPdf()">
<pdf-viewer [showToolbar]="showToolbar" [urlFile]="urlFileContent"
[nameFile]="displayName"></pdf-viewer>
</div>
<div class="center-element" *ngIf="isImage()">
<img-viewer [urlFile]="urlFileContent" [nameFile]="displayName"></img-viewer>
</div>
<div class="center-element" *ngIf="isMedia()">
<media-player [urlFile]="urlFileContent" [mimeType]="mimeType"
[nameFile]="displayName"></media-player>
</div>
<div *ngIf="!supportedExtension()">
<not-supported-format [urlFile]="urlFileContent"
[nameFile]="displayName"></not-supported-format>
</div>
<!-- End View Switch -->
</div>
<!--<div id="viewer-next-file-button" class="center-element mdl-cell mdl-cell&#45;&#45;2-col mdl-cell&#45;&#45;hide-tablet mdl-cell&#45;&#45;hide-phone">-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="nextFile()">-->
<!--<i class="icon material-icons">keyboard_arrow_right</i>-->
<!--</button>-->
<!--<button *ngIf="false"-->
<!--class="center-element mdl-color&#45;&#45;black mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;mini-fab mdl-button&#45;&#45;colored"-->
<!--(click)="nextFile()">-->
<!--<i class="icon material-icons">keyboard_arrow_right</i>-->
<!--</button>-->
<!--</div>-->
</div>

120
ng2-components/ng2-alfresco-viewer/src/componets/viewer.component.spec.ts
View File

@@ -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', () => {