Merge pull request #236 from oslabs-beta/main

Merge from OS Labs Beta

Author: CourageWolf

assets/obsolete /hooks-demo.gif renamed to assets/obsolete/hooks-demo.gif

@@ -38,13 +38,17 @@
   },
   "contributors": [
     "Abaas Khorrami",
+    "Ali Rahman",
     "Andy Wong",
     "Bryan Lee",
     "Becca Viner",
     "Caitlin Chan",
+    "Caner Demir",
     "Carlos Perez",
+    "Cole Styron",
     "Chris Flannery",
     "David Chai",
+    "Dennis Lopez",
     "Edwin Menendez",
     "Ergi Shehu",
     "Gabriela Jardim Aquino",
@@ -55,6 +59,7 @@
     "Josh Kim",
     "Joshua Howard",
     "Kevin Fey",
+    "Kevin Ngo",
     "Kim Mai Nguyen",
     "Nathanael Wa Mwenze",
     "Prasanna Malla",
@@ -74,6 +79,8 @@
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/jest": "^26.0.4",
@@ -85,7 +92,7 @@
     "core-js": "^3.6.5",
     "css-loader": "^3.6.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
@@ -99,13 +106,15 @@
     "jest-diff": "^26.1.0",
     "jest-puppeteer": "^4.4.0",
     "jest-runner-eslint": "^0.7.7",
+    "jscharting-react": "^1.2.1",
     "puppeteer": "^5.1.0",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^0.23.1",
     "ts-jest": "^26.1.2",
     "ts-loader": "^7.0.5",
+    "ts-node": "^9.1.1",
     "typedoc": "^0.17.8",
     "typedoc-webpack-plugin": "^1.1.4",
     "typescript": "^3.9.6",
@@ -138,25 +147,31 @@
     "@visx/zoom": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
+    "apexcharts": "^3.23.1",
+    "chai": "^4.2.0",
     "cookie": "^0.4.1",
     "d3": "^5.16.0",
     "d3-scale-chromatic": "^2.0.0",
     "d3-shape": "^2.0.0",
     "d3-zoom": "^1.8.3",
     "immer": "^3.3.0",
     "jest-runner": "^26.1.0",
+    "jscharting": "^3.0.2",
     "jsondiffpatch": "^0.3.11",
     "mixpanel": "^0.11.0",
     "mixpanel-browser": "^2.39.0",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.7.1",
     "rc-tooltip": "^3.7.3",
     "react": "^16.13.1",
+    "react-apexcharts": "^1.3.7",
     "react-dom": "^16.13.1",
+    "react-hover": "^2.0.0",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
-    "recoil": "0.0.10"
+    "recoil": "0.0.10",
+    "web-vitals": "^1.1.0"
   }
 }

assets/obsolete /readme-logo-300.png renamed to assets/obsolete/readme-logo-300.png

@@ -82,8 +82,11 @@ useStoreContext.mockImplementation(() => [state, dispatch]);
 
 let wrapper;
 
+//actionView={true} must be passed in to <ActionContainer /> in beforeEach() to deal with new
+//conditional rendering in ActionContainer that shows/hides time-travel functionality
+
 beforeEach(() => {
-  wrapper = shallow(<ActionContainer />);
+  wrapper = shallow(<ActionContainer actionView={true}/>);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });

assets/obsolete /readme-logo-small.png renamed to assets/obsolete/readme-logo-small.png

@@ -8,7 +8,6 @@ import Adapter from 'enzyme-adapter-react-16';
 import MainContainer from '../containers/MainContainer';
 import { useStoreContext } from '../store';
 
-import HeadContainer from '../containers/HeadContainer';
 import ActionContainer from '../containers/ActionContainer';
 import StateContainer from '../containers/StateContainer';
 import TravelContainer from '../containers/TravelContainer';
@@ -50,7 +49,6 @@ describe('MainContainer rendering', () => {
     expect(wrapper.text()).toEqual(
       'No React application found. Please visit reactime.io to more info.If you are using a React application, make sure tha you application is running in development mode.NOTE: The React Developer Tools extension is also required for Reactime to run, if you do not already have it installed on your browser.',
     );
-    expect(wrapper.find(HeadContainer).length).toBe(0);
     expect(wrapper.find(ActionContainer).length).toBe(0);
     expect(wrapper.find(StateContainer).length).toBe(0);
     expect(wrapper.find(TravelContainer).length).toBe(0);
@@ -66,7 +64,6 @@ describe('MainContainer rendering', () => {
     };
 
     wrapper = shallow(<MainContainer />);
-    expect(wrapper.find(HeadContainer).length).toBe(1);
     expect(wrapper.find(ActionContainer).length).toBe(1);
     expect(wrapper.find(StateContainer).length).toBe(1);
     expect(wrapper.find(TravelContainer).length).toBe(1);

package.json

@@ -0,0 +1,27 @@
+/* eslint:disable */
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import WebMetrics from '../components/WebMetrics';
+import { expect } from 'chai'; 
+
+
+//the WebMetrics container should render 4 <div/> elements, each with id="card"
+//the WebMetrics container is itself  <div class="web-metrics-container" /> 
+configure({ adapter: new (Adapter as any)() });
+
+let  wrapper = shallow(<WebMetrics />);
+
+
+describe('WebMetrics graph testing', ()=> {
+  it ('should have 1 div with class name "metric" ', () => {
+    expect(wrapper.find('.metric')).to.have.lengthOf(1);
+  })
+
+  it ('should have 1 div with id "chart" ', () => {
+    expect(wrapper.find('#chart')).to.have.lengthOf(1);
+  })
+  
+
+})
+

src/app/__tests__/ActionContainer.test.tsx

@@ -1,22 +1,29 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import * as types from '../constants/actionTypes';
 
-export const toggleMode = mode => ({
+export const save = (tabsObj) => ({
+  type: types.SAVE,
+  payload: tabsObj,
+});
+export const deleteSeries = () =>({
+  type: types.DELETE_SERIES,
+})
+export const toggleMode = (mode) => ({
   type: types.TOGGLE_MODE,
   payload: mode,
 });
 
-export const addNewSnapshots = tabsObj => ({
+export const addNewSnapshots = (tabsObj) => ({
   type: types.NEW_SNAPSHOTS,
   payload: tabsObj,
 });
 
-export const initialConnect = tabsObj => ({
+export const initialConnect = (tabsObj) => ({
   type: types.INITIAL_CONNECT,
   payload: tabsObj,
 });
 
-export const setPort = port => ({
+export const setPort = (port) => ({
   type: types.SET_PORT,
   payload: port,
 });
@@ -25,12 +32,12 @@ export const emptySnapshots = () => ({
   type: types.EMPTY,
 });
 
-export const changeView = index => ({
+export const changeView = (index) => ({
   type: types.CHANGE_VIEW,
   payload: index,
 });
 
-export const changeSlider = index => ({
+export const changeSlider = (index) => ({
   type: types.CHANGE_SLIDER,
   payload: index,
 });
@@ -54,22 +61,22 @@ export const pause = () => ({
   type: types.PAUSE,
 });
 
-export const startPlaying = intervalId => ({
+export const startPlaying = (intervalId) => ({
   type: types.PLAY,
   payload: intervalId,
 });
 
-export const importSnapshots = newSnaps => ({
+export const importSnapshots = (newSnaps) => ({
   type: types.IMPORT,
   payload: newSnaps,
 });
 
-export const setTab = tab => ({
+export const setTab = (tab) => ({
   type: types.SET_TAB,
   payload: tab,
 });
 
-export const deleteTab = tab => ({
+export const deleteTab = (tab) => ({
   type: types.DELETE_TAB,
   payload: tab,
 });
@@ -79,12 +86,12 @@ export const resetSlider = () => ({
 });
 
 export const onHover = (rtid) => ({
-  type: types.ON_HOVER, 
+  type: types.ON_HOVER,
   //the payload should be something to relate the component we're hovering and highlight that component on the DOM
-  payload: rtid
-})
+  payload: rtid,
+});
 
 export const onHoverExit = (rtid) => ({
   type: types.ON_HOVER_EXIT,
-  payload: rtid
-})
+  payload: rtid,
+});