Setup tests

Author: modularcoder

src/Dashboard/KeyMetrics/KeyMetrics.test.tsx

@@ -1,9 +1,16 @@
 import React from 'react'
-import { render, screen } from '_tests/'
+import { render, waitFor, screen } from '_tests/'
 import KeyMetrics from './KeyMetrics'
 
-test('renders without crashing', () => {
-  render(<KeyMetrics />)
-  // const linkElement = screen.getByText(/learn react/i)
-  // expect(linkElement).toBeInTheDocument()
+describe('Dashboard/KeyMetrics', () => {
+  it('has 4 key metrics', async () => {
+    render(<KeyMetrics />)
+
+    // wait for headings to appear
+    await waitFor(() => screen.getAllByRole('heading'))
+
+    const Headings = screen.getAllByRole('heading')
+
+    expect(Headings).toHaveLength(4)
+  })
 })

src/Dashboard/KeyMetrics/KeyMetrics.tsx

@@ -6,7 +6,7 @@ import { Line } from 'react-chartjs-2'
 
 import { generateTrendChartData } from './data'
 
-const numbers = [
+const keyMetrics = [
   {
     name: 'Monthly Revenue',
     value: '24350$',
@@ -61,13 +61,18 @@ const KeyMetrics: React.FC = () => {
 
   return (
     <>
-      {numbers.map(({ name, value, change, trend, chart }) => (
+      {keyMetrics.map(({ name, value, change, trend, chart }) => (
         <Grid item xs={12} sm={6} md={3} key={name}>
           <Paper className={classes.paper}>
             <Grid container spacing={0}>
               <Grid item xs={6} sm={6} md={12} lg={6}>
                 <Box p={2}>
-                  <Typography variant="body2" className={classes.name}>
+                  <Typography
+                    variant="body2"
+                    className={classes.name}
+                    role="heading"
+                    aria-label={name}
+                  >
                     {name}
                   </Typography>
                   <Typography variant="body1" className={classes.value}>

src/_common/AppSidebar/AppSidebar.test.tsx

@@ -2,7 +2,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()
+describe('AppSidebar', () => {
+  it('renders without crashing', () => {
+    render(<AppSidebar />)
+  })
 })

src/_common/AppSidebar/SidebarNav/SidebarNav.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render, screen } from '_tests'
+import SidebarNav from './SidebarNav'
+
+describe('SidebarNav', () => {
+  it('renders without crashing', () => {
+    render(<SidebarNav />)
+  })
+})