Merge pull request #5 from MetaCell/test/NA-250

Test/na 250

tests/snapshot-tests/constants.js

@@ -1,4 +1,4 @@
 //export const URL_START = 'http://localhost:8080/';
 export const URL_START = 'https://neuroglancer.dev.metacell.us/';
-export const THRESHOLD = 0.10;
+export const THRESHOLD = 0.15;
 export const TIMEOUT = 300000;

tests/snapshot-tests/flyEM_Hemibrain_regression.test.js

@@ -8,7 +8,7 @@ import * as selectors from "./selectors.js";
 import { URL_START, THRESHOLD, TIMEOUT } from "./constants.js";
 
 //PAGE INFO:
-const baseURL = process.env.url || `${URL_START}#!%7B%22dimensions%22:%7B%22x%22:%5B8e-9%2C%22m%22%5D%2C%22y%22:%5B8e-9%2C%22m%22%5D%2C%22z%22:%5B8e-9%2C%22m%22%5D%7D%2C%22position%22:%5B17213.5%2C19862.5%2C20697.5%5D%2C%22crossSectionScale%22:1%2C%22projectionScale%22:65536%2C%22layers%22:%5B%7B%22type%22:%22image%22%2C%22source%22:%22precomputed://gs://neuroglancer-janelia-flyem-hemibrain/emdata/clahe_yz/jpeg%22%2C%22tab%22:%22source%22%2C%22shaderControls%22:%7B%22colormap%22:%7B%22controlPoints%22:%5B%7B%22position%22:204%2C%22color%22:%7B%220%22:0%2C%221%22:0%2C%222%22:0%2C%223%22:0%7D%7D%2C%7B%22position%22:358%2C%22color%22:%7B%220%22:255%2C%221%22:255%2C%222%22:255%2C%223%22:255%7D%7D%5D%7D%7D%2C%22name%22:%22jpeg%22%7D%5D%2C%22selectedLayer%22:%7B%22visible%22:true%2C%22layer%22:%22jpeg%22%7D%2C%22layout%22:%224panel%22%7D`;
+const baseURL = process.env.url || `${URL_START}#!%7B"dimensions":%7B"x":%5B8e-9%2C"m"%5D%2C"y":%5B8e-9%2C"m"%5D%2C"z":%5B8e-9%2C"m"%5D%7D%2C"position":%5B17213.5%2C19862.5%2C20697.5%5D%2C"crossSectionScale":1%2C"projectionScale":65536%2C"layers":%5B%7B"type":"image"%2C"source":"precomputed://gs://neuroglancer-janelia-flyem-hemibrain/emdata/clahe_yz/jpeg"%2C"tab":"source"%2C"shader":"#uicontrol%20invlerp%20normalized%28range=%5B0%2C200%5D%29%5Cn#uicontrol%20transferFunction%20colormap%28window=%5B0%2C200%5D%29%5Cn%20%20void%20main%28%29%20%7B%5Cn%20%20if%20%28%21VOLUME_RENDERING%29%7B%5Cn%20%20%5CtemitGrayscale%28normalized%28%29%29%3B%5Cn%20%20%7D%5Cn%20%20else%7B%5Cn%20%20%20%20emitRGBA%28colormap%28%29%29%3B%5Cn%20%20%7D%5Cn%7D%5Cn%5Cn"%2C"name":"jpeg"%7D%5D%2C"selectedLayer":%7B"visible":true%2C"layer":"jpeg"%7D%2C"layout":"4panel"%7D`;
 
 
 //SNAPSHOT:
@@ -111,10 +111,13 @@ describe("Test Suite for flyEM Hemibrain Dataset", () => {
       await page.waitForSelector(selectors.ON_VALUE)
       await page.waitForSelector(selectors.MAX_VALUE)
       await dropdown_buttons[1].select('on');
-      await page.waitForTimeout(2000);
+      await page.waitForFunction((selector) => {
+        const dropdowns = Array.from(document.querySelectorAll(selector));
+        return dropdowns[1] && dropdowns[1].value === 'on';
+      }, {}, '.neuroglancer-layer-control-container.neuroglancer-layer-options-control-container > select.neuroglancer-layer-control-control');
       await page.waitForSelector(selectors.RESOLUTION_SLICES)
-      const rendering_options_afterVolume = await page.$$(".neuroglancer-layer-control-container.neuroglancer-layer-options-control-container");
-      expect(rendering_options_afterVolume.length).toBe(7);
+      await page.waitForSelector('.neuroglancer-layer-control-container.neuroglancer-layer-options-control-container')
+
       console.log('Volume Rendering enabled')
     });
 
@@ -171,27 +174,66 @@ describe("Test Suite for flyEM Hemibrain Dataset", () => {
   })
 
 
+
   describe("Canvas with Max Volume Rendering", () => {
 
     it("should enable max volume rendering", async () => {
       console.log('Enabling Max Volume Rendering ...')
-      await page.waitForSelector(selectors.RENDERING_TAB_DROPDOWNS)
+      await page.waitForSelector(selectors.RENDERING_TAB_DROPDOWNS, { hidden: false })
       const dropdown_buttons = await page.$$('select.neuroglancer-layer-control-control')
         await dropdown_buttons[1].click()
-      await page.waitForSelector(selectors.OFF_VALUE)
-      await page.waitForSelector(selectors.ON_VALUE)
-      await page.waitForSelector(selectors.MAX_VALUE)
+      await page.waitForSelector(selectors.OFF_VALUE, { hidden: false })
+      await page.waitForSelector(selectors.ON_VALUE, { hidden: false })
+      await page.waitForSelector(selectors.MAX_VALUE, { hidden: false })
       await dropdown_buttons[1].select('max');
-      await page.waitForTimeout(2000);
+      await page.waitForFunction((selector) => {
+        const dropdowns = Array.from(document.querySelectorAll(selector));
+        return dropdowns[1] && dropdowns[1].value === 'max';
+      }, {}, '.neuroglancer-layer-control-container.neuroglancer-layer-options-control-container > select.neuroglancer-layer-control-control');
       await page.waitForSelector(selectors.RESOLUTION_SLICES)
-      const rendering_options_afterVolume = await page.$$(".neuroglancer-layer-control-container.neuroglancer-layer-options-control-container");
-      expect(rendering_options_afterVolume.length).toBe(7);
+      try {
+        const isValueComplete = async () => {
+          const { valueBeforeSlash, valueAfterSlash } = await page.$eval('.neuroglancer-tab-content.neuroglancer-image-dropdown > div > .neuroglancer-layer-control-container.neuroglancer-layer-options-control-container > .neuroglancer-render-scale-widget.neuroglancer-layer-control-control > .neuroglancer-render-scale-widget-legend > div[title="Number of chunks rendered"]', (element) => {
+            const textContent = element.textContent.trim();
+            const [valueBeforeSlash, valueAfterSlash] = textContent.split('/').map(part => part.trim());
+
+            return { valueBeforeSlash, valueAfterSlash };
+          });
+
+          return valueBeforeSlash >= (1 / 4) * valueAfterSlash;
+        };
+
+        const maxRetries = 20;
+        let retries = 0;
+
+        while (retries < maxRetries) {
+          if (await isValueComplete()) {
+            console.log('Value is reached. Continuing with the next steps.');
+            break;
+          }
+          await page.waitForTimeout(3000);
+          retries++;
+        }
+
+        if (retries === maxRetries) {
+          throw new Error('Timeout: Value did not become the expected within the specified time.');
+        }
+      } catch (error) {
+        console.error('An error occurred:', error.message);
+        throw error;
+      }
       console.log('Max Volume Rendering enabled')
     })
 
+    it("should maximize 3D panel", async () => {
+      await page.waitForSelector('button[title="Switch to 3d layout."]', { hidden: false });
+      await page.click('button[title="Switch to 3d layout."]');
+      await page.waitForSelector('button[title="Switch to 4panel layout."]', { hidden: false });
+    })
+
     it("should take screenshot of main canvas with Max 3D Rendering", async () => {
-      const canvas = await page.waitForSelector(selectors.IMAGE_CANVAS, {hidden:false});
-      await page.waitForTimeout(1000 * 6);
+      await page.waitForSelector(selectors.IMAGE_CANVAS, {hidden:false});
+      // await page.waitForTimeout(1000 * 6);
       const groups_image = await page.screenshot();
       // const groups_image = await canvas.screenshot();
       await console.log("... taking canvas snapshot ...");
@@ -200,10 +242,98 @@ describe("Test Suite for flyEM Hemibrain Dataset", () => {
         customSnapshotIdentifier: 'Max_3D_Rendering',
       });
       await page.waitForTimeout(1000 * 3);
+
+
     });
+    it("should reset to 4 panel layout", async () => {
+      await page.waitForSelector('button[title="Switch to 4panel layout."]', { hidden: false });
+      await page.click('button[title="Switch to 4panel layout."]');
+      await page.waitForSelector('button[title="Switch to 3d layout."]', { hidden: false });
+    })
 
   });
 
+  describe("Canvas with Min Volume Rendering", () => {
+
+    it("should enable min volume rendering", async () => {
+      console.log('Enabling Min Volume Rendering ...')
+      await page.waitForSelector(selectors.RENDERING_TAB_DROPDOWNS, { hidden: false })
+      const dropdown_buttons = await page.$$('select.neuroglancer-layer-control-control')
+        await dropdown_buttons[1].click()
+      await page.waitForSelector(selectors.OFF_VALUE, { hidden: false })
+      await page.waitForSelector(selectors.ON_VALUE, { hidden: false })
+      await page.waitForSelector(selectors.MAX_VALUE, { hidden: false })
+      await page.waitForSelector(selectors.MIN_VALUE, { hidden: false })
+      await dropdown_buttons[1].select('min');
+      await page.waitForFunction((selector) => {
+        const dropdowns = Array.from(document.querySelectorAll(selector));
+        return dropdowns[1] && dropdowns[1].value === 'min';
+      }, {}, '.neuroglancer-layer-control-container.neuroglancer-layer-options-control-container > select.neuroglancer-layer-control-control');
+      await page.waitForTimeout(2000);
+      await page.waitForSelector(selectors.RESOLUTION_SLICES)
+      try {
+        const isValueComplete = async () => {
+          const { valueBeforeSlash, valueAfterSlash } = await page.$eval('.neuroglancer-tab-content.neuroglancer-image-dropdown > div > .neuroglancer-layer-control-container.neuroglancer-layer-options-control-container > .neuroglancer-render-scale-widget.neuroglancer-layer-control-control > .neuroglancer-render-scale-widget-legend > div[title="Number of chunks rendered"]', (element) => {
+            const textContent = element.textContent.trim();
+            const [valueBeforeSlash, valueAfterSlash] = textContent.split('/').map(part => part.trim());
+
+            return { valueBeforeSlash, valueAfterSlash };
+          });
+
+          return valueBeforeSlash >= (1 / 4) * valueAfterSlash;
+        };
+
+        const maxRetries = 20;
+        let retries = 0;
+
+        while (retries < maxRetries) {
+          if (await isValueComplete()) {
+            console.log('Value is reached. Continuing with the next steps.');
+            break;
+          }
+          await page.waitForTimeout(3000);
+          retries++;
+        }
+
+        if (retries === maxRetries) {
+          throw new Error('Timeout: Value did not become the expected within the specified time.');
+        }
+      } catch (error) {
+        console.error('An error occurred:', error.message);
+        throw error;
+      }
+
+      console.log('Min Volume Rendering enabled')
+    })
+
+    it("should maximize 3D panel", async () => {
+      await page.waitForSelector('button[title="Switch to 3d layout."]', { hidden: false });
+      await page.click('button[title="Switch to 3d layout."]');
+      await page.waitForSelector('button[title="Switch to 4panel layout."]', { hidden: false });
+    })
+
+
+    it("should take screenshot of main canvas with Min 3D Rendering", async () => {
+      await page.waitForSelector(selectors.IMAGE_CANVAS, {hidden:false});
+
+      // await page.waitForTimeout(1000 * 6);
+      const groups_image = await page.screenshot();
+      // const groups_image = await canvas.screenshot();
+      await console.log("... taking canvas snapshot ...");
+      expect(groups_image).toMatchImageSnapshot({
+        ...SNAPSHOT_OPTIONS,
+        customSnapshotIdentifier: 'Min_3D_Rendering',
+      });
+      await page.waitForTimeout(1000 * 3);
+
+    });
+    it("should reset to 4 panel layout", async () => {
+      await page.waitForSelector('button[title="Switch to 4panel layout."]', { hidden: false });
+      await page.click('button[title="Switch to 4panel layout."]');
+      await page.waitForSelector('button[title="Switch to 3d layout."]', { hidden: false });
+    })
+  })
+
   describe("Canvas with colored 2D + 3D", () => {
 
     it("should change the color map of the 3D rendering", async () => {

tests/snapshot-tests/selectors.js

@@ -7,6 +7,7 @@ export const RENDERING_TAB_DROPDOWNS = 'select.neuroglancer-layer-control-contro
 export const OFF_VALUE = 'option[value="off"]'
 export const ON_VALUE = 'option[value="on"]'
 export const MAX_VALUE = 'option[value="max"]'
+export const MIN_VALUE = 'option[value="min"]'
 export const RESOLUTION_SLICES = 'div[title="Target resolution of data in screen pixels"]'
 export const RESOLUTION_SAMPLES = '.neuroglancer-tab-content.neuroglancer-image-dropdown > div > .neuroglancer-layer-control-container.neuroglancer-layer-options-control-container > .neuroglancer-render-scale-widget.neuroglancer-layer-control-control > .neuroglancer-render-scale-widget-legend > div[title="Number of chunks rendered"]'
 export const COLORMAP = '.neuroglancer-tab-content.neuroglancer-transfer-function-widget.neuroglancer-layer-control-control'