[QT-232] Verify that the Community Edition screens that includes data, can be opened as error-free - VOL 5

frontend/express/public/core/date-presets/templates/preset-management.html

@@ -4,13 +4,13 @@
     >
         <cly-back-link slot="header-top" link="/" :title="i18n('management.preset.back-to-home')"></cly-back-link>
         <template v-slot:header-right>
-            <el-button type="success" icon="el-icon-circle-plus" @click="createNewPreset">{{i18n('management.preset.create-button')}}</el-button>
+            <el-button type="success" icon="el-icon-circle-plus" @click="createNewPreset" data-test-id="new-date-preset-button">{{i18n('management.preset.create-button')}}</el-button>
         </template>
     </cly-header>
 
     <cly-main>
         <cly-datatable-n 
-            :display-mode="'list'"
+            test-id="datatable-date-presets"
             :rows="rows" 
             :resizable="true" 
             :force-loading="isLoading" 
@@ -31,8 +31,9 @@
                 <el-table-column prop="name" :label="i18n('management.preset.column.name')">
                     <template v-slot="rowScope">
                         <div class="bu-is-flex">
-                            <span class="has-ellipsis bu-has-text-weight-medium">{{ unescapeHtml(rowScope.row.name) }}</a></span>
+                            <span class="has-ellipsis bu-has-text-weight-medium" :data-test-id="'datatable-date-presets-name-' + rowScope.$index">{{ unescapeHtml(rowScope.row.name) }}</a></span>
                             <cly-check
+                                :data-test-id="'datatable-date-presets-star-icon-' + rowScope.$index"
                                 class="bu-pl-1"
                                 element-loading-spinner="el-icon-loading"
                                 @input="toggleFav(scope, rowScope.row)"
@@ -42,15 +43,27 @@
                         </div>
                     </template>
                 </el-table-column>
-                <el-table-column prop="range_label" :label="i18n('management.preset.column.range')"></el-table-column>
-                <el-table-column prop="owner_name" :label="i18n('management.preset.column.owner')"></el-table-column>
-                <el-table-column prop="share_with" :formatter="sharingOption" :label="i18n('management.preset.column.visibility')"></el-table-column>
+                <el-table-column prop="range_label" :label="i18n('management.preset.column.range')">
+                    <template v-slot="rowScope">
+                        <span class="has-ellipsis" :data-test-id="'datatable-date-presets-range-' + rowScope.$index">{{ rowScope.row.range_label }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="owner_name" :label="i18n('management.preset.column.owner')">
+                    <template v-slot="rowScope">
+                        <span class="has-ellipsis" :data-test-id="'datatable-date-presets-owner-' + rowScope.$index">{{ rowScope.row.owner_name }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="share_with" :formatter="sharingOption" :label="i18n('management.preset.column.visibility')">
+                    <template v-slot="rowScope">
+                        <span class="has-ellipsis" :data-test-id="'datatable-date-presets-visibility-' + rowScope.$index">{{ rowScope.row.share_with }}</span>
+                    </template>
+                </el-table-column>
                 <el-table-column type="options" width="90">
                     <template v-slot="rowScope">
-                        <cly-more-options v-if="rowScope.row.hover" size="small" @command="handleCommand($event, rowScope.row)">
-                            <el-dropdown-item v-if="hasWritePermissions(rowScope.row)" command="edit">{{ i18n('common.edit') }}</el-dropdown-item>
-                            <el-dropdown-item v-if="hasWritePermissions(rowScope.row)" command="duplicate">{{ i18n('common.duplicate') }}</el-dropdown-item>
-                            <el-dropdown-item v-if="hasWritePermissions(rowScope.row)" command="delete">{{ i18n('common.delete') }}</el-dropdown-item>
+                        <cly-more-options v-if="rowScope.row.hover" size="small" @command="handleCommand($event, rowScope.row)" :test-id="'datatable-date-presets-' + rowScope.$index">
+                            <el-dropdown-item v-if="hasWritePermissions(rowScope.row)" :data-test-id="'datatable-more-button-edit-select-' + rowScope.$index" command="edit">{{ i18n('common.edit') }}</el-dropdown-item>
+                            <el-dropdown-item v-if="hasWritePermissions(rowScope.row)" :data-test-id="'datatable-more-button-duplicate-select-' + rowScope.$index" command="duplicate">{{ i18n('common.duplicate') }}</el-dropdown-item>
+                            <el-dropdown-item v-if="hasWritePermissions(rowScope.row)" :data-test-id="'datatable-more-button-delete-select-' + rowScope.$index" command="delete">{{ i18n('common.delete') }}</el-dropdown-item>
                         </cly-more-options>
                     </template>
                 </el-table-column>

frontend/express/public/core/jobs/templates/jobs.html

@@ -5,37 +5,47 @@
     </cly-header>
     <cly-main>
 		<cly-section data-test-id="table-jobs">
-			<cly-datatable-n :data-source="remoteTableDataSource" v-on:row-click="goTo" :isClickable="true" :default-sort="{prop: 'name', order: 'ascending'}">
+			<cly-datatable-n test-id="datatable-jobs" :data-source="remoteTableDataSource" v-on:row-click="goTo" :isClickable="true" :default-sort="{prop: 'name', order: 'ascending'}">
                 <template v-slot="scope">
                     <el-table-column sortable="custom" prop="name" :label="i18n('jobs.job-name')" type="clickable">
+                        <template slot-scope="scope">
+                            <span :data-test-id="'datatable-jobs-name-' + scope.$index">
+                                {{ scope.row.name }}
+                            </span>
+                        </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="status" :label="i18n('jobs.job-status')">
                         <template slot-scope="scope">   
-                            <cly-status-tag :text="scope.row.status" :color="getColor(scope.row)"></cly-status-tag>
+                            <span :data-test-id="'datatable-jobs-status-' + scope.$index">
+                                 <cly-status-tag :text="scope.row.status" :color="getColor(scope.row)"></cly-status-tag>
+                            </span>
                         </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="schedule" :label="i18n('jobs.job-schedule')">
                         <template slot-scope="scope">
-                            <p>{{scope.row.scheduleLabel}}</p>
-                            <p style="color:#A7AEB8; font-size: 12px;">{{scope.row.scheduleDetail}}</p>
+                            <p :data-test-id="'datatable-jobs-schedule-' + scope.$index">{{scope.row.scheduleLabel}}</p>
+                            <p :data-test-id="'datatable-jobs-schedule-detail-' + scope.$index" style="color:#A7AEB8; font-size: 12px;">{{scope.row.scheduleDetail}}</p>
                         </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="next" :label="i18n('jobs.job-next-run')">
                         <template slot-scope="scope">
-                            <p>{{scope.row.nextRunDate}}</p>
-                            <p style="color:#A7AEB8; font-size: 12px;">{{scope.row.nextRunTime}}</p>
+                            <p :data-test-id="'datatable-jobs-next-run-date-' + scope.$index">{{scope.row.nextRunDate}}</p>
+                            <p :data-test-id="'datatable-jobs-next-run-time-' + scope.$index" style="color:#A7AEB8; font-size: 12px;">{{scope.row.nextRunTime}}</p>
                         </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="finished" :label="i18n('jobs.job-last-run')">
                         <template slot-scope="scope">
-                            <p v-html="scope.row.lastRun"></p>
+                            <p v-html="scope.row.lastRun" :data-test-id="'datatable-jobs-last-run-' + scope.$index"></p>
                         </template>
                     </el-table-column>
                     <el-table-column sortable="custom" prop="total" :label="i18n('jobs.job-total-scheduled')">
+                        <template slot-scope="scope">
+                            <p :data-test-id="'datatable-jobs-total-' + scope.$index">{{scope.row.total}}</p>
+                        </template>
                     </el-table-column>
                     <el-table-column align="center" type="options">
                         <template v-slot="scope">
-                            <cly-more-options v-if="scope.row.status !== 'RUNNING' && canSuspendJob && scope.row.hover" @command="handleCommand($event, scope.row)" placement="bottom-end">
+                            <cly-more-options v-if="scope.row.status !== 'RUNNING' && canSuspendJob && scope.row.hover" @command="handleCommand($event, scope.row)" placement="bottom-end" :test-id="'datatable-jobs-' + scope.$index">
                                 <el-dropdown-item command="change-job-status">{{scope.row.status === 'SUSPENDED' ? i18n('jobs.schedule') : i18n('jobs.suspend')}}</el-dropdown-item>
                             </cly-more-options>
                         </template>

frontend/express/public/core/user-management/templates/data-table.html

@@ -1,5 +1,6 @@
 <div class="manage-users-table">
   <cly-datatable-n
+    test-id= "datatable-users"
     :rows="filteredRows"
     :force-loading="loading"
     :exportFormat="formatExportFunction"
@@ -65,23 +66,30 @@ <h4>{{i18n('management-users.view-title')}}</h4>
           <el-table-column
             v-if="col.value === 'full_name'"
             sortable="true" prop="full_name" :label="i18n('management-users.user')">
+            <template v-slot="rowScope">
+              <span class="text-medium" :data-test-id="'datatable-users-user-' + rowScope.$index"> {{rowScope.row.full_name}} </span>
+            </template>
           </el-table-column>
           <el-table-column
             v-if="col.value === 'username'"
             sortable="true" prop="username" :label="i18n('management-users.username')">
+            <template v-slot="rowScope">
+              <span class="text-medium" :data-test-id="'datatable-users-username-' + rowScope.$index">{{rowScope.row.username}}</span>
           </el-table-column>
           <el-table-column
             v-if="col.value === 'role'"
             prop="dispRole"
             sortable="true"
             :label="i18n('management-users.role')">
             <template v-slot="rowScope">
-              <span class="text-medium" :data-test-id="'users-data-table-user-role-' + rowScope.$index">{{rowScope.row.dispRole}}</span>
+              <span class="text-medium" :data-test-id="'datatable-users-role-' + rowScope.$index">{{rowScope.row.dispRole}}</span>
             </template>
           </el-table-column>
           <el-table-column
             v-if="col.value === 'email'"
             sortable="true" prop="email" :label="i18n('management-users.email')">
+            <template v-slot="rowScope">
+              <span class="text-medium" :data-test-id="'datatable-users-email-' + rowScope.$index">{{rowScope.row.email}}</span>
           </el-table-column>
           <el-table-column v-if="col.value === 'group'" sortable="true" prop="groupNames" :label="i18n('management-users.group')">
             <template v-slot="rowScope">
@@ -109,18 +117,18 @@ <h4>{{i18n('management-users.view-title')}}</h4>
             prop="last_login"
             :label="i18n('management-users.last_login')">
             <template v-slot="rowScope">
-                <span class="text-medium" v-html="rowScope.row.last_login === 0 ? i18n('management-users.not-logged-in-yet') : formatTimeAgo(rowScope.row.last_login)">
+                <span class="text-medium" :data-test-id="'datatable-users-last-login-' + rowScope.$index" v-html="rowScope.row.last_login === 0 ? i18n('management-users.not-logged-in-yet') : formatTimeAgo(rowScope.row.last_login)">
                 </span>
             </template>
           </el-table-column>
         </template>
         <el-table-column type="options">
           <template v-slot="rowScope">
-            <cly-more-options v-if="rowScope.row.hover" size="small" @command="handleCommand($event, rowScope.row._id)">
-              <el-dropdown-item command="edit-user">{{ i18n('management-users.edit-user') }}</el-dropdown-item>
-              <el-dropdown-item v-if="showLogs" command="show-logs">{{ i18n('management-users.view-user-logs') }}</el-dropdown-item>
-              <el-dropdown-item command="reset-logins">{{ i18n('management-users.reset-failed-logins') }}</el-dropdown-item>
-              <el-dropdown-item command="delete-user">{{ i18n('management-users.delete-user') }}</el-dropdown-item>
+            <cly-more-options v-if="rowScope.row.hover" size="small" @command="handleCommand($event, rowScope.row._id)" :test-id="'more-button-' + + rowScope.$index">
+              <el-dropdown-item command="edit-user" :data-test-id="'datatable-users-more-button-edit-select-' + rowScope.$index">{{ i18n('management-users.edit-user') }}</el-dropdown-item>
+              <el-dropdown-item v-if="showLogs" command="show-logs" :data-test-id="'datatable-users-more-button-view-logs-select-' + rowScope.$index">{{ i18n('management-users.view-user-logs') }}</el-dropdown-item>
+              <el-dropdown-item command="reset-logins" :data-test-id="'datatable-users-more-button-reset-logins-select-' + rowScope.$index">{{ i18n('management-users.reset-failed-logins') }}</el-dropdown-item>
+              <el-dropdown-item command="delete-user" :data-test-id="'datatable-users-more-button-delete-user-select-' + rowScope.$index">{{ i18n('management-users.delete-user') }}</el-dropdown-item>
             </cly-more-options>
           </template>
         </el-table-column>