diff --git a/test/delimiter.test.tsx b/test/delimiter.test.tsx new file mode 100644 index 0000000..041f016 --- /dev/null +++ b/test/delimiter.test.tsx @@ -0,0 +1,77 @@ +import { cleanup, fireEvent, getByRole, render } from '@testing-library/react'; +import { ReactMultiEmail } from '../react-multi-email'; +import React from 'react'; + +afterEach(cleanup); + +describe('ReactMultiEmail delimiter TEST', () => { + it('Default delimiter test', () => { + const { getByRole } = render( + ( +
+
{email}
+ removeEmail(index)}> + × + +
+ )} + />, + ); + + const inputElem = getByRole('textbox'); + const emailsWrapper = document.querySelector('.data-labels'); + const MAX_TEST_CASE = 3; + + for (let i = 0; i < MAX_TEST_CASE; i++) { + const testValue = i === 0 ? 'test@gmail.com' : i === 1 ? 'test@naver.com' : 'test@tt.com'; + const delimiter = i === 0 ? ' ' : i === 1 ? ',' : ';'; + + fireEvent.change(inputElem, { target: { value: testValue } }); + expect(emailsWrapper?.childElementCount).toEqual(i); + fireEvent.change(inputElem, { target: { value: `${testValue}${delimiter}` } }); + expect(emailsWrapper?.childElementCount).toEqual(i + 1); + } + // 중복 체크 + const duplicationValue = 'test@gmail.com'; + fireEvent.change(inputElem, { target: { value: duplicationValue } }); + expect(emailsWrapper?.childElementCount).toEqual(MAX_TEST_CASE); + fireEvent.change(inputElem, { target: { value: `${duplicationValue};` } }); + expect(emailsWrapper?.childElementCount).toEqual(MAX_TEST_CASE); + }); + + it('Custom delimiter test', () => { + const { getByRole } = render( + ( +
+
{email}
+ removeEmail(index)}> + × + +
+ )} + />, + ); + const inputElem = getByRole('textbox'); + const emailsWrapper = document.querySelector('.data-labels'); + const MAX_TEST_CASE = 2; + + for (let i = 0; i < MAX_TEST_CASE; i++) { + const testValue = i === 0 ? 'test@gmail.com' : 'test@naver.com'; + const delimiter = i === 0 ? '&' : '/'; + + fireEvent.change(inputElem, { target: { value: testValue } }); + expect(emailsWrapper?.childElementCount).toEqual(i); + fireEvent.change(inputElem, { target: { value: `${testValue}${delimiter}` } }); + expect(emailsWrapper?.childElementCount).toEqual(i + 1); + } + // 중복 체크 + const duplicationValue = 'test@gmail.com'; + fireEvent.change(inputElem, { target: { value: duplicationValue } }); + expect(emailsWrapper?.childElementCount).toEqual(MAX_TEST_CASE); + fireEvent.change(inputElem, { target: { value: `${duplicationValue}/` } }); + expect(emailsWrapper?.childElementCount).toEqual(MAX_TEST_CASE); + }); +});