GUI pending unit tests (#1410)

* Unit test cases for redux and settings * Unit tests for misc and result section * Unit test cases for logs and sublattice * Unit test cases for dispatches and navdrawer * Unit test cases added for dispatches folder * Unit test cases describe text modified * Unit test cases for common componenets * Unit test cases for logs and common components * Sonarqube fixes * Graph: removed commented code and lint check * Added license text * Fix hideLabels and params * Update changelog * Fix tests * Fix unused imports Co-authored-by: kamalesh.suresh <[email protected]> Co-authored-by: Amalan Jenicious F <[email protected]> Co-authored-by: Alejandro Esquivel <[email protected]>
AgnostiqHQ · Jan 13, 2023 · 25b2ace · 25b2ace
1 parent b53046e
commit 25b2ace
Show file tree

Hide file tree

Showing 72 changed files with 4,672 additions and 783 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED]
 
+### Added
+
+- Front-end pending unit tests for the GUI.
+
 ## [0.211.1-rc.0] - 2023-01-12
 
 ### Authors
@@ -16,7 +20,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Co-authored-by: ArunPsiog <[email protected]>
 - Co-authored-by: Alejandro Esquivel <[email protected]>
 
-
 ### Fixed 
 
 - Optimization of logs on the GUI for large log file sizes. 

diff --git a/covalent_ui/webapp/package.json b/covalent_ui/webapp/package.json
@@ -69,5 +69,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "redux-mock-store": "^1.5.4"
   }
 }
diff --git a/covalent_ui/webapp/src/App.js b/covalent_ui/webapp/src/App.js
@@ -33,7 +33,7 @@ import { socketAPI } from './redux/commonSlice'
 import theme from './utils/theme'
 import { ReactFlowProvider } from 'react-flow-renderer'
 import LatticePreviewLayout from './components/preview/LatticePreviewLayout'
-import DispatchLayout from './components/dispatch/DispatchLayout'
+import {DispatchLayout} from './components/dispatch/DispatchLayout'
 import TerminalLayout from './components/terminal/TerminalLayout'
 import SettingsLayout from './components/settings/SettingsLayout'
 import NotFound from './components/NotFound'

diff --git a/covalent_ui/webapp/src/App.test.js → covalent_ui/webapp/src/__tests__/App.test.js b/covalent_ui/webapp/src/App.test.js → covalent_ui/webapp/src/__tests__/App.test.js
@@ -21,15 +21,15 @@
  */
 
 import { screen, render } from '@testing-library/react'
-import App from './App'
+import App from '../App'
 import { BrowserRouter } from 'react-router-dom'
 import React from 'react'
 import { Provider } from 'react-redux'
-import reducers from './redux/reducers'
+import reducers from '../redux/reducers'
 import { configureStore } from '@reduxjs/toolkit'
-import theme from './utils/theme'
+import theme from '../utils/theme'
 import ThemeProvider from '@mui/system/ThemeProvider'
-import DispatchLayout from './components/dispatch/DispatchLayout'
+import DispatchLayout from '../components/dispatch/DispatchLayout'
 
 function reduxRender(renderedComponent) {
   const store = configureStore({

diff --git a/covalent_ui/webapp/src/__tests__/index.test.js b/covalent_ui/webapp/src/__tests__/index.test.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2021 Agnostiq Inc.
+ *
+ * This file is part of Covalent.
+ *
+ * Licensed under the GNU Affero General Public License 3.0 (the "License").
+ * A copy of the License may be obtained with this software package or at
+ *
+ *      https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * Use of this file is prohibited except in compliance with the License. Any
+ * modifications or derivative works of this file must retain this copyright
+ * notice, and modified files must contain a notice indicating that they have
+ * been altered from the originals.
+ *
+ * Covalent is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the License for more details.
+ *
+ * Relief from the License may be granted by purchasing a commercial license.
+ */
+
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import ReactDOM from 'react-dom'
+
+jest.mock('react-dom', () => ({ render: jest.fn() }))
+
+describe('testing index', () => {
+  test('mock store', () => {
+    const mockStore = configureMockStore([thunk])
+    expect(mockStore).toBeDefined()
+  })
+  test('rendering react dom', () => {
+    const div = document.createElement('div')
+    div.id = 'root'
+    document.body.appendChild(div)
+    require('../index')
+    expect(ReactDOM.render).toHaveBeenCalled()
+  })
+})
diff --git a/covalent_ui/webapp/src/components/common/DownloadButton.js b/covalent_ui/webapp/src/components/common/DownloadButton.js
@@ -23,9 +23,15 @@
 import { IconButton, Tooltip, Grid } from '@mui/material'
 import { ReactComponent as DownloadIcon } from '../../assets/download.svg'
 
-const DownloadButton = ({ content, isBorderPresent,onClick,disabled, ...props }) => {
+const DownloadButton = ({
+  content,
+  isBorderPresent,
+  onClick,
+  disabled,
+  ...props
+}) => {
   return (
-    <Tooltip title={props.title} placement="right" data-testid="copyButton">
+    <Tooltip title={props.title} placement="right">
       <IconButton
         onClick={onClick}
         disabled={disabled}
@@ -47,7 +53,7 @@ const DownloadButton = ({ content, isBorderPresent,onClick,disabled, ...props })
         >
           <DownloadIcon
             style={{ margin: 'auto', width: '16px', height: '16px' }}
-            data-testid="copyIcon"
+            data-testid="downloadButton"
           />
         </Grid>
       </IconButton>

diff --git a/covalent_ui/webapp/src/components/common/InputSection.js b/covalent_ui/webapp/src/components/common/InputSection.js
@@ -22,12 +22,7 @@
 
 import { useState } from 'react'
 import _ from 'lodash'
-import {
-  Paper,
-  Skeleton,
-  Tooltip,
-  tooltipClasses
-} from '@mui/material'
+import { Paper, Skeleton, Tooltip, tooltipClasses } from '@mui/material'
 import copy from 'copy-to-clipboard'
 import { styled } from '@mui/material/styles'
 import Heading from './Heading'
@@ -46,26 +41,30 @@ const InputSection = ({ isFetching, inputs, preview, ...props }) => {
   const [copied, setCopied] = useState(false)
   const inputSrc = preview
     ? _.join(
-      _.map(inputs?.data, (value, key) => `${key}: ${value}`),
-      '\n'
-    )
+        _.map(inputs?.data, (value, key) => `${key}: ${value}`),
+        '\n'
+      )
     : inputs?.data
   return (
     <>
       {isFetching ? (
-        <Skeleton sx={{ height: '80px' }} />
+        <Skeleton sx={{ height: '80px' }} data-testid="inputSectionSkeleton" />
       ) : (
         inputSrc && (
-          <InputTooltip title={copied ? 'Python object copied' : 'Copy python object'} arrow>
-            <div onClick={
-              () => {
+          <InputTooltip
+            title={copied ? 'Python object copied' : 'Copy python object'}
+            arrow
+          >
+            <div
+              data-testid="copySection"
+              onClick={() => {
                 copy(inputs?.python_object)
                 setCopied(true)
                 setTimeout(() => setCopied(false), 1200)
-              }
-            } >
-              <Heading data-testid='inputSection'>Input</Heading>
-              <Paper elevation={0} {...props} >
+              }}
+            >
+              <Heading data-testid="inputSection">Input</Heading>
+              <Paper elevation={0} {...props}>
                 <SyntaxHighlighter language="json" src={inputSrc} />
               </Paper>
             </div>

diff --git a/covalent_ui/webapp/src/components/common/NavDrawer.js b/covalent_ui/webapp/src/components/common/NavDrawer.js
@@ -43,9 +43,8 @@ import { ReactComponent as Logs } from '../../assets/logs.svg'
 
 import { ReactComponent as ExitNewIcon } from '../../assets/exit.svg'
 import { ReactComponent as closeIcon } from '../../assets/close.svg'
-import { useMatch } from 'react-router-dom'
+import { useMatch, useNavigate } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
 import DialogBox from '../../components/settings/DialogBox'
 import { updateSettings } from '../../redux/settingsSlice'
 import { toggleLatticeDrawer } from '../../redux/popupSlice'
@@ -139,15 +138,15 @@ const NavDrawer = () => {
   )
 }
 
-const DialogToolbar = ({
+export const DialogToolbar = ({
   openDialogBox,
   setOpenDialogBox,
   onClickHand,
   handleClose,
   handlePopClose,
 }) => {
   return (
-    <Toolbar disableGutters sx={{ mb: 1 }}>
+    <Toolbar data-testid="toolBar" disableGutters sx={{ mb: 1 }}>
       <Typography
         sx={{
           display: 'flex',
@@ -169,7 +168,7 @@ const DialogToolbar = ({
   )
 }
 
-const LinkButton = ({
+export const LinkButton = ({
   title,
   icon,
   path,
@@ -190,17 +189,17 @@ const LinkButton = ({
   const [hovered, sethovered] = useState(false)
   let navigate = useNavigate()
 
-  const menuClick = (path) => {
+  const menuClick = (pathname) => {
     if (dRes === null) {
-      navigate(path)
+      navigate(pathname)
     } else if (dRes.isChanged === true) {
-      if (path === '/settings') {
+      if (pathname === '/settings') {
         setPopupShow(false)
       } else {
         setPopupShow(true)
       }
     } else {
-      navigate(path)
+      navigate(pathname)
     }
   }
 
@@ -259,6 +258,7 @@ const LinkButton = ({
         />
       )}
       <Snackbar
+        data-testid="snackbar"
         open={openSnackbar}
         autoHideDuration={3000}
         message={snackbarMessage}
@@ -277,6 +277,7 @@ const LinkButton = ({
       />
       {title === 'Logo' ? (
         <ListItemButton
+          data-testid="LogoListItemButton"
           sx={{
             position: 'fixed',
             top: 5,
@@ -307,6 +308,7 @@ const LinkButton = ({
           enterNextDelay={750}
         >
           <ListItemButton
+            data-testid="SpecificListItemButton"
             disableRipple
             sx={{
               textAlign: 'left',
@@ -319,8 +321,6 @@ const LinkButton = ({
               },
             }}
             onClick={() => menuClick(path)}
-            // component={Link}
-            // to={path}
             selected={!!selected}
           >
             {!!selected ? (

diff --git a/covalent_ui/webapp/src/components/common/ResultSection.js b/covalent_ui/webapp/src/components/common/ResultSection.js
@@ -53,7 +53,7 @@ const ResultSection = ({ isFetching, results, preview, ...props }) => {
   return (
     <>
       {isFetching ? (
-        <Skeleton sx={{ height: '80px' }} />
+        <Skeleton data-testid='skeleton' sx={{ height: '80px' }} />
       ) : (
         resultSrc && (
           <ResultTooltip title={copied ? 'Python object copied' : 'Copy python object'} arrow>

diff --git a/covalent_ui/webapp/src/components/common/__tests__/CopyButton.test.js b/covalent_ui/webapp/src/components/common/__tests__/CopyButton.test.js
@@ -65,4 +65,23 @@ describe('copy button', () => {
     fireEvent.click(element)
     expect(document.execCommand).toHaveBeenCalledWith('copy')
   })
+
+  test('rendering by passing props', () => {
+    render(
+      <App
+        title={'Copy'}
+        copy={copy}
+        borderRadius={10}
+        width="10px"
+        height="10px"
+      />
+    )
+    const jsdomAlert = window.prompt
+    window.prompt = () => {}
+    const element = screen.getByLabelText('Copy')
+    expect(element).toBeInTheDocument()
+    fireEvent.click(element)
+    expect(document.execCommand).toHaveBeenCalledWith('copy')
+    window.prompt = jsdomAlert
+  })
 })
diff --git a/covalent_ui/webapp/src/components/common/__tests__/DownloadButton.test.js b/covalent_ui/webapp/src/components/common/__tests__/DownloadButton.test.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2021 Agnostiq Inc.
+ *
+ * This file is part of Covalent.
+ *
+ * Licensed under the GNU Affero General Public License 3.0 (the "License").
+ * A copy of the License may be obtained with this software package or at
+ *
+ *      https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * Use of this file is prohibited except in compliance with the License. Any
+ * modifications or derivative works of this file must retain this copyright
+ * notice, and modified files must contain a notice indicating that they have
+ * been altered from the originals.
+ *
+ * Covalent is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the License for more details.
+ *
+ * Relief from the License may be granted by purchasing a commercial license.
+ */
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import App from '../DownloadButton'
+
+describe('download button', () => {
+  test('renders download button', () => {
+    render(<App title="download button" />)
+    const element = screen.getByTestId('downloadButton')
+    expect(element).toBeInTheDocument()
+  })
+
+  test('renders download button with border', () => {
+    render(<App title="download button" isBorderPresent />)
+    const element = screen.getByTestId('downloadButton')
+    expect(element).toBeInTheDocument()
+  })
+
+  test('button clicked', () => {
+    render(<App title="download button" />)
+    const element = screen.getByLabelText('download button')
+    expect(element).toBeInTheDocument()
+  })
+})