fix(session-zip.e2e): wait for new rectangle and fix waitForFileExists

- Wait for new rectangle element to be mounted.
- Wait for session.zip to be fully written

src/components/tools/rectangle/RectangleTool.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="overlay-no-events">
-    <svg class="overlay-no-events">
+    <svg class="overlay-no-events" data-testid="rectangle-tool-container">
       <rectangle-widget-2D
         v-for="tool in tools"
         :key="tool.id"

tests/pageobjects/volview.page.ts

@@ -57,7 +57,10 @@ class VolViewPage extends Page {
         );
         return inView.every(Boolean);
       },
-      { timeout }
+      {
+        timeout,
+        timeoutMsg: `expected at least 1 view to be displayed in viewport`,
+      }
     );
   }
 
@@ -81,6 +84,10 @@ class VolViewPage extends Page {
     await view.click({ x: 5, y: 5 });
   }
 
+  get rectangleToolContainers() {
+    return $$('*[data-testid="rectangle-tool-container"]');
+  }
+
   get saveButton() {
     return $('button span i[class~=mdi-content-save-all]');
   }

tests/specs/session-zip.e2e.ts

@@ -10,16 +10,7 @@ const SESSION_SAVE_TIMEOUT = 40000;
 // from https://stackoverflow.com/a/47764403
 function waitForFileExists(filePath: string, timeout: number) {
   return new Promise<void>((resolve, reject) => {
-    const dir = path.dirname(filePath);
-    const basename = path.basename(filePath);
-    let timerId = undefined as NodeJS.Timeout | undefined;
-    const watcher = fs.watch(dir, (eventType: any, filename: string | null) => {
-      if (eventType === 'rename' && filename === basename) {
-        clearTimeout(timerId);
-        watcher.close();
-        resolve();
-      }
-    });
+    let watcher: fs.FSWatcher;
 
     const onTimeout = () => {
       watcher.close();
@@ -28,7 +19,17 @@ function waitForFileExists(filePath: string, timeout: number) {
       );
     };
 
-    timerId = setTimeout(onTimeout, timeout);
+    const timerId = setTimeout(onTimeout, timeout);
+
+    const dir = path.dirname(filePath);
+    const basename = path.basename(filePath);
+    watcher = fs.watch(dir, (eventType: any, filename: string | null) => {
+      if (eventType === 'rename' && filename === basename) {
+        clearTimeout(timerId);
+        watcher.close();
+        resolve();
+      }
+    });
 
     fs.access(filePath, fs.constants.R_OK, (err) => {
       if (!err) {
@@ -44,6 +45,7 @@ const saveSession = async () => {
   const sessionFileName = await volViewPage.saveSession();
   const downloadedPath = path.join(TEMP_DIR, sessionFileName);
   await waitForFileExists(downloadedPath, SESSION_SAVE_TIMEOUT);
+  await browser.pause(1000); // wait for writing to finish?
   return sessionFileName;
 };
 
@@ -60,17 +62,34 @@ const saveGetManifest = async () => {
   return { session, manifest };
 };
 
+const getRectangleCount = async () => {
+  const oneRectangleContainer = (await volViewPage.rectangleToolContainers)[0];
+  const rectangles = await oneRectangleContainer.$$('g');
+  return rectangles.length;
+};
+
+const waitForRectangleCount = async (count: number) => {
+  // wait for rectangle to be drawn
+  await browser.waitUntil(
+    async function newRectangleExist() {
+      const updatedCount = await getRectangleCount();
+      return updatedCount >= count;
+    },
+    { timeoutMsg: `expected ${count} rectangles to be drawn` }
+  );
+};
+
 const annotate = async () => {
   await volViewPage.open();
   await volViewPage.downloadProstateSample();
   await volViewPage.waitForViews();
 
   // draw rectangle
   await volViewPage.activateRectangle();
-  await volViewPage.clickTwiceInTwoView();
+  await waitForRectangleCount(1); // wait for placing tool
 
-  // this may ensure imminently saved session.volview.zip has the tool in CI
-  await browser.pause(500);
+  await volViewPage.clickTwiceInTwoView();
+  await waitForRectangleCount(2); // wait for drawn tool
 };
 
 describe('VolView config and deserialization', () => {