Bugfixes on dummy data generation and dummy data panel

.gitignore

@@ -1,5 +1,4 @@
 /node_modules
-/.vscode
 /dist
 /tsCompiled
 */.DS_Store

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "liveSassCompile.settings.formats": [
+        {
+        "format": "expanded",
+        "savePath": "/frontend/assets/stylesheets/css",
+        "extensionName": ".css"
+        }
+    ],
+    "liveSassCompile.settings.generateMap": false
+}

README.md

@@ -45,18 +45,7 @@ To get started on contributing to this project:
 3. Npm install
    1. Run `npm install` for application-specific dependencies.
    2. Run global install for: `'cross-env'`, `'webpack'`, `'webpack-dev-server'`, `'electron'`, and `'typescript'`.
-4. Enable sass compiling to css directory
-
-```json
-"liveSassCompile.settings.formats": [
-        {
-          "format": "expanded",
-          "savePath": "/frontend/assets/stylesheets/css"
-        }
-      ],
-"liveSassCompile.settings.generateMap": false,
-```
-
+4. Install [Live Sass Compile](https://github.com/ritwickdey/vscode-live-sass-compiler) VSCode extension (settings are configured in the .vscode file in this repo), or set up your preferred Sass compiler
 5. To run application during development
    1. `npm run dev` to launch Electron application window and webpack-dev-server.
    2. `npm run resetContainer` to reset the container and clear pre-existing SeeQR databases. If error “can’t find postgres-1” is encountered, it is simply an indication that the container is already pruned.
@@ -76,7 +65,7 @@ To get started on contributing to this project:
 
 ## Interface & Features
 <div align="center">
-<img src="./frontend/assets/images/splash_screencap.png"/><br /><br /><img src="./frontend/assets/images/wholeinterface.png"/><p>The whole interface in a nutshell</p>
+<img src="./frontend/assets/images/splash_page.png" width=800/><br /><br /><img src="./frontend/assets/images/interface.png" width=800/><p>The whole interface in a nutshell</p>
 </div>
 
 - Schema
@@ -87,63 +76,65 @@ To get started on contributing to this project:
 - Query input
 
   - The center panel is where the query input text field is located, utilizing CodeMirror for SQL styling.
-  - Provide a unique and concise label for the query as its shorthand identifier in later comparisons against other queries.
+  - Users have option to execute a tracked or untracked query—simply check the box and provide a label to identify the query in later comparisons against other queries.
   - Toggle the submit button in the bottom left to send the query to the selected database.
   <br /><br />
 <div align="center">
-<img src="./frontend/assets/images/query1.png" width=300/> <br /><br />
-<img src="./frontend/assets/images/query2.png" width=300/>
+<img src="./frontend/assets/images/query_demo.gif" width=600/>
 </div>
 <br /><br />
 
 - Data
 
   - The data table displays data returned by the inputted query.
 <div align="center">
-<img src="./frontend/assets/images/data.png" width=300/><br /><br />
+<img src="./frontend/assets/images/data.png" width=600/><br /><br />
 </div>
 
 - Input Schema and Tabs
-  - New schemas can be uploaded into the application by clicking the "+" button above the main panel in the form of a ```.sql``` or a ```.tar``` file, or the schema script itself.
-  - Newly uploaded schemas are displayed as tabs, which can be activated to run tests against during application session. These schemas (and the databases they're connected to) persist beyond the application session.
+  - New schemas can be uploaded into the application by clicking the "+" button above the main panel in the form of a ```.sql``` or a ```.tar``` file.
+  - Users can also make a copy of an existing schema, with or without data included.
+  - Newly uploaded schemas are displayed as tabs, which can be activated to run tests against during application session.
+<div align="center">
+  <img src="./frontend/assets/images/input_schema_demo.gif"/>
+</div>
+
+- Generate Dummy Data
+  - Users can generate dummy data to fill in a selected scheama's tables—currently supported data types are:
+    - INT, SMALLINT, and BIGINT
+    - please fill in
+  - Dummy data is foreign-key complaint.
+    - please fill in the details
 <div align="center">
-  <img src="./frontend/assets/images/schemamodal.png" width=300/>
+  <img src="./frontend/assets/images/dummy_data_demo.gif"/>
 </div>
 
 - History
 
   - The history table shows the latest queries the user submitted irrespective of the database.
   - The history table also displays the total rows returned by the query and the total query execution time.
 <div align="center">
-<img src="./frontend/assets/images/history.png" width=300/>
+<img src="./frontend/assets/images/history.png" width=600/>
 </div>
 
-- Results
-
-  - The results table displays the scan type, runtime, and the amount of loops the query had to perform in addition to the analytics data available on the history table.
-  - The results table is schema-specific, showing only query results from the active schema.
-<div align="center">
-<img src="./frontend/assets/images/results.png" width=300/>
-</div> 
-
 - Compare
 
   - The comparison table is flexible to the user’s preferences.
   - The user selects which queries they want to compare side by side from the ‘Add Query Data’ drop down.
   - They can add and remove queries as they see fit.
 
 <div align="center">
-<img src="./frontend/assets/images/comparisons.png" width=300/>
+<img src="./frontend/assets/images/comparisons.png" width=600/>
 </div>
 
 - Visualized Analytics
 
   - Upon each query execution, query runtime displays under the "Query Label vs Query Runtime" graph. Graph automatically interpolates as results enumerate.
   - User may toggle on specific query analytics results with the Comparisons panel to compare query performances.
+  - Graph will be organized on x-axis by label, and colored by schema.
 
 <div align="center">
-<img src="./frontend/assets/images/queryruntime1.png" width=300/>
-<img src="./frontend/assets/images/queryruntime2.png" width=300/>
+<img src="./frontend/assets/images/graph_demo.gif"/>
 </div>
 
 ## Application Architecture and Logic
@@ -185,3 +176,22 @@ The outcome results from each query, both retrieved data and analytics, are stor
 <a href="https://github.com/muhammadtrad">Muhammad Trad</a>
 </td>
 </tr></table>
+
+<table align="center">
+<td align="center">
+<img src="./frontend/assets/images/justinduryagri.png" href="https://github.com/justinD-A" width=180/><br/>
+<a href="https://github.com/justinD-A">Justin Dury-Agri</a>
+</td>
+<td align="center">
+<img src="./frontend/assets/images/caseyescovedo.png" href="https://github.com/caseyescovedo" width=180/><br/>
+<a href="https://github.com/caseyescovedo">Casey Escovedo</a>
+</td>
+<td align="center">
+<img src="./frontend/assets/images/samfrakes.png" href="https://github.com/frakes413" width=180/><br/>
+<a href="https://github.com/frakes413">Sam Frakes</a>
+</td>
+<td align="center">
+<img src="./frontend/assets/images/caseywalker.png" href="https://github.com/cwalker3011" width=180/><br/>
+<a href="https://github.com/cwalker3011">Casey Walker</a>
+</td>
+</table>

__tests__/leftPanelTests/compareTest.jsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Compare } from "../../frontend/components/leftPanel/Compare";
+import { shallow } from "enzyme";
+
+describe ("Comparison feature tests", () => {
+  // wrapper will be assigned the evaluation of the shallow render
+  let wrapper;
+
+  const props = {
+    queries: [],
+    currentSchema: '',
+  }
+  // shallow render the component before running tests
+  beforeAll(() => {
+    wrapper = shallow(<Compare {...props}/>)
+  })
+
+  it('Should render a div', () => {
+    expect(wrapper.type()).toEqual('div');
+  })
+
+  it('Should render correct h3 element', () => {
+    expect(wrapper.containsMatchingElement(
+    <h3>Comparisons</h3>)).toBeTruthy();
+  })
+
+  it('Should render query label', () => {
+    expect(wrapper.containsMatchingElement(
+      <td>{'Query Label'}</td>)).toBeTruthy();
+  })
+
+})

__tests__/leftPanelTests/historyTest.jsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { History } from "../../frontend/components/leftPanel/History";
+import { shallow } from "enzyme";
+
+describe ("History feature tests", () => {
+  // wrapper will be assigned the evaluation of the shallow render
+  let wrapper;
+
+  const props = {
+    queries: [],
+    currentSchema: '',
+
+  }
+  // shallow render the component before running tests
+  beforeAll(() => {
+    wrapper = shallow(<History {...props}/>)
+  })
+
+  it('Should render a div', () => {
+    expect(wrapper.type()).toEqual('div');
+  })
+
+  it('Should render correct h3 element', () => {
+    expect(wrapper.containsMatchingElement(
+    <h3>History</h3>)).toBeTruthy();
+  })
+
+  it('Should render query label', () => {
+    expect(wrapper.containsMatchingElement(
+      <td>{'Query Label'}</td>)).toBeTruthy();
+  })
+
+})

__tests__/rightPanelTests/schemaChildrenTests/dataChildrenTests/dataTableTest.jsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Table } from '../../../../frontend/components/rightPanel/schemaChildren/dataChildren/DataTable';
+
+const dummyRowData = [{"header0":"input0", "header1":1}]
+
+const dummyTableProps = {
+  queries: [{
+    queryString: "string",
+    queryData: dummyRowData,
+    queryStatistics: 7,
+    querySchema: "string",
+    queryLabel: "string"
+  }]
+};
+
+describe('Testing the data table', () => {
+  let wrapper;
+  beforeAll(() => {
+    wrapper = mount(<Table { ...dummyTableProps }/>);
+  })
+
+  it('should render Table headers', () => {
+    expect(wrapper.find('#dataTableHead').type()).toBe('thead');
+    expect(wrapper.find('#dataTableHead').childAt(0).childAt(0).text()).toBe('HEADER0');
+    expect(wrapper.find('#dataTableHead').childAt(0).childAt(1).text()).toBe('HEADER1');
+  })
+
+  it('should render data Table body element', () => {
+    expect(wrapper.find('#dataTableBody').type()).toBe('tbody');
+  })
+})
+

__tests__/rightPanelTests/schemaChildrenTests/dataTest.jsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Data } from '../../../frontend/components/rightPanel/schemaChildren/Data';
+
+
+const dummyTableProps = {
+  queries: [{
+    queryString: "string",
+    queryData: [{}],
+    queryStatistics: 7,
+    querySchema: "string",
+    queryLabel: "string"
+  }]
+};
+
+describe ("Data tests", () => {
+  const { queries } = dummyTableProps;
+
+  // shallow render the component before running tests
+  let wrapper;
+  beforeAll(() => {
+      wrapper = shallow(<Data { ...dummyTableProps } />)
+  })
+
+  it('Should render a div', () => {
+      expect(wrapper.type()).toEqual('div');
+  })
+
+  it('Should render h3 tag', () => {
+      expect(wrapper.containsMatchingElement(
+      <h3 id="results-title">Data Table</h3>)).toBeTruthy();
+  })
+
+  it('Should render div to contain the data table', () => {
+      expect(wrapper.find('#data-table').type()).toBe('div');
+  })
+})

__tests__/rightPanelTests/tabsChildrenTests/tabTest.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Tab } from '../../../frontend/components/rightPanel/tabsChildren/Tab';
+
+const dummyTabProps = {
+    onClickTabItem: 'string',
+    currentSchema: "string",
+    label: "string",
+};
+
+describe ("Tab tests", () => {
+    // shallow render the component before running tests
+    let wrapper;
+    beforeAll(() => {
+        wrapper = shallow(<Tab { ...dummyTabProps } />)
+    })
+
+    it('Should render a list item', () => {
+        expect(wrapper.type()).toEqual('li');
+    })
+})

__tests__/setupTests.js

@@ -0,0 +1,10 @@
+import { configure } from "enzyme";
+import React16Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new React16Adapter() });
+
+describe('Setup', () => {
+  it('should run before all tests', () => {
+    expect(true).toBe(true);
+  })
+})

__tests__/splashTest.jsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Splash } from "../frontend/components/Splash";
+import { shallow } from "enzyme";
+
+describe ("Splash page tests", () => {
+  // mock functions to pass to handlers
+  const mockFileClick = jest.fn(() => console.log("click"));
+  const mockSkipClick = jest.fn(() => console.log("skipClick"));
+  // props to be passed to the shallow render of the component
+  const props = {
+    openSplash: true,
+    handleSkipClick: mockSkipClick,
+    handleFileClick: mockFileClick
+  };
+
+  let wrapper;
+  // shallow render the component before running tests
+  beforeAll(() => {
+    wrapper = shallow(<Splash {...props}/>)
+  });
+
+  it('should find the correct elements by id', () => {
+    expect(wrapper.find('#skip_button').type()).toBe('button');
+    expect(wrapper.find('#yes_button').type()).toBe('button');
+  });
+
+  it('The functions passed down should be invoked on click', () => {
+    // testing the skip button
+    wrapper.find('#skip_button').simulate('click');
+    expect(mockSkipClick).toHaveBeenCalled();
+    // testing the import button
+    wrapper.find('#yes_button').simulate('click');
+    expect(mockFileClick).toHaveBeenCalled();
+  });
+});

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};