* 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
72 lines
2 KiB
TypeScript
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();
|
|
});
|
|
});
|
|
|