Merge pull request #462 from VirtualFlyBrain/development

Latest changes from Development

README.md

@@ -5,3 +5,21 @@ Virtual Fly Brain project running on Geppetto
 
 Main docker build with customisation code.
 
+To run tests:
+
+Install locally packages:
+
+``npm install jest@24.8.0 puppeteer@1.17.0 jest-puppeteer@4.3.0 @babel/preset-env@7.4.5 url-join@4.0.0 @babel/core@7.4.5``
+
+Then navigate to folder 'geppetto-vfb/tests/jest/vfb' and run:
+
+``npm test``
+
+This will run the tests against the local server 'localhost:8080'.
+If you want to run tests against a VFB version deployed somewhere else, run the same command but with parameter 'url', as in:
+
+``url=http://v2-dev2.virtualflybrain.org/org.geppetto.frontend npm test``
+
+or 
+
+``url=http://localhost:8081/org.geppetto.frontend npm test``

tests/jest/vfb/3d-viewer-tests.js

@@ -0,0 +1,118 @@
+const puppeteer = require('puppeteer');
+const { TimeoutError } = require('puppeteer/Errors');
+
+import {  getUrlFromProjectId } from './cmdline.js';
+import { wait4selector, click } from './utils';
+import * as ST from './selectors';
+
+const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
+const PROJECT_URL = baseURL + "/geppetto?i=VFB_00017894";
+
+/**
+ * Tests 3D Viewer component
+ */
+describe('VFB 3D Viewer Component Tests', () => {
+	beforeAll(async () => {
+		jest.setTimeout(1800000); 
+		await page.goto(PROJECT_URL);
+
+	});
+
+	// Tests that expected components are present when VFB page loads
+	describe('Test landing page', () => {
+		it('Loading spinner goes away', async () => {
+			await wait4selector(page, ST.SPINNER_SELECTOR, { hidden: true, timeout : 120000 })
+		})
+
+		it('VFB Title shows up', async () => {
+			const title = await page.title();
+			expect(title).toBe("Virtual Fly Brain");
+		})
+
+		it('Deselect button for VFB_00017894 appears in button bar inside the term info component', async () => {
+			await wait4selector(page, '#VFB_00017894_deselect_buttonBar_btn', { visible: true , timeout : 120000 })
+		})
+
+		it('Zoom button for VFB_00017894 appears in button bar inside the term info component', async () => {
+			await wait4selector(page, 'button[id=VFB_00017894_zoom_buttonBar_btn]', { visible: true , timeout : 120000 })
+		})
+
+		it('Term info component created after load', async () => {
+			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true })
+		})
+
+		it('Term info component correctly populated at startup', async () => {
+			// Checks name in Term Info is present and correct
+			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("adult brain template JFRC2 (VFB_00017894)")');
+		})
+	})
+
+	//Tests 3D viewer component, tests there's 2 visible meshes rendered
+	describe('Test 3D Viewer Component', () => {
+		it('Canvas container component has 1 mesh rendered', async () => {
+			// Checks there's one mesh rendered in the canvas
+			expect(
+					await page.evaluate(async () => Object.keys(CanvasContainer.engine.meshes).length)
+			).toBe(1)
+		})
+
+		it('3DViewer minimized', async () => {
+			// There are three flexlayout_tab components open with the same minimize icon, the second one belongs to the 3d viewer
+			await page.evaluate(async () => document.getElementsByClassName("fa-window-minimize")[1].click());
+			// Check 3d viewer is visible again by checking css property 'display : none'
+			let minimized = await page.evaluate(async () => {
+				return document.getElementById("CanvasContainer_component").parentElement.style.getPropertyValue("display")
+			})
+			expect(minimized).toBe("none");
+		})
+
+		it('3DViewer maximized', async () => {
+			// Using 'click()' function on minimized element doesn't work, needs to dispatch 'mouseup' and 'mousedown' events instead
+			await page.evaluate(async () => {
+				let mouseUp = document.getElementsByClassName('flexlayout__border_button')[0]
+				let clickEvent = new MouseEvent('mousedown', {
+					view: window,
+					bubbles: true,
+					cancelable: true
+				});
+				mouseUp.dispatchEvent(clickEvent);
+
+				let mouseDown = document.getElementsByClassName('flexlayout__border_button')[0]
+				clickEvent = new MouseEvent('mouseup', {
+					view: window,
+					bubbles: true,
+					cancelable: true
+				});
+				mouseDown.dispatchEvent(clickEvent);
+			});
+
+			// Check 3d viewer is visible again by checking css property 'display : block'
+			let maximized = await page.evaluate(async () => {
+				return document.getElementById("CanvasContainer_component").parentElement.style.getPropertyValue("display")
+			})
+			expect(maximized).toBe("block");
+
+			// Check 3d viewer opened up with correct amount of meshes
+			expect(
+					await page.evaluate(async () => Object.keys(StackViewer1.state.canvasRef.engine.meshes).length)
+			).toBe(1)
+		})
+
+		it('3DViewer closed', async () => {
+			// There's 3 div elements with same class (slice viewer, 3d viewer and term info), since the 3D Viewer
+			// was previously minimized and maximized it should now occupy the third position
+			await page.evaluate(async () => document.getElementsByClassName("flexlayout__tab_button_trailing")[2].click());
+			expect(
+					await page.evaluate(async () => document.getElementById("CanvasContainer_component"))
+			).toBe(null);
+		})
+
+		it('3DViewer opened', async () => {
+			await page.evaluate(async () => document.getElementById("Tools").click());
+			// Check HTML 'UL' with class 'MuiList-root' is visible, this is the drop down menu
+			await wait4selector(page, "ul.MuiList-root", { visible: true, timeout : 120000 });
+			await page.evaluate(async () => document.getElementById("3D Viewer").click());
+			await wait4selector(page, 'div#CanvasContainer_component', { visible: true, timeout : 5000});
+		})
+	})
+})

tests/jest/vfb/batch-request-tests.js

@@ -1,11 +1,11 @@
 const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
-import { getCommandLineArg, getUrlFromProjectId } from './cmdline.js';
+import { getUrlFromProjectId } from './cmdline.js';
 import { wait4selector, click } from './utils';
 import * as ST from './selectors';
 
-const baseURL = getCommandLineArg('--url', 'http://localhost:8080/org.geppetto.frontend');
+const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
 const PROJECT_URL = baseURL + "/geppetto?i=VFB_00017894,VFB_00030849,VFB_00030838,VFB_00030856,VFB_00030880";
 
 /**

tests/jest/vfb/control-panel-tests.js

@@ -1,11 +1,11 @@
 const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
-import { getCommandLineArg, getUrlFromProjectId } from './cmdline.js';
+import { getUrlFromProjectId } from './cmdline.js';
 import { wait4selector, click } from './utils';
 import * as ST from './selectors';
 
-const baseURL = getCommandLineArg('--url', 'http://localhost:8080/org.geppetto.frontend');
+const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
 const PROJECT_URL = baseURL + "/geppetto?i=VFB_00017894,VFB_00000001";
 
 /**

tests/jest/vfb/menu-component-tests.js

@@ -0,0 +1,100 @@
+const puppeteer = require('puppeteer');
+const { TimeoutError } = require('puppeteer/Errors');
+
+import { getCommandLineArg, getUrlFromProjectId } from './cmdline.js';
+import { wait4selector, click } from './utils';
+import * as ST from './selectors';
+
+const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
+const projectURL = baseURL + "/geppetto?i=VFB_00017894";
+
+/**
+ * Tests Menu Components
+ */
+describe('VFB Menu Component Tests', () => {
+	beforeAll(async () => {
+		jest.setTimeout(120000); 
+		await page.goto(projectURL);
+
+	});
+
+	//Tests components in landing page are present
+	describe('Test Landing Page', () => {
+		it('Loading spinner goes away', async () => {
+			await wait4selector(page, ST.SPINNER_SELECTOR, { hidden: true, timeout : 120000 })
+		})
+
+		it('VFB Title shows up', async () => {
+			const title = await page.title();
+			expect(title).toBe("Virtual Fly Brain");
+		})
+
+		// Wait for this component to load on term info, means page has finished loading
+		it('Term info component created after load', async () => {
+			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true , timeout : 120000})
+		})
+
+		// Wait for this component to load on term info, means page has finished loading
+		it('Term info component correctly populated at startup', async () => {
+			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("adult brain template JFRC2 (VFB_00017894)")', {timeout : 120000});
+		})
+	})
+
+	//Tests Menu Components for About and Help Work
+	describe('Test Menu Components About and Help', () => {
+		it('Open Virtual Fly Brain Menu', async () => {
+			await page.evaluate(async () => document.getElementById("Virtual Fly Brain").click());
+			// Wait for the Drop Down Menu Option to show for 'Virtual Fly Brain'
+			await wait4selector(page, "ul.MuiList-root", { visible: true, timeout : 120000 })
+			const dropDownMenuItems = await page.evaluate(async () => document.getElementsByClassName("MuiListItem-root").length);
+			// Test there's 4 elements as part of the drop down menu for 'Virtual Fly Brain'
+			expect(dropDownMenuItems).toEqual(4);
+		})
+
+		it('About Modal Appears', async () => {
+			await page.evaluate(async () => document.getElementById("About").click());
+			// Wait for selector to appear, this means About modal was opened
+			await wait4selector(page, '#vfb-content-block', { visible: true })
+		})
+
+		// Tests modal title bar is populated with expected title for About modal
+		it('About Modal Title Correct', async () => {
+			await page.waitForFunction('document.getElementById("vfb-content-titlebar").innerText.startsWith("About Virtual Fly Brain")');
+		})
+
+		it('About Modal Title Correct', async () => {
+			// Check for the first line of the About modal to be present
+			await page.waitForFunction('document.getElementById("vfb-content-text").innerText.startsWith("Who we are")');
+		})
+
+		it('About Modal Contains Contents', async () => {
+			// Here we check the contents inside a DIV to match the expected text
+			await page.waitForFunction('document.getElementsByClassName("vfb-content-container")[0].innerText.startsWith("3D Viewer, online tools, server and the website:")');
+		})
+
+		it('About Modal Closed', async () => {
+			// Click on the X on the right corner to close the modal
+			await page.evaluate(async () => document.getElementsByClassName("close-slider")[0].click());
+			await wait4selector(page, '#vfb-content-block', {hidden: true, timeout : 5000});
+		})
+
+		it('Help Menu Appears', async () => {
+			await page.evaluate(async () => document.getElementById("Help").click());
+			// Wait for drop down menu of 'Help' to show 
+			await wait4selector(page, "ul.MuiList-root", { visible: true, timeout : 120000 })
+			// Check there's three elements in the drop down menu of 'Help'
+			const dropDownMenuItems = await page.evaluate(async () => document.getElementsByClassName("MuiListItem-root").length);
+			expect(dropDownMenuItems).toEqual(3);
+		})
+
+		it('Help Modal FAQ Tab Opened', async () => {
+			// Checks a new page was opened as a result of clicking on the F.A.Q. menu option
+			let pagesOpened = await browser.pages();
+			await page.evaluate(async () => document.getElementById("F.A.Q.").click());
+			await page.waitFor(2000); // wait for a while
+			// New amount of opened pages should be one more than 'pagesOpened'
+			let newPagesOpened = await browser.pages();
+			expect(newPagesOpened.length).toEqual(pagesOpened.length+1);
+		})
+	})
+})

tests/jest/vfb/query-tests.js

@@ -1,11 +1,11 @@
 const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
-import { getCommandLineArg, getUrlFromProjectId } from './cmdline.js';
+import { getUrlFromProjectId } from './cmdline.js';
 import { wait4selector, click } from './utils';
 import * as ST from './selectors';
 
-const baseURL = getCommandLineArg('--url', 'http://localhost:8080/org.geppetto.frontend');
+const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
 const PROJECT_URL = baseURL + "/geppetto?i=VFB_00017894";
 
 /**