Setup Jest test providers

Setup AppSidebar test

Author: modularcoder

src/App.test.tsxl

@@ -0,0 +1,7 @@
+import React from 'react'
+import { render } from '_tests'
+import App from './App'
+
+test('renders without crashing', () => {
+  render(<App />)
+})

src/App.test.tsxr

@@ -6,10 +6,10 @@ import BasePageContainer from '../_common/BasePageContainer'
 import BasePageToolbar from '../_common/BasePageToolbar'
 
 import DashboardActions from './DashboardActions'
-import SubscriptionsHistory from './SubscriptionsHistory'
-import KeyMetrics from './KeyMetrics'
-import SubscriptionsRecent from './SubscriptionsRecent'
-import SubscriptionsBreakdown from './SubscriptionsBreakdown'
+import SubscriptionsHistory from './SubscriptionsHistory/'
+import KeyMetrics from './KeyMetrics/'
+import SubscriptionsRecent from './SubscriptionsRecent/'
+import SubscriptionsBreakdown from './SubscriptionsBreakdown/'
 
 const Dashboard = () => {
   return (

src/Dashboard/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen } from '_tests/'
 import KeyMetrics from './KeyMetrics'
 
 test('renders without crashing', () => {

src/Dashboard/KeyMetrics/KeyMetrics.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { render, screen } from '_tests'
+import AppSidebar from './AppSidebar'
+
+test('renders learn react link', () => {
+  render(<AppSidebar />)
+  expect(screen.getByLabelText('Modular Admin link')).toBeInTheDocument()
+})

src/_common/AppSidebar/AppSidebar.test.tsx

@@ -5,7 +5,8 @@ import { Link } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography'
 
 // import AppSidebarBg from './AppSidebarBg.jpg'
-import Logo from '_common/BaseLogo/BaseLogo'
+import { ITheme } from '_theme/'
+import BaseLogo from '_common/BaseLogo'
 import SidebarNav from './SidebarNav'
 
 export interface ISidebarProps {
@@ -22,8 +23,13 @@ const Sidebar: React.FC<ISidebarProps> = (props) => {
       <div className={classes.sidebarBackground} />
       <div className={classes.sidebarBody}>
         <div className={classes.sidebarHeader}>
-          <Link to="/" className={classes.sidebarTitleLink}>
-            <Logo size={30} isInversed={true} className={classes.logo} />
+          <Link
+            to="/"
+            className={classes.sidebarTitleLink}
+            role="link"
+            aria-label="Modular Admin link"
+          >
+            <BaseLogo size={30} isInversed={true} className={classes.logo} role="img" />
             <Typography
               component="h2"
               variant="h5"
@@ -50,7 +56,7 @@ Sidebar.defaultProps = {
 //   isCollapsed: PropTypes.bool,
 // }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles<ITheme>((theme) => ({
   sidebar: {
     position: 'absolute',
     top: 0,

src/_common/AppSidebar/AppSidebar.tsx

@@ -3,7 +3,8 @@ import { makeStyles, createStyles } from '@material-ui/core/styles'
 import List from '@material-ui/core/List'
 import ListSubheader from '@material-ui/core/ListSubheader'
 
-import { itemsCore, itemsTheme } from './SidebarNavService'
+import { ITheme } from '_theme'
+import { itemsCore /*, itemsTheme */ } from './SidebarNavService'
 import SidebarNavListItem, { ISidebarNavListItem } from './SidebarNavListItem'
 
 export interface ISidebarNavProps {
@@ -35,7 +36,7 @@ const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
   )
 }
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles<ITheme>((theme) =>
   createStyles({
     navList: {
       width: theme.sidebar.width,

src/_common/AppSidebar/SidebarNav/SidebarNav.tsx

@@ -4,7 +4,7 @@ import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import Collapse from '@material-ui/core/Collapse'
 
-import { makeStyles, createStyles } from '@material-ui/core/styles'
+// import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 export interface ISidebarNavListItem {
   name: string

src/_common/AppSidebar/SidebarNav/SidebarNavListItem.tsx

@@ -2,10 +2,14 @@ import React from 'react'
 
 import { makeStyles } from '@material-ui/core/styles'
 
-const PageContainer = ({ children }) => {
+const BasePageContainer: React.FC = ({ children }) => {
   const classes = useStyles()
 
-  return <article className={classes.container}>{children}</article>
+  return (
+    <main className={classes.container} role="main">
+      {children}
+    </main>
+  )
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -18,4 +22,4 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export default PageContainer
+export default BasePageContainer

src/_common/AppSidebar/AppSidebarBg.jpg renamed to src/_common/AppSidebar/_assets/AppSidebarBg.jpg

@@ -0,0 +1,36 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import 'jest-canvas-mock'
+import '@testing-library/jest-dom'
+
+import React, { ReactElement } from 'react'
+import { render, RenderOptions } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { ThemeProvider } from '@material-ui/styles'
+import { IntlProvider } from 'react-intl'
+
+import theme from '../_theme'
+
+const AllTheProviders: React.FC = ({ children }) => {
+  return (
+    <IntlProvider locale={'en-US'}>
+      <ThemeProvider theme={theme}>
+        <MemoryRouter>{children}</MemoryRouter>
+      </ThemeProvider>
+    </IntlProvider>
+  )
+}
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) =>
+  render(ui, { wrapper: AllTheProviders, ...options })
+
+jest.mock('react-chartjs-2', () => ({
+  Bar: () => null,
+  Line: () => null,
+}))
+
+export * from '@testing-library/react'
+
+export { customRender as render }

src/_common/BasePageContainer/BasePageContainer.js renamed to src/_common/BasePageContainer/BasePageContainer.tsx

@@ -18,6 +18,8 @@ declare module '@material-ui/core/styles/createMuiTheme' {
   interface ThemeOptions {}
 }
 
+export interface ITheme extends Theme {}
+
 const baseTheme = createMuiTheme({
   props: {
     MuiPaper: {

src/_common/BasePageContainer/index.js renamed to src/_common/BasePageContainer/index.ts

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"],
+      "@/*": ["./src/*"],
       "$/*": [
         "./src/*"
       ],