@wb-tech/ui-react/src/hooks/use-classnames/__tests__/index.ts

WildBerries react ui-kit

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

import { useClassnames } from '..';

const CLASS_TARGET = {
    block             : 'block-hash',
    block_mod         : 'block_mod-hash',
    block__element    : 'block__element-hash',
    block__element_mod: 'block__element_mod-hash'
};

const CLASS_SOURCE = {
    source             : 'source-hash',
    block              : 'block-hash-source',
    source_mod         : 'source_mod-hash',
    source__element    : 'source__element-hash',
    source__element_mod: 'source__element_mod-hash'
};

test('Single class', () => {
    const { result } = renderHook(() => useClassnames(CLASS_TARGET));

    expect(result.current('block')).toBe(CLASS_TARGET.block);

    expect(result.current('block_mod')).toBe(CLASS_TARGET.block_mod);

    expect(result.current('block__element')).toBe(CLASS_TARGET.block__element);

    expect(result.current('block__element_mod')).toBe(CLASS_TARGET.block__element_mod);
});

test('Multiple class', () => {
    const { result } = renderHook(() => useClassnames(CLASS_TARGET));

    expect(result.current('block', 'block_mod')).toBe(`${CLASS_TARGET.block} ${CLASS_TARGET.block_mod}`);

    expect(result.current('block', 'block_mod', 'block__element', 'block__element_mod')).toBe(`${CLASS_TARGET.block} ${CLASS_TARGET.block_mod} ${CLASS_TARGET.block__element} ${CLASS_TARGET.block__element_mod}`);
});

test('Not combined', () => {
    const { result } = renderHook(() => useClassnames(CLASS_TARGET, CLASS_SOURCE, true));

    expect(result.current('block')).toBe(CLASS_SOURCE.block);

    expect(result.current('block', 'source')).toBe(`${CLASS_SOURCE.block} ${CLASS_SOURCE.source}`);
});

test('Combine', () => {
    const { result } = renderHook(() => useClassnames(CLASS_TARGET, CLASS_SOURCE));

    expect(result.current('block')).toBe(`${CLASS_TARGET.block} ${CLASS_SOURCE.block}`);

    expect(result.current('block', 'source')).toBe(`${CLASS_TARGET.block} ${CLASS_SOURCE.block} ${CLASS_SOURCE.source}`);
});

test('Source string', () => {
    const { result } = renderHook(() => useClassnames(CLASS_TARGET, 'my-class'));

    expect(result.current('block')).toBe(`${CLASS_TARGET.block} my-class`);
});