Merge pull request open-source-labs#6 from oslabs-beta/staging

Frontend testing and live sass compiler bug fix

.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
+}

__tests__/compareTests.jsx → __tests__/leftPanelTests/compareTest.jsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import * as renderer from "react-test-renderer";
-import { Compare } from "../frontend/components//leftPanel/Compare";
+import { Compare } from "../../frontend/components/leftPanel/Compare";
 import { shallow } from "enzyme";
-import { stringify } from "querystring";
 
 describe ("Comparison feature tests", () => {
   // wrapper will be assigned the evaluation of the shallow render
@@ -11,18 +9,17 @@ describe ("Comparison feature tests", () => {
   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 h3 tag', () => {
+  it('Should render correct h3 element', () => {
     expect(wrapper.containsMatchingElement(
     <h3>Comparisons</h3>)).toBeTruthy();
   })
@@ -32,8 +29,4 @@ describe ("Comparison feature tests", () => {
       <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__/splashTest.jsx

@@ -1,39 +1,35 @@
 import * as React from "react";
-import * as renderer from "react-test-renderer";
 import { Splash } from "../frontend/components/Splash";
 import { shallow } from "enzyme";
 
 describe ("Splash page tests", () => {
-  // wrapper will be assigned the evaluation of the shallow render
-  let wrapper;
-  let shallowRender;
   // mock functions to pass to handlers
-  const mockFileClick = jest.fn(() => {
-    return;
-  })
-  const mockSkipClick = jest.fn(() => {
-    return;
-  })
+  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,
-    handleFileClick: mockFileClick,
-    handleSkipClick: mockSkipClick
-  }
+    handleSkipClick: mockSkipClick,
+    handleFileClick: mockFileClick
+  };
+
+  let wrapper;
   // shallow render the component before running tests
   beforeAll(() => {
-    // wrapper = new Splash(props);
-    // shallowRender = shallow<Splash>(wrapper);
     wrapper = shallow(<Splash {...props}/>)
-  })
+  });
 
-  // it('should work', () => {
-  //   expect(wrapper).toBeInstanceOf(Splash);
-  // })
+  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', () => {
-    // wrapper.find({ id: 'skip_button'}).simulate('click');
-    // expect(mockFileClick).toHaveBeenCalled();
-    expect(wrapper.type()).toEqual('div');
-  })
-})
+    // 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();
+  });
+});

frontend/components/rightPanel/schemaChildren/dataChildren/DataTable.tsx

@@ -53,10 +53,10 @@ export class Table extends Component<TableProps> {
     return (
       <div>
         <table>
-          <thead>
+          <thead id="dataTableHead">
             <tr>{this.getHeader()}</tr>
           </thead>
-          <tbody>
+          <tbody id="dataTableBody">
             {this.getRowsData()}
           </tbody>
         </table>

package.json

@@ -4,7 +4,10 @@
   "description": "SeeQR",
   "main": "./tsCompiled/backend/main",
   "babel": {
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
   },
   "scripts": {
     "build": "tsc && webpack",
@@ -30,7 +33,6 @@
     "codemirror": "^5.57.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
-    "electron": "^9.0.0",
     "electron-store": "^6.0.0",
     "faker": "^5.1.0",
     "fix-path": "^3.0.0",
@@ -58,7 +60,7 @@
     "babel-minify-webpack-plugin": "^0.3.1",
     "csp-html-webpack-plugin": "^4.0.0",
     "css-loader": "^3.5.3",
-    "electron": "^9.0.0",
+    "electron": "^9.3.1",
     "electron-devtools-installer": "^3.0.0",
     "electron-packager": "^14.2.1",
     "enzyme": "^3.11.0",
@@ -78,7 +80,7 @@
     "ts-loader": "^8.0.2",
     "ts-node": "^8.10.2",
     "typescript": "^3.9.7",
-    "webpack": "^4.43.0",
+    "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   },
@@ -100,13 +102,8 @@
       "json",
       "node"
     ],
-    "setupFilesAfterEnv": ["<rootDir>/__tests__/setupTests.js"]
-  },
-  "liveSassCompile.settings.formats": [
-    {
-      "format": "expanded",
-      "savePath": "/frontend/assets/stylesheets/css"
-    }
-  ],
-  "liveSassCompile.settings.generateMap": false
+    "setupFilesAfterEnv": [
+      "<rootDir>/__tests__/setupTests.js"
+    ]
+  }
 }