diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml index d99745fb..546084e6 100644 --- a/.github/workflows/testing.yml +++ b/.github/workflows/testing.yml @@ -3,7 +3,7 @@ name: Testing on: push jobs: - build: + testing: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 diff --git a/package.json b/package.json index b84139ca..b488111c 100644 --- a/package.json +++ b/package.json @@ -8,37 +8,31 @@ }, "license": "AGPL-3.0", "dependencies": { - "@babel/preset-env": "^7.21.5", - "@babel/preset-react": "^7.18.6", "@complat/react-svg-file-zoom-pan": "1.1.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@mdi/js": "^4.7.95", - "@mdi/react": "^1.2.1", + "@mdi/js": "^7.2.96", + "@mdi/react": "^1.6.1", "@mui/icons-material": "^5.14.9", "@mui/material": "^5.14.9", "@mui/styles": "^5.14.9", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "12.1.5", "@types/jest": "^29.5.0", "@types/node": "^18.15.11", "@types/react": "^18.0.34", "@types/react-dom": "^18.0.11", "babel-plugin-transform-object-rest-spread": "^6.26.0", "browserslist": "^4.21.5", - "classnames": "^2.2.6", + "classnames": "^2.3.2", "d3": "^5.16.0", "d3-brush": "3.0.0", "d3-selection": "^2.0.0", "d3-tip": "^0.9.1", "jcampconverter": "4.1.0", "ml-savitzky-golay-generalized": "1.1.1", - "prop-types": "^15.7.2", + "prop-types": "^15.8.1", "react-dropzone": "^8.0.3", "react-quill": "^2.0.0", "react-redux": "^7.2.0", - "react-svg-file-zoom-pan": "^1.0.5", - "react-svg-inline": "^2.1.1", "redux": "^4.1.1", "redux-saga": "^1.1.3", "redux-undo": "^1.1.0", @@ -66,6 +60,8 @@ "@babel/preset-env": "^7.21.5", "@babel/preset-react": "^7.18.6", "@storybook/react": "7.0.7", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "12.1.5", "@types/enzyme": "^3.10.13", "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "babel-loader": "8.2.5", diff --git a/src/__tests__/units/components/cmd_bar/01_viewer.test.js b/src/__tests__/units/components/cmd_bar/01_viewer.test.js new file mode 100644 index 00000000..994f026b --- /dev/null +++ b/src/__tests__/units/components/cmd_bar/01_viewer.test.js @@ -0,0 +1,49 @@ +import configureStore from 'redux-mock-store' +import { Provider } from 'react-redux' +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import Viewer from '../../../../components/cmd_bar/01_viewer' +import { LIST_UI_VIEWER_TYPE } from '../../../../constants/list_ui'; +import { LIST_LAYOUT } from '../../../../constants/list_layout'; + +const mockStore = configureStore([]); +const store = mockStore({ + ui: LIST_UI_VIEWER_TYPE.SPECTRUM, + layout: LIST_LAYOUT.H1, +}); + +const dispatchMock = () => Promise.resolve({}); +store.dispatch = jest.fn(dispatchMock); + +describe('', () => { + let AppWrapper; + beforeEach(() => { + AppWrapper = ({ store, children}) => { + return {children} + } + }); + + it('Render Viewer', async () => { + const renderer = + + + + ; + const { queryByTestId } = render(renderer); + const renderResult = queryByTestId('Viewer'); + expect(renderResult).toBeInTheDocument(); + expect(renderResult.childElementCount).toEqual(2); + }); + + it('Render Viewer in editor only mode', () => { + const renderer = + + + + ; + const { queryByTestId } = render(renderer); + const renderResult = queryByTestId('Viewer'); + expect(renderResult).toBeInTheDocument(); + expect(renderResult.childElementCount).toEqual(1); + }); +}) diff --git a/src/__tests__/units/components/cmd_bar/02_zoom.test.js b/src/__tests__/units/components/cmd_bar/02_zoom.test.js new file mode 100644 index 00000000..b7422aef --- /dev/null +++ b/src/__tests__/units/components/cmd_bar/02_zoom.test.js @@ -0,0 +1,35 @@ +import configureStore from 'redux-mock-store' +import { Provider } from 'react-redux' +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import Zoom from '../../../../components/cmd_bar/02_zoom'; +import { LIST_UI_SWEEP_TYPE } from '../../../../constants/list_ui'; + +const mockStore = configureStore([]); +const store = mockStore({ + ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN }, +}); + +const dispatchMock = () => Promise.resolve({}); +store.dispatch = jest.fn(dispatchMock); + +describe('', () => { + let AppWrapper; + beforeEach(() => { + AppWrapper = ({ store, children}) => { + return {children} + } + }); + + it('Render Zoom', async () => { + const renderer = + + + + ; + const { queryByTestId } = render(renderer); + const renderResult = queryByTestId('Zoom'); + expect(renderResult).toBeInTheDocument(); + expect(renderResult.childElementCount).toEqual(2); + }); +}) \ No newline at end of file diff --git a/src/__tests__/units/components/panel/peaks.test.js b/src/__tests__/units/components/panel/peaks.test.js index 83d0883d..68ab184a 100644 --- a/src/__tests__/units/components/panel/peaks.test.js +++ b/src/__tests__/units/components/panel/peaks.test.js @@ -5,6 +5,8 @@ import configureStore from 'redux-mock-store' import { Provider } from 'react-redux'; import '@testing-library/jest-dom' import { LIST_LAYOUT } from "../../../../constants/list_layout"; +import { createTheme } from "@mui/material"; +import { ThemeProvider } from "@mui/styles"; const mockStore = configureStore([]); const store = mockStore({ @@ -48,6 +50,11 @@ const failedStore = mockStore({ const dispatchMock = () => Promise.resolve({}); store.dispatch = jest.fn(dispatchMock); +const theme = createTheme({ + typography: { + useNextVariants: true + }, +}); describe("", () => { let AppWrapper; @@ -60,7 +67,9 @@ describe("", () => { test('Render peaks panel info', () => { const renderer = - {}} /> + + {}} /> + ; const {queryByTestId} = render(renderer); @@ -70,7 +79,9 @@ describe("", () => { test('Render peaks panel with invalid store list', () => { const renderer = - {}} /> + + {}} /> + ; const {queryByTestId} = render(renderer); diff --git a/src/components/cmd_bar/01_viewer.js b/src/components/cmd_bar/01_viewer.js index 4c920c50..d1dff1a2 100644 --- a/src/components/cmd_bar/01_viewer.js +++ b/src/components/cmd_bar/01_viewer.js @@ -31,7 +31,7 @@ const Viewer = ({ const onViewAnalysis = () => setUiViewerTypeAct(LIST_UI_VIEWER_TYPE.ANALYSIS); return ( - + Spectrum Viewer}> setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET); return ( - + Zoom In}> - + Solvent @@ -93,22 +86,16 @@ const layoutSelect = (classes, layoutSt, updateLayoutAct) => { return ( - + Layout - ) - } + className={classNames(classes.selectInput, 'input-sv-bar-scan')} > { content } diff --git a/src/components/cmd_bar/r03_threshold.js b/src/components/cmd_bar/r03_threshold.js index c8bbe510..9e4e6afb 100644 --- a/src/components/cmd_bar/r03_threshold.js +++ b/src/components/cmd_bar/r03_threshold.js @@ -6,13 +6,11 @@ import classNames from 'classnames'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import TextField from '@material-ui/core/TextField'; -import InputAdornment from '@material-ui/core/InputAdornment'; -import { withStyles } from '@material-ui/core/styles'; -import Tooltip from '@material-ui/core/Tooltip'; -import CloudDoneOutlinedIcon from '@material-ui/icons/CloudDoneOutlined'; -import HowToRegOutlinedIcon from '@material-ui/icons/HowToRegOutlined'; -import RefreshOutlinedIcon from '@material-ui/icons/RefreshOutlined'; +import { TextField, InputAdornment, Tooltip } from '@mui/material'; +import { withStyles } from '@mui/styles'; +import CloudDoneOutlinedIcon from '@mui/icons-material/CloudDoneOutlined'; +import HowToRegOutlinedIcon from '@mui/icons-material/HowToRegOutlined'; +import RefreshOutlinedIcon from '@mui/icons-material/RefreshOutlined'; import Cfg from '../../helpers/cfg'; import { diff --git a/src/components/cmd_bar/r04_submit.js b/src/components/cmd_bar/r04_submit.js index d83b0596..f7acdf37 100644 --- a/src/components/cmd_bar/r04_submit.js +++ b/src/components/cmd_bar/r04_submit.js @@ -6,12 +6,10 @@ import classNames from 'classnames'; import { connect } from 'react-redux'; import { bindActionCreators, compose } from 'redux'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; -import FormControl from '@material-ui/core/FormControl'; -import OutlinedInput from '@material-ui/core/OutlinedInput'; -import InputLabel from '@material-ui/core/InputLabel'; -import { withStyles } from '@material-ui/core/styles'; +import { + Select, MenuItem, FormControl, InputLabel, +} from '@mui/material'; +import { withStyles } from '@mui/styles'; import { toggleIsAscend, toggleIsIntensity, @@ -52,20 +50,15 @@ const ascendSelect = ( className={classNames(classes.fieldOrder)} variant="outlined" > - + Write Peaks - ) - } + className={classNames(classes.selectInput, 'input-sv-bar-intensity')} + // input={ + // ( + // + // ) + // } > @@ -140,20 +136,23 @@ const decimalSelect = ( className={classNames(classes.fieldDecimal)} variant="outlined" > - + Decimal @@ -177,20 +176,23 @@ const operationSelect = ( className={classNames(classes.fieldOpertaion)} variant="outlined" > - + Submit diff --git a/src/components/cmd_bar/r05_submit_btn.js b/src/components/cmd_bar/r05_submit_btn.js index 0ffd6ffb..fce6830d 100644 --- a/src/components/cmd_bar/r05_submit_btn.js +++ b/src/components/cmd_bar/r05_submit_btn.js @@ -7,9 +7,9 @@ import { connect } from 'react-redux'; import classNames from 'classnames'; import { bindActionCreators, compose } from 'redux'; -import Tooltip from '@material-ui/core/Tooltip'; -import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'; -import { withStyles } from '@material-ui/core/styles'; +import Tooltip from '@mui/material/Tooltip'; +import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'; +import { withStyles } from '@mui/styles'; import { Convert2Scan, Convert2Thres, diff --git a/src/components/cmd_bar/r06_predict_btn.js b/src/components/cmd_bar/r06_predict_btn.js index 8619b837..2924486a 100644 --- a/src/components/cmd_bar/r06_predict_btn.js +++ b/src/components/cmd_bar/r06_predict_btn.js @@ -7,11 +7,12 @@ import { connect } from 'react-redux'; import classNames from 'classnames'; import { bindActionCreators, compose } from 'redux'; -import Tooltip from '@material-ui/core/Tooltip'; -import GpsFixedOutlinedIcon from '@material-ui/icons/GpsFixedOutlined'; -import HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined'; -import Button from '@material-ui/core/Button'; -import { withStyles } from '@material-ui/core/styles'; +import { + Tooltip, Button, +} from '@mui/material'; +import GpsFixedOutlinedIcon from '@mui/icons-material/GpsFixedOutlined'; +import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'; +import { withStyles } from '@mui/styles'; import { commonStyle } from './common'; import Format from '../../helpers/format'; diff --git a/src/components/cmd_bar/r07_wavelength_btn.js b/src/components/cmd_bar/r07_wavelength_btn.js index 9ab03696..ce70e30c 100644 --- a/src/components/cmd_bar/r07_wavelength_btn.js +++ b/src/components/cmd_bar/r07_wavelength_btn.js @@ -7,9 +7,9 @@ import classNames from 'classnames'; import { bindActionCreators } from 'redux'; import { - FormControl, InputLabel, Select, OutlinedInput, MenuItem, -} from '@material-ui/core'; -import { withStyles } from '@material-ui/core/styles'; + FormControl, InputLabel, Select, MenuItem, +} from '@mui/material'; +import withStyles from '@mui/styles/withStyles'; import { updateWaveLength } from '../../actions/wavelength'; import Format from '../../helpers/format'; import { commonStyle } from './common'; @@ -43,20 +43,15 @@ const wavelengthSelect = (classes, waveLengthSt, layoutSt, updateWaveLengthAct) className={classNames(classes.fieldLayout)} variant="outlined" > - + Wavelength