Create summary e2e coverage

client/routes/workflow/summary.vue

@@ -38,15 +38,15 @@
           information may be missing.
         </p>
       </div>
-      <div class="workflow-name">
+      <div class="workflow-name" data-cy="workflow-name">
         <dt>Workflow Name</dt>
         <dd>{{ workflow.workflowExecutionInfo.type.name }}</dd>
       </div>
-      <div class="started-at">
+      <div class="started-at" data-cy="started-at">
         <dt>Started At</dt>
         <dd>{{ workflowStartTime }}</dd>
       </div>
-      <div class="close-time" v-if="workflowCloseTime">
+      <div class="close-time" v-if="workflowCloseTime" data-cy="closed-at">
         <dt>Closed Time</dt>
         <dd>{{ workflowCloseTime }}</dd>
       </div>
@@ -56,6 +56,7 @@
           wfStatus !== undefined &&
             (typeof wfStatus === 'string' ? wfStatus : wfStatus.status)
         "
+        data-cy="workflow-status"
       >
         <dt>Status</dt>
         <dd>
@@ -69,29 +70,33 @@
           </router-link>
         </dd>
       </div>
-      <div class="workflow-result" v-if="resultView">
+      <div class="workflow-result" v-if="resultView" data-cy="workflow-result">
         <dt>Result</dt>
         <dd>
           <data-viewer :item="resultView" :title="workflowId + ' Result'" />
         </dd>
       </div>
-      <div class="workflow-id">
+      <div class="workflow-id" data-cy="workflow-id">
         <dt>Workflow Id</dt>
         <dd>{{ workflowId }}</dd>
       </div>
-      <div class="run-id">
+      <div class="run-id" data-cy="run-id">
         <dt>Run Id</dt>
         <dd>{{ runId }}</dd>
       </div>
-      <div class="parent-workflow" v-if="parentWorkflowRoute">
+      <div
+        class="parent-workflow"
+        v-if="parentWorkflowRoute"
+        data-cy="parent-workflow"
+      >
         <dt>Parent Workflow</dt>
         <dd>
           <router-link :to="parentWorkflowRoute.to">
             {{ parentWorkflowRoute.text }}
           </router-link>
         </dd>
       </div>
-      <div class="task-queue">
+      <div class="task-queue" data-cy="task-queue">
         <dt>Task Queue</dt>
         <dd>
           <router-link
@@ -106,11 +111,11 @@
           </router-link>
         </dd>
       </div>
-      <div class="history-length">
+      <div class="history-length" data-cy="history-length">
         <dt>History Events</dt>
         <dd>{{ workflow.workflowExecutionInfo.historyLength }}</dd>
       </div>
-      <div class="workflow-input">
+      <div class="workflow-input" data-cy="workflow-input">
         <dt>Input</dt>
         <dd>
           <data-viewer
@@ -120,7 +125,11 @@
           />
         </dd>
       </div>
-      <div class="pending-activities" v-if="workflow.pendingActivities">
+      <div
+        class="pending-activities"
+        v-if="workflow.pendingActivities"
+        data-cy="pending-activities"
+      >
         <dt>Pending Activities</dt>
         <dd v-for="pa in workflow.pendingActivities" :key="pa.activityId">
           <detail-list :item="pa" />
@@ -162,7 +171,7 @@ export default {
   },
   created() {
     this.namespaceDescCache = {};
-    this.getWebSettings()
+    this.getWebSettings();
   },
   computed: {
     workflowCloseTime() {

cypress/integration/workflow-summary.spec.js

@@ -0,0 +1,48 @@
+/// <reference types="cypress" />
+
+context('Workflow Summary', () => {
+  beforeEach(() => {
+    cy.visit('/namespaces/namespace-web-e2e/workflows');
+
+    cy.get('[data-cy=status-filter]')
+      .click()
+      .find('a')
+      .contains('Timed Out')
+      .click();
+    cy.get('[data-cy=workflow-list]')
+      .find('tr')
+      .eq(0)
+      .find('[data-cy=workflow-link]')
+      .click();
+  });
+
+  it('renders workflow summary', () => {
+    cy.get('[data-cy=workflow-name]').should('contain.text', 'e2e_type');
+
+    const dateTimeRegex = /\w+\s\w+\s[\d\w]+,\s(\d{1,2}:?){3}\s(am|pm)/;
+    cy.get('[data-cy=started-at]').contains(dateTimeView);
+    cy.get('[data-cy=closed-at]').contains(dateTimeView);
+
+    cy.get('[data-cy=workflow-status]').should('contain.text', 'timedout');
+
+    cy.get('[data-cy=workflow-result]')
+      .should('contain.text', 'retryState')
+      .should('contain.text', 'Timeout');
+
+    cy.get('[data-cy=workflow-id]').should('contain.text', 'wf_timedout');
+
+    const uidRegex = /([\w\d]{4,12}-?){5}/
+    cy.get('[data-cy=run-id]').contains(uidRegex);
+
+    cy.get('[data-cy=parent-workflow]').should('contain.text', 'e2e_type');
+
+    cy.get('[data-cy=task-queue]').should('contain.text', 'e2eQueue');
+
+    cy.get('[data-cy=history-length]').should('contain.text', '3');
+
+    cy.get('[data-cy=workflow-input]')
+      .should('contain.text', '{Harley:Pumpkin!,Joker:Hahahah}')
+      .should('contain.text', 'to infinity and beyond')
+      .should('contain.text', '""');
+  });
+});