✅ test(component): recommendChart 테스트 코드 추가

ISSUES CLOSED: #12

src/components/charts/RecommendChart/RecommendChart.stories.tsx

@@ -32,27 +32,46 @@ const ActiveBuyData = [
   { label: "매도", value: 3 },
   { label: "적극 매도", value: 2 },
 ];
+
+export const ActiveBuy: Story = {
+  render: () => <RecommendChart data={ActiveBuyData} width={320} height={128} />,
+};
+
 const BuyData = [
   { label: "적극 매수", value: 8 },
   { label: "매수", value: 10 },
   { label: "보유", value: 7 },
   { label: "매도", value: 3 },
   { label: "적극 매도", value: 2 },
 ];
+
+export const Buy: Story = {
+  render: () => <RecommendChart data={BuyData} width={320} height={128} />,
+};
+
 const HoldData = [
   { label: "적극 매수", value: 8 },
   { label: "매수", value: 10 },
   { label: "보유", value: 17 },
   { label: "매도", value: 3 },
   { label: "적극 매도", value: 2 },
 ];
+export const Hold: Story = {
+  render: () => <RecommendChart data={HoldData} width={320} height={128} />,
+};
+
 const SellData = [
   { label: "적극 매수", value: 8 },
   { label: "매수", value: 10 },
   { label: "보유", value: 7 },
   { label: "매도", value: 13 },
   { label: "적극 매도", value: 2 },
 ];
+
+export const Sell: Story = {
+  render: () => <RecommendChart data={SellData} width={320} height={128} />,
+};
+
 const ActiveSellData = [
   { label: "적극 매수", value: 8 },
   { label: "매수", value: 10 },
@@ -61,14 +80,6 @@ const ActiveSellData = [
   { label: "적극 매도", value: 12 },
 ];
 
-export const State: Story = {
-  render: () => (
-    <div className="flex gap-md flex-wrap justify-center">
-      <RecommendChart data={ActiveBuyData} width={320} height={128} />
-      <RecommendChart data={BuyData} width={320} height={128} />
-      <RecommendChart data={HoldData} width={320} height={128} />
-      <RecommendChart data={SellData} width={320} height={128} />
-      <RecommendChart data={ActiveSellData} width={320} height={128} />
-    </div>
-  ),
+export const ActiveSell: Story = {
+  render: () => <RecommendChart data={ActiveSellData} width={320} height={128} />,
 };

src/components/charts/RecommendChart/__test__/RecommendChart.test.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable testing-library/no-node-access */
+
+/* eslint-disable testing-library/no-container */
+import { composeStories } from "@storybook/react";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import * as stories from "../RecommendChart.stories";
+
+describe("recommend chart", () => {
+  const { Default, ActiveBuy, ActiveSell, Buy, Hold, Sell } = composeStories(stories);
+
+  it("에러 없이 렌더링", () => {
+    render(<Default />);
+  });
+
+  it("10개의 rect 렌더링", () => {
+    const { container } = render(<Default />);
+
+    const bars = container.querySelectorAll("rect");
+
+    expect(bars.length).toBe(10);
+  });
+
+  it("적극 매수 데이터에서 적극 매수 텍스트를 보여줘야합니다.", () => {
+    const { container } = render(<ActiveBuy />);
+
+    const squareLabel = container.querySelector("svg > text");
+
+    expect(squareLabel).toHaveTextContent("적극 매수");
+  });
+
+  it("매수 데이터에서 매수 텍스트를 보여줘야합니다.", () => {
+    const { container } = render(<Buy />);
+
+    const squareLabel = container.querySelector("svg > text");
+
+    expect(squareLabel).toHaveTextContent("매수");
+    expect(squareLabel).not.toHaveTextContent("적극 매수");
+  });
+
+  it("보유 데이터에서 보유 텍스트를 보여줘야합니다.", () => {
+    const { container } = render(<Hold />);
+
+    const squareLabel = container.querySelector("svg > text");
+
+    expect(squareLabel).toHaveTextContent("보유");
+  });
+
+  it("매도 데이터에서 매도 텍스트를 보여줘야합니다.", () => {
+    const { container } = render(<Sell />);
+
+    const squareLabel = container.querySelector("svg > text");
+
+    expect(squareLabel).toHaveTextContent("매도");
+    expect(squareLabel).not.toHaveTextContent("적극 매도");
+  });
+
+  it("적극 매도 데이터에서 적극 매도 텍스트를 보여줘야합니다.", () => {
+    const { container } = render(<ActiveSell />);
+
+    const squareLabel = container.querySelector("svg > text");
+
+    expect(squareLabel).toHaveTextContent("적극 매도");
+  });
+});