Skip to content

Commit

Permalink
test: react state가 변하는 focus 메서드를 act 메서드로 wrapping
Browse files Browse the repository at this point in the history
  • Loading branch information
@sungik-choi
sungik-choi committed Apr 29, 2022
1 parent f41c510 commit c91cca6
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 21 deletions.
32 changes: 24 additions & 8 deletions src/components/Forms/Inputs/TextArea/TextArea.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/* External dependencies */
import { act } from '@testing-library/react'
import { fireEvent } from '@testing-library/dom'
import React from 'react'

Expand Down Expand Up @@ -68,7 +69,9 @@ describe('TextArea 테스트 >', () => {
const { getByTestId } = renderComponent({ onFocus })
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]
textareaElement.focus()
act(() => {
textareaElement.focus()
})

jest.advanceTimersByTime(1000)
// eslint-disable-next-line max-len
Expand All @@ -91,7 +94,9 @@ describe('TextArea 테스트 >', () => {
const { getByTestId } = renderComponent({ onFocus, readOnly: true })
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]
textareaElement.focus()
act(() => {
textareaElement.focus()
})

expect(onFocus).not.toBeCalled()
})
Expand All @@ -101,7 +106,9 @@ describe('TextArea 테스트 >', () => {
const { getByTestId } = renderComponent({ onFocus, disabled: true })
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]
textareaElement.focus()
act(() => {
textareaElement.focus()
})

expect(onFocus).not.toBeCalled()
})
Expand All @@ -111,7 +118,9 @@ describe('TextArea 테스트 >', () => {
const { getByTestId } = renderComponent({ onFocus, disabled: true, readOnly: true })
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]
textareaElement.focus()
act(() => {
textareaElement.focus()
})

expect(onFocus).not.toBeCalled()
})
Expand All @@ -121,7 +130,9 @@ describe('TextArea 테스트 >', () => {
const { getByTestId } = renderComponent({ onFocus })
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]
textareaElement.focus()
act(() => {
textareaElement.focus()
})

expect(onFocus).toBeCalled()
})
Expand All @@ -134,7 +145,10 @@ describe('TextArea 테스트 >', () => {
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]

fireEvent.change(textareaElement, { target: { value: 'test' } })
act(() => {
fireEvent.change(textareaElement, { target: { value: 'test' } })
})

expect(onChange).toBeCalled()
})
})
Expand All @@ -145,8 +159,10 @@ describe('TextArea 테스트 >', () => {
const { getByTestId } = renderComponent({ onBlur })
const rendered = getByTestId(TEXT_AREA_TEST_ID)
const textareaElement = rendered.getElementsByTagName('textarea')[0]
textareaElement.focus()
textareaElement.blur()
act(() => {
textareaElement.focus()
textareaElement.blur()
})
expect(onBlur).toBeCalled()
})
})
Expand Down
53 changes: 40 additions & 13 deletions src/components/Forms/Inputs/TextField/TextField.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* External dependencies */
import React from 'react'
import { act } from '@testing-library/react'
import { fireEvent } from '@testing-library/dom'

/* Internal dependencies */
Expand Down Expand Up @@ -107,7 +108,9 @@ describe('TextField', () => {
it('should have focused style when "input" focused', () => {
const { getByTestId } = renderComponent()
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
rendered.getElementsByTagName('input')[0].focus()
act(() => {
rendered.getElementsByTagName('input')[0].focus()
})
expect(rendered).toHaveStyle(`background-color: ${LightFoundation.theme['bg-white-normal']}`)
// eslint-disable-next-line max-len
expect(rendered).toHaveStyle(`box-shadow: 0 0 0 3px ${LightFoundation.theme['bgtxt-blue-light']}, inset 0 0 0 1px ${LightFoundation.theme['bgtxt-blue-normal']}`)
Expand All @@ -119,7 +122,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onFocus })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
input.focus()
act(() => {
input.focus()
})
expect(onFocus).toBeCalled()
})

Expand All @@ -128,7 +133,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onChange })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.change(input, { target: { value: 'test' } })
act(() => {
fireEvent.change(input, { target: { value: 'test' } })
})
expect(onChange).toBeCalled()
})

Expand All @@ -137,7 +144,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onKeyDown })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
act(() => {
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
})
expect(onKeyDown).toBeCalled()
})

Expand All @@ -146,7 +155,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onKeyUp })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
act(() => {
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
})
expect(onKeyUp).toBeCalled()
})
})
Expand All @@ -157,7 +168,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onFocus, disabled: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
input.focus()
act(() => {
input.focus()
})
expect(onFocus).not.toBeCalled()
})

Expand All @@ -166,7 +179,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onFocus, readOnly: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
input.focus()
act(() => {
input.focus()
})
expect(onFocus).not.toBeCalled()
})

Expand All @@ -175,7 +190,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onChange, disabled: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.change(input, { target: { value: 'test' } })
act(() => {
fireEvent.change(input, { target: { value: 'test' } })
})
expect(onChange).not.toBeCalled()
})

Expand All @@ -184,7 +201,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onChange, readOnly: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.change(input, { target: { value: 'test' } })
act(() => {
fireEvent.change(input, { target: { value: 'test' } })
})
expect(onChange).not.toBeCalled()
})

Expand All @@ -193,7 +212,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onKeyDown, disabled: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
act(() => {
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
})
expect(onKeyDown).not.toBeCalled()
})

Expand All @@ -202,7 +223,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onKeyDown, readOnly: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
act(() => {
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
})
expect(onKeyDown).not.toBeCalled()
})

Expand All @@ -211,7 +234,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onKeyUp, disabled: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
act(() => {
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
})
expect(onKeyUp).not.toBeCalled()
})

Expand All @@ -220,7 +245,9 @@ describe('TextField', () => {
const { getByTestId } = renderComponent({ onKeyUp, readOnly: true })
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
const input = rendered.getElementsByTagName('input')[0]
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
act(() => {
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
})
expect(onKeyUp).not.toBeCalled()
})
})
Expand Down

0 comments on commit c91cca6

Please sign in to comment.