Skip to content

Commit

Permalink
feat(usedynamicinputs): adds support for a plain object override
Browse files Browse the repository at this point in the history
  • Loading branch information
@aviemet
aviemet committed May 2, 2024
1 parent ac7559b commit 08698f5
Show file tree
Hide file tree
Showing 5 changed files with 2,293 additions and 1,318 deletions.
55 changes: 28 additions & 27 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,61 +40,62 @@
"cz": "git-cz"
},
"dependencies": {
"@inertiajs/react": "^1.0.14",
"@inertiajs/react": "^1.0.16",
"axios": "^1.6.8",
"lodash.get": "^4.4.2",
"lodash.set": "^4.3.2",
"react-dom": "^18.2.0"
"react-dom": "^18.3.1"
},
"devDependencies": {
"@commitlint/cli": "^18.4.3",
"@commitlint/config-conventional": "^18.4.3",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^15.0.6",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.5.1",
"@types/jest": "^29.5.11",
"@types/lodash": "^4.14.202",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/lodash": "^4.17.0",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.8.0",
"@typescript-eslint/parser": "^7.8.0",
"axios-mock-adapter": "^1.22.0",
"commitizen": "^4.3.0",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^8.55.0",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint": "^9.1.1",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-better-styled-components": "^1.1.2",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-testing-library": "^6.2.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-testing-library": "^6.2.2",
"git-cz": "^4.9.0",
"husky": "^8.0.3",
"husky": "^9.0.11",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-mock-axios": "^4.7.3",
"lint-staged": "^15.2.0",
"msw": "^2.0.11",
"react": "^18.2.0",
"react-test-renderer": "^18.2.0",
"lint-staged": "^15.2.2",
"msw": "^2.2.14",
"react": "^18.3.1",
"react-test-renderer": "^18.3.1",
"rimraf": "^5.0.5",
"rollup": "^4.9.0",
"rollup": "^4.17.2",
"rollup-plugin-filesize": "^10.0.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-ts": "^3.4.5",
"rollup-plugin-typescript2": "^0.36.0",
"semantic-release": "^22.0.12",
"ts-jest": "^29.1.1",
"typescript": "^5.3.3"
"semantic-release": "^23.0.8",
"ts-jest": "^29.1.2",
"typescript": "^5.4.5"
},
"peerDependencies": {
"@inertiajs/react": "^1.0.0",
Expand Down
1 change: 0 additions & 1 deletion src/useDynamicInputs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const useDynamicInputs = <T extends Record<string, unknown>>({ model, emptyData
inputModel = `${inputModel}.${model || ''}`

const handleAddInputs: AddInputHandler<T> = useCallback(override => {
console.log({ override })
setData((formData: T) => {
const clone = structuredClone(formData)
let node = get(clone, inputModel) as T[]
Expand Down
78 changes: 56 additions & 22 deletions tests/formComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Input from '../src/Inputs/Input'
import { DynamicInputs, Submit, useDynamicInputs } from '../src'
import { router } from '@inertiajs/react'
import { get } from 'lodash'
import { act, renderHook } from '@testing-library/react-hooks'
import { act } from '@testing-library/react-hooks'

const initialData = {
user: {
Expand Down Expand Up @@ -59,7 +59,7 @@ describe('Form Component', () => {
expect(input).toHaveValue('modified form data')
})

it('sends the correct data to the server upon form submit', async () => {
it('sends the correct data to the server upon form submit', () => {
const mockRequest = jest.spyOn(router, 'visit').mockImplementation((route, request) => {
const data = request?.data
expect(get(data, 'person.nested.key')).toBe('value')
Expand Down Expand Up @@ -109,7 +109,7 @@ describe('Form Component', () => {
expect(input).toHaveValue('rails attributes')
})

it('sends the correct data to the server upon form submit', async () => {
it('sends the correct data to the server upon form submit', () => {
const mockRequest = jest.spyOn(router, 'visit').mockImplementation((route, request) => {
const data = request?.data

Expand Down Expand Up @@ -163,35 +163,69 @@ describe('Form Component', () => {
})

it('adds inputs', () => {
const formProviderWrapper = ({ children }) => (
let form, inputs

render(
<Form to="/form" data={ initialData } model="contact" remember={ false }>
{ children }
</Form>
<TestComponent />
</Form>,
)
const { result } = renderHook(
() => useDynamicInputs({

function TestComponent() {
form = useForm<typeof initialData>()
inputs = useDynamicInputs({
model: 'phones',
emptyData: { number: '' },
}),
{ wrapper: formProviderWrapper },
)
})
return null
}

act(() => {
inputs.addInput()
inputs.addInput({ number: '1' })
inputs.addInput(records => {
return ({
number: `${parseInt(records[1].number) + 1}`,
})
})
})

const phones = form.getData('contact.phones')

expect(phones).toContainEqual({ number: '' })
expect(phones).toContainEqual({ number: '1' })
expect(phones).toContainEqual({ number: '2234567891' })
})

it('removes inputs', () => {
let form, inputs

const { result: formResult } = renderHook(
() => useForm<typeof initialData>(),
{ wrapper: formProviderWrapper },
render(
<Form to="/form" data={ initialData } model="contact" remember={ false }>
<TestComponent />
</Form>,
)

function TestComponent() {
form = useForm<typeof initialData>()
inputs = useDynamicInputs({
model: 'phones',
emptyData: { number: '' },
})
return null
}

let phones = form.getData('contact.phones')
expect(phones.length).toEqual(3)

act(() => {
result.current.addInput()
result.current.addInput({ number: '1' })
result.current.addInput(records => ({
number: `${Number(records[0]) + 1}`,
}))
inputs.removeInput(1)
})

expect(formResult.current.getData('contact.phones')).toContain({ number: '' })
expect(formResult.current.getData('contact.phones')).toContain({ number: '1' })
expect(formResult.current.getData('contact.phones')).toContain({ number: '1234567891' })
phones = form.getData('contact.phones')

expect(phones.length).toEqual(2)
expect(phones).not.toContainEqual({ number: '2234567890' })
})
})

Expand Down
13 changes: 9 additions & 4 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@
"compilerOptions": {
"target": "ESNext",
"module": "esnext",
"lib": ["dom", "esnext"],
"lib": [
"dom",
"esnext"
],
"jsx": "react",
"declaration": true,
"sourceMap": true,
"noEmit": true,
"outDir": "dist",
"strict": false,
"noUnusedLocals": false,
"noUnusedLocals": true,
"noUnusedParameters": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
Expand All @@ -22,5 +25,7 @@
"./node_modules/@types",
],
},
"include": ["src", "useInertiaForm.ts.bak"]
}
"include": [
"src"
]
}
Loading

0 comments on commit 08698f5

Please sign in to comment.