How to use @stylable/dom-test-kit - 10 common examples

export const circularProgressBarDriverFactory: DriverFactory = ({ element, eventTrigger, wrapper }: ComponentFactory): CircularProgressBarDriver => {
    const tooltipDriver = tooltipDriverFactory({element: element.querySelector(`[data-hook='circular-progressbar-tooltip']`), wrapper, eventTrigger});
    const coreProgressBarDriver = coreCircularProgressBarDriverFactory({element, wrapper, eventTrigger});
    const errorIcon = () => element.querySelector(`[data-hook='error-icon']`);
    const successIcon = () => element.querySelector(`[data-hook='success-icon']`);
    const progressBar = () => element.querySelector(`[data-hook='circular-progress-bar']`);
    const stylableDOMUtil = new StylableDOMUtil(style, element);

    return {
        ...coreProgressBarDriver,
        isTooltipShown: () => tooltipDriver.isContentElementExists(),
        getTooltip: () => tooltipDriver, 
        isErrorIconShown: () => !!errorIcon(),
        isSuccessIconShown: () => !!successIcon(),
        getSize: () => stylableDOMUtil.getStyleState(progressBar(), 'size') as Size,
    };
}

export const counterBadgeDriverFactory = (factoryParams: ComponentFactory): CounterBadgeDriver => {
  const coreBadgeDriver = coreBadgeDriverFactory(factoryParams);
  const { element } = factoryParams;
  const stylableDOMUtil = new StylableDOMUtil(style, element);
  const uiTextDriver = uiTextDriverFactory({ ...factoryParams, element: stylableDOMUtil.select('.text') });

  return {
    ...coreBadgeDriver,
    getSkin: () => stylableDOMUtil.getStyleState(element, 'skin') as Skin | null,
    isWide: () => stylableDOMUtil.hasStyleState(element, 'wide'),
    getUIText: () => uiTextDriver,
    getIcon: () => stylableDOMUtil.select('.icon')
  };
};

export const paginationDriverFactory = ({ element }) => {
  const stylableDOMUtil = new StylableDOMUtil(style);
  const coreDriver = corePaginationDriverFactory({
    element,
    eventTrigger: Simulate,
  });

  return {
    ...coreDriver,
    isMobile: async () => stylableDOMUtil.hasStyleState(element, 'mobile'),
  };
};