From 478b3130451879ed329d8e44f6bbc79cd4bdf41d Mon Sep 17 00:00:00 2001
From: soomin9106 <soomin9106@naver.com>
Date: Sun, 9 Jun 2024 00:44:12 +0900
Subject: [PATCH] test: add subscribe bottom bar test & remove articlePopup
 test

---
 .../ExternalControlOpenDialog.test.ts         |   5 -
 .../SubscribeBottomBar.test.tsx               | 103 ++++++++++++++++++
 2 files changed, 103 insertions(+), 5 deletions(-)
 delete mode 100644 src/common/components/ExternalControlOpenDialog/ExternalControlOpenDialog.test.ts
 create mode 100644 src/main/components/SubscribeBottomBar/SubscribeBottomBar.test.tsx

diff --git a/src/common/components/ExternalControlOpenDialog/ExternalControlOpenDialog.test.ts b/src/common/components/ExternalControlOpenDialog/ExternalControlOpenDialog.test.ts
deleted file mode 100644
index def2e884..00000000
--- a/src/common/components/ExternalControlOpenDialog/ExternalControlOpenDialog.test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-describe("FEW 단위 테스트", () => {
-  it("FEW 최고!", () => {
-    // ...
-  });
-});
diff --git a/src/main/components/SubscribeBottomBar/SubscribeBottomBar.test.tsx b/src/main/components/SubscribeBottomBar/SubscribeBottomBar.test.tsx
new file mode 100644
index 00000000..d3e00ba3
--- /dev/null
+++ b/src/main/components/SubscribeBottomBar/SubscribeBottomBar.test.tsx
@@ -0,0 +1,103 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import SubscribeBottomBar from '.';
+import { EMAIL_PLACEHOLDER, SUBSCRIBE_CONFIRM, SUBSCRIBE_ANNOUCE, SUBSCRIBE_TITLE_FEW, INVALID_EMAIL, SUBSCRIBE_SUCCESS } from '@main/constants/main';
+import { useSubscribeForm } from '@main/hooks/useSubscribeForm';
+import { useForm, Controller, Control, FieldValues, FormProvider } from 'react-hook-form';
+import * as useToastModule from '@shared/components/ui/use-toast';  // import as module
+import { useToast } from '@shared/components/ui/use-toast';
+import { EmailSubscribeFormData } from '@main/types';
+
+// Mock the useSubscribeForm hook
+const mockOnSubmit = vi.fn();
+
+vi.mock('@main/hooks/useSubscribeForm', () => ({
+  useSubscribeForm: () => {
+    const form = useForm({
+      resolver: async (data) => {
+        const errors: { email?: { type: string; message: string } } = {};
+        if (data.email && !data.email.includes('@')) {
+          errors.email = {
+            type: 'manual',
+            message: INVALID_EMAIL,
+          };
+        }
+        return {
+          values: Object.keys(errors).length ? {} : data,
+          errors: errors,
+        };
+      },
+    });
+    return { form, onSubmit: mockOnSubmit };
+  },
+}));
+
+// Mock react-hook-form's Controller and FormProvider
+vi.mock('react-hook-form', async () => {
+  const originalModule = await vi.importActual<any>('react-hook-form');
+  return {
+    ...originalModule,
+    Controller: ({ control, name, render }: { control: Control, name: string, render: any }) => render({
+      field: {
+        onChange: vi.fn(),
+        onBlur: vi.fn(),
+        value: '',
+        name,
+        ref: vi.fn(),
+      }
+    }),
+    FormProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    useFormContext: () => ({
+      getFieldState: vi.fn(),
+      formState: { errors: {} },
+    }),
+  };
+});
+
+// Mock useToast hook
+const mockToast = vi.fn();
+
+vi.mock('@shared/components/ui/use-toast', () => ({
+  useToast: () => ({
+    toast: mockToast,
+    dismiss: vi.fn(),
+    toasts: []
+  }),
+}));
+
+
+describe('구독 유도 바텀 바 테스트', () => {
+  it('renders correctly', () => {
+    render(<SubscribeBottomBar />);
+
+    expect(screen.getByText(SUBSCRIBE_TITLE_FEW)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(EMAIL_PLACEHOLDER)).toBeInTheDocument();
+    expect(screen.getByText(SUBSCRIBE_CONFIRM)).toBeInTheDocument();
+    expect(screen.getByText((content) => content.includes(SUBSCRIBE_ANNOUCE.SUBSCRIBE_CONSEQUENCE))).toBeInTheDocument();
+  });
+
+  it('유효하지 않은 이메일을 사용했을 때 에러 띄우기', async () => {
+    render(<SubscribeBottomBar />);
+
+    const input = screen.getByPlaceholderText(EMAIL_PLACEHOLDER) as HTMLInputElement;
+    const submitButton = screen.getByText(SUBSCRIBE_CONFIRM);
+
+    fireEvent.change(input, { target: { value: 'invalid-email' } });
+    fireEvent.click(submitButton);
+
+    expect(screen.queryByText(INVALID_EMAIL)).toBeDefined() // 값이 정의되어 있는 경우?
+  });
+
+  it('유효한 이메일을 입력했을 때 toast 메시지를 표시', async () => {
+  
+    render(<SubscribeBottomBar />);
+
+    const input = screen.getByPlaceholderText(EMAIL_PLACEHOLDER) as HTMLInputElement;
+    const submitButton = screen.getByText(SUBSCRIBE_CONFIRM);
+
+    fireEvent.change(input, { target: { value: 'test@example.com' } });
+    fireEvent.click(submitButton);
+
+    expect(screen.queryByText(SUBSCRIBE_SUCCESS)).toBeDefined()
+  });
+});