fix: alignment of nonewupdates component

Signed-off-by: Bryce McMath <bryce.j.mcmath@gmail.com>
openwallet-foundation · Jul 25, 2024 · db8a2c7 · db8a2c7
1 parent 60a3a6a
commit db8a2c7
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 12 deletions.
diff --git a/packages/legacy/core/App/components/misc/NoNewUpdates.tsx b/packages/legacy/core/App/components/misc/NoNewUpdates.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 
 import { useTheme } from '../../contexts/theme'
 import { testIdWithKey } from '../../utils/testable'
@@ -9,10 +9,18 @@ import InfoTextBox from '../texts/InfoTextBox'
 const NoNewUpdates: React.FC = () => {
   const { t } = useTranslation()
   const { HomeTheme } = useTheme()
+  const styles = StyleSheet.create({
+    noNewUpdatesText: {
+      ...HomeTheme.noNewUpdatesText,
+      alignSelf: 'center',
+      flex: 1,
+      flexWrap: 'wrap',
+    },
+  })
 
   return (
     <InfoTextBox>
-      <Text style={[HomeTheme.noNewUpdatesText, { flexShrink: 1 }]} testID={testIdWithKey('NoNewUpdates')}>
+      <Text style={styles.noNewUpdatesText} testID={testIdWithKey('NoNewUpdates')}>
         {t('Home.NoNewUpdates')}
       </Text>
     </InfoTextBox>

diff --git a/packages/legacy/core/__tests__/components/NoNewUpdates.test.tsx b/packages/legacy/core/__tests__/components/NoNewUpdates.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+
+import NoNewUpdates from '../../App/components/misc/NoNewUpdates'
+
+jest.mock('react-native-vector-icons/MaterialIcons', () => 'Icon')
+
+describe('NoNewUpdates Component', () => {
+  test('Renders correctly', () => {
+    const tree = render(<NoNewUpdates />)
+
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/packages/legacy/core/__tests__/components/__snapshots__/NoNewUpdates.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/NoNewUpdates.test.tsx.snap
@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoNewUpdates Component Renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#313132",
+      "borderColor": "#0099FF",
+      "borderRadius": 5,
+      "borderWidth": 1,
+      "padding": 10,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignSelf": "flex-start",
+          "marginLeft": 0,
+          "marginRight": 10,
+        }
+      }
+    >
+      <Icon
+        color="#0099FF"
+        name="info"
+        size={30}
+      />
+    </View>
+    <Text
+      style={
+        Object {
+          "alignSelf": "center",
+          "color": "#FFFFFF",
+          "flex": 1,
+          "flexWrap": "wrap",
+          "fontSize": 18,
+          "fontWeight": "normal",
+        }
+      }
+      testID="com.ariesbifold:id/NoNewUpdates"
+    >
+      Home.NoNewUpdates
+    </Text>
+  </View>
+</View>
+`;
diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/Home.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/Home.test.tsx.snap
@@ -97,16 +97,14 @@ exports[`displays a home screen renders correctly 1`] = `
           </View>
           <Text
             style={
-              Array [
-                Object {
-                  "color": "#FFFFFF",
-                  "fontSize": 18,
-                  "fontWeight": "normal",
-                },
-                Object {
-                  "flexShrink": 1,
-                },
-              ]
+              Object {
+                "alignSelf": "center",
+                "color": "#FFFFFF",
+                "flex": 1,
+                "flexWrap": "wrap",
+                "fontSize": 18,
+                "fontWeight": "normal",
+              }
             }
             testID="com.ariesbifold:id/NoNewUpdates"
           >