From 420b1b246416ab420cbd2ebf0037b96e8cb48925 Mon Sep 17 00:00:00 2001
From: barkstone <barkstone2@gmail.com>
Date: Sun, 15 Dec 2024 13:59:58 +0900
Subject: [PATCH] test: Add test for comments component

---
 .../components/UtterancesComments.test.jsx    | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 react-app/src/components/UtterancesComments.test.jsx

diff --git a/react-app/src/components/UtterancesComments.test.jsx b/react-app/src/components/UtterancesComments.test.jsx
new file mode 100644
index 0000000..a44715d
--- /dev/null
+++ b/react-app/src/components/UtterancesComments.test.jsx
@@ -0,0 +1,54 @@
+import {expect, it, vi} from "vitest";
+import {cleanup, render} from "@testing-library/react";
+import UtterancesComments from "./UtterancesComments.jsx";
+import data from '../stores/data.json'
+
+describe('UtterancesComments 컴포넌트 렌더링 시', () => {
+  beforeAll(() => {
+    vi.mock('../stores/data.json', () => ({
+      default: {
+        isEnableComments: false,
+        repo: 'example/repo',
+        theme: 'github-light'
+      }
+    }))
+  })
+  
+  afterEach(() => {
+    cleanup();
+  });
+  
+  it('코멘트가 비활성화된 상태면 스크립트 태그가 렌더링되지 않는다.', () => {
+    data.isEnableComments = false;
+    const { container } = render(<UtterancesComments />);
+    expect(container.querySelector('script')).toBeNull();
+  });
+  
+  it('코멘트가 활성화된 상태면 스크립트 태그가 렌더링 된다.', () => {
+    data.isEnableComments = true;
+
+    const { container } = render(<UtterancesComments />);
+    const script = container.querySelector('script');
+    
+    expect(script).not.toBeNull();
+    expect(script.src).toBe('https://utteranc.es/client.js');
+    expect(script.getAttribute('issue-term')).toBe('pathname');
+    expect(script.getAttribute('repo')).toBe('example/repo');
+    expect(script.getAttribute('theme')).toBe('github-light');
+    expect(script.crossOrigin).toBe('anonymous');
+    expect(script.async).toBe(true);
+  });
+  
+  it('컴포넌트가 언마운트될 때 스크립트 태그가 제거된다.', () => {
+    data.isEnableComments = true;
+    const { container, unmount } = render(<UtterancesComments />);
+    const commentsDiv = container.querySelector('div');
+    
+    expect(commentsDiv).not.toBeNull();
+    expect(commentsDiv.innerHTML).not.toBe('');
+    
+    unmount();
+    
+    expect(commentsDiv.innerHTML).toBe('');
+  });
+});
\ No newline at end of file