mattermost-mobile-upstream/app/hooks/useCollapsibleHeader.test.tsx

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import {act, renderHook} from '@testing-library/react-native';

import {PLATFORM_UI_HEADER_HEIGHT} from '@constants/platform_ui';
import ViewConstants from '@constants/view';

import * as DeviceFunctions from './device';
import {useCollapsibleHeader} from './header';

const LARGE_HEADER_HEIGHT = PLATFORM_UI_HEADER_HEIGHT + ViewConstants.LARGE_HEADER_TITLE_HEIGHT + ViewConstants.SUBTITLE_HEIGHT;
const HEADER_OFFSET = LARGE_HEADER_HEIGHT - PLATFORM_UI_HEADER_HEIGHT;

describe('useCollapsibleHeader', () => {
    const commonHookResponse = {
        largeHeight: LARGE_HEADER_HEIGHT,
        scrollRef: expect.any(Function),
        scrollValue: expect.objectContaining({value: 0}),
        onScroll: expect.any(Object),
        hideHeader: expect.any(Function),
        lockValue: 0,
        unlock: expect.any(Function),
        headerOffset: HEADER_OFFSET,
        scrollEnabled: expect.objectContaining({value: true}),
        setAutoScroll: expect.any(Function),
    };

    it('should return the correct values with isLargeTitle is true', () => {
        const {result} = renderHook(() => useCollapsibleHeader(true));

        expect(result.current).toEqual({
            defaultHeight: PLATFORM_UI_HEADER_HEIGHT,
            scrollPaddingTop: LARGE_HEADER_HEIGHT,
            headerHeight: expect.objectContaining({
                value: LARGE_HEADER_HEIGHT,
            }),
            ...commonHookResponse,
        });
    });

    it('should return the correct values with isLargeTitle is false', () => {
        const {result} = renderHook(() => useCollapsibleHeader(false));

        expect(result.current).toEqual({
            defaultHeight: PLATFORM_UI_HEADER_HEIGHT,
            scrollPaddingTop: PLATFORM_UI_HEADER_HEIGHT,
            headerHeight: expect.objectContaining({
                value: PLATFORM_UI_HEADER_HEIGHT,
            }),
            ...commonHookResponse,
        });
    });

    it('should return the correct values with isLargeTitle is true, and on a tablet', () => {
        const tabletSpy = jest.spyOn(DeviceFunctions, 'useIsTablet').mockReturnValue(true);

        const {result} = renderHook(() => useCollapsibleHeader(true));

        expect(result.current).toEqual({
            defaultHeight: ViewConstants.TABLET_HEADER_HEIGHT,
            scrollPaddingTop: ViewConstants.TABLET_HEADER_HEIGHT + ViewConstants.LARGE_HEADER_TITLE_HEIGHT + ViewConstants.SUBTITLE_HEIGHT,
            headerHeight: expect.objectContaining({
                value: ViewConstants.TABLET_HEADER_HEIGHT + ViewConstants.LARGE_HEADER_TITLE_HEIGHT + ViewConstants.SUBTITLE_HEIGHT,
            }),
            ...commonHookResponse,
            largeHeight: ViewConstants.TABLET_HEADER_HEIGHT + ViewConstants.LARGE_HEADER_TITLE_HEIGHT + ViewConstants.SUBTITLE_HEIGHT,
        });

        tabletSpy.mockRestore();
    });

    it('should change the lock value when hideHeader is called', () => {
        const {result} = renderHook(() => useCollapsibleHeader(true));

        expect(result.current.lockValue).toBe(0);

        act(() => result.current.hideHeader(true));

        expect(result.current.lockValue).toBe(PLATFORM_UI_HEADER_HEIGHT);
    });

    it('should reset the lockValue when unlock is called', () => {
        const {result} = renderHook(() => useCollapsibleHeader(true));

        act(() => result.current.hideHeader(true));

        expect(result.current.lockValue).toBe(PLATFORM_UI_HEADER_HEIGHT);

        act(() => result.current.unlock());

        expect(result.current.lockValue).toBe(0);
    });
});