@netdata/netdata-ui/dist/es6/components/radio-button/index.test.js

netdata UI kit

import React from "react";
import { renderWithProviders, fireEvent } from "testUtilities";
import { DefaultTheme } from "../../theme/default";
import RadioButton from "./index";
var getSelectors = function getSelectors(container) {
  var input = container.querySelector("input");
  var iconContainer = input.nextSibling;
  var svg = container.querySelector("svg");
  return {
    input: input,
    iconContainer: iconContainer,
    svg: svg
  };
};
it("renders", function () {
  var _renderWithProviders = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, null)),
    container = _renderWithProviders.container;
  var _getSelectors = getSelectors(container),
    input = _getSelectors.input,
    iconContainer = _getSelectors.iconContainer,
    svg = _getSelectors.svg;
  expect(input).not.toHaveAttribute("checked");
  expect(iconContainer).toHaveStyleRule("border", "1px solid " + DefaultTheme.colors.inputBorder);
  expect(svg).toBe(null);
});
it("renders checked", function () {
  var _renderWithProviders2 = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, {
      checked: true,
      onChange: jest.fn()
    })),
    container = _renderWithProviders2.container;
  var _getSelectors2 = getSelectors(container),
    input = _getSelectors2.input,
    iconContainer = _getSelectors2.iconContainer,
    svg = _getSelectors2.svg;
  expect(input).toHaveAttribute("checked");
  expect(iconContainer).toHaveStyleRule("border", "1px solid " + DefaultTheme.colors.inputBorder);
  expect(svg).toHaveStyleRule("fill", DefaultTheme.colors.primary);
});
it("renders disabled", function () {
  var _renderWithProviders3 = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, {
      disabled: true
    })),
    container = _renderWithProviders3.container;
  var _getSelectors3 = getSelectors(container),
    input = _getSelectors3.input,
    iconContainer = _getSelectors3.iconContainer,
    svg = _getSelectors3.svg;
  expect(input).not.toHaveAttribute("checked");
  expect(input).toHaveAttribute("disabled");
  expect(iconContainer).toHaveStyleRule("border", "1px solid " + DefaultTheme.colors.disabled);
  expect(svg).toBe(null);
});
it("renders disabled checked", function () {
  var _renderWithProviders4 = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, {
      checked: true,
      disabled: true,
      onChange: jest.fn()
    })),
    container = _renderWithProviders4.container;
  var _getSelectors4 = getSelectors(container),
    input = _getSelectors4.input,
    iconContainer = _getSelectors4.iconContainer,
    svg = _getSelectors4.svg;
  expect(input).toHaveAttribute("checked");
  expect(input).toHaveAttribute("disabled");
  expect(iconContainer).toHaveStyleRule("border", "1px solid " + DefaultTheme.colors.inputBorder);
  expect(svg).toHaveStyleRule("fill", DefaultTheme.colors.disabled);
});
it("triggers change", function () {
  var onChange = jest.fn();
  var _renderWithProviders5 = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, {
      onChange: onChange
    })),
    container = _renderWithProviders5.container;
  fireEvent.click(container.firstChild);
  expect(onChange).toBeCalledTimes(1);
});
it("renders label", function () {
  var _renderWithProviders6 = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, {
      label: "my label"
    })),
    getByLabelText = _renderWithProviders6.getByLabelText;
  expect(getByLabelText("my label")).toBeInTheDocument();
});
it("renders children", function () {
  var _renderWithProviders7 = renderWithProviders(/*#__PURE__*/React.createElement(RadioButton, null, /*#__PURE__*/React.createElement("span", null, "my content"))),
    getByLabelText = _renderWithProviders7.getByLabelText;
  expect(getByLabelText("my content")).toBeInTheDocument();
});