mattermost-mobile/app/components/banner/hooks/useBanner.test.ts
Rahim Rahman 5887c3ab46
feat(MM-65625): floating banner (#9162)
* feat: implement floating banner system

- Add FloatingBanner component with gesture support and keyboard awareness
- Implement BannerManager singleton for banner lifecycle management
- Create floating banner screen with SafeAreaProvider integration
- Add comprehensive banner configuration types and positioning
- Update Banner component to use modern gesture handling
- Enhance BannerItem with improved typography and spacing (40px height)
- Add ConnectionBanner improvements with better sizing
- Remove ConnectionBanner from channel list (moved to floating system)
- Update screens constants (remove FLOATING_BANNER - handled as overlay)
- Add i18n support for limited network connection message

The system provides:
- Auto-hide functionality with customizable duration
- Position-aware rendering (top/bottom with keyboard adjustment)
- Tablet-specific offset handling
- Swipe-to-dismiss with configurable thresholds
- Custom component support alongside default banner items
- Comprehensive test coverage with device-specific scenarios

* docs: add floating banner system documentation and cleanup

- Add comprehensive floating-banner.md with architecture diagrams
- Remove incompatible connection_banner/index.ts file
- Update device.ts hooks for better keyboard handling
- Simplify screens/index.tsx floating banner registration
- Update test/setup.ts to remove deprecated keyboard mocks
- Clean up keyboard height logic and ESLint issues

The documentation covers:
- System architecture and component relationships
- API reference and usage patterns
- Performance considerations and best practices
- Integration points and troubleshooting guide
- Comprehensive testing strategy

All tests now pass with the updated setup.

* fix issue with translation file

* some self cleanup.

* renamed index.tsx => Banner.tsx

* creaete meaningful tests for Banner component and all the hooks.

* fix tests

* cleanup based on initial review by AI

* dismissible was set to true, changing to what was configured.

* making title and message optional

* addressed some comments in PR

* more fixes based on PR review.

* added future enhancement

* dismissOverlay will be awaited
* delay dismissing overlay so we don't have to show a new one all the time

* make the banner stackable

* Fix issue with last banner dismissal delayed by 2s

* update floating-banner test

* clean-up based on review by @enahum

* fix failing test

* fix failiing tests

* rename confusing var

* fixed issue with swipe not working on android

* fix issue w/ android not registering touch events behind the overlay

* fix failing test

* animate the banner moving up when bottom banner first appear.

* removed unused functions and update tests

* add useMemo and useCallback

* update jsdoc to say dismissable is default true

* fix failing test
2025-10-12 09:33:51 -06:00

72 lines
2 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {renderHook} from '@testing-library/react-native';
import {useBanner} from './useBanner';
jest.mock('react-native-reanimated', () => {
const actualReanimated = jest.requireActual('react-native-reanimated/mock');
return {
...actualReanimated,
useSharedValue: jest.fn((initial) => ({value: initial})),
useAnimatedStyle: jest.fn((callback) => callback()),
withTiming: jest.fn((value) => value),
runOnJS: jest.fn((fn) => fn),
};
});
jest.mock('react-native-gesture-handler', () => ({
Gesture: {
Pan: jest.fn(() => ({
onStart: jest.fn().mockReturnThis(),
onUpdate: jest.fn().mockReturnThis(),
onEnd: jest.fn().mockReturnThis(),
})),
},
}));
describe('useBanner', () => {
const defaultProps = {
animationDuration: 250,
dismissible: true,
swipeThreshold: 100,
onDismiss: jest.fn(),
};
beforeEach(() => {
jest.clearAllMocks();
});
it('returns animatedStyle and swipeGesture', () => {
const {result} = renderHook(() => useBanner(defaultProps));
expect(result.current).toHaveProperty('animatedStyle');
expect(result.current).toHaveProperty('swipeGesture');
});
it('initializes with visible state', () => {
const {result} = renderHook(() => useBanner(defaultProps));
expect(result.current.animatedStyle).toBeDefined();
});
it('creates gesture when dismissible is true', () => {
const {result} = renderHook(() => useBanner({
...defaultProps,
dismissible: true,
}));
expect(result.current.swipeGesture).toBeDefined();
});
it('creates gesture when dismissible is false', () => {
const {result} = renderHook(() => useBanner({
...defaultProps,
dismissible: false,
}));
expect(result.current.swipeGesture).toBeDefined();
});
});