Test improvments, feedbackify.

components/Feedbackify/Feedbackify.jsx

@@ -75,6 +75,7 @@ class Feedbackify extends Component {
                     className={`up btn ${
                         this.state.current === 'up' ? 'active' : ''
                     }`}
+                    aria-label="arrow-up"
                 >
                     {upToggle}{' '}
                     <span className="up-counter">
@@ -86,6 +87,7 @@ class Feedbackify extends Component {
                     className={`down btn ${
                         this.state.current === 'up' ? 'active' : ''
                     }`}
+                    aria-label="arrow-down"
                 >
                     {downToggle}{' '}
                     <span className="down-counter">

components/Feedbackify/Feedbackify.stories.tsx

@@ -1,5 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { Feedbackify } from ".."
+import SInfo from "../../stories/components/SInfo";
 
 const feedbackifyConfig = {
     title: 'Components/Feedbackify',
@@ -34,7 +35,9 @@ export const FeedbackifyBasic = (args: any) => {
 }
 
 FeedbackifyBasic.args = {
-    className: 'Feedbackify-custom'
+    className: 'Feedbackify-custom',
+    up: 0,
+    down: 0,
 }
 
 export const WithInitialData = (args: any) => (
@@ -50,11 +53,14 @@ WithInitialData.argTypes = {
 //argTypes: { onClick: { action: 'clicked' } },
 
 export const WithAnOnchange = (args: any) => (
-    <Feedbackify
-        up={44444}
-        down={66666}
-        {...args}
-    />
+    <>
+        <SInfo>Higher 5 digit values:</SInfo>
+        <Feedbackify
+            up={44444}
+            down={66666}
+            {...args}
+        />
+    </>
 )
 
 WithAnOnchange.argTypes = {

components/Feedbackify/Feedbackify.test.js

@@ -1,10 +1,29 @@
-import ReactDOM from 'react-dom'
+import { fireEvent, render, screen, act } from '@testing-library/react';
+import { createRoot } from 'react-dom/client'
 import Feedbackify from './Feedbackify'
+import { composeStory } from '@storybook/react';
+import Meta, { FeedbackifyBasic } from './Feedbackify.stories';
+
+const BasicStory = composeStory(FeedbackifyBasic, Meta)
 
 describe('<Feedbackify />', () => {
     it('renders a feedback area', () => {
         const div = document.createElement('div')
-        const root = ReactDOM.createRoot(div).render(<Feedbackify up={44} down={23} />)
-        root.unmount(div)
+        const root = createRoot(div)
+        act(() => {
+            root.render(<Feedbackify up={44} down={23} />)
+            root.render(<Feedbackify up={0} down={1} />)
+            root.render(<Feedbackify up={5} down={0} />)
+            root.render(<Feedbackify up={0} down={0} />)
+            root.render(<Feedbackify up={9999} down={9999} />)
+            root.unmount()
+        })
+    })
+
+    it('can display the basic story', () => {
+        render(<BasicStory />)
+        expect(screen.getByLabelText('arrow-up')).toBeInTheDocument()
+        expect(screen.getByLabelText('arrow-down')).toBeInTheDocument()
+        expect(screen.getAllByRole('button').length).toBe(2)
     })
 })

components/Health/Health.test.tsx

@@ -1,13 +1,14 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import Health from './Health'
 
 describe('<Health />', () => {
     it('renders the Health area', () => {
         const div = document.createElement('div')
-        const root = ReactDOM.createRoot(div).render(<Health char={{
+        const root = createRoot(div)
+        root.render(<Health char={{
             health: 50,
             totalHealth: 100
         }} />)
-        root.unmount(div)
+        root.unmount()
     })
 })

components/Logo/Logo.test.tsx

@@ -1,10 +1,11 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import Logo from './Logo'
 
 describe('<Logo />', () => {
     it('renders the Logo area', () => {
         const div = document.createElement('div')
-        const root = ReactDOM.createRoot(div).render(<Logo />)
+        const root = createRoot(div)
+        root.render(<Logo />)
         root.unmount(div)
     })
 })

components/News/News.test.tsx

@@ -5,7 +5,8 @@ import mockNews from '../models/mockNews'
 describe('<News />', () => {
     it('renders the News area', () => {
         const div = document.createElement('div')
-        const root = createRoot(div).render(<News article={mockNews[0]} />)
+        const root = createRoot(div)
+        root.render(<News article={mockNews[0]} />)
         root.unmount()
     })
 })

components/NinjaLevel/NinjaLevel.test.tsx

@@ -4,7 +4,8 @@ import NinjaLevel from './NinjaLevel'
 describe('<NinjaLevel />', () => {
     it('renders the NinjaLevel area', () => {
         const div = document.createElement('div')
-        const root = createRoot(div).render(<NinjaLevel level={99} />)
+        const root = createRoot(div)
+        root.render(<NinjaLevel level={99} />)
         root.unmount()
     })
 })

components/Profile/Profile.test.tsx

@@ -1,12 +1,10 @@
 import { fireEvent, render, screen, act } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/core/styles'
 import mockPerson from '../mocks/mockPerson'
-import { createRoot } from 'react-dom/client'
+//import { createRoot } from 'react-dom/client'
 import theme from '@/theme'
 import Profile from './Profile'
-
 import { composeStory } from '@storybook/react';
-
 import Meta, { Basic, Multi } from './Profile.stories';
 
 const BasicStory = composeStory(Basic, Meta)

components/SelfStatus/SelfStatus.test.tsx

@@ -13,7 +13,7 @@ describe('<SelfStatus />', () => {
     }
     it('renders the SelfStatus area', () => {
         const div = document.createElement('div')
-        const root = createRoot(div).render(<SelfStatus stats={mockSelfStats} requirement={55} />)
+        const root = createRoot(<SelfStatus stats={mockSelfStats} requirement={55} />, div)
         root.unmount()
     })
 })

components/Typeset/Typeset.test.tsx

@@ -1,13 +1,13 @@
 import { ThemeProvider } from '@material-ui/core/styles'
-import ReactDOM from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import theme from '@/theme'
 import Typeset from './Typeset'
 
 describe('<Typeset />', () => {
     it('renders the Typeset area', () => {
         const div = document.createElement('div')
-        const root = createRoot(div).render(<ThemeProvider theme={theme}><Typeset><div>Some random contents</div><div>Here are some more</div></Typeset></ThemeProvider>)
+        const root = createRoot(div)
+        root.render(<ThemeProvider theme={theme}><Typeset><div>Some random contents</div><div>Here are some more</div></Typeset></ThemeProvider>)
         root.unmount()
     })
 })

src/context/UserContext.test.tsx

@@ -24,7 +24,7 @@ describe('<UserContext />', () => {
             </>,
             div
         )
-        root.unmount(div);
+        root.unmount();
     })
     it('displays a mock user to the screen', () => {
         render(

src/datastore/store.ts

@@ -50,13 +50,18 @@ interface ModelInstance {
     name: string
     fields: unknown
     [key: string]: unknown
+}
 
+interface SchemaShape {
+    models: {
+        [key: string]: ModelInfo
+    }
 }
 
-const initializeDataByModel = (modelType: string, schema: unknown): ModelInstance => {
+const initializeDataByModel = (modelType: string, schema: SchemaShape): ModelInstance => {
     const model = schema.models[modelType] as ModelInfo
     const fields = model.fields
-    const data = {}
+    const data: Record<string, unknown> = {}
     Object.keys(fields).forEach((fieldName) => {
         data[fieldName] = null
     })
@@ -65,7 +70,7 @@ const initializeDataByModel = (modelType: string, schema: unknown): ModelInstanc
     return modelInstance
 }
 
-const collateDataFields = (model: ModelInfo, data: Record<string, unknown>, schema: unknown) => {
+const collateDataFields = (model: ModelInfo, data: Record<string, unknown>) => {
     const fields = model.fields as string[]; // Cast model.fields to string[]
     const collatedData: Record<string, unknown> = {}
     Object.keys(fields).forEach((fieldName) => {
@@ -81,7 +86,7 @@ const DataStore = {
         const namedStoreType = storeType as string
         const emptyModel = initializeDataByModel(namedStoreType, allModels)
         const data = await fetchDataByModel(namedStoreType, id, allModels)
-        return collateDataFields(emptyModel, data, allModels)
+        return collateDataFields(emptyModel, data)
     }
 
 }