@planningcenter/chat-react-native 4.0.1-qa-staging.2 → 4.0.1-qa-staging.3

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

@@ -0,0 +1,32 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ChatGroupBadge } from '../chat_group_badge'
+
+const mockSetParams = jest.fn()
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams }),
+  useRoute: () => ({
+    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
+  }),
+}))
+
+jest.mock('../../../../hooks/use_api', () => ({
+  useApiGet: () => ({ data: { name: 'Waco Family Group' } }),
+}))
+
+describe('ChatGroupBadge', () => {
+  it('clears the group filter and its title when dismissed', () => {
+    const view = render(<ChatGroupBadge rowPaddingHorizontal={16} />)
+
+    fireEvent.press(view.getByText('Waco Family Group'))
+
+    expect(mockSetParams).toHaveBeenCalledTimes(1)
+    expect(mockSetParams.mock.calls[0][0]).toStrictEqual({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+    })
+  })
+})

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

@@ -0,0 +1,66 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ListHeaderComponent } from '../list_header_component'
+
+const mockSetParams = jest.fn()
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
+  useRoute: () => ({
+    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
+  }),
+}))
+
+jest.mock('../../../../hooks/use_groups', () => ({
+  useCanDisplayGroups: () => true,
+}))
+jest.mock('../../../../hooks/use_direct_messages_eligible', () => ({
+  useDirectMessagesEligible: () => true,
+}))
+jest.mock('../../../../hooks/use_has_direct_messages', () => ({
+  useHasDirectMessages: () => true,
+}))
+jest.mock('../../../../hooks/use_chat_permissions', () => ({
+  useCanCreateConversations: () => false,
+}))
+jest.mock('../../../../hooks/use_new_conversation_entry', () => ({
+  useNewConversationEntry: () => 'select_type',
+}))
+jest.mock('../../../../hooks/use_current_person', () => ({
+  useCurrentPersonCache: () => ({ update: jest.fn() }),
+}))
+jest.mock('../../../../hooks/use_conversations_actions', () => ({
+  useMarkAllRead: () => ({ markAllRead: jest.fn(), isPending: false }),
+}))
+jest.mock('../../../../hooks/use_new_conversation_from_filter', () => ({
+  useNewConversationFromFilter: () => undefined,
+}))
+jest.mock('../../../../hooks/use_api', () => ({
+  useApiGet: () => ({ data: undefined }),
+}))
+
+const clearedFilter = {
+  title: undefined,
+  chat_group_graph_id: undefined,
+  group_source_app_name: undefined,
+  show_direct_messages: undefined,
+}
+
+describe('ListHeaderComponent filter toggles', () => {
+  beforeEach(() => mockSetParams.mockClear())
+
+  it.each([
+    ['Show all conversations', clearedFilter],
+    ['Filter to group conversations', { ...clearedFilter, group_source_app_name: 'Groups' }],
+    ['Filter to team conversations', { ...clearedFilter, group_source_app_name: 'Services' }],
+    ['Filter to direct message conversations', { ...clearedFilter, show_direct_messages: true }],
+  ])('%s drops the group title along with the group filter', (label, expected) => {
+    const view = render(<ListHeaderComponent />)
+
+    fireEvent.press(view.getByLabelText(label))
+
+    expect(mockSetParams).toHaveBeenCalledTimes(1)
+    expect(mockSetParams.mock.calls[0][0]).toStrictEqual(expected)
+  })
+})

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

@@ -18,6 +18,7 @@ export const ChatGroupBadge = ({ rowPaddingHorizontal }: { rowPaddingHorizontal:
 
   const handleBadgePress = useCallback(() => {
     navigation.setParams({
+      title: undefined,
       chat_group_graph_id: undefined,
       group_source_app_name: undefined,
     })

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

@@ -17,6 +17,7 @@ import { useNewConversationFromFilter } from '../../../hooks/use_new_conversatio
 import { GraphId } from '../../../types/resources/group_resource'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
 import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
 import { ListHeaderActionButton } from './list_header_action_button'
@@ -96,6 +97,19 @@ export const ListHeaderComponent = () => {
     }
   }, [navigation, route.params, entryMode, newConversationFromFilter])
 
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
   const handleChatSettings = useCallback(() => {
     navigation.navigate('ChatSettings', {})
   }, [navigation])
@@ -187,13 +201,7 @@ export const ListHeaderComponent = () => {
           <ToggleButton
             title={FilterTypes.All}
             active={active === FilterTypes.All}
-            onPress={() =>
-              navigation.setParams({
-                chat_group_graph_id: undefined,
-                group_source_app_name: undefined,
-                show_direct_messages: undefined,
-              })
-            }
+            onPress={() => handleSetFilter({})}
             accessibilityLabel="Show all conversations"
             style={styles.filterButton}
           />
@@ -201,13 +209,7 @@ export const ListHeaderComponent = () => {
             <ToggleButton
               title={FilterTypes.Groups}
               active={active === FilterTypes.Groups}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: 'Groups',
-                  show_direct_messages: undefined,
-                })
-              }
+              onPress={() => handleSetFilter({ group_source_app_name: 'Groups' })}
               accessibilityLabel="Filter to group conversations"
               style={styles.filterButton}
             />
@@ -216,13 +218,7 @@ export const ListHeaderComponent = () => {
             <ToggleButton
               title={FilterTypes.Teams}
               active={active === FilterTypes.Teams}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: 'Services',
-                  show_direct_messages: undefined,
-                })
-              }
+              onPress={() => handleSetFilter({ group_source_app_name: 'Services' })}
               accessibilityLabel="Filter to team conversations"
               style={styles.filterButton}
             />
@@ -231,13 +227,7 @@ export const ListHeaderComponent = () => {
             <ToggleButton
               title={FilterTypes.DMs}
               active={active === FilterTypes.DMs}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: undefined,
-                  show_direct_messages: true,
-                })
-              }
+              onPress={() => handleSetFilter({ show_direct_messages: true })}
               accessibilityLabel="Filter to direct message conversations"
               style={styles.filterButton}
             />