@netdata/charts/dist/components/drawer/compare/index.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 _index = _interopRequireDefault(require("./index"));
var _useComparisonData = require("./useComparisonData");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
jest.mock("./useComparisonData");
describe("Compare", function () {
  var mockPeriods = [{
    id: "selected",
    label: "Selected timeframe",
    after: 1645459425,
    before: 1645459485,
    isBase: true,
    payload: {
      data: [[1, 50, 30], [2, 60, 40]],
      dimensions: ["cpu", "memory"]
    },
    stats: {
      min: 30,
      avg: 45,
      max: 60,
      points: 2,
      dimensions: 2
    },
    error: null
  }, {
    id: "24h",
    label: "24 hours before",
    after: 1645373025,
    before: 1645373085,
    payload: {
      data: [[1, 45, 25], [2, 55, 35]],
      dimensions: ["cpu", "memory"]
    },
    stats: {
      min: 25,
      avg: 40,
      max: 55,
      points: 2,
      dimensions: 2
    },
    changes: {
      min: {
        value: 16.7,
        direction: "down",
        formatted: "16.7%"
      },
      avg: {
        value: 11.1,
        direction: "down",
        formatted: "11.1%"
      },
      max: {
        value: 8.3,
        direction: "down",
        formatted: "8.3%"
      },
      points: {
        value: 0,
        direction: "up",
        formatted: "0%"
      },
      dimensions: {
        value: 0,
        direction: "up",
        formatted: "0%"
      }
    },
    error: null
  }, {
    id: "7d",
    label: "7 days before",
    after: 1644854625,
    before: 1644854685,
    payload: null,
    stats: null,
    error: "Failed to fetch data"
  }];
  beforeEach(function () {
    jest.clearAllMocks();
    _useComparisonData.useComparisonData.mockReturnValue({
      periods: mockPeriods,
      loading: false,
      error: null
    });
  });
  it("renders comparison cards for each period", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.getByText("Selected timeframe")).toBeInTheDocument();
    expect(_react2.screen.getByText("24 hours before")).toBeInTheDocument();
    expect(_react2.screen.getByText("7 days before")).toBeInTheDocument();
  });
  it("displays formatted date ranges for each period", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    var dateRanges = _react2.screen.getAllByText(/→/);
    expect(dateRanges).toHaveLength(3);
  });
  it("shows data points and dimensions for loaded periods", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    var dataPointsElements = _react2.screen.getAllByText("Data Points");
    var dimensionsElements = _react2.screen.getAllByText("Dimensions");
    expect(dataPointsElements).toHaveLength(2);
    expect(dimensionsElements).toHaveLength(2);
    expect(_react2.screen.getAllByText("2")).toHaveLength(4);
  });
  it("shows error state for failed periods", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.getByText("Error loading data")).toBeInTheDocument();
  });
  it("shows loading state when comparison data is loading", function () {
    _useComparisonData.useComparisonData.mockReturnValue({
      periods: [],
      loading: true,
      error: null
    });
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.getByText("Loading comparison data...")).toBeInTheDocument();
  });
  it("shows error message when hook returns error", function () {
    var error = "Network connection failed";
    _useComparisonData.useComparisonData.mockReturnValue({
      periods: [],
      loading: false,
      error: error
    });
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.getByText("Error: ".concat(error))).toBeInTheDocument();
  });
  it("shows custom period selector when periods are loaded", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.getByText("Custom")).toBeInTheDocument();
    expect(_react2.screen.getByText("Select a timeframe")).toBeInTheDocument();
  });
  it("does not show custom period selector when no periods loaded", function () {
    _useComparisonData.useComparisonData.mockReturnValue({
      periods: [],
      loading: false,
      error: null
    });
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.queryByText("Custom")).not.toBeInTheDocument();
    expect(_react2.screen.queryByText("Select a timeframe")).not.toBeInTheDocument();
  });
  it("shows min, avg, max values for periods with data", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    var minElements = _react2.screen.getAllByText("Min");
    var avgElements = _react2.screen.getAllByText("Avg");
    var maxElements = _react2.screen.getAllByText("Max");
    expect(minElements).toHaveLength(2);
    expect(avgElements).toHaveLength(2);
    expect(maxElements).toHaveLength(2);
  });
  it("handles periods without payload gracefully", function () {
    var periodsWithoutPayload = [{
      id: "selected",
      label: "Selected timeframe",
      after: 1000,
      before: 2000,
      payload: null,
      error: null
    }];
    _useComparisonData.useComparisonData.mockReturnValue({
      periods: periodsWithoutPayload,
      loading: false,
      error: null
    });
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
    expect(_react2.screen.getByText("Loading...")).toBeInTheDocument();
  });
  describe("Custom Period Form", function () {
    it("shows custom period form when button is clicked", function () {
      (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
      _react2.fireEvent.click(_react2.screen.getByText("Select a timeframe"));
      expect(_react2.screen.getByText("Add Custom Period")).toBeInTheDocument();
      expect(_react2.screen.getByPlaceholderText("e.g. 3 days ago")).toBeInTheDocument();
      expect(_react2.screen.getByText("Days")).toBeInTheDocument();
      expect(_react2.screen.getByText("Hours")).toBeInTheDocument();
    });
    it("hides custom period selector when form is shown", function () {
      (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
      _react2.fireEvent.click(_react2.screen.getByText("Select a timeframe"));
      expect(_react2.screen.queryByText("Custom")).not.toBeInTheDocument();
      expect(_react2.screen.queryByText("Select a timeframe")).not.toBeInTheDocument();
    });
    it("cancels form and shows selector again", function () {
      (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
      _react2.fireEvent.click(_react2.screen.getByText("Select a timeframe"));
      _react2.fireEvent.click(_react2.screen.getByRole("button", {
        name: "Cancel"
      }));
      expect(_react2.screen.queryByText("Add Custom Period")).not.toBeInTheDocument();
      expect(_react2.screen.getByText("Custom")).toBeInTheDocument();
      expect(_react2.screen.getByText("Select a timeframe")).toBeInTheDocument();
    });
    it("adds custom period and updates chart attribute", function () {
      var _renderWithChart = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {})),
        chart = _renderWithChart.chart;
      var updateAttributeSpy = jest.spyOn(chart, "updateAttribute");
      _react2.fireEvent.click(_react2.screen.getByText("Select a timeframe"));
      var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
      var numberInputs = _react2.screen.getAllByRole("spinbutton");
      _react2.fireEvent.change(labelInput, {
        target: {
          value: "3 days ago"
        }
      });
      _react2.fireEvent.change(numberInputs[0], {
        target: {
          value: "3"
        }
      });
      _react2.fireEvent.click(_react2.screen.getByRole("button", {
        name: "Add"
      }));
      expect(updateAttributeSpy).toHaveBeenCalledWith("customPeriods", expect.arrayContaining([expect.objectContaining({
        id: expect.stringMatching(/^custom_\d+$/),
        label: "3 days ago",
        offsetSeconds: 259200
      })]));
      expect(_react2.screen.queryByText("Add Custom Period")).not.toBeInTheDocument();
      updateAttributeSpy.mockRestore();
    });
    it("appends to existing custom periods", function () {
      var existingPeriods = [{
        id: "existing",
        label: "Existing",
        offsetSeconds: 3600
      }];
      var _renderWithChart2 = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {})),
        chart = _renderWithChart2.chart;
      chart.updateAttribute("customPeriods", existingPeriods);
      var updateAttributeSpy = jest.spyOn(chart, "updateAttribute");
      _react2.fireEvent.click(_react2.screen.getByText("Select a timeframe"));
      var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
      var numberInputs = _react2.screen.getAllByRole("spinbutton");
      _react2.fireEvent.change(labelInput, {
        target: {
          value: "New period"
        }
      });
      _react2.fireEvent.change(numberInputs[1], {
        target: {
          value: "6"
        }
      });
      _react2.fireEvent.click(_react2.screen.getByRole("button", {
        name: "Add"
      }));
      expect(updateAttributeSpy).toHaveBeenCalledWith("customPeriods", [].concat(existingPeriods, [expect.objectContaining({
        id: expect.stringMatching(/^custom_\d+$/),
        label: "New period",
        offsetSeconds: 21600
      })]));
      updateAttributeSpy.mockRestore();
    });
  });
  describe("ComparisonCard", function () {
    it("shows correct data metrics for successful periods", function () {
      (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
      expect(_react2.screen.getAllByText("2")).toHaveLength(4);
      expect(_react2.screen.getAllByText("Min")).toHaveLength(2);
      expect(_react2.screen.getAllByText("Avg")).toHaveLength(2);
      expect(_react2.screen.getAllByText("Max")).toHaveLength(2);
    });
    it("formats date ranges correctly", function () {
      (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {}));
      var dateRanges = _react2.screen.getAllByText(/→/);
      expect(dateRanges).toHaveLength(3);
    });
  });
});