From 25fbc6465af00cf4ab7c37c302a1f89e0f9ef28a Mon Sep 17 00:00:00 2001
From: HoJin KIM <76891694+hovelopin@users.noreply.github.com>
Date: Tue, 10 Oct 2023 19:31:47 +0900
Subject: [PATCH] Test/validate email (#161)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* test : validateEmail props

* test : email test logic 수정
---
 test/validateEmail.test.tsx | 94 +++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 test/validateEmail.test.tsx

diff --git a/test/validateEmail.test.tsx b/test/validateEmail.test.tsx
new file mode 100644
index 0000000..78dbe42
--- /dev/null
+++ b/test/validateEmail.test.tsx
@@ -0,0 +1,94 @@
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { ReactMultiEmail } from '../react-multi-email';
+import React from 'react';
+
+afterEach(cleanup);
+
+it('ReactMultiEmail validateEmail function works test', async () => {
+  const mockValidateEmailFunc = jest.fn();
+
+  const { getByRole } = render(
+    <ReactMultiEmail
+      validateEmail={mockValidateEmailFunc}
+      getLabel={(email, index, removeEmail) => {
+        return (
+          <div data-tag key={index}>
+            <div data-tag-item>{email}</div>
+            <span data-tag-handle onClick={() => removeEmail(index)}>
+              ×
+            </span>
+          </div>
+        );
+      }}
+    />,
+  );
+
+  const input = getByRole('textbox') as HTMLElement;
+
+  fireEvent.change(input, { target: { value: 'abc@gmail.com' } });
+  fireEvent.keyUp(input, { key: 'Enter', code: 'Enter' });
+
+  await waitFor(() => {
+    expect(mockValidateEmailFunc).toHaveBeenCalled();
+  });
+});
+
+it('validateEmail = true , test code ending in .com', async () => {
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.(com)$/;
+  const mockValidateEmailFunc = jest.fn().mockImplementation(email => regex.test(email));
+
+  const { getByRole } = render(
+    <ReactMultiEmail
+      validateEmail={mockValidateEmailFunc}
+      getLabel={(email, index, removeEmail) => {
+        return (
+          <div data-tag key={index}>
+            <div data-tag-item>{email}</div>
+            <span data-tag-handle onClick={() => removeEmail(index)}>
+              ×
+            </span>
+          </div>
+        );
+      }}
+    />,
+  );
+
+  const input = getByRole('textbox') as HTMLInputElement;
+
+  fireEvent.change(input, { target: { value: 'abc@gmail.com' } });
+
+  await waitFor(() => {
+    expect(mockValidateEmailFunc(input.value)).toBe(true);
+  });
+});
+
+it('validateEmail = false', async () => {
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.(com)$/;
+  const mockValidateEmailFunc = jest.fn().mockImplementation(email => regex.test(email));
+
+  const { getByRole } = render(
+    <ReactMultiEmail
+      validateEmail={mockValidateEmailFunc}
+      getLabel={(email, index, removeEmail) => {
+        return (
+          <div data-tag key={index}>
+            <div data-tag-item>{email}</div>
+            <span data-tag-handle onClick={() => removeEmail(index)}>
+              ×
+            </span>
+          </div>
+        );
+      }}
+    />,
+  );
+
+  const input = getByRole('textbox') as HTMLInputElement;
+
+  fireEvent.change(input, { target: { value: 'abc@gmail.kr' } });
+
+  await waitFor(() => {
+    expect(mockValidateEmailFunc(input.value)).toBe(false);
+  });
+});
+
+export {};