Increase Import VFC UI test coverage

Change-Id: Ie51411304fefe6b8ee3aa437b980f1e12bbc4707
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3566

3 files changed, 213 insertions, 211 deletions

diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
index 094045e8b4..590217d0a5 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
@@ -5,14 +5,14 @@
             <!-- ATTRIBUTE NAME - MANDATORY -->
             <div>
                 <sdc-input
-                        #attributeName
-                        label="Name"
-                        [required]="true"
-                        [(value)]="attributeToEdit.name"
-                        [disabled]="isEdit"
-                        name="attributeName"
-                        testId="attributeName"
-                        [maxLength]="255">
+                    #attributeName
+                    label="Name"
+                    [required]="true"
+                    [(value)]="attributeToEdit.name"
+                    [disabled]="isEdit"
+                    name="attributeName"
+                    testId="attributeName"
+                    [maxLength]="255">
                 </sdc-input>
                 <sdc-validation [validateElement]="attributeName" (validityChanged)="onValidityChange($event, 'name')">
                     <sdc-required-validator message="{{'VALIDATION_ERROR_REQUIRED' | translate : { 'field' : 'Name' } }}"></sdc-required-validator>
@@ -38,6 +38,7 @@
                 <!-- ATTRIBUTE TYPE - MANDATORY -->
                 <sdc-dropdown #attributeType [disabled]="false" label="Type" [required]="true"
                               [selectedOption]="toDropDownOption(this.attributeToEdit.type)" placeHolder="Choose Type"
+                              testId="attributeType"
                               [options]="types" (changed)="onTypeSelected($event)">
                     <sdc-validation [validateElement]="attributeType" (validityChanged)="onValidityChange($event, 'type')">
                         <sdc-required-validator message="'required field'"></sdc-required-validator>
@@ -48,15 +49,15 @@
             <!-- ATTRIBUTE DEFAULT VALUE TEXT - OPTIONAL -->
             <div *ngIf="attributeToEdit.type != 'boolean'">
                 <sdc-input
-                        #_default
-                        [required]="false"
-                        label="Default Value"
-                        [(value)]="attributeToEdit._default"
-                        [disabled]="false"
-                        name="_default"
-                        testId="defaultValue"
-                        [maxLength]="255"
-                        (valueChange)="defaultValueChanged()">
+                    #_default
+                    [required]="false"
+                    label="Default Value"
+                    [(value)]="attributeToEdit._default"
+                    [disabled]="false"
+                    name="_default"
+                    testId="defaultValue"
+                    [maxLength]="255"
+                    (valueChange)="defaultValueChanged()">
                 </sdc-input>
 
                 <sdc-validation [validateElement]="_default" (validityChanged)="onValidityChange($event, 'default')">
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html
index 6d50bbe11b..a04849a7f6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html
@@ -17,27 +17,27 @@
 
     <div class="action-bar-wrapper">
         <svg-icon-label
-                *ngIf="!(this.isViewOnly$ | async)"
-                class="add-attr-icon"
-                [name]="'plus'"
-                [mode]="'primary'"
-                [size]="'medium'"
-                [label]="'Add'"
-                [labelPlacement]="'right'"
-                [labelClassName]="'externalActionLabel'"
-                (click)="onAddAttribute()">
+            *ngIf="!(this.isViewOnly$ | async)"
+            class="add-attr-icon"
+            [name]="'plus'"
+            [mode]="'primary'"
+            [size]="'medium'"
+            [label]="'Add'"
+            [labelPlacement]="'right'"
+            [labelClassName]="'externalActionLabel'"
+            (click)="onAddAttribute()">
         </svg-icon-label>
     </div>
 
     <ngx-datatable
-            columnMode="flex"
-            [footerHeight]="0"
-            [limit]="50"
-            [headerHeight]="40"
-            [rowHeight]="35"
-            [rows]="attributes"
-            #componentAttributesTable
-            (activate)="onExpandRow($event)">
+        columnMode="flex"
+        [footerHeight]="0"
+        [limit]="50"
+        [headerHeight]="40"
+        [rowHeight]="35"
+        [rows]="attributes"
+        #componentAttributesTable
+        (activate)="onExpandRow($event)">
 
         <ngx-datatable-row-detail [rowHeight]="80">
             <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
@@ -48,9 +48,10 @@
         <ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="2">
 
             <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
-                <div class="expand-collapse-cell">
+                <div class="expand-collapse-cell" [attr.data-tests-id]="'attrib-name_'+row.name">
                     <svg-icon [clickable]="true" class="expand-collapse-icon"
-                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+                              [name]="expanded ? 'caret1-up-o': 'caret1-down-o'"
+                              [mode]="'primary'"
                               [size]="'medium'"></svg-icon>
                     <span>{{ row.name }}</span>
                 </div>
@@ -76,14 +77,16 @@
                     <svg-icon [clickable]="true"
                               [mode]="'primary2'"
                               [name]="'edit-o'"
+                              [testId]="'edit_'+row.name"
                               [size]="'medium'"
                               (click)="onEditAttribute($event, row)">
                     </svg-icon>
                     <svg-icon [clickable]="true"
                               [mode]="'primary2'"
                               [name]="'trash-o'"
-                              (click)="onDeleteAttribute($event, row)"
-                              [size]="'medium'">
+                              [testId]="'delete_'+row.name"
+                              [size]="'medium'"
+                              (click)="onDeleteAttribute($event, row)">
                     </svg-icon>
                 </div>
             </ng-template>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts
index ca8d5460e8..d85755bce8 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts
@@ -1,188 +1,186 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Select } from '@ngxs/store';
-import { IAttributeModel } from 'app/models';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Select} from '@ngxs/store';
+import {IAttributeModel} from 'app/models';
 import * as _ from 'lodash';
-import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
-import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component';
-import { AttributeModel } from '../../../../models';
-import { Resource } from '../../../../models';
-import { ModalsHandler } from '../../../../utils';
-import { TopologyTemplateService } from '../../../../ng2/services/component-services/topology-template.service';
-import { TranslateService } from '../../../../ng2/shared/translator/translate.service';
-import { WorkspaceState } from '../../../../ng2/store/states/workspace.state';
-import { WorkspaceService } from '../../../../ng2/pages/workspace/workspace.service';
-import { AttributeModalComponent } from '../../../../ng2/pages/workspace/attributes/attribute-modal.component';
+import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular';
+import {ModalComponent} from 'onap-ui-angular/dist/modals/modal.component';
+import {AttributeModel, Resource} from '../../../../models';
+import {ModalsHandler} from '../../../../utils';
+import {TopologyTemplateService} from '../../../../ng2/services/component-services/topology-template.service';
+import {TranslateService} from '../../../../ng2/shared/translator/translate.service';
+import {WorkspaceState} from '../../../../ng2/store/states/workspace.state';
+import {WorkspaceService} from '../../../../ng2/pages/workspace/workspace.service';
+import {AttributeModalComponent} from '../../../../ng2/pages/workspace/attributes/attribute-modal.component';
 
 @Component({
-    selector: 'attributes',
-    templateUrl: './attributes.component.html',
-    styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less']
+  selector: 'attributes',
+  templateUrl: './attributes.component.html',
+  styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less']
 })
 export class AttributesComponent implements OnInit {
 
-    @Select(WorkspaceState.isViewOnly)
-    isViewOnly$: boolean;
-
-    @ViewChild('componentAttributesTable')
-    private table: any;
-
-    private componentType: string;
-    private componentUid: string;
-
-    private attributes: IAttributeModel[] = [];
-    private temp: IAttributeModel[] = [];
-    private customModalInstance: ModalComponent;
-
-    constructor(private workspaceService: WorkspaceService,
-                private topologyTemplateService: TopologyTemplateService,
-                private modalsHandler: ModalsHandler,
-                private modalService: SdcUiServices.ModalService,
-                private loaderService: SdcUiServices.LoaderService,
-                private translateService: TranslateService) {
-
-        this.componentType = this.workspaceService.metadata.componentType;
-        this.componentUid = this.workspaceService.metadata.uniqueId;
-    }
-
-    ngOnInit(): void {
-        this.asyncInitComponent();
-    }
-
-    async asyncInitComponent() {
-        this.loaderService.activate();
-        const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid);
-        this.attributes = response.attributes;
-        this.temp = [...response.attributes];
-        this.loaderService.deactivate();
-    }
+  @Select(WorkspaceState.isViewOnly)
+  isViewOnly$: boolean;
+
+  @ViewChild('componentAttributesTable')
+  private table: any;
+
+  private componentType: string;
+  private componentUid: string;
+
+  private attributes: IAttributeModel[] = [];
+  private temp: IAttributeModel[] = [];
+  private customModalInstance: ModalComponent;
+
+  constructor(private workspaceService: WorkspaceService,
+              private topologyTemplateService: TopologyTemplateService,
+              private modalsHandler: ModalsHandler,
+              private modalService: SdcUiServices.ModalService,
+              private loaderService: SdcUiServices.LoaderService,
+              private translateService: TranslateService) {
+
+    this.componentType = this.workspaceService.metadata.componentType;
+    this.componentUid = this.workspaceService.metadata.uniqueId;
+  }
+
+  ngOnInit(): void {
+    this.asyncInitComponent();
+  }
+
+  async asyncInitComponent() {
+    this.loaderService.activate();
+    const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid);
+    this.attributes = response.attributes;
+    this.temp = [...response.attributes];
+    this.loaderService.deactivate();
+  }
+
+  getAttributes(): IAttributeModel[] {
+    return this.attributes;
+  }
+
+  addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => {
+    this.loaderService.activate();
+    let attributeFromServer: AttributeModel;
+    this.temp = [...this.attributes];
+
+    const deactivateLoader = () => {
+      this.loaderService.deactivate();
+      return undefined;
+    };
 
-    getAttributes(): IAttributeModel[] {
-        return this.attributes;
+    if (isEdit) {
+      attributeFromServer = await this.topologyTemplateService
+      .updateAttributeAsync(this.componentType, this.componentUid, attribute)
+      .catch(deactivateLoader);
+      if (attributeFromServer) {
+        const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId);
+        this.temp[indexOfUpdatedAttribute] = attributeFromServer;
+      }
+    } else {
+      attributeFromServer = await this.topologyTemplateService
+      .addAttributeAsync(this.componentType, this.componentUid, attribute)
+      .catch(deactivateLoader);
+      if (attributeFromServer) {
+        this.temp.push(attributeFromServer);
+      }
     }
-
-    addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => {
-        this.loaderService.activate();
-        let attributeFromServer: AttributeModel;
-        this.temp = [...this.attributes];
-
-        const deactivateLoader = () => {
-            this.loaderService.deactivate();
-            return undefined;
-        };
-
-        if (isEdit) {
-            attributeFromServer = await this.topologyTemplateService
-                                    .updateAttributeAsync(this.componentType, this.componentUid, attribute)
-                                    .catch(deactivateLoader);
-            if (attributeFromServer) {
-                const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId);
-                this.temp[indexOfUpdatedAttribute] = attributeFromServer;
-            }
-        } else {
-            attributeFromServer = await this.topologyTemplateService
-                                    .addAttributeAsync(this.componentType, this.componentUid, attribute)
-                                    .catch(deactivateLoader);
-            if (attributeFromServer) {
-                this.temp.push(attributeFromServer);
-            }
+    this.attributes = this.temp;
+    this.loaderService.deactivate();
+  }
+
+  deleteAttribute = async (attributeToDelete: AttributeModel) => {
+    this.loaderService.activate();
+    this.temp = [...this.attributes];
+    const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete);
+    _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId);
+    this.attributes = this.temp;
+    this.loaderService.deactivate();
+  };
+
+  openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) {
+    const component = new Resource(undefined, undefined, undefined);
+    component.componentType = this.componentType;
+    component.uniqueId = this.componentUid;
+
+    const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE');
+    const attributeModalConfig = {
+      title,
+      size: 'md',
+      type: SdcUiCommon.ModalType.custom,
+      buttons: [
+        {
+          id: 'save',
+          text: 'Save',
+          // spinner_position: Placement.left,
+          size: 'sm',
+          callback: () => this.modalCallBack(isEdit),
+          closeModal: true,
+          disabled: false,
         }
-        this.attributes = this.temp;
-        this.loaderService.deactivate();
-    }
-
-    deleteAttribute = async (attributeToDelete: AttributeModel) => {
-        this.loaderService.activate();
-        this.temp = [...this.attributes];
-        const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete);
-        _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId);
-        this.attributes = this.temp;
-        this.loaderService.deactivate();
+      ] as SdcUiCommon.IModalButtonComponent[]
     };
 
-    openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) {
-        const component = new Resource(undefined, undefined, undefined);
-        component.componentType = this.componentType;
-        component.uniqueId = this.componentUid;
-
-        const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE');
-        const attributeModalConfig = {
-            title,
-            size: 'md',
-            type: SdcUiCommon.ModalType.custom,
-            buttons: [
-                {
-                    id: 'save',
-                    text: 'Save',
-                    // spinner_position: Placement.left,
-                    size: 'sm',
-                    callback: () => this.modalCallBack(isEdit),
-                    closeModal: true,
-                    disabled: false,
-                }
-            ] as SdcUiCommon.IModalButtonComponent[]
-        };
-
-        this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, { attributeToEdit: selectedRow });
-        this.customModalInstance.innerModalContent.instance.
-            onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid);
-    }
-
-    /***********************
-     * Call Backs from UI  *
-     ***********************/
-
-    /**
-     * Called when 'Add' is clicked
-     */
-    onAddAttribute() {
-        this.openAddEditModal(new AttributeModel(), false);
-    }
-
-    /**
-     * Called when 'Edit' button is clicked
-     */
-    onEditAttribute(event, row) {
-        event.stopPropagation();
-
-        const attributeToEdit: AttributeModel = new AttributeModel(row);
-        this.openAddEditModal(attributeToEdit, true);
-    }
-
-    /**
-     * Called when 'Delete' button is clicked
-     */
-    onDeleteAttribute(event, row: AttributeModel) {
-        event.stopPropagation();
-        const onOk = () => {
-            this.deleteAttribute(row);
-        };
-
-        const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE');
-        const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT');
-        const okButton = new SdcUiComponents.ModalButtonComponent();
-        okButton.testId = 'OK';
-        okButton.text = 'OK';
-        okButton.type = SdcUiCommon.ButtonType.info;
-        okButton.closeModal = true;
-        okButton.callback = onOk;
-
-        this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
-    }
-
-    onExpandRow(event) {
-        if (event.type === 'click') {
-            this.table.rowDetail.toggleExpandRow(event.row);
-        }
-    }
+    this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, {attributeToEdit: selectedRow});
+    this.customModalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid);
+  }
+
+  /***********************
+   * Call Backs from UI  *
+   ***********************/
+
+  /**
+   * Called when 'Add' is clicked
+   */
+  onAddAttribute() {
+    this.openAddEditModal(new AttributeModel(), false);
+  }
+
+  /**
+   * Called when 'Edit' button is clicked
+   */
+  onEditAttribute(event, row) {
+    event.stopPropagation();
+
+    const attributeToEdit: AttributeModel = new AttributeModel(row);
+    this.openAddEditModal(attributeToEdit, true);
+  }
+
+  /**
+   * Called when 'Delete' button is clicked
+   */
+  onDeleteAttribute(event, row: AttributeModel) {
+    event.stopPropagation();
+    const onOk = () => {
+      this.deleteAttribute(row);
+    };
 
-    /**
-     * Callback from Modal after "Save" is clicked
-     *
-     * @param {boolean} isEdit - Whether modal is edit or add attribute
-     */
-    modalCallBack = (isEdit: boolean) => {
-        const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit;
-        this.addOrUpdateAttribute(attribute, isEdit);
+    const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE');
+    const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT', {name: row.name});
+    const okButton = new SdcUiComponents.ModalButtonComponent();
+    okButton.testId = 'OK';
+    okButton.text = 'OK';
+    okButton.type = SdcUiCommon.ButtonType.info;
+    okButton.closeModal = true;
+    okButton.callback = onOk;
+
+    this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]);
+  }
+
+  onExpandRow(event) {
+    if (event.type === 'click') {
+      this.table.rowDetail.toggleExpandRow(event.row);
     }
+  }
+
+  /**
+   * Callback from Modal after "Save" is clicked
+   *
+   * @param {boolean} isEdit - Whether modal is edit or add attribute
+   */
+  modalCallBack = (isEdit: boolean) => {
+    const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit;
+    this.addOrUpdateAttribute(attribute, isEdit);
+  }
 
 }