ci: add tests

package.json

@@ -46,6 +46,7 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "husky": "1.3.1",
+    "jest-canvas-mock": "^2.3.1",
     "lint-staged": "8.1.5",
     "prettier": "1.17.0",
     "sass": "1.29.0",

src/App.js

@@ -44,7 +44,6 @@ class App extends Component {
     );
   }
   onSelectExperiment(experiment) {
-    console.log(`Experiment selected: ${experiment}`);
     this.setState({ experiment });
   }
 }

src/__tests__/VisualizationsPage.test.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import App from '../App';
+import { ApolloProvider } from 'react-apollo';
+import { HashRouter as Router } from 'react-router-dom';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+// Since I updated dependencies in package.json, this seems necessary.
+beforeEach(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});
+
+test('Test if we switch to visualization page', async () => {
+  // Load page
+  render(
+    <Router>
+      <App />
+    </Router>
+  );
+  // Let time for ExperimentNavBar to load experiments
+  // to prevent warnings about async calls not terminated
+  expect(await screen.findByText(/2-dim-shape-exp/)).toBeInTheDocument();
+
+  // Make sure we are on default (landing) page
+  expect(screen.queryByText(/Landing Page/)).toBeInTheDocument();
+
+  // Make sure we are not on visualizations page
+  expect(screen.queryByText(/Nothing to display/)).toBeNull();
+
+  // Get visualizations page link
+  const menu = screen.queryByText(/Visualizations/);
+  expect(menu).toBeInTheDocument();
+
+  // CLick on visualizations page link
+  fireEvent.click(menu);
+
+  // Check we are on visualizations page
+  const elements = await screen.findAllByText(/Nothing to display/);
+  expect(elements.length).toBe(3);
+});
+
+test('Test if we can select and unselect experiments', async () => {
+  // Load page
+  render(
+    <Router>
+      <App />
+    </Router>
+  );
+  const experiment = await screen.findByText(/2-dim-shape-exp/);
+  expect(experiment).toBeInTheDocument();
+
+  // Switch to visualizations page
+  const menu = screen.queryByText(/Visualizations/);
+  fireEvent.click(menu);
+  expect((await screen.findAllByText(/Nothing to display/)).length).toBe(3);
+
+  // Select an experiment
+  fireEvent.click(experiment);
+
+  // Check if plots are loaded
+  // Wait enough (3 seconds) to let plots load
+  await waitFor(
+    () => {
+      expect(
+        screen.queryByText(/Regret for experiment '2-dim-shape-exp'/)
+      ).toBeInTheDocument();
+    },
+    { timeout: 3000 }
+  );
+  expect(
+    await screen.findByText(
+      /Parallel Coordinates PLot for experiment '2-dim-shape-exp'/i
+    )
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByText(/LPI for experiment '2-dim-shape-exp'/)
+  ).toBeInTheDocument();
+
+  // Unselect experiment
+  const span = screen.queryByTitle(/unselect experiment '2-dim-shape-exp'/);
+  expect(span).toBeInTheDocument();
+  expect(span.tagName.toLowerCase()).toBe('span');
+  fireEvent.click(span);
+  expect((await screen.findAllByText(/Nothing to display/)).length).toBe(3);
+
+  // re-select experiment and check if plots are loaded
+  fireEvent.click(experiment);
+  await waitFor(
+    () => {
+      expect(
+        screen.queryByText(/Regret for experiment '2-dim-shape-exp'/)
+      ).toBeInTheDocument();
+    },
+    { timeout: 3000 }
+  );
+  expect(
+    await screen.findByText(
+      /Parallel Coordinates PLot for experiment '2-dim-shape-exp'/i
+    )
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByText(/LPI for experiment '2-dim-shape-exp'/)
+  ).toBeInTheDocument();
+
+  // Select another experiment and check if plots are loaded
+  const anotherExperiment = await screen.findByText(/tpe-rosenbrock/);
+  expect(anotherExperiment).toBeInTheDocument();
+  fireEvent.click(anotherExperiment);
+  await waitFor(
+    () => {
+      expect(
+        screen.queryByText(/Regret for experiment 'tpe-rosenbrock'/)
+      ).toBeInTheDocument();
+    },
+    { timeout: 3000 }
+  );
+  expect(
+    await screen.findByText(
+      /Parallel Coordinates PLot for experiment 'tpe-rosenbrock'/i
+    )
+  ).toBeInTheDocument();
+  expect(
+    await screen.findByText(/LPI for experiment 'tpe-rosenbrock'/)
+  ).toBeInTheDocument();
+});

src/components/ExperimentNavBar/ExperimentNavBar.js

@@ -87,6 +87,7 @@ export class ExperimentNavBar extends React.Component {
         />
         <StructuredListCell>
           <span
+            title={`unselect experiment '${experiment}'`}
             style={{
               visibility:
                 this.context.experiment === experiment ? 'visible' : 'hidden',

src/components/TutorialHeader/TutorialHeader.js

@@ -20,20 +20,20 @@ const TutorialHeader = () => (
           onClick={onClickSideNavExpand}
           isActive={isSideNavExpanded}
         />
-        <HeaderName element={Link} to="/" prefix="Oríon">
+        <HeaderName element={Link} to="/" prefix="Oríon" replace>
           Dashboard
         </HeaderName>
         <HeaderNavigation aria-label="Oríon Dashboard">
-          <HeaderMenuItem element={Link} to="/status">
+          <HeaderMenuItem element={Link} to="/status" replace>
             Status
           </HeaderMenuItem>
-          <HeaderMenuItem element={Link} to="/visualizations">
+          <HeaderMenuItem element={Link} to="/visualizations" replace>
             Visualizations
           </HeaderMenuItem>
-          <HeaderMenuItem element={Link} to="/database">
+          <HeaderMenuItem element={Link} to="/database" replace>
             Database
           </HeaderMenuItem>
-          <HeaderMenuItem element={Link} to="/configuration">
+          <HeaderMenuItem element={Link} to="/configuration" replace>
             Configuration
           </HeaderMenuItem>
         </HeaderNavigation>

src/content/VisualizationsPage/VisualizationsPage.js

@@ -78,15 +78,13 @@ class PlotGrid extends React.Component {
     // We must check if there is an experiment to visualize
     const experiment = this.context.experiment;
     if (experiment !== null) {
-      console.log(`Mounting experiment: ${this.context.experiment}`);
       this.loadBackendData(experiment);
     }
   }
   componentDidUpdate(prevProps, prevState, snapshot) {
     // We must check if selected experiment changed
     const experiment = this.context.experiment;
     if (this.state.experiment !== experiment) {
-      console.log(`Updating experiment: ${this.context.experiment}`);
       if (experiment === null) {
         this.setState({
           experiment,

src/setupTests.js

@@ -1,5 +1,11 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+// Useful to test plotly (ref: https://stackoverflow.com/a/62768292)
+import 'jest-canvas-mock';
 // this adds jest-dom's custom assertions
 import '@testing-library/jest-dom';
 configure({ adapter: new Adapter() });
+// Increase test timeout to support long tests
+jest.setTimeout(10000);
+// Add necessary mock to test plotly (ref: https://github.com/plotly/react-plotly.js/issues/115#issuecomment-448687417)
+window.URL.createObjectURL = function() {};