From b2f28e2fe95eab31a798ab0a4a8a97e7a632f4ca Mon Sep 17 00:00:00 2001 From: bh2980 Date: Sun, 26 May 2024 16:49:21 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20style(css):=20bandAxisVarian?= =?UTF-8?q?ts=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts/BandAxis/BandAxis.styles.ts | 13 ------------- src/components/charts/BandAxis/BandAxis.tsx | 18 +++++++++--------- src/components/charts/BandAxis/index.ts | 3 --- 3 files changed, 9 insertions(+), 25 deletions(-) delete mode 100644 src/components/charts/BandAxis/BandAxis.styles.ts diff --git a/src/components/charts/BandAxis/BandAxis.styles.ts b/src/components/charts/BandAxis/BandAxis.styles.ts deleted file mode 100644 index 7c1d1bf..0000000 --- a/src/components/charts/BandAxis/BandAxis.styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { tv } from "@utils/customTV"; - -export const BandAxisVariants = tv({ - variants: { - lineHide: { - true: "stroke-none", - false: "stroke-black", - }, - }, - defaultVariants: { - lineHide: false, - }, -}); diff --git a/src/components/charts/BandAxis/BandAxis.tsx b/src/components/charts/BandAxis/BandAxis.tsx index fec6f8e..69532d2 100644 --- a/src/components/charts/BandAxis/BandAxis.tsx +++ b/src/components/charts/BandAxis/BandAxis.tsx @@ -1,6 +1,5 @@ import { getAxisOrientConfig } from "@utils/getAxisOrientConfig"; import { isEven } from "@utils/isEven"; -import { BandAxisVariants } from "./BandAxis.styles"; import { BandAxisProps } from "./BandAxis.types"; const BandAxis = ({ @@ -10,7 +9,6 @@ const BandAxis = ({ innerTickLength = 6, lineHide, labelHide, - className, ...props }: BandAxisProps) => { const [startPoint, endPoint] = axisScale.range(); @@ -24,8 +22,8 @@ const BandAxis = ({ const [textdX, textdY, path] = getAxisOrientConfig({ orient, startPoint, endPoint, outerTickLength }); return ( - - + + {!lineHide && } {axisScale.domain().map((label, i) => ( - + {!lineHide && ( + + )} {!labelHide && ( {label} diff --git a/src/components/charts/BandAxis/index.ts b/src/components/charts/BandAxis/index.ts index 9142425..80f0caf 100644 --- a/src/components/charts/BandAxis/index.ts +++ b/src/components/charts/BandAxis/index.ts @@ -1,9 +1,6 @@ import BandAxis from "./BandAxis"; -import { BandAxisVariants } from "./BandAxis.styles"; import type { AxisOrient, BandAxisProps } from "./BandAxis.types"; export type { BandAxisProps, AxisOrient }; -export { BandAxisVariants }; - export default BandAxis; From 81f6bd8368968f7aa2b357a90778538683100e5f Mon Sep 17 00:00:00 2001 From: bh2980 Date: Sun, 26 May 2024 16:49:42 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=85=20test(component):=20bandAxis=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BandAxis/__test__/BandAxis.test.tsx | 85 +++++++++++++++++-- 1 file changed, 78 insertions(+), 7 deletions(-) diff --git a/src/components/charts/BandAxis/__test__/BandAxis.test.tsx b/src/components/charts/BandAxis/__test__/BandAxis.test.tsx index 8fe1092..d97011c 100644 --- a/src/components/charts/BandAxis/__test__/BandAxis.test.tsx +++ b/src/components/charts/BandAxis/__test__/BandAxis.test.tsx @@ -1,12 +1,83 @@ -import { composeStory } from "@storybook/react"; +/* eslint-disable testing-library/no-node-access */ + +/* eslint-disable testing-library/no-container */ import { render } from "@testing-library/react"; -import { describe, it } from "vitest"; -import Meta, { Default as DefaultStory } from "../BandAxis.stories"; +import { scaleBand } from "d3-scale"; +import { describe, expect, it } from "vitest"; +import BandAxis from "../BandAxis"; +import type { AxisOrient } from "../BandAxis.types"; + +const createScale = () => scaleBand().domain(["A", "B", "C", "D"]).range([0, 100]); + +describe("BandAxis", () => { + const defaultProps = { + axisScale: createScale(), + orient: "DOWN" as AxisOrient, + outerTickLength: 6, + innerTickLength: 6, + lineHide: false, + labelHide: false, + className: "", + }; + + it("에러 없이 렌더링", () => { + render(); + }); -const Default = composeStory(DefaultStory, Meta); + it("data에 맞는 tick 개수", () => { + const { container } = render(); + const ticks = container.querySelectorAll("g > g"); + expect(ticks.length).toBe(4); + }); + + it("lineHide일 때 path, line 태그 없음", () => { + const { container } = render(); + const path = container.querySelector("path"); + const line = container.querySelector("line"); + + expect(path).toBe(null); + expect(line).toBe(null); + }); + + it("labelHide일 때 text 태그 없음", () => { + const { container } = render(); + const texts = container.querySelectorAll("text"); + expect(texts.length).toBe(0); + }); + + it("orient가 UP | DOWN 일 경우, transform 속성", () => { + const regex = /^translate\([\d.]+,\s*0\)$/; + ["UP", "DOWN"].forEach((orient) => { + const { container } = render(); + const tick = container.querySelector("g > g"); + expect(tick).toHaveAttribute("transform", expect.stringMatching(regex)); + }); + }); + + it("orient가 UP | DOWN 일 경우, line의 y2 존재 및 x2 속성 없음", () => { + ["UP", "DOWN"].forEach((orient) => { + const { container } = render(); + const line = container.querySelector("line"); + expect(line).toHaveAttribute("y2"); + expect(line).not.toHaveAttribute("x2"); + }); + }); + + it("orient가 LEFT | RIGHT 일 경우, transform 속성", () => { + const regex = /^translate\(0,\s*[\d.]+\)$/; + ["LEFT", "RIGHT"].forEach((orient) => { + const { container } = render(); + const tick = container.querySelector("g > g"); + expect(tick).toHaveAttribute("transform", expect.stringMatching(regex)); + }); + }); -describe("band axis", () => { - it("에러 없이 렌더링되어야 합니다.", () => { - render(); + it("orient가 LEFT | RIGHT 일 경우, line의 x2 존재 및 y2 속성 없음", () => { + ["LEFT", "RIGHT"].forEach((orient) => { + const { container } = render(); + const line = container.querySelector("line"); + expect(line).toHaveAttribute("x2"); + expect(line).not.toHaveAttribute("y2"); + }); }); });