test(e2e): cover workflows functionalities with tests (#2099)

SwissDataScienceCenter · Nov 4, 2022 · 6462e2b · 6462e2b
1 parent e3b0380
commit 6462e2b
Show file tree

Hide file tree

Showing 13 changed files with 572 additions and 31 deletions.
diff --git a/client/src/utils/components/Tree.tsx b/client/src/utils/components/Tree.tsx
@@ -52,7 +52,7 @@ function TreeBrowser({
     return (<TreeElement key={item.uniqueId} {...item} {...newProps} />);
   });
 
-  return (<div className="mb-3">{treeElements}</div>);
+  return (<div data-cy="workflows-browser" className="mb-3">{treeElements}</div>);
 }
 
 
@@ -222,7 +222,7 @@ interface TreeDetailsProps {
 }
 
 function TreeDetails({ children }: TreeDetailsProps) {
-  return (<>{children}</>);
+  return (<div data-cy="workflow-details">{children}</div>);
 }
 
 export { TreeBrowser, TreeDetails, TreeElement };
diff --git a/client/src/workflows/Workflows.present.tsx b/client/src/workflows/Workflows.present.tsx
@@ -126,7 +126,7 @@ function WorkflowsTreeBrowser({
 
   return (
     <div className="workflows-box">
-      <h3>Workflows</h3>
+      <h3 data-cy="workflows-page">Workflows</h3>
       <WorkflowsListFilters
         ascending={ascending}
         orderBy={orderBy}
@@ -193,7 +193,7 @@ function WorkflowsListFilters({
           </Label>
         </div>
       </div>
-      <div className="d-flex align-items-center gap-2">
+      <div data-cy="workflows-ordering" className="d-flex align-items-center gap-2">
         <Label className="text-rk-text">Order by:</Label>
         <ButtonDropdown
           className="input-filter-box--workflows"
@@ -202,8 +202,8 @@ function WorkflowsListFilters({
           <DropdownToggle caret color="rk-light">{orderByMatrix[orderBy]}</DropdownToggle>
           <DropdownMenu>{ dropdownItems }</DropdownMenu>
         </ButtonDropdown>
-        <Button className="input-filter-box--workflows px-3" color="input-filter-box"
-          onClick={() => toggleAscending()}>
+        <Button data-cy="workflows-order-direction" className="input-filter-box--workflows px-3"
+          color="input-filter-box" onClick={() => toggleAscending()}>
           {ascending ?
             <FontAwesomeIcon className="m-0" icon={faSortAmountUp} /> :
             <FontAwesomeIcon className="m-0" icon={faSortAmountDown} />
@@ -412,7 +412,10 @@ function WorkflowTreeDetail({
     newerAvailable = (
       <InfoAlert timeout={0}>
         <p>A new version of this workflow is available.</p>
-        <p><Link className="btn btn-info btn-sm" to={details.latestUrl}>Click here</Link> to visualize it.</p>
+        <p data-cy="workflow-details-newer">
+          <Link className="btn btn-info btn-sm" to={details.latestUrl}>Click here</Link>
+          {" "}to visualize it.
+        </p>
       </InfoAlert>
     );
   }
@@ -427,7 +430,7 @@ function WorkflowTreeDetail({
 
         <CardBody>
           {newerAvailable}
-          <Table className="table-borderless rk-tree-table mb-0" size="sm">
+          <Table data-cy="workflow-details-info-table" className="table-borderless rk-tree-table mb-0" size="sm">
             <tbody>
               <WorkflowTreeMainDetailRow name="Author(s)" icon={<People className="text-rk-yellow" size="20" />}>
                 {
@@ -463,7 +466,7 @@ function WorkflowTreeDetail({
       </Card>
 
       <Card className="rk-tree-details mb-4">
-        <Table className="table-borderless rk-tree-table mb-0" size="sm">
+        <Table data-cy="workflow-details-extended-table" className="table-borderless rk-tree-table mb-0" size="sm">
           <tbody>
             <WorkflowTreeDetailRow name="Workflow type">
               {isComposite ? "Workflow (Composite)" : "Single step" }
@@ -643,7 +646,7 @@ function VisualizerLinks({
     );
   });
   return (
-    <Table className="table-borderless rk-tree-table mb-3" size="sm">
+    <Table data-cy="workflow-details-links" className="table-borderless rk-tree-table mb-3" size="sm">
       <tbody>
         {links}
       </tbody>
@@ -697,7 +700,7 @@ function VisualizerCommandEntities({
       />
     );
   });
-  return (<>{elements}</>);
+  return (<div data-cy="workflow-details-params-list">{elements}</div>);
 }
 
 interface VisualizerCommandEntityProps {
@@ -768,7 +771,7 @@ function VisualizerDetailExpanded({ data, fullPath }: VisualizerDetailExpandedPr
   return (
     <Row>
       <WorkflowVisualizerSimpleBox title="Details" large={true}>
-        <div className="workflow-details-table p-3">
+        <div data-cy="workflow-details-params-table" className="workflow-details-table p-3">
           <Table className="table-borderless rk-tree-table mb-0" size="sm">
             <tbody>
               <WorkflowTreeDetailRow name="Name">{data.name}</WorkflowTreeDetailRow>
@@ -799,7 +802,7 @@ function VisualizerLocalResource({ data, workflows }: VisualizerLocalResourcePro
       null;
     const subItem = data.id.replace(targetWorkflow.id + "/", "");
     const newName = `${subItem.replace("/", " #")}  @ `;
-    const url = targetWorkflow.url; // + t.id.replace(targetWorkflow.id, "");
+    const url = targetWorkflow.url;
     const link = (<IconLink tooltip="Open workflow" className="text-rk-yellow" icon={faLink} to={url} />);
     return (<span key={simpleHash(data.id + data.name)}>
       {newName} <Diagram2 className="text-rk-yellow" /> {` `}{targetWorkflow.name} {link}</span>
@@ -835,7 +838,7 @@ function VisualizerMappingExpanded({ data, workflows }: VisualizerMappingExpande
   }
 
   return (
-    <div className="workflow-mapping-table">
+    <div className="workflow-mapping-table" data-cy="workflow-details-mapping-panel">
       <Table className="table-borderless rk-tree-table mb-0" size="sm">
         <tbody>
           <WorkflowTreeDetailRow name="Name">{data.name}</WorkflowTreeDetailRow>
@@ -867,7 +870,7 @@ function WorkflowDetailPlaceholder({
           <div className="float-end m-2">{backElement}</div>
         </div>
         <CardBody>
-          <div className="d-flex">
+          <div className="d-flex" data-cy="workflow-details-waiting">
             <p className="m-auto mt-1">Getting workflow details...</p>
           </div>
           <Loader />
@@ -877,15 +880,15 @@ function WorkflowDetailPlaceholder({
   }
   else if (error) {
     content = (<>
-      <div className="d-flex">
+      <div className="d-flex" data-cy="workflow-details-error">
         <p className="m-auto mb-3 mt-1">A problem occurred while getting the workflow details.</p>
       </div>
       <CoreErrorAlert error={error} />
     </>);
   }
-  else if (1 == 1 || unknown) {
+  else if (unknown) {
     content = (<>
-      <div className="d-flex flex-column">
+      <div className="d-flex flex-column" data-cy="workflow-details-unavailable">
         <p className="mx-auto my-2">
           <FontAwesomeIcon icon={faExclamationTriangle} /> We cannot find the
           workflow you are looking for.

diff --git a/e2e/cypress.local.json b/e2e/cypress.local.json
@@ -3,5 +3,7 @@
   "env": {
     "USE_FIXTURES": true
   },
-  "video": false
+  "video": false,
+  "viewportWidth": 1600,
+  "viewportHeight": 1200
 }
diff --git a/e2e/cypress/fixtures/workflows/workflow-show-details-notexists.json b/e2e/cypress/fixtures/workflows/workflow-show-details-notexists.json
@@ -0,0 +1,9 @@
+{
+  "error": {
+    "code": 3150,
+    "userMessage": "The workflow '1234c0e72966478ba61eaad737c6ce8e' could not be found. Check that the name/id is correct and try again.",
+    "devMessage": "Unexpected error on workflow '1234c0e72966478ba61eaad737c6ce8e', possibly caused by concurrent actions.",
+    "devReference": "https://renku-python.readthedocs.io/en/latest/service_errors.html#renku.ui.service.errors.IntermittentWorkflowNotFound",
+    "sentry": "https://sentry.dev.renku.ch/organizations/sentry?query=123474a28e9a4d1b80c37a083f485fdc"
+  }
+}
diff --git a/e2e/cypress/fixtures/workflows/workflow-show-links-mappings.json b/e2e/cypress/fixtures/workflows/workflow-show-links-mappings.json
@@ -0,0 +1,93 @@
+{
+	"result": {
+		"id": "/plans/952c938055a041168f6e795ae33b0d22",
+		"creators": null,
+		"touches_existing_files": true,
+		"keywords": [],
+		"mappings": [
+			{
+				"description": null,
+				"name": "model",
+				"targets": [
+					{
+						"name": "model",
+						"plan_id": "/plans/d1341c90f2b2464dba2bd933fc716007",
+						"id": "/plans/d1341c90f2b2464dba2bd933fc716007/outputs/4",
+						"type": "Output"
+					}
+				],
+				"default_value": "None",
+				"plan_id": "/plans/952c938055a041168f6e795ae33b0d22",
+				"type": "Mapping"
+			},
+			{
+				"description": null,
+				"name": "gamma",
+				"targets": [
+					{
+						"name": "gamma",
+						"plan_id": "/plans/d1341c90f2b2464dba2bd933fc716007",
+						"id": "/plans/d1341c90f2b2464dba2bd933fc716007/parameters/5",
+						"type": "Parameter"
+					}
+				],
+				"default_value": "None",
+				"plan_id": "/plans/952c938055a041168f6e795ae33b0d22",
+				"type": "Mapping"
+			},
+			{
+				"description": null,
+				"name": "c",
+				"targets": [
+					{
+						"name": "c",
+						"plan_id": "/plans/d1341c90f2b2464dba2bd933fc716007",
+						"id": "/plans/d1341c90f2b2464dba2bd933fc716007/parameters/6",
+						"type": "Parameter"
+					}
+				],
+				"default_value": "None",
+				"plan_id": "/plans/952c938055a041168f6e795ae33b0d22",
+				"type": "Mapping"
+			}
+		],
+		"duration": 10,
+		"description": null,
+		"plans": [
+			{
+				"name": "train",
+				"id": "/plans/d1341c90f2b2464dba2bd933fc716007"
+			},
+			{
+				"name": "evaluation",
+				"id": "/plans/59d7c0e72966478ba61eaad737c6ce8e"
+			}
+		],
+		"links": [
+			{
+				"id": "/plans/952c938055a041168f6e795ae33b0d22/links/5a8cb983-911c-4e9c-ba2f-5c7cdf1a18f3",
+				"source": {
+					"name": "model",
+					"plan_id": "/plans/d1341c90f2b2464dba2bd933fc716007",
+					"id": "/plans/d1341c90f2b2464dba2bd933fc716007/outputs/4",
+					"type": "Output"
+				},
+				"sinks": [
+					{
+						"name": "model-4",
+						"plan_id": "/plans/59d7c0e72966478ba61eaad737c6ce8e",
+						"id": "/plans/59d7c0e72966478ba61eaad737c6ce8e/inputs/4",
+						"type": "Input"
+					}
+				],
+				"plan_id": "/plans/952c938055a041168f6e795ae33b0d22",
+				"type": "Link"
+			}
+		],
+		"name": "pipeline",
+		"latest": "/plans/952c938055a041168f6e795ae33b0d22",
+		"created": "2022-07-19T16:25:27+02:00",
+		"annotations": null,
+		"type": "CompositePlan"
+	}
+}
diff --git a/e2e/cypress/fixtures/workflows/workflow-show-outdated.json b/e2e/cypress/fixtures/workflows/workflow-show-outdated.json
@@ -0,0 +1,68 @@
+{
+	"result": {
+		"inputs": [
+			{
+				"position": 1,
+				"default_value": "m",
+				"prefix": null,
+				"exists": true,
+				"name": "input-1",
+				"encoding_format": "application/octet-stream",
+				"description": null,
+				"plan_id": "/plans/998ff6b7853d4889bbec55dfb31b4ba6",
+				"type": "Input",
+				"mapped_to": null
+			},
+			{
+				"position": 2,
+				"default_value": "n",
+				"prefix": null,
+				"exists": true,
+				"name": "input-2",
+				"encoding_format": "application/octet-stream",
+				"description": null,
+				"plan_id": "/plans/998ff6b7853d4889bbec55dfb31b4ba6",
+				"type": "Input",
+				"mapped_to": null
+			}
+		],
+		"outputs": [
+			{
+				"create_folder": true,
+				"position": 3,
+				"default_value": "x",
+				"prefix": null,
+				"exists": true,
+				"name": "output-3",
+				"encoding_format": "application/octet-stream",
+				"description": null,
+				"plan_id": "/plans/998ff6b7853d4889bbec55dfb31b4ba6",
+				"type": "Output",
+				"mapped_to": "stdout"
+			}
+		],
+		"type": "Plan",
+		"id": "/plans/998ff6b7853d4889bbec55dfb31b4ba6",
+		"creators": [
+			{
+				"name": "Ralf Grubenmann",
+				"affiliation": null,
+				"email": "ralf.grubenmann@gmail.com"
+			}
+		],
+		"full_command": "cat m n > x",
+		"success_codes": [],
+		"latest": "/plans/3398f0a970774e2d82b1791190de85d0",
+		"touches_existing_files": true,
+		"keywords": [],
+		"last_executed": "2022-09-19T12:31:05+02:00",
+		"annotations": null,
+		"description": null,
+		"parameters": [],
+		"duration": 0,
+		"name": "cat-m-n-b38fc",
+		"command": "cat",
+		"created": "2022-09-19T12:31:05+02:00",
+		"number_of_executions": 1
+	}
+}