diff --git a/package.json b/package.json index da0d069..57446db 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.3.2", + "@testing-library/react": "^10.4.4", "@testing-library/user-event": "^7.1.2", "jest-canvas-mock": "^2.2.0", "plotly.js-gl3d-dist-min": "^1.54.2", @@ -12,7 +12,6 @@ "react-dom": "^16.13.1", "react-ga": "^3.0.0", "react-icons": "^3.10.0", - "react-markdown": "^4.3.1", "react-plotly.js": "^2.4.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", @@ -22,7 +21,8 @@ "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test", + "test": "react-scripts test --env=jest-environment-jsdom-sixteen", + "test:coverage": "react-scripts test --env=jest-environment-jsdom-sixteen --collectCoverage --watchAll=false", "eject": "react-scripts eject" }, "eslintConfig": { @@ -41,6 +41,15 @@ ] }, "devDependencies": { + "jest-environment-jsdom-sixteen": "^1.0.3", "prettier": "2.0.5" + }, + "jest": { + "collectCoverageFrom": [ + "src/{components,hexapod}/**/*.{js,jsx,ts,tsx}", + "src/loadables.js", + "src/App.js", + "src/routes.js" + ] } } diff --git a/src/App.js b/src/App.js index f4c1ce8..cc58e8b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,186 +1,40 @@ -import React from "react" -import { BrowserRouter as Router, Route, Switch } from "react-router-dom" -import ReactGA from "react-ga" -import { VirtualHexapod, getNewPlotParams } from "./hexapod" -import * as defaults from "./templates" -import { SECTION_NAMES, PATHS } from "./components/vars" -import { Nav, NavDetailed, HexapodPlot, DimensionsWidget } from "./components" -import { - ForwardKinematicsPage, - InverseKinematicsPage, - LandingPage, - LegPatternPage, - WalkingGaitsPage, -} from "./components/pages" +import React, { useEffect } from "react" +import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom" +import { VirtualHexapod } from "./hexapod" +import { PATH_LINKS } from "./components/vars" +import { Nav } from "./components" -ReactGA.initialize("UA-170794768-1", { - //debug: true, - //testMode: process.env.NODE_ENV === 'test', - gaOptions: { siteSpeedSampleRate: 100 }, -}) +import Routes from "./routes" +import { HandlersProvider } from "./components/providers/Handlers" +import { HexapodParamsProvider } from "./components/providers/HexapodParams" -class App extends React.Component { - state = { - currentPage: SECTION_NAMES.LandingPage, - inHexapodPage: false, +import { useHexapodParams } from "./components/hooks/useHexapodParams" +import { usePlot } from "./components/hooks/usePlot" - hexapodParams: { - dimensions: defaults.DEFAULT_DIMENSIONS, - pose: defaults.DEFAULT_POSE, - }, +function App() { + const { hexapodParams, ...handlers } = useHexapodParams() + const { plot, updatePlotWithHexapod, logCameraView } = usePlot() - plot: { - data: defaults.DATA, - layout: defaults.LAYOUT, - latestCameraView: defaults.CAMERA_VIEW, - revisionCounter: 0, - }, - } + useEffect(() => { + const hexapod = new VirtualHexapod(hexapodParams.dimensions, hexapodParams.pose) + updatePlotWithHexapod(hexapod) + }, [hexapodParams, updatePlotWithHexapod]) - /* * * * * * * * * * * * * * - * Handle page load - * * * * * * * * * * * * * */ - - onPageLoad = pageName => { - ReactGA.pageview(window.location.pathname + window.location.search) - this.setState({ currentPage: pageName }) - - if (pageName === SECTION_NAMES.landingPage) { - this.setState({ inHexapodPage: false }) - return - } - - this.setState({ - inHexapodPage: true, - hexapodParams: { ...this.state.hexapodParams, pose: defaults.DEFAULT_POSE }, - }) - - this.updatePlot(this.state.hexapodParams.dimensions, defaults.DEFAULT_POSE) - } - - /* * * * * * * * * * * * * * - * Handle plot update - * * * * * * * * * * * * * */ - - updatePlotWithHexapod = hexapod => { - if (hexapod === null || hexapod === undefined || !hexapod.foundSolution) { - return - } - - const [data, layout] = getNewPlotParams(hexapod, this.state.plot.latestCameraView) - this.setState({ - plot: { - ...this.state.plot, - data, - layout, - revisionCounter: this.state.plot.revisionCounter + 1, - }, - hexapodParams: { - dimensions: hexapod.dimensions, - pose: hexapod.pose, - }, - }) - } - - logCameraView = relayoutData => { - const newCameraView = relayoutData["scene.camera"] - const plot = { ...this.state.plot, latestCameraView: newCameraView } - this.setState({ ...this.state, plot: plot }) - } - - updatePlot = (dimensions, pose) => { - const newHexapodModel = new VirtualHexapod(dimensions, pose) - this.updatePlotWithHexapod(newHexapodModel) - } - - updateDimensions = dimensions => - this.updatePlot(dimensions, this.state.hexapodParams.pose) - - updatePose = pose => this.updatePlot(this.state.hexapodParams.dimensions, pose) - - /* * * * * * * * * * * * * * - * Control display of widgets - * * * * * * * * * * * * * */ - - mightShowDetailedNav = () => (this.state.inHexapodPage ? : null) - - mightShowDimensions = () => { - if (this.state.inHexapodPage) { - return ( - - ) - } - } - - mightShowPlot = () => ( -
- -
- ) - - /* * * * * * * * * * * * * * - * Pages - * * * * * * * * * * * * * */ - - showPage = () => ( - - - - - - - - - - - - - - - - - - ) - - /* * * * * * * * * * * * * * - * Layout - * * * * * * * * * * * * * */ - - render = () => ( + return (