Add data-test ids for e2e tests (#51)

* add data-test ids

* fix code review comments

* fix code review comments

Author: larisaVasile

src/ng-generate/components/form/generators/components/fields/boolean/files/__name@dasherize__.component.html.template

@@ -2,4 +2,5 @@
     class="form-field"
     [formControl]="formControl"
     (ngModelChange)="value = $event"
+    data-test="<%= options.fieldConfig.name %>-checkbox"
 ><%= options.fieldConfig.name %></mat-checkbox>

src/ng-generate/components/form/generators/components/fields/complex/files/__name@dasherize__.component.html.template

@@ -3,7 +3,7 @@
         <legend><%= options.fieldConfig.name %></legend>
         <section class="form-fields">
             <% for (let childConfig of options.fieldConfig.children) {
-                %><<%= childConfig.selector %> formControlName="<%= childConfig.name %>"></<%= childConfig.selector %>>
+                %><<%= childConfig.selector %> formControlName="<%= childConfig.name %>" data-test="<%= childConfig.name %>"></<%= childConfig.selector %>>
             <% } %>
         </section>
     </fieldset>

src/ng-generate/components/form/generators/components/fields/date/files/__name@dasherize__.component.html.template

@@ -1,6 +1,7 @@
 <mat-form-field class="form-field">
     <mat-label><%= options.fieldConfig.name %></mat-label>
-    <input matInput [matDatepicker]="<%= options.fieldConfig.name %>picker" [formControl]="formControl" (ngModelChange)="value = $event" />
+    <input matInput [matDatepicker]="<%= options.fieldConfig.name %>picker" [formControl]="formControl" (ngModelChange)="value = $event"
+     data-test="<%= options.fieldConfig.name %>-date" />
     <mat-datepicker-toggle matSuffix [for]="<%= options.fieldConfig.name %>picker"></mat-datepicker-toggle>
     <mat-datepicker #<%= options.fieldConfig.name %>picker [color]="color"></mat-datepicker>
 

src/ng-generate/components/form/generators/components/fields/datePartial/files/__name@dasherize__.component.html.template

@@ -4,6 +4,7 @@
         type="text"
         matInput
         placeholder="<%= options.fieldConfig.placeholder %>"
+        data-test="<%= options.fieldConfig.name %>"
         [formControl]="formControl"
         (ngModelChange)="value = $event"
     />

src/ng-generate/components/form/generators/components/fields/dateTime/files/__name@dasherize__.component.html.template

@@ -1,6 +1,8 @@
 <mat-form-field class="form-field">
     <mat-label><%= options.fieldConfig.name %></mat-label>
-    <input matInput [ngxMatDatetimePicker]="<%= options.fieldConfig.name %>picker" [formControl]="formControl" (ngModelChange)="value = $event" />
+    <input matInput [ngxMatDatetimePicker]="<%= options.fieldConfig.name %>picker" [formControl]="formControl" (ngModelChange)="value = $event"
+    data-test="<%= options.fieldConfig.name %>-picker"
+     />
     <ngx-mat-datepicker-toggle matSuffix [for]="<%= options.fieldConfig.name %>picker"></ngx-mat-datepicker-toggle>
     <ngx-mat-datetime-picker #<%= options.fieldConfig.name %>picker [color]="color"></ngx-mat-datetime-picker>
 

src/ng-generate/components/form/generators/components/fields/default/files/__name@dasherize__.component.html.template

@@ -3,6 +3,7 @@
     <input
         type="text"
         matInput
+        data-test="<%= options.fieldConfig.name %>"
         placeholder="<%= options.fieldConfig.exampleValue %>"
         [formControl]="formControl"
         (ngModelChange)="value = $event"

src/ng-generate/components/form/generators/components/fields/duration/files/__name@dasherize__.component.html.template

@@ -4,6 +4,7 @@
         type="text"
         matInput
         placeholder="<%= options.fieldConfig.placeholder %>"
+        data-test="<%= options.fieldConfig.name %>-duration"
         [formControl]="formControl"
         (ngModelChange)="value = $event"
     />

src/ng-generate/components/form/generators/components/fields/either/files/__name@dasherize__.component.html.template

@@ -1,5 +1,5 @@
 <form [formGroup]="formGroup">
-    <fieldset class="form-group">
+    <fieldset class="form-group" data-test="<%= options.fieldConfig.name %>-either">
         <legend><%= options.fieldConfig.name %></legend>
         <section class="form-fields">
             <% for (let childConfig of options.fieldConfig.children) {

src/ng-generate/components/form/generators/components/fields/enumeration/files/__name@dasherize__.component.html.template

@@ -1,9 +1,13 @@
 <mat-form-field appearance="fill" class="form-field">
     <mat-label><%= options.fieldConfig.name %></mat-label>
-    <mat-select [formControl]="formControl" (ngModelChange)="value = $event">
+    <mat-select [formControl]="formControl" (ngModelChange)="value = $event"
+    data-test="<%= options.fieldConfig.name %>-select"
+    >
         <% if (options.fieldConfig.values) { %>
             <% for (let value of options.fieldConfig.values) { %>
-                <mat-option value="<%= value %>">
+                <mat-option value="<%= value %>"
+                    data-test="<%= value %>-select-option"
+                >
                     <%= value %>
                 </mat-option>
             <% } %>

src/ng-generate/components/form/generators/components/fields/list/files/__name@dasherize__.component.html.template

@@ -1,9 +1,9 @@
 <fieldset>
   <legend><%= options.fieldConfig.name %></legend>
   <section class="table-actions" [class.disabled]="formArray.disabled">
-    <button mat-flat-button (click)="onAdd()">Add</button>
-    <button mat-flat-button (click)="onEdit(selection)" [disabled]="!isSelection">Edit</button>
-    <button mat-flat-button (click)="onDelete(selection)" [disabled]="!isSelection">Delete</button>
+    <button mat-flat-button (click)="onAdd()" data-test="<%= options.fieldConfig.name %>-btn-add">Add</button>
+    <button mat-flat-button (click)="onEdit(selection)" [disabled]="!isSelection" data-test="<%= options.fieldConfig.name %>-btn-edit">Edit</button>
+    <button mat-flat-button (click)="onDelete(selection)" [disabled]="!isSelection" data-test="<%= options.fieldConfig.name %>-btn-delete">Delete</button>
   </section>
 
   <ng-container *ngIf="dataSource.data.length; else empty">