mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-3550] Migration - Application List Component (#3902)
* [ADF-3538] start creating new folder for cloud components * [ADF-3538] added new package to the script and the builds * [ADF-3538] added some more changes to scripts * [ADF-3538] - starting the new package * fix package * Add a cloud component as example * Skip the scss style * remove useless codes * Add i18n example * remove useless code * Simplify the hello component Fix the wrong path * add the app-list-cloud-component add the app-details-cloud-component * Expose and use the new component * Consume the new package and component from the demoshell * Fix unit test app list cloud * Fix process service cloud path * Remove useless file * * Added documentation to the appListcloud component * Fix failing unit tests
This commit is contained in:
Maurizio Vitale
committed by
Eugenio Romano
Eugenio Romano
parent
987c01f1f4
commit
4c9629c2d6
@@ -0,0 +1,207 @@
|
||||
/*!
|
||||
* @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 { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { setupTestBed } from '@alfresco/adf-core';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { fakeApplicationInstance } from '../mock/app-model.mock';
|
||||
import { AppListCloudComponent } from './app-list-cloud.component';
|
||||
import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
|
||||
import { AppListTestingModule } from '../testing/app-list.testing.module';
|
||||
import { ApplicationInstanceModel } from '../models/application-instance.model';
|
||||
|
||||
describe('AppListCloudComponent', () => {
|
||||
|
||||
let component: AppListCloudComponent;
|
||||
let fixture: ComponentFixture<AppListCloudComponent>;
|
||||
let service: AppsProcessCloudService;
|
||||
let getAppsSpy: jasmine.Spy;
|
||||
|
||||
setupTestBed({
|
||||
imports: [AppListTestingModule],
|
||||
providers: [AppsProcessCloudService]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AppListCloudComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
||||
service = TestBed.get(AppsProcessCloudService);
|
||||
getAppsSpy = spyOn(service, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
|
||||
});
|
||||
|
||||
it('should create AppListCloudComponent ', async(() => {
|
||||
expect(component instanceof AppListCloudComponent).toBe(true);
|
||||
}));
|
||||
|
||||
it('should define layoutType with the default value', () => {
|
||||
component.layoutType = '';
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(true);
|
||||
});
|
||||
|
||||
it('Should fetch deployed apps', async(() => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
component.apps$.subscribe((response: ApplicationInstanceModel[]) => {
|
||||
expect(response).toBeDefined();
|
||||
expect(response.length).toEqual(2);
|
||||
expect(response[0].name).toEqual('application-new-1');
|
||||
expect(response[0].status).toEqual('Running');
|
||||
expect(response[0].icon).toEqual('favorite_border');
|
||||
expect(response[0].theme).toEqual('theme-2');
|
||||
expect(response[1].name).toEqual('application-new-2');
|
||||
expect(response[1].status).toEqual('Pending');
|
||||
expect(response[1].icon).toEqual('favorite_border');
|
||||
expect(response[1].theme).toEqual('theme-2');
|
||||
});
|
||||
expect(getAppsSpy).toHaveBeenCalled();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should display default adf-empty-content template when response empty', () => {
|
||||
getAppsSpy.and.returnValue(of([]));
|
||||
fixture.detectChanges();
|
||||
const defaultEmptyTemplate = fixture.nativeElement.querySelector('.adf-app-list-empty');
|
||||
const emptyContent = fixture.debugElement.nativeElement.querySelector('.adf-empty-content');
|
||||
const emptyTitle = fixture.debugElement.nativeElement.querySelector('.adf-empty-content__title');
|
||||
const emptySubtitle = fixture.debugElement.nativeElement.querySelector('.adf-empty-content__subtitle');
|
||||
expect(defaultEmptyTemplate).toBeDefined();
|
||||
expect(defaultEmptyTemplate).not.toBeNull();
|
||||
expect(emptyContent).not.toBeNull();
|
||||
expect(emptyTitle.innerText).toBe('ADF_TASK_LIST.APPS.TITLE');
|
||||
expect(emptySubtitle.innerText).toBe('ADF_TASK_LIST.APPS.SUBTITLE');
|
||||
expect(getAppsSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('Grid Layout ', () => {
|
||||
|
||||
it('should display a grid by default', () => {
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(true);
|
||||
expect(component.isList()).toBe(false);
|
||||
});
|
||||
|
||||
it('should defined adf-cloud-app-details when layout type is grid', () => {
|
||||
fixture.detectChanges();
|
||||
const adfCloudDetailsElement = fixture.nativeElement.querySelectorAll('adf-cloud-app-details');
|
||||
const appName = fixture.nativeElement.querySelector('.adf-app-listgrid-item-card-title');
|
||||
expect(adfCloudDetailsElement).toBeDefined();
|
||||
expect(adfCloudDetailsElement).not.toBeNull();
|
||||
|
||||
expect(adfCloudDetailsElement.length).toEqual(2);
|
||||
expect(component.isGrid()).toBe(true);
|
||||
expect(component.isList()).toBe(false);
|
||||
|
||||
expect(appName.innerText.trim()).toEqual(fakeApplicationInstance[0].name);
|
||||
});
|
||||
|
||||
it('should display a grid when configured to', () => {
|
||||
component.layoutType = AppListCloudComponent.LAYOUT_GRID;
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(true);
|
||||
expect(component.isList()).toBe(false);
|
||||
});
|
||||
|
||||
it('should throw an exception on init if unknown type configured', () => {
|
||||
component.layoutType = 'unknown';
|
||||
expect(component.ngOnInit).toThrowError();
|
||||
});
|
||||
});
|
||||
|
||||
describe('List Layout ', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
component.layoutType = AppListCloudComponent.LAYOUT_LIST;
|
||||
});
|
||||
|
||||
it('should display a LIST when configured to', () => {
|
||||
fixture.detectChanges();
|
||||
expect(component.isGrid()).toBe(false);
|
||||
expect(component.isList()).toBe(true);
|
||||
});
|
||||
|
||||
it('should defined mat-list when layout type is LIST', () => {
|
||||
fixture.detectChanges();
|
||||
const appListElement = fixture.nativeElement.querySelectorAll('mat-list');
|
||||
const appListItemElement = fixture.nativeElement.querySelectorAll('mat-list-item');
|
||||
const appName = fixture.nativeElement.querySelector('.mat-list-text');
|
||||
expect(appListElement).toBeDefined();
|
||||
expect(appListElement).not.toBeNull();
|
||||
|
||||
expect(appListItemElement.length).toEqual(2);
|
||||
expect(component.isGrid()).toBe(false);
|
||||
expect(component.isList()).toBe(true);
|
||||
|
||||
expect(appName.innerText.trim()).toEqual(fakeApplicationInstance[0].name);
|
||||
});
|
||||
|
||||
it('should throw an exception on init if unknown type configured', () => {
|
||||
component.layoutType = 'unknown';
|
||||
expect(component.ngOnInit).toThrowError();
|
||||
});
|
||||
});
|
||||
|
||||
it('should emit a click event when app selected', () => {
|
||||
spyOn(component.appClick, 'emit');
|
||||
fixture.detectChanges();
|
||||
const onAppClick = fixture.nativeElement.querySelector('.mat-card');
|
||||
onAppClick.click();
|
||||
expect(component.appClick.emit).toHaveBeenCalledWith(fakeApplicationInstance[0]);
|
||||
});
|
||||
});
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<adf-cloud-app-list>
|
||||
<adf-empty-custom-content>
|
||||
<mat-icon>apps</mat-icon>
|
||||
<p id="custom-id">No Apps Found</p>
|
||||
</adf-empty-custom-content>
|
||||
</adf-cloud-app-list>
|
||||
`
|
||||
})
|
||||
class CustomEmptyAppListCloudTemplateComponent {
|
||||
}
|
||||
|
||||
describe('Custom CustomEmptyAppListCloudTemplateComponent', () => {
|
||||
let fixture: ComponentFixture<CustomEmptyAppListCloudTemplateComponent>;
|
||||
|
||||
setupTestBed({
|
||||
imports: [AppListTestingModule],
|
||||
declarations: [CustomEmptyAppListCloudTemplateComponent],
|
||||
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CustomEmptyAppListCloudTemplateComponent);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should render the custom empty template', async(() => {
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const title: any = fixture.nativeElement.querySelector('#custom-id');
|
||||
expect(title.innerText).toBe('No Apps Found');
|
||||
});
|
||||
}));
|
||||
});
|
||||
Reference in New Issue
Block a user