Merge pull request #7 from alexlopezp09/jest-and-typescript-enabled

added jest config file, renamed every js file to ts or tsx

Author: alexlopezp09

redux-excersice/.prettierrc.json

@@ -1,5 +1,5 @@
 {
-    "trailingComma": "es5",
+    "trailingComma": "all",
     "tabWidth": 4,
     "semi": false,
     "singleQuote": true

redux-excersice/jest.config.ts

@@ -0,0 +1,20 @@
+//  jest.config.ts
+
+import type { Config } from '@jest/types'
+// Sync object
+const config: Config.InitialOptions = {
+    verbose: true,
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    moduleNameMapper: {
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+            '<rootDir>/__mocks__/fileMock.js',
+        '\\.(scss|sass|css)$': 'identity-obj-proxy',
+    },
+    globals: {
+        window: {},
+        document: {},
+    },
+}
+export default config

redux-excersice/package-lock.json

@@ -42,7 +42,10 @@
         ]
     },
     "devDependencies": {
+        "@babel/preset-typescript": "7.21.0",
         "jest-dom": "^4.0.0",
-        "prettier": "2.8.4"
+        "prettier": "2.8.4",
+        "ts-jest": "29.0.5",
+        "ts-node": "10.9.1"
     }
 }

redux-excersice/package.json

@@ -0,0 +1,36 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { DispatchContext, initialState, StateContext } from '../constants'
+import { ComponentB } from './ComponentB'
+
+describe('App unit tests', () => {
+    const dispatch = jest.fn
+    const renderComponentWithContext = async (
+        initStateContextValue: typeof initialState,
+    ) => {
+        console.log(ComponentB)
+        return render(
+            <StateContext.Provider value={initStateContextValue}>
+                <DispatchContext.Provider value={dispatch}>
+                    <ComponentB />
+                </DispatchContext.Provider>
+            </StateContext.Provider>,
+        )
+    }
+
+    afterEach(() => {
+        cleanup()
+        jest.clearAllMocks()
+    })
+    //case only to ensure a correct instalation
+    it('renders without crashing', async () => {
+        const { container } = await renderComponentWithContext({ name: '' })
+        expect(container).toBeTruthy()
+    })
+
+    // UseContext testing with RTL
+    it.skip('renders but setting values to the form', () => {
+        const emptyFormValuesToContext = initialState
+        renderComponentWithContext(emptyFormValuesToContext)
+        expect(screen.getByDisplayValue(initialState.name)).toBeDefined()
+    })
+})

redux-excersice/src/components/App.test.tsx

@@ -0,0 +1,40 @@
+import React, { useReducer } from 'react'
+import reducer from '../reducer'
+import { StateContext, DispatchContext, initialState } from '../constants'
+import { useReadPath } from '../hooks/useReadPath'
+import { FormComponent } from './FormComponent'
+import './styles.css'
+
+export default function App() {
+    //lets use useReducer to get a state and dispatch
+
+    const { name } = useReadPath()
+
+    const initStateWithHref = () => {
+        console.log(
+            'initializing useReducer with name constant from useReadPath',
+            name,
+        )
+        return {
+            name,
+        }
+    }
+
+    const [state, dispatch] = useReducer(
+        reducer,
+        initialState,
+        initStateWithHref,
+    )
+    // onBlur event handler
+
+    return (
+        <StateContext.Provider value={state}>
+            <DispatchContext.Provider value={dispatch}>
+                <div className="App">
+                    <h1>useReducer and useContext Demo</h1>
+                    <FormComponent />
+                </div>
+            </DispatchContext.Provider>
+        </StateContext.Provider>
+    )
+}

redux-excersice/src/components/App.tsx

@@ -2,18 +2,18 @@ import React, { useReducer } from 'react'
 import ComponentB from './ComponentB'
 import reducer from '../reducer'
 import { StateContext, DispatchContext, initialState } from '../constants'
-import './styles.css'
 import { useReadPath } from '../hooks/useReadPath'
+import './styles.css'
 
-export default function ComponentA() {
+export default function App() {
     //lets use useReducer to get a state and dispatch
 
     const { name } = useReadPath()
 
     const initStateWithHref = () => {
         console.log(
             'initializing useReducer with name constant from useReadPath',
-            name
+            name,
         )
         return {
             name,
@@ -23,7 +23,7 @@ export default function ComponentA() {
     const [state, dispatch] = useReducer(
         reducer,
         initialState,
-        initStateWithHref
+        initStateWithHref,
     )
     // onBlur event handler
 

redux-excersice/src/components/ComponentA.js

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react'
-import ComponentC from './ComponentC'
 import { StateContext, DispatchContext } from '../constants'
+import { ComponentC } from './ComponentC'
 
-export default function ComponentB() {
+export const ComponentB = () => {
     const state = useContext(StateContext)
     const dispatch = useContext(DispatchContext)
     const handleOnChangeEvent = (
-        event: React.ChangeEvent<HTMLInputElement>
+        event: React.ChangeEvent<HTMLInputElement>,
     ) => {
         dispatch({
             type: 'CHANGE_NAME',

redux-excersice/src/components/ComponentA.test.js

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react'
 import { StateContext, DispatchContext } from '../constants'
-
-export default function ComponentC() {
+export const ComponentC = () => {
     const state = useContext(StateContext)
     const dispatch = useContext(DispatchContext)
     const handleReset = () => {

redux-excersice/src/components/ComponentA.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react'
+import { useCallback } from 'react'
+
+interface CustomInputProps {
+    inputName: string
+    onInputChange: (inputName: string, value: string) => void
+    labelText: string
+    inputType: string
+    hasError: boolean
+    inputValue: string
+}
+
+export const CustomInput = ({
+    inputName,
+    onInputChange,
+    labelText,
+    inputType,
+    hasError,
+    inputValue,
+}: CustomInputProps) => {
+    const onFieldChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            onInputChange(inputName, event.target.value)
+        },
+        [onInputChange, inputName],
+    )
+
+    return (
+        <>
+            <label>{labelText}</label>
+            <input
+                type={inputType}
+                name={inputName}
+                id={inputName}
+                onChange={onFieldChange}
+                value={inputValue}
+            />
+            {hasError && <p>{`Invalid value for "${labelText}".`}</p>}
+        </>
+    )
+}