components: Fix data-cy

Author: tbantle22

packages/components/src/FormSelect/components/CustomOption.tsx

@@ -3,14 +3,19 @@ import React from "react";
 import { Option } from "../types";
 import css from "./index.module.css";
 
-export default function CustomOption<T, OptionType extends Option<T>>(props: {
+type Props<OptionType> = {
   data: OptionType;
-}) {
+  dataCyPrefix: string;
+};
+
+export default function CustomOption<T, OptionType extends Option<T>>(
+  props: Props<OptionType>,
+) {
   return (
     <span
       className={cx({ [css.withIconPath]: !!props.data.iconPath })}
       aria-label={String(props.data.value)}
-      data-cy={String(props.data.value)}
+      data-cy={`${props.dataCyPrefix}-${props.data.value}`}
     >
       {props.data.iconPath && (
         <img src={props.data.iconPath} alt={props.data.label} />

packages/components/src/FormSelect/components/Option.tsx

@@ -13,7 +13,7 @@ export default function OptionComponent<
 >(props: OptionProps<OptionType, IsMulti>): JSX.Element {
   return (
     <components.Option {...props}>
-      <CustomOption data={props.data} />
+      <CustomOption data={props.data} dataCyPrefix="select-option" />
     </components.Option>
   );
 }
@@ -28,7 +28,7 @@ export function OptionForGroup<
       <FiCheck
         className={cx(css.check, { [css.checkInvisible]: !props.isSelected })}
       />
-      <CustomOption data={props.data} />
+      <CustomOption data={props.data} dataCyPrefix="select-option" />
     </components.Option>
   );
 }

packages/components/src/FormSelect/components/SingleValue.tsx

@@ -10,7 +10,7 @@ export default function SingleValueComponent<
 >(props: SingleValueProps<OptionType, IsMulti>): JSX.Element {
   return (
     <components.SingleValue {...props}>
-      <CustomOption data={props.data} />
+      <CustomOption data={props.data} dataCyPrefix="single-value" />
     </components.SingleValue>
   );
 }