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

@wix/design-system

import React from 'react';
import Selector from './Selector';
import { ASSET_PREFIX } from '../utils/test-utils';
import { createRendererWithUniDriver, cleanup } from '../utils/test-utils/unit';
import { selectorUniDriverFactory } from './Selector.uni.driver';
describe('Selector', () => {
    const render = createRendererWithUniDriver(selectorUniDriverFactory);
    afterEach(() => cleanup());
    const defaultProps = {
        id: 1,
        title: 'title',
    };
    it('should be unchecked by default', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.isChecked()).toBe(false);
    });
    it('should not render the subtitle by default', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.subtitleTextDriver().exists()).toBe(false);
    });
    it('should not render the extra node', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.hasExtraNode()).toBe(false);
    });
    it('should render the title', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.titleTextDriver().getText()).toBe(defaultProps.title);
    });
    it('should render the subtitle', async () => {
        const props = { ...defaultProps, ...{ subtitle: 'sub title' } };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.subtitleTextDriver().getText()).toBe('sub title');
    });
    it('should render the extra node', async () => {
        const props = { ...defaultProps, ...{ extraNode: 'extra text' } };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.hasExtraNode()).toBe(true);
        expect((await driver.getExtraNode()).textContent).toBe('extra text');
    });
    it('should not render the image by default', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.hasImage()).toBe(false);
    });
    it('should render the image', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps, image: React.createElement("img", { src: "img.png" }) }));
        expect(await driver.hasImage()).toBe(true);
        expect(await driver.getImage()).toBeInstanceOf(HTMLImageElement);
        expect((await driver.getImage()).src).toBe(`${ASSET_PREFIX}img.png`);
    });
    it('should render a radio toggle by default', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.toggleType()).toBe('radio');
    });
    it('should render a checkbox toggle', async () => {
        const toggleType = 'checkbox';
        const props = { ...defaultProps, ...{ toggleType } };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.toggleType()).toBe(toggleType);
    });
    it('should render an indeterminate checkbox toggle', async () => {
        const toggleType = 'checkbox';
        const indeterminate = true;
        const props = { ...defaultProps, ...{ toggleType, indeterminate } };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.toggleType()).toBe(toggleType);
        expect(await driver.isIndeterminate()).toBe(true);
    });
    it('should render a radio toggle', async () => {
        const toggleType = 'radio';
        const props = { ...defaultProps, ...{ toggleType } };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.toggleType()).toBe(toggleType);
    });
    it('should not propagate when selecting a disabled selector', async () => {
        const onToggle = jest.fn();
        const toggleType = 'radio';
        const props = { ...defaultProps, ...{ toggleType } };
        const { driver } = render(React.createElement(Selector, { onToggle: onToggle, ...props, isDisabled: true }));
        await driver.toggle();
        expect(onToggle).not.toHaveBeenCalled();
    });
    it('should not render disabled tooltip by default', async () => {
        const { driver } = render(React.createElement(Selector, { ...defaultProps }));
        expect(await driver.getTooltipText()).toBe(null);
    });
    it('should not render disabled tooltip when not disabled', async () => {
        const props = {
            ...defaultProps,
            toggleTooltipProps: { content: 'Disabled for testing' },
        };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.getTooltipText()).toBe(null);
    });
    it('should not render disabled tooltip when toggleTooltipProps is not provided', async () => {
        const props = { ...defaultProps, isDisabled: true };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.getTooltipText()).toBe(null);
    });
    it('should render disabled tooltip when disabled and toggleTooltipProps is provided', async () => {
        const disabledReason = 'This item is disabled for testing';
        const props = {
            ...defaultProps,
            isDisabled: true,
            toggleTooltipProps: { content: disabledReason },
        };
        const { driver } = render(React.createElement(Selector, { ...props }));
        expect(await driver.getTooltipText()).toBe(disabledReason);
    });
    describe('given image size', () => {
        const sizesAndTestkitMethods = [
            ['tiny', 'isImageTiny'],
            ['small', 'isImageSmall'],
            ['portrait', 'isImagePortrait'],
            ['large', 'isImageLarge'],
            ['cinema', 'isImageCinema'],
        ];
        sizesAndTestkitMethods.forEach(([size, method]) => {
            it(`should set correct className for "${size}"`, async () => {
                const { driver } = render(React.createElement(Selector, { ...defaultProps,
                    imageSize: size,
                    image: React.createElement("img", { src: "img.png" }) }));
                expect(await driver[method]()).toBe(true);
            });
        });
    });
});
//# sourceMappingURL=Selector.spec.js.map