*refactor migrate test from enzyme to testng-library

hazelcast · Feb 12, 2025 · 51c3dca · 51c3dca
1 parent 01aaa98
commit 51c3dca
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 27 deletions.
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Tabs_With_Icons.png b/packages/ui/.loki/reference/chrome_minimal_Components_Tabs_With_Icons.png
diff --git a/packages/ui/__stories__/Modal.stories.tsx b/packages/ui/__stories__/Modal.stories.tsx
@@ -105,7 +105,7 @@ export const WithDangerAction = () => (
       {
         children,
         onClick,
-        kind: 'danger',
+        color: 'secondary',
       },
     ]}
   >
@@ -124,7 +124,7 @@ export const WithDangerActionDisabled = () => (
         onClick,
         disabled: true,
         disabledTooltip,
-        kind: 'danger',
+        color: 'secondary',
       },
     ]}
   >
@@ -145,7 +145,7 @@ export const WithMultipleActions = () => (
       {
         children,
         onClick,
-        kind: 'danger',
+        color: 'secondary',
       },
     ]}
   >
@@ -172,10 +172,8 @@ export const WithHiddenModalActions = () => {
         id pellentesque eros pretium.
       </p>
       <div className={styles.footer}>
-        <Button kind="primary" onClick={onClick}>
-          Action
-        </Button>
-        <Button kind="secondary" onClick={onClose}>
+        <Button onClick={onClick}>Action</Button>
+        <Button variant="outlined" onClick={onClose}>
           Cancel
         </Button>
       </div>

diff --git a/packages/ui/__stories__/Overlay.stories.tsx b/packages/ui/__stories__/Overlay.stories.tsx
@@ -9,8 +9,8 @@ import { OverlayProps } from '../src/Overlay'
 const content = (
   <TabContextProvider>
     <TabList ariaLabel="Settings Tabs" className={styles.tablist}>
-      <Tab label="My Account" value={0} />
-      <Tab label="Billing" value={1} />
+      <Tab value={0}>My Account</Tab>
+      <Tab value={1}>Billing</Tab>
     </TabList>
     <TabPanel value={0}>
       <Card title="Account Information">

diff --git a/packages/ui/__stories__/Tabs.stories.tsx b/packages/ui/__stories__/Tabs.stories.tsx
@@ -115,12 +115,15 @@ export const WithIcons = () => (
     <TabList ariaLabel="Tabs Story">
       <Tab ariaLabel="Tab 1" value={0}>
         <Icon icon={Info} ariaLabel="Info" />
+        Tab 1
       </Tab>
       <Tab ariaLabel="Tab 2" value={1}>
         <Icon icon={PenTool} ariaLabel="PenTool" />
+        Tab 2
       </Tab>
       <Tab ariaLabel="Tab 3" value={2}>
         <Icon icon={Settings} ariaLabel="Settings" />
+        Tab 3
       </Tab>
     </TabList>
     <TabPanel value={0}>

diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx
@@ -50,28 +50,30 @@ export const Dialog: FC<DialogProps> = ({
   actionOnConfirm,
   ...rest
 }) => {
-  const actions: ModalProps['actions'] = useMemo(
-    () =>
+  const actions = useMemo(() => {
+    const props: ModalProps['actions'] =
       actionChildren && actionOnConfirm
         ? [
             {
               autoFocus: !actionDangerous,
-              kind: actionDangerous ? 'danger' : 'primary',
-              ...(actionDisabled &&
-                actionDisabledTooltip ? {
-                  disabled: actionDisabled,
-                  disabledTooltip: actionDisabledTooltip,
-                }:{
-                disabled: undefined,
-                disabledTooltip: undefined
-              }),
+              color: actionDangerous ? 'secondary' : 'primary',
+              ...(actionDisabled && actionDisabledTooltip
+                ? {
+                    disabled: actionDisabled,
+                    disabledTooltip: actionDisabledTooltip,
+                  }
+                : {
+                    disabled: undefined,
+                    disabledTooltip: undefined,
+                  }),
               onClick: actionOnConfirm,
               children: actionChildren,
             },
           ]
-        : [],
-    [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren],
-  )
+        : []
+
+    return props
+  }, [actionDangerous, actionDisabled, actionDisabledTooltip, actionOnConfirm, actionChildren])
 
   return (
     <Modal

diff --git a/packages/ui/src/Tabs/Tab.module.scss b/packages/ui/src/Tabs/Tab.module.scss
@@ -24,10 +24,6 @@
   @include c.typographyH3;
   @include h.overflowEllipsis;
 
-  .icon {
-    margin-right: c.$grid * 2;
-  }
-
   &.selected {
     color: c.$colorPrimary;
     border-radius: 0;