Documentation Page E2E Tests (#324)

* Added e2e tests for the documentation page

* Fixed: some tests don't clean up the created processes correctly

* Generalized version creation in the process modeler for tests and used that in the documentation page tests

* Merged main into ms2/new-documentation-page-e2e

* split up the documentation page test from one big one into multiple smaller ones

* Fixed: Undid some changes that broke tests from main

* Extended the timeout for a long running test

* Split a long test into two and replaced waitForHydration helper function with a documentation page specific test for a fully loaded page

* Fixed: documentation page e2e tests don't click the correct position in the process list to get to the modeler

* Replaced unchecking of checkboxes in tests with a simple click in an attempt to fix flakyness in the pipeline

* Fixed: E2E tests are not correctly working with the changes from the main branch

* Marked tests that have to import multiple processes as slow

* Trying to make a test work by extending its timeout

* Adjusted test for importing a process into your workspace from the documentation page

---------

Co-authored-by: Kai Rohwer <[email protected]>

Author: jjoderis

src/management-system-v2/app/shared-viewer/documentation-page-utils.ts

@@ -182,23 +182,23 @@ export async function getElementSVG(
   } else if (isType(el, 'bpmn:CallActivity')) {
     // check if the call activity references another process which this user can access
     let importDefinitionId: string | undefined;
-    let version: string | undefined;
+    let versionId: string | undefined;
     try {
-      ({ definitionId: importDefinitionId, versionId: version } =
+      ({ definitionId: importDefinitionId, versionId } =
         getTargetDefinitionsAndProcessIdForCallActivityByObject(getRootFromElement(el), el.id));
     } catch (err) {}
 
     if (
       importDefinitionId &&
-      version &&
+      versionId &&
       availableImports[importDefinitionId] &&
-      availableImports[importDefinitionId][version]
+      availableImports[importDefinitionId][versionId]
     ) {
       // remember the bpmn currently loaded into the viewer so we can return to it after getting the svg for the elements in the imported process
       ({ xml: oldBpmn } = await bpmnViewer.saveXML());
 
       // get the bpmn for the import and load it into the viewer
-      const importBpmn = availableImports[importDefinitionId][version];
+      const importBpmn = availableImports[importDefinitionId][versionId];
 
       await bpmnViewer.importXML(importBpmn);
 
@@ -216,7 +216,7 @@ export async function getElementSVG(
         name: `Imported Process: ${definitions.name}`,
         ...getMetaDataFromBpmnElement(el, mdEditor),
         planeSvg: await getSVGFromBPMN(bpmnViewer),
-        version,
+        versionId,
         versionName,
         versionDescription,
       };

src/management-system-v2/app/shared-viewer/documentation-page.tsx

@@ -92,6 +92,7 @@ const BPMNSharedViewer = ({
       currentRootId?: string, // the layer the current element is in (e.g. the root process/collaboration or a collapsed sub-process)
     ): Promise<ElementInfo> {
       let svg;
+      const name = getTitle(el);
 
       let nestedSubprocess;
       let importedProcess;
@@ -140,7 +141,7 @@ const BPMNSharedViewer = ({
       return {
         svg,
         id: el.id,
-        name: getTitle(el),
+        name,
         description,
         meta,
         milestones,
@@ -158,9 +159,11 @@ const BPMNSharedViewer = ({
       const root = canvas.getRootElement();
 
       const definitions = getRootFromElement(root.businessObject);
-      getDefinitionsVersionInformation(definitions).then(({ versionId, name, description }) =>
-        setVersionInfo({ id: versionId, name, description }),
-      );
+
+      const { versionId, name, description, versionCreatedOn } =
+        await getDefinitionsVersionInformation(definitions);
+
+      setVersionInfo({ id: versionId, name, description, versionCreatedOn });
 
       const hierarchy = await transform(
         viewer,

src/management-system-v2/app/shared-viewer/process-document.tsx

@@ -18,11 +18,13 @@ import { useEnvironment } from '@/components/auth-can';
 import { EntityType } from '@/lib/helpers/fileManagerHelpers';
 import { useFileManager } from '@/lib/useFileManager';
 import { enableUseFileManager } from 'FeatureFlags';
+import { fromCustomUTCString } from '@/lib/helpers/timeHelper';
 
 export type VersionInfo = {
   id?: string;
   name?: string;
   description?: string;
+  versionCreatedOn?: string;
 };
 
 type ProcessDocumentProps = {
@@ -64,7 +66,6 @@ const ProcessDocument: React.FC<ProcessDocumentProps> = ({
       !hierarchyElement.image &&
       !hierarchyElement.children?.length
     ) {
-      setProcessPages(currentPages);
       return;
     }
 
@@ -224,20 +225,30 @@ const ProcessDocument: React.FC<ProcessDocumentProps> = ({
       (settings.nestedSubprocesses || !hierarchyElement.nestedSubprocess) &&
       (settings.importedProcesses || !hierarchyElement.importedProcess)
     ) {
-      hierarchyElement.children?.forEach((child) => getContent(child, currentPages));
+      if (hierarchyElement.children) {
+        for (const child of hierarchyElement.children) {
+          await getContent(child, currentPages);
+        }
+      }
     }
   }
 
   // transform the document data into the respective pages of the document
   useEffect(() => {
-    processHierarchy && getContent(processHierarchy, processPages);
-  }, [processHierarchy]);
+    const updateProcessPages = async () => {
+      const newProcessPages: React.JSX.Element[] = [];
+      processHierarchy && (await getContent(processHierarchy, newProcessPages));
+      setProcessPages(newProcessPages);
+    };
+
+    updateProcessPages();
+  }, [processHierarchy, settings]);
 
   return (
     <>
       <div className={styles.ProcessDocument}>
         {!processHierarchy ? (
-          <Spin tip="Loading" size="large" style={{ top: '50px' }}>
+          <Spin tip="Loading process data" size="large" style={{ top: '50px' }}>
             <div></div>
           </Spin>
         ) : (
@@ -268,7 +279,12 @@ const ProcessDocument: React.FC<ProcessDocumentProps> = ({
                     <div>Version: Latest</div>
                   )}
                   {version.id ? (
-                    <div>Creation Time: {new Date(version.id).toUTCString()}</div>
+                    <div>
+                      Creation Time:{' '}
+                      {version.versionCreatedOn
+                        ? fromCustomUTCString(version.versionCreatedOn).toUTCString()
+                        : 'Unknown'}
+                    </div>
                   ) : (
                     <div>Last Edit: {processData.lastEditedOn.toUTCString()}</div>
                   )}

src/management-system-v2/lib/schema.tsx

@@ -250,13 +250,13 @@ export const schema = {
       ],
     },
     {
-      name: 'version',
+      name: 'versionId',
       extends: ['bpmn:Definitions', 'bpmn:Import'],
       properties: [
         {
-          name: 'version',
+          name: 'versionId',
           isAttr: true,
-          type: 'Number',
+          type: 'string',
         },
       ],
     },
@@ -293,6 +293,17 @@ export const schema = {
         },
       ],
     },
+    {
+      name: 'versionCreatedOn',
+      extends: ['bpmn:Definitions'],
+      properties: [
+        {
+          name: 'versionCreatedOn',
+          isAttr: true,
+          type: 'String',
+        },
+      ],
+    },
     {
       name: 'creatorEnvironmentId',
       extends: ['bpmn:Definitions'],