From 4d6e010ac01fb2603f68e5a91d94c7ea40c445f9 Mon Sep 17 00:00:00 2001
From: Lina <lina.lumburovska@kern.ai>
Date: Wed, 4 Mar 2026 16:05:55 +0100
Subject: [PATCH] First draft of Cypress tests

---
 components/KernDropdown.tsx           | 6 ++++--
 components/kern-button/KernButton.tsx | 5 ++++-
 types/dropdown.ts                     | 4 ++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/KernDropdown.tsx b/components/KernDropdown.tsx
index 178d5aa..961f823 100644
--- a/components/KernDropdown.tsx
+++ b/components/KernDropdown.tsx
@@ -204,7 +204,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                         aria-hidden="true"
                     />
                 </div> : <>
-                    {props.hasButtonDots ? (<Menu.Button onClick={toggleDropdown} className="group relative inline-flex h-8 w-8 items-center justify-center rounded-full">
+                    {props.hasButtonDots ? (<Menu.Button onClick={toggleDropdown} className="group relative inline-flex h-8 w-8 items-center justify-center rounded-full" {...(props.buttonDataCy && { 'data-cy': props.buttonDataCy })}>
                         <span className="flex h-full w-full items-center justify-center rounded-full">
                             <MemoIconDotsVertical
                                 size={24}
@@ -214,7 +214,8 @@ export default function KernDropdown(props: KernDropdownProps) {
                     </Menu.Button>
                     ) : (<Menu.Button onClick={toggleDropdown} className={`inline-flex w-full justify-between items-center rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm  focus:outline-none focus:ring-2
             focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed ${props.buttonClasses ?? ''} ${props.buttonCaptionBgColor ?? 'bg-white hover:bg-gray-50'}`}
-                        disabled={isDisabled}>
+                        disabled={isDisabled}
+                        {...(props.buttonDataCy && { 'data-cy': props.buttonDataCy })}>
                         <div className={`flex items-center gap-x-1 ${props.truncateButtonName ? 'max-w-[300px] truncate' : ''}`}>
                             {props.buttonPrefixIcon}
                             {!props.hasCheckboxesThreeStates && props.buttonName}
@@ -250,6 +251,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                                         <div className='w-full'>
                                             <Tooltip content={props.tooltipsArray && props.tooltipsArray[index]} placement={props.tooltipArrayPlacement ?? 'left'} color="invert" style={{ width: '100%' }} className={disabledOptions[index] ? 'pointer-events-none' : ''}>
                                                 <label htmlFor="option"
+                                                    {...(props.optionDataCy && props.optionDataCy[index] && { 'data-cy': props.optionDataCy[index] })}
                                                     className={combineClassNames(
                                                         disabledOptions[index] ? "opacity-50 cursor-not-allowed" : "opacity-100 cursor-pointer",
                                                         backgroundColors[index], props.useDifferentTextColor && props.useDifferentTextColor[index] ? 'text-' + props.differentTextColor + '-700' : active && !backgroundColors[index] ? "bg-gray-100 text-gray-900" : "text-gray-700",
diff --git a/components/kern-button/KernButton.tsx b/components/kern-button/KernButton.tsx
index 7ae75c4..1303779 100644
--- a/components/kern-button/KernButton.tsx
+++ b/components/kern-button/KernButton.tsx
@@ -23,6 +23,8 @@ interface KernButtonProps {
     confirm?: boolean;
     className?: string;
     asDiv?: boolean;
+    /** Optional data-testid for E2E tests */
+    dataTestId?: string;
 }
 
 export default function KernButton(props: KernButtonProps) {
@@ -69,7 +71,8 @@ export default function KernButton(props: KernButtonProps) {
         className: buttonClasses,
         ref: props.innerRef,
         disabled: props.disabled,
-        type: props.type || 'submit'
+        type: props.type || 'submit',
+        ...(props.dataTestId && { 'data-testid': props.dataTestId }),
     }
 
     const children = <Tooltip className={"flex gap-x-2 items-center " + (props.disabled ? "cursor-not-allowed" : "")} color="invert" content={props.tooltip} placement={props.tooltipPlacement || "bottom"} >
diff --git a/types/dropdown.ts b/types/dropdown.ts
index b2533df..c81d1d0 100644
--- a/types/dropdown.ts
+++ b/types/dropdown.ts
@@ -96,6 +96,10 @@ export type KernDropdownProps = {
     forceOverwriteOpen?: boolean;
     truncateButtonName?: boolean;
     placeholder?: string;
+    /** Optional data-cy for the trigger button (e.g. for E2E tests). */
+    buttonDataCy?: string;
+    /** Optional data-cy for each option (same order as options; e.g. for E2E tests). */
+    optionDataCy?: string[];
 }
 
 export type AppSelectionDropdownProps = {