chore: fix test case for input

deriv-com · Jul 11, 2024 · 9483634 · 9483634
1 parent 46548d3
commit 9483634
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -8,6 +8,7 @@ import {
     CurrencyDemoIcon,
     CurrencyUsdtIcon,
     CurrencyEthIcon,
+    LegacyChevronDown2pxIcon,
 } from "@deriv/quill-icons";
 
 import { TAccount } from "../src/components/AppLayout/AccountSwitcher/types";
@@ -26,6 +27,7 @@ import {
     Text,
     PlatformSwitcherItem,
     MobileLanguagesDrawer,
+    Dropdown,
 } from "../src/main";
 import { platformsConfig } from "./platformsConfig";
 import { LanguagesItemsDrawerConfig } from "./LanguageItemsDrawerConfig";
@@ -88,6 +90,8 @@ const App = () => {
         LanguagesItemsDrawerConfig.languages.find((language) => {
             return language.code === selectedLanguage;
         })?.icon ?? LanguagesItemsDrawerConfig.languages[0].icon;
+
+    const [message, setMessage] = React.useState("");
     return (
         <>
             {!isMobile ? (
@@ -323,6 +327,88 @@ const App = () => {
                     </Wrapper>
                 </>
             )}
+            {/* Playground */}
+            <div
+                style={{
+                    width: "100vw",
+                    height: "100vh",
+                    display: "grid",
+                    placeContent: "center",
+                }}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "24px",
+                    }}
+                >
+                    <Dropdown
+                        label="Dropdown Label"
+                        list={[
+                            { text: "Option 1", value: "option1" },
+                            { text: "Option 2", value: "option2" },
+                            { text: "Option 3", value: "option3" },
+                        ]}
+                        listHeight="md"
+                        name="dropdownName1"
+                        onSearch={(inputValue: string) =>
+                            console.log(`Input value changed: ${inputValue}`)
+                        }
+                        onSelect={(value: string) => {
+                            console.log(`Selected value: ${value}`);
+                            setMessage("This is an error message");
+                        }}
+                        variant="comboBox"
+                        errorMessage={message}
+                        isFullWidth
+                        dropdownIcon={
+                            <LegacyChevronDown2pxIcon iconSize="xs" />
+                        }
+                    />
+                    <Dropdown
+                        label="Dropdown Label"
+                        list={[
+                            { text: "Option 1", value: "option1" },
+                            { text: "Option 2", value: "option2" },
+                            { text: "Option 3", value: "option3" },
+                        ]}
+                        listHeight="md"
+                        name="dropdownName2"
+                        onSearch={(inputValue: string) =>
+                            console.log(`Input value changed: ${inputValue}`)
+                        }
+                        onSelect={(value: string) => {
+                            console.log(`Selected value: ${value}`);
+                            setMessage("This is an error message");
+                        }}
+                        variant="comboBox"
+                        errorMessage={message}
+                        disabled
+                        isFullWidth
+                    />
+                    <Dropdown
+                        label="Dropdown Label"
+                        list={[
+                            { text: "Option 1", value: "option1" },
+                            { text: "Option 2", value: "option2" },
+                            { text: "Option 3", value: "option3" },
+                        ]}
+                        listHeight="md"
+                        name="dropdownName3"
+                        onSearch={(inputValue: string) =>
+                            console.log(`Input value changed: ${inputValue}`)
+                        }
+                        onSelect={(value: string) => {
+                            console.log(`Selected value: ${value}`);
+                            setMessage("This is an error message");
+                        }}
+                        variant="comboBox"
+                        errorMessage={message}
+                        disabled
+                    />
+                </div>
+            </div>
         </>
     );
 };

diff --git a/src/components/Input/__test__/HelperMessage.test.tsx b/src/components/Input/__test__/HelperMessage.test.tsx
@@ -42,7 +42,7 @@ describe("HelperMessage", () => {
         render(<HelperMessage {...props} disabled variant="disabled" />);
 
         const helperMessage = screen.getByText(props.message);
-        expect(helperMessage).toHaveClass("deriv-helper-message--general");
+        expect(helperMessage).toHaveClass("deriv-helper-message--disabled");
     });
 
     it("should show Error variant", () => {

diff --git a/stories/Dropdown.stories.ts b/stories/Dropdown.stories.ts
@@ -26,6 +26,15 @@ const meta = {
         variant: "comboBox",
         islabelAnimationDisabled: false,
     },
+    argTypes: {
+        list: { control: { type: false } },
+        listHeight: {
+            options: ["lg", "md", "sm", "xs"],
+            control: { type: "select" },
+        },
+        shouldClearValue: { control: { type: "boolean" } },
+        emptyResultMessage: { control: { type: "text" } },
+    },
 } satisfies Meta<typeof Dropdown>;
 
 export default meta;