[ADF-3920] Process Service Cloud render card with default theme and i… (#4219)

* [ADF-3920] Process Service Cloud render card with default theme and icon if missing

* [ADF-3920] Process Service Cloud card rendering with default theme and icon

* [ADF-3920] - Remove import from index in spec file

* Fix unit tests

* [ADF-3920] - add complete name on unit test

* [ADF-3920] - add unit test to verify input object for app-details-cloud

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.html

@@ -5,11 +5,11 @@
             role="button"
             class="adf-app-listgrid-item-card"
             title="{{applicationInstance.name}}"
-            [ngClass]="[applicationInstance.theme]"
+            [ngClass]="getTheme()"
             (click)="onSelectApp(applicationInstance)"
             (keyup.enter)="onSelectApp(applicationInstance)">
             <div class="adf-app-listgrid-item-card-logo">
-                <mat-icon class="adf-app-listgrid-item-card-logo-icon">{{applicationInstance.icon}}</mat-icon>
+                <mat-icon class="adf-app-listgrid-item-card-logo-icon">{{ getIcon() }}</mat-icon>
             </div>
             <div mat-card-title class="adf-app-listgrid-item-card-title">
                 <h1>{{applicationInstance.name}}</h1>

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.spec.ts

@@ -22,6 +22,7 @@ import { fakeApplicationInstance } from '../mock/app-model.mock';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
 import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
 import { AppListCloudModule } from '../app-list-cloud.module';
+import { ApplicationInstanceModel } from '../models/application-instance.model';
 
 describe('AppDetailsCloudComponent', () => {
 
@@ -55,4 +56,23 @@ describe('AppDetailsCloudComponent', () => {
         app.click();
         expect(component.selectedApp.emit).toHaveBeenCalledWith(fakeApplicationInstance[0]);
     });
+
+    it('should render card with default icon and theme when are not provided', () => {
+        component.applicationInstance = fakeApplicationInstance[2];
+        fixture.detectChanges();
+
+        const theme = fixture.nativeElement.querySelector('.adf-app-listgrid-item-card').getAttribute('ng-reflect-ng-class');
+        const icon = fixture.nativeElement.querySelector('.adf-app-listgrid-item-card-logo-icon');
+
+        expect(theme).toEqual(ApplicationInstanceModel.DEFAULT_THEME);
+        expect(icon).toBeTruthy();
+    });
+
+    it('should render card with a non ApplicationInstanceModel input object', () => {
+        component.applicationInstance =  { name: 'application-new-3', createdAt: '2018-09-21T12:31:39.000Z', status: 'Pending' };
+        fixture.detectChanges();
+        const app = fixture.nativeElement.querySelector('.mat-card');
+        expect(app).toBeTruthy();
+
+    });
 });

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.ts

@@ -41,4 +41,18 @@ export class AppDetailsCloudComponent {
   public onSelectApp(app: ApplicationInstanceModel): void {
     this.selectedApp.emit(app);
   }
+
+  public getTheme() {
+    if ( !this.applicationInstance.theme ) {
+      return ApplicationInstanceModel.DEFAULT_THEME;
+    }
+    return this.applicationInstance.theme;
+  }
+
+  public getIcon() {
+    if ( !this.applicationInstance.icon ) {
+      return ApplicationInstanceModel.DEFAULT_ICON;
+    }
+    return this.applicationInstance.icon;
+  }
 }

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts

@@ -62,7 +62,7 @@ describe('AppListCloudComponent', () => {
         fixture.whenStable().then(() => {
             component.apps$.subscribe((response: ApplicationInstanceModel[]) => {
                 expect(response).toBeDefined();
-                expect(response.length).toEqual(2);
+                expect(response.length).toEqual(3);
                 expect(response[0].name).toEqual('application-new-1');
                 expect(response[0].status).toEqual('Running');
                 expect(response[0].icon).toEqual('favorite_border');
@@ -106,7 +106,7 @@ describe('AppListCloudComponent', () => {
             expect(adfCloudDetailsElement).toBeDefined();
             expect(adfCloudDetailsElement).not.toBeNull();
 
-            expect(adfCloudDetailsElement.length).toEqual(2);
+            expect(adfCloudDetailsElement.length).toEqual(3);
             expect(component.isGrid()).toBe(true);
             expect(component.isList()).toBe(false);
 
@@ -146,7 +146,7 @@ describe('AppListCloudComponent', () => {
             expect(appListElement).toBeDefined();
             expect(appListElement).not.toBeNull();
 
-            expect(appListItemElement.length).toEqual(2);
+            expect(appListItemElement.length).toEqual(3);
             expect(component.isGrid()).toBe(false);
             expect(component.isList()).toBe(true);
 

lib/process-services-cloud/src/lib/app/mock/app-model.mock.ts

@@ -16,8 +16,11 @@
  */
 import { ApplicationInstanceModel } from '../models/application-instance.model';
 export let fakeApplicationInstance = [
-   new ApplicationInstanceModel(
+    new ApplicationInstanceModel(
-       { name: 'application-new-1', createdAt: '2018-09-21T12:31:39.000Z', status: 'Running', theme: 'theme-2', icon: 'favorite_border' }),
+        { name: 'application-new-1', createdAt: '2018-09-21T12:31:39.000Z', status: 'Running', theme: 'theme-2', icon: 'favorite_border' }),
-   new ApplicationInstanceModel(
+    new ApplicationInstanceModel(
-       { name: 'application-new-2', createdAt: '2018-09-21T12:31:39.000Z', status: 'Pending', theme: 'theme-2', icon: 'favorite_border' })
+        { name: 'application-new-2', createdAt: '2018-09-21T12:31:39.000Z', status: 'Pending', theme: 'theme-2', icon: 'favorite_border' }),
+    new ApplicationInstanceModel(
+        { name: 'application-new-3', createdAt: '2018-09-21T12:31:39.000Z', status: 'Pending' })
+
 ];

lib/process-services-cloud/src/lib/app/models/application-instance.model.ts

@@ -33,8 +33,8 @@ export class ApplicationInstanceModel {
             this.name = obj.name ? obj.name : null;
             this.status = obj.status ? obj.status : null;
             this.createdAt = obj.createdAt ? obj.createdAt : null;
-            this.theme = obj.theme ? obj.theme : ApplicationInstanceModel.DEFAULT_THEME;
+            this.theme = obj.theme;
-            this.icon = obj.icon ? obj.icon : ApplicationInstanceModel.DEFAULT_ICON;
+            this.icon = obj.icon;
             this.description = obj.description ? obj.description : null;
             this.connectors = obj.connectors ? obj.connectors : null;
         }

lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.spec.ts

@@ -42,7 +42,7 @@ describe('AppsProcessCloudService', () => {
         service.getDeployedApplicationsByStatus('fake').subscribe(
             (res: ApplicationInstanceModel[]) => {
                 expect(res).toBeDefined();
-                expect(res.length).toEqual(2);
+                expect(res.length).toEqual(3);
                 expect(res).toEqual(fakeApplicationInstance);
                 expect(res[0]).toEqual(fakeApplicationInstance[0]);
                 expect(res[0].name).toEqual('application-new-1');