@planningcenter/chat-react-native 4.4.1-qa-staging.23 → 4.4.1-qa-staging.25

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -21,6 +21,15 @@ const mockSearchEnabled = jest.fn()
 const mockCanBrowseArchived = jest.fn()
 const mockGroupsByGraphId: Record<string, { name: string }> = {}
 
+jest.mock('react-native', () => {
+  const actual = jest.requireActual('react-native')
+  return Object.defineProperty(actual, 'useWindowDimensions', {
+    value: jest.fn(() => ({ fontScale: 1 })),
+    configurable: true,
+  })
+})
+const mockUseWindowDimensions = jest.requireMock('react-native').useWindowDimensions
+
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
@@ -121,10 +130,31 @@ describe('FilterDropdownListHeaderComponent', () => {
     mockSetParams.mockClear()
     mockSearchEnabled.mockReturnValue(true)
     mockCanBrowseArchived.mockReturnValue(false)
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
     setCapabilities({ groups: true, teams: true })
     setRouteParams({})
   })
 
+  it('keeps the dropdown and actions on one line below the header font cap', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.15 })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
+      flexDirection: 'row',
+    })
+  })
+
+  it('stacks the actions under the dropdown once header text stops scaling', () => {
+    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.2 })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
+      flexDirection: 'column',
+    })
+  })
+
   it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)
 

package/src/screens/conversations/components/filter_dropdown_list_header_component.tsx

@@ -194,7 +194,7 @@ export const FilterDropdownListHeaderComponent = () => {
 
   return (
     <View style={styles.listHeader}>
-      <View style={styles.headingRow}>
+      <View style={styles.headingRow} testID="conversations-filter-heading-row">
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -252,7 +252,7 @@ export const FilterDropdownListHeaderComponent = () => {
 
 const useStyles = () => {
   const theme = useTheme()
-  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(MAX_FONT_SIZE_MULTIPLIER_LANDMARK)
 
   return StyleSheet.create({
     listHeader: {