chore: add support for test id in top nav

razorpay · Dec 1, 2024 · 0c3ad46 · 0c3ad46
1 parent bc2811a
commit 0c3ad46
Show file tree

Hide file tree

Showing 4 changed files with 794 additions and 3 deletions.
diff --git a/packages/blade/src/components/TopNav/TopNav.web.tsx b/packages/blade/src/components/TopNav/TopNav.web.tsx
@@ -11,7 +11,7 @@ import { makeSize } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { componentZIndices } from '~utils/componentZIndices';
-import type { DataAnalyticsAttribute } from '~utils/types';
+import type { DataAnalyticsAttribute, TestID } from '~utils/types';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
 
 const TOP_NAV_HEIGHT = size[56];
@@ -38,6 +38,7 @@ type TopNavProps = {
   | 'zIndex'
   | keyof DataAnalyticsAttribute
 > &
+  TestID &
   StyledPropsBlade;
 
 const TopNav = ({ children, ...rest }: TopNavProps): React.ReactElement => {
@@ -54,7 +55,7 @@ const TopNav = ({ children, ...rest }: TopNavProps): React.ReactElement => {
       height={makeSize(TOP_NAV_HEIGHT)}
       zIndex={componentZIndices.topnav}
       {...rest}
-      {...metaAttribute({ name: MetaConstants.TopNav })}
+      {...metaAttribute({ name: MetaConstants.TopNav, testID: rest.testID })}
       {...makeAnalyticsAttribute(rest)}
     >
       {children}

diff --git a/packages/blade/src/components/TopNav/__tests__/TopNav.web.test.tsx b/packages/blade/src/components/TopNav/__tests__/TopNav.web.test.tsx
@@ -20,4 +20,9 @@ describe('TopNav', () => {
     const { container } = renderWithTheme(<TopNavExample />);
     expect(container).toMatchSnapshot();
   });
+
+  test('it shpuld support adding test Id', () => {
+    const { container } = renderWithTheme(<TopNavExample />);
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/blade/src/components/TopNav/__tests__/TopNavExample.web.tsx b/packages/blade/src/components/TopNav/__tests__/TopNavExample.web.tsx
@@ -12,7 +12,11 @@ import { Text } from '~components/Typography';
 const TopNavExample = (): React.ReactElement => {
   return (
     <Box height="100vh" backgroundColor="surface.background.gray.intense">
-      <TopNav backgroundColor="surface.background.gray.intense" data-analytics-topnav="demo">
+      <TopNav
+        backgroundColor="surface.background.gray.intense"
+        data-analytics-topnav="demo"
+        testID="demo"
+      >
         <TopNavBrand>
           <RazorpayLogo />
         </TopNavBrand>