@netdata/charts/dist/components/toolbox/fullscreen.test.js

Netdata frontend SDK and chart utilities

"use strict";

var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
require("@testing-library/jest-dom");
var _testUtilities = require("@jest/testUtilities");
var _fullscreen = _interopRequireDefault(require("./fullscreen"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("Fullscreen component", function () {
  it("renders fullscreen button when not in fullscreen mode", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}), {
      attributes: {
        fullscreen: false
      }
    });
    var button = _react2.screen.getByRole("button");
    expect(button).toBeInTheDocument();
    expect(button).toHaveAttribute("data-testid", "chartHeaderToolbox-fullscreen");
  });
  it("renders minimize button when in fullscreen mode", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}), {
      attributes: {
        fullscreen: true
      }
    });
    var button = _react2.screen.getByRole("button");
    expect(button).toBeInTheDocument();
  });
  it("toggles fullscreen when button is clicked", function () {
    var _makeTestChart = (0, _testUtilities.makeTestChart)({
        attributes: {
          fullscreen: false
        }
      }),
      chart = _makeTestChart.chart;
    var spy = jest.spyOn(chart, "toggleFullscreen");
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}), {
      chart: chart
    });
    var button = _react2.screen.getByRole("button");
    _react2.fireEvent.click(button);
    expect(spy).toHaveBeenCalled();
  });
  it("renders with disabled state", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {
      disabled: true
    }));
    var button = _react2.screen.getByRole("button");
    expect(button).toBeDisabled();
  });
  it("renders with enabled state by default", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}));
    var button = _react2.screen.getByRole("button");
    expect(button).not.toBeDisabled();
  });
  it("passes additional props to Button component", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {
      className: "custom-class",
      "data-test": "fullscreen"
    }));
    var button = _react2.screen.getByRole("button");
    expect(button).toHaveClass("custom-class");
    expect(button).toHaveAttribute("data-test", "fullscreen");
  });
  it("updates when fullscreen state changes", function () {
    var _renderWithChart = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {})),
      chart = _renderWithChart.chart,
      rerender = _renderWithChart.rerender;
    var button = _react2.screen.getByRole("button");
    expect(button).toBeInTheDocument();
    chart.updateAttribute("fullscreen", true);
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}));
    expect(_react2.screen.getByRole("button")).toBeInTheDocument();
  });
  it("handles rapid toggling", function () {
    var _makeTestChart2 = (0, _testUtilities.makeTestChart)({
        attributes: {
          fullscreen: false
        }
      }),
      chart = _makeTestChart2.chart;
    var spy = jest.spyOn(chart, "toggleFullscreen");
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}), {
      chart: chart
    });
    var button = _react2.screen.getByRole("button");
    _react2.fireEvent.click(button);
    _react2.fireEvent.click(button);
    _react2.fireEvent.click(button);
    expect(spy).toHaveBeenCalledTimes(3);
  });
  it("has correct accessibility attributes", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_fullscreen["default"], {}), {
      attributes: {
        fullscreen: false
      }
    });
    var button = _react2.screen.getByRole("button");
    expect(button).toHaveAttribute("data-testid", "chartHeaderToolbox-fullscreen");
  });
});