add tests for UI components (#175)

* add tests for UI components, prettify/reformatting code, fix issues
found when running tests

* js lint fix

* remove un-intended files

* add back changes

Co-authored-by: Amy Chen <clone@cesium.cirg.washington.edu>

package.json

@@ -7,52 +7,52 @@
     "build": "webpack --mode production",
     "start": "webpack-dev-server --mode development",
     "watch": "webpack -debug --config webpack.config.js --watch --progress --mode development",
-    "lint:js": "eslint ./*.js patientsearch/src/js/*.js patientsearch/src/js/**/*.js; exit 0",
-    "lint:js:fix": "eslint ./*.js patientsearch/src/js/*.js patientsearch/src/js/**/*.js --fix; exit 0",
+    "lint:js": "eslint ./*.js ./patientsearch/src/js/**/*.js; exit 0",
+    "lint:js:fix": "eslint ./*.js ./patientsearch/src/js/**/*.js --fix; exit 0",
     "test": "jest",
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "7.0.0",
-    "@babel/runtime": "^7.16.5",
+    "@babel/runtime": "^7.20.7",
     "@date-io/date-fns": "^1.3.13",
-    "@material-table/core": "^5.0.5",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@material-table/core": "^5.1.11",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/pickers": "^3.3.10",
     "babel-loader": "8.0.5",
     "babel-plugin-import": "1.11.0",
     "babel-plugin-transform-react-jsx": "6.24.1",
-    "classnames": "^2.3.1",
-    "clsx": "^1.1.0",
-    "date-fns": "^2.27.0",
-    "dompurify": "^2.3.4",
+    "classnames": "^2.3.2",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.29.3",
+    "dompurify": "^2.4.3",
     "es6-promise": "^4.2.8",
     "jsonpath": "^1.1.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-render-html": "^0.6.0",
-    "react-text-mask": "^5.4.3",
-    "styled-components": "^5.3.3",
+    "react-text-mask": "^5.5.0",
+    "styled-components": "^5.3.6",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/plugin-transform-runtime": "^7.16.5",
-    "@babel/runtime-corejs3": "^7.16.5",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/runtime-corejs3": "^7.20.7",
     "babel-jest": "^25.3.0",
     "clean-webpack-plugin": "^3.0.0",
-    "core-js": "^3.20.1",
+    "core-js": "^3.27.1",
     "css-loader": "^3.4.2",
     "dotenv": "^8.6.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^7.32.0",
     "eslint-plugin-compat": "^3.13.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "filemanager-webpack-plugin": "^2.0.5",
     "html-webpack-plugin": "^4.5.2",
@@ -61,7 +61,7 @@
     "mini-css-extract-plugin": "^0.8.0",
     "optimize-css-assets-webpack-plugin": "^5.0.8",
     "react-test-renderer": "^16.14.0",
-    "sass": "^1.45.1",
+    "sass": "^1.57.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.3.0",
     "url-loader": "^4.1.1",

patientsearch/src/__mocks__/canvas.js

@@ -0,0 +1 @@
+import "jest-canvas-mock";

patientsearch/src/__tests__/README.md

@@ -0,0 +1,6 @@
+# Testing UI components
+
+Before running test, make sure all dependencies are installed.  Run `npm install` to install all dependencies
+
+To run (do so from the root directory): 
+`npm run test`

patientsearch/src/__tests__/components/Agreement.test.js

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Agreement from "../../js/components/Agreement";
+
+describe("Agreement", () => {
+  it("Agreement component renders without crashing", () => {
+    const rowData = {
+      id: 158,
+      first_name: "Luke",
+      last_name: "Skywalker",
+      dob: "1977-01-12"
+    };
+    const wrapper = shallow(<Agreement rowData={rowData}/>);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/DetailPanel.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import DetailPanel from "../../js/components/DetailPanel";
+
+describe("DetailPanel", () => {
+  it("DetailPanel component renders without crashing", () => {
+    const wrapper = shallow(<DetailPanel />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/DialogBox.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import DialogBox from "../../js/components/DialogBox";
+
+describe("DialogBox", () => {
+  it("DialogBox component renders without crashing", () => {
+    const wrapper = shallow(<DialogBox />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/Dropdown.test.js

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Dropdown from "../../js/components/Dropdown";
+
+describe("Dropdown", () => {
+  it("Dropdown component renders without crashing", () => {
+    const menuItems = [{"id": "test", "text": "test"}];
+    const wrapper = shallow(<Dropdown menuItems={menuItems} />);
+    expect(wrapper).toBeDefined();
+  });
+
+  it("Empty Dropdown component renders without crashing", () => {
+    const wrapper = shallow(<Dropdown/>);
+    expect(wrapper).toEqual({});
+  });
+});

patientsearch/src/__tests__/components/Error.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Error from "../../js/components/Error";
+
+describe("Error", () => {
+  it("Error component renders without crashing", () => {
+    const wrapper = shallow(<Error />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/FilterRow.test.js

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+import FilterRow from "../../js/components/FilterRow";
+
+describe("FilterRow", () => {
+  it("FilterRow component renders without crashing", () => {
+    const wrapper = shallow(
+      <FilterRow
+        onFiltersDidChange={() => {
+          console.log("Get to filter did change function.");
+        }}
+      />
+    );
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/FormattedInput.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import FormattedInput from "../../js/components/FormattedInput";
+
+describe("FormattedInput", () => {
+  it("FormattedInput component renders without crashing", () => {
+    const wrapper = shallow(<FormattedInput />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/Header.test.js

@@ -0,0 +1,13 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Header from "../../js/components/Header";
+
+describe("Header", () => {
+  it("Header render without crashing", () => {
+    const wrapperLogout = shallow(<Header></Header>);
+    expect(wrapperLogout).toBeDefined();
+  });
+  it("contains logo image", () => {
+    expect(document.querySelector("img")).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/HistoryTable.test.js

@@ -0,0 +1,20 @@
+import { shallow } from "enzyme";
+import React from "react";
+import HistoryTable from "../../js/components/HistoryTable";
+
+describe("History table", () => {
+  it("History table component renders without crashing", () => {
+    const data = [{
+      id: 158,
+      first_name: "Luke",
+      last_name: "Skywalker",
+      dob: "1977-01-12"
+    }];
+    const columns = [{
+      "field": "id"
+    }];
+    const apiURL = "/fhir";
+    const wrapper = shallow(<HistoryTable data={data} columns={columns} APIURL={apiURL}/>);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/Info.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Info from "../../js/components/Info";
+
+describe("Info", () => {
+  it("Info component renders without crashing", () => {
+    const wrapper = shallow(<Info />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/OverdueAlert.test.js

@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+import OverdueAlert from "../../js/components/OverdueAlert";
+
+describe("OverdueAlert", () => {
+  it("OverdueAlert component renders without crashing", () => {
+    const wrapper = shallow(<OverdueAlert date="2021-01-01" type="test"/>);
+    expect(wrapper).toBeDefined();
+  });
+  it("Empty OverdueAlert component", () => {
+    const wrapper = shallow(<OverdueAlert date="2050-02-02" type="test"/>);
+    expect(wrapper).toEqual({});
+  });
+});

patientsearch/src/__tests__/components/PatientListTable.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import PatientListTable from "../../js/components/PatientListTable";
+
+describe("PatientListTable", () => {
+  it("Patient list renders without crashing", () => {
+    const wrapper = shallow(<PatientListTable />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/SystemBanner.test.js

@@ -0,0 +1,17 @@
+import { shallow } from "enzyme";
+import React from "react";
+import SystemBanner from "../../js/components/SystemBanner";
+
+describe("SystemBanner", () => {
+  it("SystemBanner component renders without crashing", () => {
+    const wrapper = shallow(<SystemBanner systemType="development" />);
+    expect(wrapper).toBeDefined();
+  });
+});
+
+describe("SystemBanner", () => {
+  it("Empty SystemBanner component renders without crashing", () => {
+    const wrapper = shallow(<SystemBanner/>);
+    expect(wrapper).toEqual({});
+  });
+});

patientsearch/src/__tests__/components/TimeoutModal.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import TimeoutModal from "../../js/components/TimeoutModal";
+
+describe("TimeoutModal", () => {
+  it("TimeoutModal component renders without crashing", () => {
+    const wrapper = shallow(<TimeoutModal />);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/UrineScreen.test.js

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+import UrineScreen from "../../js/components/UrineScreen";
+
+describe("UrineScreen", () => {
+  it("Urine screen component renders without crashing", () => {
+    const rowData = {
+      id: 158,
+      first_name: "Luke",
+      last_name: "Skywalker",
+      dob: "1977-01-12"
+    };
+    const wrapper = shallow(<UrineScreen rowData={rowData}/>);
+    expect(wrapper).toBeDefined();
+  });
+});

patientsearch/src/__tests__/components/Version.test.js

@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+import Version from "../../js/components/Version";
+
+describe("Version", () => {
+  it("Version component renders without crashing", () => {
+    const wrapper = shallow(<Version version={"1.1"} />);
+    expect(wrapper).toBeDefined();
+  });
+  it("Empty Version component", () => {
+    const wrapper = shallow(<Version />);
+    expect(wrapper).toEqual({});
+  });
+});

patientsearch/src/__tests__/containers/App.test.js

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import App from "../../js/containers/App";
+
+describe("App", () => {
+  it("App container component renders without crashing", () => {
+    const wrapper = shallow(<App />);
+    expect(wrapper).toBeDefined();
+  });
+});