<TooltipIconButton> Tests (#179)

* Create manual mock for testing React components

This wraps the component with the requisite theme provider.

* Convert component to ES6 arrow function

* Add tests for <TooltipIconButton>

* Refactor to remove redundant inline wrapper

* Add internal attribute to support testing

* Add missing blank lines after imports

* Reorder file context so name of first object corresponds with filename

src/Components/Buttons.jsx

@@ -12,25 +12,27 @@ import {assertDefined} from '../utils/assert'
  * @param {Object} icon
  * @param {string} placement
  * @param {string} size
+ * @param {string} dataTestId Internal attribute for component testing
  * @return {Object} React component
  */
-export function TooltipIconButton({
+export const TooltipIconButton = ({
   title,
   onClick,
   icon,
-  placement='right',
-  size='medium',
-}) {
+  placement = 'right',
+  size = 'medium',
+  'data-testid': dataTestId,
+}) => {
   assertDefined(title, icon, onClick)
   const classes = useStyles(useTheme())
+
   return (
-    <span className={classes.root}>
-      <Tooltip title={title} describeChild placement={placement}>
-        <IconButton onClick={onClick} size={size}>
-          {icon}
-        </IconButton>
-      </Tooltip>
-    </span>
+    <Tooltip classes={{tooltip: classes.root}} title={title} describeChild placement={placement}
+      data-testid={dataTestId}>
+      <IconButton onClick={onClick} size={size}>
+        {icon}
+      </IconButton>
+    </Tooltip>
   )
 }
 

src/Components/Buttons.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {fireEvent, render} from '@testing-library/react'
+import {TooltipIconButton} from './Buttons'
+import QuestionIcon from '../assets/2D_Icons/Question.svg'
+import {MockComponent} from '../__mocks__/MockComponent'
+
+
+describe('<TooltipIconButton />', () => {
+  test('should throw error if missing required props', () => {
+    expect(() => render(<MockComponent>
+      <TooltipIconButton/>
+    </MockComponent>)).toThrow('Arg 0 is not defined')
+  })
+
+  test('should render successfully', async () => {
+    const rendered = render(<MockComponent>
+      <TooltipIconButton
+        data-testid={'test-button'}
+        title={'Hello. Is it me you\'re looking for?'}
+        onClick={() => {}}
+        icon={<QuestionIcon/>}
+      />
+    </MockComponent>)
+
+    const button = rendered.getByTestId('test-button')
+    fireEvent.mouseOver(button)
+
+    const tooltip = await rendered.findByRole('tooltip')
+    expect(tooltip).toBeInTheDocument()
+  })
+})

src/__mocks__/MockComponent.jsx

@@ -0,0 +1,24 @@
+import useTheme from '../Theme'
+import {ThemeProvider} from '@mui/material/styles'
+import React, {createContext} from 'react'
+
+
+/**
+ * @param {Object} children React component(s)
+ * @return {Object} React component
+ */
+export const MockComponent = ({children}) => {
+  const {theme, colorMode} = useTheme()
+
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>
+        {children}
+      </ThemeProvider>
+    </ColorModeContext.Provider>
+  )
+}
+
+const ColorModeContext = createContext({
+  toggleColorMode: () => {},
+})