Tests should use find by not just snapshots

Signed-off-by: Olusegun Akintayo <akintayo.segun@gmail.com>
MetaMask · Jun 8, 2023 · 4a7287f · 4a7287f
1 parent 3d8f4ca
commit 4a7287f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/app/component-library/components/Banners/Banner/Banner.test.tsx b/app/component-library/components/Banners/Banner/Banner.test.tsx
@@ -24,7 +24,7 @@ describe('Banner', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render correctly with a start accessory', () => {
+  it('should render correctly with a start accessory', async () => {
     const wrapper = render(
       <Banner
         severity={BannerAlertSeverity.Error}
@@ -33,13 +33,15 @@ describe('Banner', () => {
         description={
           'This is nothing but a test of the emergency broadcast system.'
         }
-        startAccessory={<Text>Start accessory</Text>}
+        startAccessory={<Text>Test Start accessory</Text>}
       />,
     );
+
     expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Start accessory')).toBeDefined();
   });
 
-  it('should render correctly with an action button', () => {
+  it('should render correctly with an action button', async () => {
     const wrapper = render(
       <Banner
         severity={BannerAlertSeverity.Error}
@@ -49,16 +51,18 @@ describe('Banner', () => {
           'This is nothing but a test of the emergency broadcast system.'
         }
         actionButtonProps={{
-          label: 'Action Button',
+          label: 'Test Action Button',
           onPress: () => jest.fn(),
           variant: ButtonVariants.Secondary,
         }}
       />,
     );
+
     expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Action Button')).toBeDefined();
   });
 
-  it('should render correctly with a close button', () => {
+  it('should render correctly with a close button', async () => {
     const wrapper = render(
       <Banner
         severity={BannerAlertSeverity.Error}
@@ -68,7 +72,7 @@ describe('Banner', () => {
           'This is nothing but a test of the emergency broadcast system.'
         }
         actionButtonProps={{
-          label: 'Action Button',
+          label: 'Test Action Button',
           onPress: () => jest.fn(),
           variant: ButtonVariants.Secondary,
         }}
@@ -80,6 +84,9 @@ describe('Banner', () => {
         }}
       />,
     );
+
     expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Action Button')).toBeDefined();
+    expect(await wrapper.queryByTestId('banner-close-button')).toBeDefined();
   });
 });
diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SendFlowAddressFrom should render correctly 1`] = `
+exports[`Banner should render correctly 1`] = `
 <View
   style={
     Object {
@@ -75,7 +75,7 @@ exports[`SendFlowAddressFrom should render correctly 1`] = `
 </View>
 `;
 
-exports[`SendFlowAddressFrom should render correctly with a close button 1`] = `
+exports[`Banner should render correctly with a close button 1`] = `
 <View
   style={
     Object {
@@ -179,7 +179,7 @@ exports[`SendFlowAddressFrom should render correctly with a close button 1`] = `
           }
         }
       >
-        Action Button
+        Test Action Button
       </Text>
     </TouchableOpacity>
   </View>
@@ -193,6 +193,7 @@ exports[`SendFlowAddressFrom should render correctly with a close button 1`] = `
     <TouchableOpacity
       accessible={true}
       activeOpacity={0.5}
+      data-testid="banner-close-button"
       onPress={[Function]}
       onPressIn={[Function]}
       onPressOut={[Function]}
@@ -222,7 +223,7 @@ exports[`SendFlowAddressFrom should render correctly with a close button 1`] = `
 </View>
 `;
 
-exports[`SendFlowAddressFrom should render correctly with a start accessory 1`] = `
+exports[`Banner should render correctly with a start accessory 1`] = `
 <View
   style={
     Object {
@@ -257,7 +258,7 @@ exports[`SendFlowAddressFrom should render correctly with a start accessory 1`]
         }
       }
     >
-      Start accessory
+      Test Start accessory
     </Text>
   </View>
   <View
@@ -299,7 +300,7 @@ exports[`SendFlowAddressFrom should render correctly with a start accessory 1`]
 </View>
 `;
 
-exports[`SendFlowAddressFrom should render correctly with an action button 1`] = `
+exports[`Banner should render correctly with an action button 1`] = `
 <View
   style={
     Object {
@@ -403,7 +404,7 @@ exports[`SendFlowAddressFrom should render correctly with an action button 1`] =
           }
         }
       >
-        Action Button
+        Test Action Button
       </Text>
     </TouchableOpacity>
   </View>

diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
@@ -69,6 +69,7 @@ const BannerBase: React.FC<BannerBaseProps> = ({
       {(onClose || closeButtonProps) && (
         <View style={styles.endAccessory}>
           <ButtonIcon
+            data-testid="banner-close-button"
             variant={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT}
             size={DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE}
             onPress={onClose || closeButtonProps?.onPress || noop}