Merge pull request #348 from ashik-75/work

update box shadow and test
lifeparticle · Oct 9, 2023 · 57c137c · 57c137c
2 parents 6c01d68 + 81fe78e
commit 57c137c
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 194 deletions.
diff --git a/ui/src/components/General/CodeEditor/components/ValidateStatus.tsx b/ui/src/components/General/CodeEditor/components/ValidateStatus.tsx
@@ -17,6 +17,7 @@ const ValidateStatus: React.FC<ValidateStatusProps> = ({ status }) => {
 		<Space
 			className={style.codeeditor__validator}
 			style={{ backgroundColor: colorBgContainer }}
+			role="validation"
 		>
 			{status === "valid" ? (
 				<span className={style.codeeditor__validator__success}>

diff --git a/ui/src/components/General/CodeEditor/components/__tests__/ValidationStatus.test.tsx b/ui/src/components/General/CodeEditor/components/__tests__/ValidationStatus.test.tsx
@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { describe } from "vitest";
+import ValidateStatus from "components/General/CodeEditor/components/ValidateStatus";
+
+describe("BASE64", () => {
+	test("render component without crash", () => {
+		render(<ValidateStatus status="" />);
+	});
+
+	test("should not render Space when status is empty", () => {
+		const { container } = render(<ValidateStatus status="" />);
+		const spaceElement = container.querySelector('[role="validation"]');
+		expect(spaceElement).toBeNull();
+	});
+
+	test("should render Space when status has a value", () => {
+		const { container } = render(<ValidateStatus status="valid" />);
+		const spaceElement = container.querySelector('[role="validation"]');
+		expect(spaceElement).toBeInTheDocument();
+	});
+});
diff --git a/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss b/ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
@@ -1,19 +1,14 @@
-.br {
+.bs {
+	display: flex;
+	flex-direction: column;
+	gap: var(--bt-size-20);
+	&__input {
+		height: 100%;
+	}
 	&__output {
+		height: 100%;
 		display: flex;
+		align-items: center;
 		justify-content: center;
-
-		&_text,
-		&_img {
-			width: 100%;
-			aspect-ratio: 7 / 3;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		&_text {
-			overflow: hidden;
-		}
 	}
 }
diff --git a/ui/src/pages/CSS/BoxShadow/index.tsx b/ui/src/pages/CSS/BoxShadow/index.tsx
@@ -7,122 +7,120 @@ import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import InputGrid from "components/Layouts/InputGrid";
 
 const BoxShadow = () => {
+	const [bgColor, setBgColor] = useState("#ffffff0");
 	const [shadowColor, setShadowColor] = useState("#ddd");
 	const [boxColor, setBoxColor] = useState("#df6a0b77");
-	const [horizontalLength, setHorizontalLength] = useState(0);
-	const [verticalLength, setVerticalLength] = useState(0);
+	const [horizontalLength, setHorizontalLength] = useState(10);
+	const [verticalLength, setVerticalLength] = useState(10);
 	const [blurRadius, setBlurRadius] = useState(0);
 	const [spreadRadius, setSpreadRadius] = useState(0);
-	const [opacity, setOpacity] = useState(0);
+
+	const boxStyle = {
+		width: "300px",
+		height: "300px",
+		backgroundColor: boxColor,
+		margin: "20px auto",
+		boxShadow: `${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor}`,
+	};
 
 	const generateCSSCodeString = () => {
-		return "";
+		const webkit = `-webkit-box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`;
+		const mozila = `-moz-box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`;
+		const boxShadow = `box-shadow: ${horizontalLength}px ${verticalLength}px ${blurRadius}px ${spreadRadius}px ${shadowColor};`;
+
+		return `${webkit}\n${mozila}\n${boxShadow}`;
 	};
 
 	return (
-		<PageGrid className={style.br}>
-			<Card>
-				<Form layout="vertical">
-					<InputGrid>
-						<ColorPickerWithInput
-							label="Shadow color"
-							value={shadowColor}
-							setValue={(e) => setShadowColor(e.target.value)}
-							setColor={setShadowColor}
-						/>
+		<div className={style.bs}>
+			<PageGrid>
+				<Card className={style.bs__input}>
+					<Form layout="vertical">
+						<InputGrid>
+							<ColorPickerWithInput
+								label="Shadow color"
+								value={shadowColor}
+								setValue={(e) => setShadowColor(e.target.value)}
+								setColor={setShadowColor}
+							/>
+							<ColorPickerWithInput
+								label="Box color"
+								value={boxColor}
+								setValue={(e) => setBoxColor(e.target.value)}
+								setColor={setBoxColor}
+							/>
+						</InputGrid>
+
 						<ColorPickerWithInput
-							label="Box color"
-							value={boxColor}
-							setValue={(e) => setBoxColor(e.target.value)}
-							setColor={setBoxColor}
+							label="Background color"
+							value={bgColor}
+							setValue={(e) => setBgColor(e.target.value)}
+							setColor={setBgColor}
 						/>
-					</InputGrid>
 
-					<Form.Item label="Horizontal length">
-						<Slider
-							defaultValue={0}
-							value={horizontalLength}
-							onChange={(value: number) => {
-								if (value) {
-									setHorizontalLength(value);
-								}
-							}}
-						/>
-					</Form.Item>
-					<Form.Item label="Vertical length">
-						<Slider
-							defaultValue={0}
-							value={verticalLength}
-							onChange={(value) => {
-								if (value) {
-									setVerticalLength(value);
-								}
-							}}
-						/>
-					</Form.Item>
-					<Form.Item label="Blur radius">
-						<Slider
-							defaultValue={0}
-							value={blurRadius}
-							onChange={(value) => {
-								if (value) {
-									setBlurRadius(value);
-								}
-							}}
-						/>
-					</Form.Item>
-					<Form.Item label="Spread radius">
-						<Slider
-							defaultValue={0}
-							value={spreadRadius}
-							onChange={(value) => {
-								if (value) {
-									setSpreadRadius(value);
-								}
-							}}
-						/>
-					</Form.Item>
-					<Form.Item label="Opacity">
-						<Slider
-							defaultValue={0}
-							value={opacity}
-							onChange={(value) => {
-								if (value) {
-									setOpacity(value);
-								}
-							}}
-						/>
-					</Form.Item>
-				</Form>
-			</Card>
+						<Form.Item label="Horizontal length">
+							<Slider
+								defaultValue={0}
+								value={horizontalLength}
+								onChange={(value: number) => {
+									if (value) {
+										setHorizontalLength(value);
+									}
+								}}
+							/>
+						</Form.Item>
+						<Form.Item label="Vertical length">
+							<Slider
+								defaultValue={0}
+								value={verticalLength}
+								onChange={(value) => {
+									if (value) {
+										setVerticalLength(value);
+									}
+								}}
+							/>
+						</Form.Item>
+						<Form.Item label="Blur radius">
+							<Slider
+								defaultValue={0}
+								value={blurRadius}
+								onChange={(value) => {
+									if (value) {
+										setBlurRadius(value);
+									}
+								}}
+							/>
+						</Form.Item>
+						<Form.Item label="Spread radius">
+							<Slider
+								defaultValue={0}
+								value={spreadRadius}
+								onChange={(value) => {
+									if (value) {
+										setSpreadRadius(value);
+									}
+								}}
+							/>
+						</Form.Item>
+					</Form>
+				</Card>
 
-			<Card className={style.br__output}>
-				<Space direction="vertical">
-					<div
-						style={{
-							width: 400,
-							height: 300,
-							backgroundColor: shadowColor,
-							transform: `translate(${horizontalLength}px, ${verticalLength}px)`,
-						}}
-					>
-						<div
-							style={{
-								width: 400,
-								height: 300,
-								backgroundColor: boxColor,
-								position: "absolute",
-							}}
-						></div>
-					</div>
-					<br />
-					<CodeHighlightWithCopy
-						codeString={generateCSSCodeString()}
-						language="css"
-					/>
-				</Space>
+				<Card
+					className={style.bs__output}
+					style={{ background: bgColor }}
+				>
+					<Space direction="vertical">
+						<div style={boxStyle}></div>
+					</Space>
+				</Card>
+			</PageGrid>
+			<Card>
+				<CodeHighlightWithCopy
+					codeString={generateCSSCodeString()}
+					language="json"
+				/>
 			</Card>
-		</PageGrid>
+		</div>
 	);
 };
 

diff --git a/ui/src/pages/Converter/Base64/__tests__/base64.test.tsx b/ui/src/pages/Converter/Base64/__tests__/base64.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen } from "@testing-library/react";
 import { describe } from "vitest";
-import user from "@testing-library/user-event";
 import Base64 from "pages/Converter/Base64";
 
 describe("BASE64", () => {
@@ -11,13 +10,16 @@ describe("BASE64", () => {
 	test("textbox", async () => {
 		render(<Base64 />);
 
-		const TEXT = "hello";
+		const outputLabel = screen.getByText(/base64/i);
 
-		const textInputArea = screen.getByPlaceholderText(/decoded text/i);
-		expect(textInputArea).toBeInTheDocument();
+		expect(outputLabel).toBeInTheDocument();
+	});
+
+	test("test whetever how many validation exists", async () => {
+		const { container } = render(<Base64 />); // Render your component and get the container
 
-		await user.type(textInputArea, TEXT);
+		const spanElements = container.getElementsByClassName("ant-btn-icon");
 
-		expect(textInputArea).toHaveValue(TEXT);
+		expect(spanElements[0]).toBeInTheDocument();
 	});
 });
diff --git a/ui/src/pages/Converter/Base64/index.tsx b/ui/src/pages/Converter/Base64/index.tsx
@@ -30,7 +30,6 @@ const Base64: React.FC = () => {
 			<Card>
 				<Form layout="vertical">
 					<CodeEditor
-						status={status}
 						label="Text"
 						code={input}
 						language={" "}

diff --git a/ui/src/pages/Converter/Base64/tests/base64.test.tsx b/ui/src/pages/Converter/Base64/tests/base64.test.tsx
diff --git a/ui/src/pages/Converter/JsonToTypescript/__tests__/JsonToTypescript.test.tsx b/ui/src/pages/Converter/JsonToTypescript/__tests__/JsonToTypescript.test.tsx
diff --git a/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx b/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx
@@ -7,15 +7,6 @@ describe("JsonToTs", () => {
 		render(<JsonToTypescript key={101} />);
 	});
 
-	test("render json textfield", () => {
-		render(<JsonToTypescript key={101} />);
-
-		const rootInterfacenameInput = screen.getByPlaceholderText(
-			"Enter Interface name"
-		);
-		expect(rootInterfacenameInput).toBeInTheDocument();
-	});
-
 	test("show initial warning text", () => {
 		render(<JsonToTypescript key={101} />);