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

Netdata frontend SDK and chart utilities

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