@wix/design-system/dist/esm/Badge/Badge.spec.js

@wix/design-system

import React from 'react';
import Badge from '.';
import { SKIN, TYPE, SIZE } from './Badge.constants';
import { createRendererWithUniDriver, cleanup, fireEvent, } from '../utils/test-utils/unit';
import { badgeUniDriverFactory } from './Badge.uni.driver';
describe('Badge', () => {
    const render = createRendererWithUniDriver(badgeUniDriverFactory);
    const createDriver = (jsx) => render(jsx).driver;
    afterEach(() => cleanup());
    describe('type prop', () => {
        it('should be solid by default', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.getType()).toBe(TYPE.solid);
        });
        Object.keys(TYPE).forEach(type => {
            it(`should be ${type}`, async () => {
                const driver = createDriver(React.createElement(Badge, { type: type }, "Hello"));
                expect(await driver.getType()).toBe(type);
            });
        });
        it('should use default value when value is provided as undefined', async () => {
            const driver = createDriver(React.createElement(Badge, { type: undefined }, "Hello"));
            expect(await driver.getType()).toBe(TYPE.solid);
        });
    });
    describe('skin prop', () => {
        it('should be general by default', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.getSkin()).toBe(SKIN.general);
        });
        Object.keys(SKIN).forEach(skin => {
            it(`should be ${skin}`, async () => {
                const driver = createDriver(React.createElement(Badge, { skin: skin }, "Hello"));
                expect(await driver.getSkin()).toBe(skin);
            });
        });
    });
    describe('uppercase prop', () => {
        it('should be uppercase by default', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.isUppercase()).toBe(true);
        });
        it('should be free-case when value is false', async () => {
            const driver = createDriver(React.createElement(Badge, { uppercase: false }, "Hello"));
            expect(await driver.isUppercase()).toBe(false);
        });
    });
    describe('size prop', () => {
        it('should be medium by default', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.getSize()).toBe(SIZE.medium);
        });
        Object.keys(SIZE).forEach(size => {
            it(`should be ${size}`, async () => {
                const driver = createDriver(React.createElement(Badge, { size: size }, "Hello"));
                expect(await driver.getSize()).toBe(size);
            });
        });
    });
    describe('onClick prop', () => {
        it('cursor should be default when no onClick', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.hasClickCursor()).toBe(false);
        });
        it('cursor should be pointer when onClick set', async () => {
            const driver = createDriver(React.createElement(Badge, { onClick: (e) => e }, "Hello"));
            expect(await driver.hasClickCursor()).toBe(true);
        });
        it('should call event handler on badge click', async () => {
            const handler = vi.fn();
            const driver = createDriver(React.createElement(Badge, { onClick: () => handler() }, "Hello"));
            await driver.click();
            expect(handler).toHaveBeenCalled();
        });
        it('should have tabIndex=0 if onClick passed', async () => {
            const driver = createDriver(React.createElement(Badge, { onClick: () => { } }, "Hello"));
            expect(await driver.base.attr('tabindex')).toBe('0');
        });
        it('should not have tabIndex if onClick is not passed', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.base.attr('tabindex')).toBeNull();
        });
        it('should have role="button" if onClick passed', async () => {
            const driver = createDriver(React.createElement(Badge, { onClick: () => { } }, "Hello"));
            expect(await driver.base.attr('role')).toBe('button');
        });
        it('should not have role if onClick is not passed', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.base.attr('role')).toBeNull();
        });
        it('should call onClick when Enter key is pressed', async () => {
            const onClick = vi.fn();
            const { container } = render(React.createElement(Badge, { onClick: onClick }, "Hello"));
            fireEvent.keyDown(container.firstElementChild, { key: 'Enter' });
            expect(onClick).toHaveBeenCalledTimes(1);
        });
        it('should call onClick when Space key is pressed', async () => {
            const onClick = vi.fn();
            const { container } = render(React.createElement(Badge, { onClick: onClick }, "Hello"));
            fireEvent.keyDown(container.firstElementChild, { key: ' ' });
            expect(onClick).toHaveBeenCalledTimes(1);
        });
    });
    describe('children prop', () => {
        it('should render the text given as a children prop', async () => {
            const driver = createDriver(React.createElement(Badge, null, "Hello"));
            expect(await driver.text()).toBe('Hello');
        });
    });
    describe('customContent prop', () => {
        it('should render customContent instead of the children text', async () => {
            const driver = createDriver(React.createElement(Badge, { customContent: React.createElement("svg", { "data-hook": "custom-icon" }) }, "Hello"));
            expect(await driver.text()).toBe('');
        });
        it('should render the customContent node', async () => {
            const { container } = render(React.createElement(Badge, { customContent: React.createElement("svg", { "data-hook": "custom-icon" }) }, "Hello"));
            expect(container.querySelector('[data-hook="custom-icon"]')).not.toBeNull();
        });
    });
});
//# sourceMappingURL=Badge.spec.js.map