Add testIDs prop to SegmentedControl

department-of-veterans-affairs · Sep 28, 2023 · cbec66f · cbec66f
1 parent e8b0985
commit cbec66f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
@@ -52,6 +52,7 @@ export const twoSegments: Story = {
       'You have 3 unread messages. Review messages in your inbox',
       'Review your folders',
     ],
+    testIDs: ['test-id-1', 'test-id-2'],
   },
   parameters: {
     design: [

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -27,6 +27,8 @@ export type SegmentedControlProps = {
   a11yLabels?: string[]
   /** Optional array of segment accessibility hints */
   a11yHints?: string[]
+  /** Optional array of test IDs for test suites */
+  testIDs?: string[]
 }
 
 type SegmentProps = {
@@ -52,6 +54,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   selected,
   a11yLabels,
   a11yHints,
+  testIDs,
 }) => {
   const { t } = useTranslation()
   const colorScheme = useColorScheme()
@@ -125,6 +128,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         accessibilityValue={accessibilityValue}
         accessibilityRole={'tab'}
         accessibilityState={{ selected: isSelected }}
+        testID={testIDs?.[index]}
       >
         <Text allowFontScaling={false} style={textStyle}>
           {label}