Enrich 'Import VFC UI test'

Import a node types which contains interface operations with an implementation and inputs

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

2 files changed, 60 insertions, 57 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html
index 80aceeadda..156b657645 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-param-row/input-param-row.component.html
@@ -21,6 +21,7 @@
 <div class="cell field-input-name">
     <sdc-input
         [(value)]="input.name"
+        testId="interface-operation-input-name"
         (valueChange)="onChange()">
     </sdc-input>
 </div>
@@ -28,9 +29,9 @@
 <div class="cell field-input-value">
     <sdc-input
         [(value)]="input.toscaDefaultValue"
+        testId="interface-operation-input-value"
         (valueChange)="onChange()">
     </sdc-input>
-
 </div>
 
 <div class="cell remove" *ngIf="!readonly">
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index cd2d6063c1..f71102053a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -19,68 +19,70 @@
 -->
 
 <div class="operation-handler">
-  <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
 
-  <form class="w-sdc-form">
+    <form class="w-sdc-form">
 
-    <div class="side-by-side">
-      <div class="form-item">
-        <sdc-input
-            label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
-            [(value)]="interfaceType"
-            [disabled]="true">
-        </sdc-input>
-      </div>
+        <div class="side-by-side">
+            <div class="form-item">
+                <sdc-input
+                    label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
+                    [(value)]="interfaceType"
+                    [disabled]="true">
+                </sdc-input>
+            </div>
 
-      <div class="form-item">
-        <sdc-input
-            label="{{ 'OPERATION_NAME' | translate }}"
-            [(value)]="operationToUpdate.name"
-            [disabled]="true">
-        </sdc-input>
-      </div>
-    </div>
+            <div class="form-item">
+                <sdc-input
+                    label="{{ 'OPERATION_NAME' | translate }}"
+                    [(value)]="operationToUpdate.name"
+                    [disabled]="true">
+                </sdc-input>
+            </div>
+        </div>
 
-    <div class="i-sdc-form-item">
-      <sdc-input
-          label="{{'OPERATION_DESCRIPTION' | translate}}"
-          [(value)]="operationToUpdate.description"
-          (valueChange)="onDescriptionChange($event)">
-      </sdc-input>
-    </div>
+        <div class="i-sdc-form-item">
+            <sdc-input
+                label="{{'OPERATION_DESCRIPTION' | translate}}"
+                [(value)]="operationToUpdate.description"
+                testId="interface-operation-description"
+                (valueChange)="onDescriptionChange($event)">
+            </sdc-input>
+        </div>
 
-    <div class="i-sdc-form-item">
-      <sdc-input
-          label="{{'IMPLEMENTATION_NAME' | translate}}"
-          [(value)]="operationToUpdate.implementation.artifactName">
-      </sdc-input>
-    </div>
+        <div class="i-sdc-form-item">
+            <sdc-input
+                label="{{'IMPLEMENTATION_NAME' | translate}}"
+                testId="interface-operation-implementation-name"
+                [(value)]="operationToUpdate.implementation.artifactName">
+            </sdc-input>
+        </div>
 
-    <div class="separator-buttons">
-      <tab tabTitle="Inputs"></tab>
-      <a class="add-param-link add-btn"
-         [ngClass]="{'disabled': readonly}"
-         (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
-      </a>
-    </div>
+        <div class="separator-buttons">
+            <tab tabTitle="Inputs"></tab>
+            <a class="add-param-link add-btn"
+               [ngClass]="{'disabled': readonly}"
+               (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
+            </a>
+        </div>
 
-    <div class="generic-table">
-      <div class="header-row table-row">
-        <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
-        <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span>
-        <span class="cell header-cell remove">●●●</span>
-      </div>
-      <div class="empty-msg data-row" *ngIf="!inputs.length">
-        <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div>
-      </div>
-      <input-param-row
-          *ngFor="let inputParameter of inputs"
-          class="data-row"
-          [input]="inputParameter"
-          [onRemoveInput]="onRemoveInput"
-          [validityChanged]="validityChanged">
-      </input-param-row>
-    </div>
+        <div class="generic-table">
+            <div class="header-row table-row">
+                <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
+                <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span>
+                <span class="cell header-cell remove">●●●</span>
+            </div>
+            <div class="empty-msg data-row" *ngIf="!inputs.length">
+                <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div>
+            </div>
+            <input-param-row
+                *ngFor="let inputParameter of inputs"
+                class="data-row"
+                [input]="inputParameter"
+                [onRemoveInput]="onRemoveInput"
+                [validityChanged]="validityChanged">
+            </input-param-row>
+        </div>
 
-  </form>
+    </form>
 </div>