ui-neu/dist/components/forms/Toggle.test.js

Neu UI, a responsive React component library.

import React from "react";
import { act } from "react-dom/test-utils";
import { render, unmountComponentAtNode } from "react-dom";
import { Toggle } from "./Toggle";
var container = null;
beforeEach(function () {
  // setting up DOM element as render target
  container = document.createElement("div");
  document.body.appendChild(container);
});
afterEach(function () {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
}); // tests whether the component renders

it("renders Toggle", function () {
  act(function () {
    render( /*#__PURE__*/React.createElement(Toggle, null), container);
  });
  expect(container.children.length).toBe(1);
}); // tests structural integrity

it("checks Toggle structure", function () {
  act(function () {
    render( /*#__PURE__*/React.createElement(Toggle, null), container);
  });
  expect(container.children.length).toBe(1); // background + indicator

  expect(container.children[0].children.length).toBe(3);
}); // tests on-click

it("checks on-click", function () {
  act(function () {
    render( /*#__PURE__*/React.createElement(Toggle, null), container);
  });
  var check = container.children[0].firstChild;
  var indicatorOld = container.children[0].children[2];
  var indicatorColorOld = window.getComputedStyle(indicatorOld, null).getPropertyValue("background-color");
  act(function () {
    check.dispatchEvent(new MouseEvent("click", {
      bubbles: true
    }));
  });
  var indicatorNew = container.children[0].children[2];
  var indicatorColorNew = window.getComputedStyle(indicatorNew, null).getPropertyValue("background-color"); // Make sure we get valid colors, and that they are different.

  expect(indicatorColorOld.startsWith("rgb")).toBe(true);
  expect(indicatorColorNew.startsWith("rgb")).toBe(true);
  expect(indicatorColorOld.toString()).not.toBe(indicatorColorNew.toString());
});