From 81fe78ee89cf26f8e1493e1f9bfa57c164e2e935 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Sun, 8 Oct 2023 19:40:33 +0600 Subject: [PATCH] update box shadow and text --- .../CodeEditor/components/ValidateStatus.tsx | 1 + .../__tests__/ValidationStatus.test.tsx | 21 ++ .../pages/CSS/BoxShadow/BoxShadow.module.scss | 23 +- ui/src/pages/CSS/BoxShadow/index.tsx | 202 +++++++++--------- .../Base64/__tests__/base64.test.tsx | 14 +- ui/src/pages/Converter/Base64/index.tsx | 1 - .../Converter/Base64/tests/base64.test.tsx | 17 -- .../__tests__/JsonToTypescript.test.tsx | 45 ---- .../tests/JsonToTypescript.test.tsx | 9 - 9 files changed, 139 insertions(+), 194 deletions(-) create mode 100644 ui/src/components/General/CodeEditor/components/__tests__/ValidationStatus.test.tsx delete mode 100644 ui/src/pages/Converter/Base64/tests/base64.test.tsx delete mode 100644 ui/src/pages/Converter/JsonToTypescript/__tests__/JsonToTypescript.test.tsx diff --git a/ui/src/components/General/CodeEditor/components/ValidateStatus.tsx b/ui/src/components/General/CodeEditor/components/ValidateStatus.tsx index 14e10367..86fc0a35 100644 --- 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 = ({ status }) => { {status === "valid" ? ( diff --git a/ui/src/components/General/CodeEditor/components/__tests__/ValidationStatus.test.tsx b/ui/src/components/General/CodeEditor/components/__tests__/ValidationStatus.test.tsx new file mode 100644 index 00000000..eaa1298f --- /dev/null +++ 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(); + }); + + test("should not render Space when status is empty", () => { + const { container } = render(); + const spaceElement = container.querySelector('[role="validation"]'); + expect(spaceElement).toBeNull(); + }); + + test("should render Space when status has a value", () => { + const { container } = render(); + 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 index 819e409c..8925095f 100644 --- 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 index 18c9098d..d94ce2c3 100644 --- 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 ( - - -
- - setShadowColor(e.target.value)} - setColor={setShadowColor} - /> +
+ + + + + setShadowColor(e.target.value)} + setColor={setShadowColor} + /> + setBoxColor(e.target.value)} + setColor={setBoxColor} + /> + + setBoxColor(e.target.value)} - setColor={setBoxColor} + label="Background color" + value={bgColor} + setValue={(e) => setBgColor(e.target.value)} + setColor={setBgColor} /> - - - { - if (value) { - setHorizontalLength(value); - } - }} - /> - - - { - if (value) { - setVerticalLength(value); - } - }} - /> - - - { - if (value) { - setBlurRadius(value); - } - }} - /> - - - { - if (value) { - setSpreadRadius(value); - } - }} - /> - - - { - if (value) { - setOpacity(value); - } - }} - /> - - - + + { + if (value) { + setHorizontalLength(value); + } + }} + /> + + + { + if (value) { + setVerticalLength(value); + } + }} + /> + + + { + if (value) { + setBlurRadius(value); + } + }} + /> + + + { + if (value) { + setSpreadRadius(value); + } + }} + /> + + + - - -
-
-
-
- - + + +
+ + + + + - +
); }; diff --git a/ui/src/pages/Converter/Base64/__tests__/base64.test.tsx b/ui/src/pages/Converter/Base64/__tests__/base64.test.tsx index 6da0b4ff..3f3d0bbc 100644 --- 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(); - 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(); // 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 index 8eb9536d..f3679e62 100644 --- a/ui/src/pages/Converter/Base64/index.tsx +++ b/ui/src/pages/Converter/Base64/index.tsx @@ -30,7 +30,6 @@ const Base64: React.FC = () => {
{ - test("render component without crash", () => { - render(); - }); - - test("textbox", async () => { - render(); - - const outputLabel = screen.getByText(/base64/i); - - expect(outputLabel).toBeInTheDocument(); - }); -}); diff --git a/ui/src/pages/Converter/JsonToTypescript/__tests__/JsonToTypescript.test.tsx b/ui/src/pages/Converter/JsonToTypescript/__tests__/JsonToTypescript.test.tsx deleted file mode 100644 index c359754d..00000000 --- a/ui/src/pages/Converter/JsonToTypescript/__tests__/JsonToTypescript.test.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { fireEvent, render, screen } from "@testing-library/react"; -import { describe, test } from "vitest"; -import JsonToTypescript from "pages/Converter/JsonToTypescript"; - -describe("JsonToTs", () => { - test("render component without crash", () => { - render(); - }); - - test("render json textfield", () => { - render(); - - const JsonTextbox = screen.getByPlaceholderText("JSON"); - expect(JsonTextbox).toBeInTheDocument(); - - const rootInterfacenameInput = screen.getByPlaceholderText( - "Enter Interface name" - ); - expect(rootInterfacenameInput).toBeInTheDocument(); - }); - - test("generates interfaces on button click", () => { - render(); - - const jsonTextarea = screen.getByPlaceholderText("JSON"); - fireEvent.change(jsonTextarea, { - target: { value: '{"key": "value"}' }, - }); - - const interfaceInput = - screen.getByPlaceholderText(/Enter Interface name/i); - const ROOT_INTERFACE_NAME = "MyInterface"; - - fireEvent.change(interfaceInput, { - target: { value: ROOT_INTERFACE_NAME }, - }); - - const convertButton = screen.getByText("Convert"); - fireEvent.click(convertButton); - - const getValueOfType = screen.getByText(/string/i); - - expect(getValueOfType).toBeInTheDocument(); - }); -}); diff --git a/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx b/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx index 64ef1ebf..d883db73 100644 --- 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(); }); - test("render json textfield", () => { - render(); - - const rootInterfacenameInput = screen.getByPlaceholderText( - "Enter Interface name" - ); - expect(rootInterfacenameInput).toBeInTheDocument(); - }); - test("show initial warning text", () => { render();