mattermost-mobile/app/utils/buttonStyles.test.ts

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

import Preferences from '@constants/preferences';

import {buttonBackgroundStyle, buttonStyles, getBackgroundStyles, buttonSizeStyles, buttonTextStyle, buttonTextStyles, buttonTextSizeStyles} from './buttonStyles';
import {changeOpacity} from './theme';

describe('get the style of a button', () => {
    const defaultStyle = buttonStyles.main;
    const theme = Preferences.THEMES.denim;
    const bgStyles = getBackgroundStyles(theme);

    test('button default values', () => {
        const tests = [{
            getStyle: () => buttonBackgroundStyle(theme),
            expected: [
                defaultStyle,
                buttonSizeStyles.m,
                bgStyles.primary.default.default,
            ],
        }, {
            getStyle: () => buttonBackgroundStyle(theme, 'xs'),
            expected: [
                defaultStyle,
                buttonSizeStyles.xs,
                bgStyles.primary.default.default,
            ],
        }, {
            getStyle: () => buttonBackgroundStyle(theme, 'lg', 'secondary'),
            expected: [
                defaultStyle,
                buttonSizeStyles.lg,
                bgStyles.secondary.default.default,
            ],
        }];

        tests.forEach((t) => {
            const style = t.getStyle();
            expect(style).toEqual(t.expected);
        });
    });

    test('button style', () => {
        const btnEnphasis: ButtonEmphasis[] = ['primary', 'secondary', 'tertiary', 'link'];
        const btnSizes: ButtonSize[] = ['lg', 'm', 's', 'xs'];
        const btnTypes: ButtonType[] = ['default', 'destructive', 'disabled', 'inverted'];
        const btnState: ButtonState[] = ['active', 'default', 'focus', 'hover'];

        btnEnphasis.forEach((emphasis) => {
            btnSizes.forEach((size) => {
                btnTypes.forEach((type) => {
                    btnState.forEach((state) => {
                        const style = buttonBackgroundStyle(theme, size, emphasis, type, state);
                        expect(style).toEqual([
                            defaultStyle,
                            buttonSizeStyles[size],
                            bgStyles[emphasis][type][state],
                        ]);
                    });
                });
            });
        });
    });
});

describe('get the text style of a button', () => {
    const defaultTextStyle = buttonTextStyles.main;
    const theme = Preferences.THEMES.denim;

    test('button text default values', () => {
        const tests = [{
            getStyle: () => buttonTextStyle(theme),
            expected: [
                defaultTextStyle,
                buttonTextSizeStyles.m,
                {color: theme.buttonColor},
            ],
        }, {
            getStyle: () => buttonTextStyle(theme, 'xs'),
            expected: [
                defaultTextStyle,
                buttonTextSizeStyles.xs,
                {color: theme.buttonColor},
            ],
        }, {
            getStyle: () => buttonTextStyle(theme, 'lg', 'secondary'),
            expected: [
                defaultTextStyle,
                buttonTextSizeStyles.lg,
                {color: theme.buttonBg},
            ],
        }];

        tests.forEach((t) => {
            const style = t.getStyle();
            expect(style).toEqual(t.expected);
        });
    });

    test('button style', () => {
        const btnEnphasis: ButtonEmphasis[] = ['primary', 'secondary', 'tertiary', 'link'];
        const btnSizes: ButtonSize[] = ['lg', 'm', 's', 'xs'];
        const btnTypes: ButtonType[] = ['default', 'destructive', 'disabled', 'inverted'];

        const getColor = (type: ButtonType, emphasis: ButtonEmphasis) => {
            let color: string = theme.buttonColor;

            if (type === 'disabled') {
                color = changeOpacity(theme.centerChannelColor, 0.32);
            }

            if ((type === 'destructive' && emphasis !== 'primary')) {
                color = theme.errorTextColor;
            }

            if ((type === 'inverted' && emphasis === 'primary') ||
                (type !== 'inverted' && emphasis !== 'primary')) {
                color = theme.buttonBg;
            }

            if (type === 'inverted' && emphasis === 'tertiary') {
                color = theme.sidebarText;
            }

            return color;
        };

        btnEnphasis.forEach((emphasis) => {
            btnSizes.forEach((size) => {
                btnTypes.forEach((type) => {
                    const style = buttonTextStyle(theme, size, emphasis, type);
                    expect(style).toEqual([
                        defaultTextStyle,
                        buttonTextSizeStyles[size],
                        {color: getColor(type, emphasis)},
                    ]);
                });
            });
        });
    });
});