From 2ba14ed15c7d588bf735fbb4202e09495d58e341 Mon Sep 17 00:00:00 2001
From: Robert-Mihai Man <robertmihaiman7@gmail.com>
Date: Wed, 6 Jul 2022 12:48:56 +0300
Subject: [PATCH] feat(select): adds data-test-id to Select component (#2790)

---
 src/components/Select/Select.tsx        | 4 ++++
 src/components/Select/SelectOption.tsx  | 5 ++++-
 src/components/Select/SelectOptions.tsx | 3 +++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 5b292b38c..38c6a57e2 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -29,6 +29,7 @@ export type SelectProps = Omit<
   searchable?: boolean;
   shiftIconLeftwards?: boolean;
   value?: string | undefined;
+  dataTestId?: string;
 };
 
 export const Select: React.FC<SelectProps> = ({
@@ -48,6 +49,7 @@ export const Select: React.FC<SelectProps> = ({
   searchable,
   shiftIconLeftwards = false,
   value,
+  dataTestId,
   ...rest
 }) => {
   const { state, dispatch, Mode, selectRef } = useSelect({ value, defaultValue });
@@ -111,6 +113,7 @@ export const Select: React.FC<SelectProps> = ({
           className='Select__value'
           disabled={disabled}
           onClick={handleToggle}
+          data-test-id={dataTestId}
           aria-haspopup='listbox'
           aria-expanded={state.mode === Mode.Open}
           aria-labelledby={`Select__label--${idRef} Select__value--${idRef}`}
@@ -139,6 +142,7 @@ export const Select: React.FC<SelectProps> = ({
               'Select__options--up': dropDirection === 'up',
               'Select__options--down': dropDirection === 'down'
             })}
+            dataTestId={dataTestId}
             searchable={searchable}
             options={options}
             onSelect={handleSelect}
diff --git a/src/components/Select/SelectOption.tsx b/src/components/Select/SelectOption.tsx
index f0a136d6a..22abab0fe 100644
--- a/src/components/Select/SelectOption.tsx
+++ b/src/components/Select/SelectOption.tsx
@@ -9,6 +9,7 @@ export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onCli
   selected: boolean;
   option: SelectableOption;
   onClick: (option: SelectableOption) => void;
+  dataTestId?: string;
 };
 
 export const SelectOption: React.FC<SelectOptionProps> = ({
@@ -16,7 +17,8 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   selected,
   option,
   onClick,
-  className
+  className,
+  dataTestId
 }) => {
   const ref = useRef<HTMLLIElement>(null);
 
@@ -43,6 +45,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
         'SelectOption--disabled': option.disabled
       })}
       onClick={handleClick}
+      data-test-id={dataTestId ? `${dataTestId}--${option.label.replace(' ', '-')}` : undefined}
       aria-label={option.label}
       aria-selected={selected}
       role='option'
diff --git a/src/components/Select/SelectOptions.tsx b/src/components/Select/SelectOptions.tsx
index b37b84ea3..ab8ab1363 100644
--- a/src/components/Select/SelectOptions.tsx
+++ b/src/components/Select/SelectOptions.tsx
@@ -19,6 +19,7 @@ export type SelectOptionsProps = Omit<
   selectedOption?: SelectableOption | undefined;
   onFocus?(option: SelectableOption): void;
   onSelect(option: SelectableOption): void;
+  dataTestId?: string;
 };
 
 export const SelectOptions: React.FC<SelectOptionsProps> = ({
@@ -30,6 +31,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
   onSelect,
   onFocus,
   className,
+  dataTestId,
   ...rest
 }) => {
   const [searchPhrase, setSearchPhrase] = useState('');
@@ -82,6 +84,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
             id={`SelectOption--${option.value}-${idRef}`}
             key={option.value}
             option={option}
+            dataTestId={dataTestId}
             active={activeOption?.value === option.value}
             selected={selectedOption?.value === option.value}
             onClick={onSelect}