wix-style-react/dist/es/src/RadioGroup/RadioGroup.driver.js

wix-style-react

import toArray from 'lodash/toArray';
import radioDriverFactory from '../Radio/Radio.driver';
import { dataHooks, dataAttr } from './constants';
const radioGroupDriverFactory = ({ element, eventTrigger }) => {
    const getOptionContainer = () => element.querySelector(`[data-hook="${dataHooks.RadioOptionContainer}"]`);
    const getRadios = () => toArray(element.querySelectorAll(`[data-hook^="${dataHooks.RadioContainer}-"] > :first-child`)).map(radio => radioButtonDriverFactory({
        element: radio,
        eventTrigger,
        container: getOptionContainer,
    }));
    const getRadioByIndex = index => getRadios()[index];
    const getRadioByValue = value => radioButtonDriverFactory({
        element: element.querySelector(`[data-hook="${dataHooks.RadioContainer}-${value}"] > :first-child`),
        eventTrigger,
        container: getOptionContainer,
    });
    const getRadioContainerAt = index => element.querySelectorAll(`[data-hook="${dataHooks.RadioOptionContainer}"]`)[index];
    const getLabelElements = () => getRadios().map(radio => radio.getLabelElement());
    const getSelectedRadio = () => getRadios().find(radio => radio.isChecked());
    return {
        /** Checks that the element exists */
        exists: () => !!element,
        /** Selects the radio that matches the provided value */
        selectByValue: value => getRadioByValue(value).click(),
        /** Selects the radio at the provided index */
        selectByIndex: index => getRadioByIndex(index).click(),
        /** Get the radio value at the provided index */
        getRadioValueAt: index => getRadioByIndex(index).getValue(),
        /** Get the radio element in the provided index */
        getRadioAtIndex: index => getRadios()[index],
        /** Get the value of the selected radio */
        getSelectedValue: () => {
            const selected = getSelectedRadio();
            return selected ? selected.getValue() : null;
        },
        /** Checks if the radio in the provided index is disabled */
        isRadioDisabled: index => getRadios()[index].isDisabled(),
        // TODO: We should deprecate getClassOfLabelAt(). Css tests should be in e2e tests.
        /** Get the class of the label element at the provided index */
        getClassOfLabelAt: index => getLabelElements()[index].className,
        /** Checks if the display is set to vertical */
        isVerticalDisplay: () => element.getAttribute(dataAttr.DISPLAY) === 'vertical',
        /** Checks if the display is set to horizontal */
        isHorizontalDisplay: () => element.getAttribute(dataAttr.DISPLAY) === 'horizontal',
        /** Get the value of applied spacing between radios */
        spacing: () => getRadioContainerAt(1).style._values['margin-top'],
        /** Get the number of rendered radios */
        getNumberOfRadios: () => getRadios().length,
        /** Get the value of radio button id at the provided index */
        getRadioIdAt: index => getRadioByIndex(index).getId(),
        /** Get the value of radio button name at the provided index */
        getRadioName: () => getRadioByIndex(0).getName(),
        /** Checks if the radio with the provided index is checked */
        isRadioChecked: index => getRadioByIndex(index).isChecked(),
    };
};
const radioButtonDriverFactory = ({ element, eventTrigger, container }) => {
    return {
        ...radioDriverFactory({ element, eventTrigger }),
        /** Getting the component's content element */
        getContent: () => container().querySelector(`[data-hook="${dataHooks.RadioContent}"]`),
    };
};
export default radioGroupDriverFactory;
//# sourceMappingURL=RadioGroup.driver.js.map