@netdata/charts/dist/components/drawer/compare/customPeriodForm.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 _customPeriodForm = _interopRequireDefault(require("./customPeriodForm"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("CustomPeriodForm", function () {
  var mockOnAdd = jest.fn();
  var mockOnCancel = jest.fn();
  beforeEach(function () {
    jest.clearAllMocks();
  });
  it("renders form with all inputs", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    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();
    expect(_react2.screen.getByRole("button", {
      name: "Add"
    })).toBeInTheDocument();
    expect(_react2.screen.getByRole("button", {
      name: "Cancel"
    })).toBeInTheDocument();
  });
  it("updates label input value", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "Custom period"
      }
    });
    expect(labelInput.value).toBe("Custom period");
  });
  it("updates days input value", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var daysInputs = _react2.screen.getAllByRole("spinbutton");
    var daysInput = daysInputs[0]; // First number input should be days
    _react2.fireEvent.change(daysInput, {
      target: {
        value: "3"
      }
    });
    expect(daysInput.value).toBe("3");
  });
  it("updates hours input value", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var hoursInputs = _react2.screen.getAllByRole("spinbutton");
    var hoursInput = hoursInputs[1]; // Second number input should be hours
    _react2.fireEvent.change(hoursInput, {
      target: {
        value: "12"
      }
    });
    expect(hoursInput.value).toBe("12");
  });
  it("calls onCancel when cancel button is clicked", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Cancel"
    }));
    expect(mockOnCancel).toHaveBeenCalledTimes(1);
  });
  it("uses auto-generated label when label is empty but has valid offset", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var daysInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(daysInputs[0], {
      target: {
        value: "3"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "3 days ago",
      offsetSeconds: 259200
    });
  });
  it("does not call onAdd when offset is zero", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "Test period"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).not.toHaveBeenCalled();
  });
  it("calls onAdd with correct values for days only", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    var daysInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "3 days ago"
      }
    });
    _react2.fireEvent.change(daysInputs[0], {
      target: {
        value: "3"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "3 days ago",
      offsetSeconds: 259200 // 3 days * 24 * 60 * 60
    });
  });
  it("calls onAdd with correct values for hours only", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    var hoursInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "12 hours ago"
      }
    });
    _react2.fireEvent.change(hoursInputs[1], {
      target: {
        value: "12"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "12 hours ago",
      offsetSeconds: 43200 // 12 * 60 * 60
    });
  });
  it("calls onAdd with correct values for days and hours combined", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    var numberInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "1 day 12 hours ago"
      }
    });
    _react2.fireEvent.change(numberInputs[0], {
      target: {
        value: "1"
      }
    });
    _react2.fireEvent.change(numberInputs[1], {
      target: {
        value: "12"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "1 day 12 hours ago",
      offsetSeconds: 129600 // (1 * 24 * 60 * 60) + (12 * 60 * 60)
    });
  });
  it("trims whitespace from label", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    var daysInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "  Test period  "
      }
    });
    _react2.fireEvent.change(daysInputs[0], {
      target: {
        value: "1"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "Test period",
      offsetSeconds: 86400
    });
  });
  it("handles non-numeric input gracefully", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    var numberInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "Test period"
      }
    });
    _react2.fireEvent.change(numberInputs[0], {
      target: {
        value: "abc"
      }
    });
    _react2.fireEvent.change(numberInputs[1], {
      target: {
        value: "12"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "Test period",
      offsetSeconds: 43200 // Only hours counted: 12 * 60 * 60
    });
  });
  it("auto-generates label for hours only", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var numberInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(numberInputs[1], {
      target: {
        value: "6"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "6 hours ago",
      offsetSeconds: 21600
    });
  });
  it("auto-generates label for days only", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var numberInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(numberInputs[0], {
      target: {
        value: "2"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "2 days ago",
      offsetSeconds: 172800
    });
  });
  it("auto-generates label for days and hours (prioritizes days)", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var numberInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(numberInputs[0], {
      target: {
        value: "1"
      }
    });
    _react2.fireEvent.change(numberInputs[1], {
      target: {
        value: "6"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "1 day ago",
      offsetSeconds: 108000 // (1 * 24 * 60 * 60) + (6 * 60 * 60)
    });
  });
  it("prefers manual label over auto-generated label", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_customPeriodForm["default"], {
      onAdd: mockOnAdd,
      onCancel: mockOnCancel
    }));
    var labelInput = _react2.screen.getByPlaceholderText("e.g. 3 days ago");
    var numberInputs = _react2.screen.getAllByRole("spinbutton");
    _react2.fireEvent.change(labelInput, {
      target: {
        value: "Custom name"
      }
    });
    _react2.fireEvent.change(numberInputs[0], {
      target: {
        value: "3"
      }
    });
    _react2.fireEvent.click(_react2.screen.getByRole("button", {
      name: "Add"
    }));
    expect(mockOnAdd).toHaveBeenCalledWith({
      id: expect.stringMatching(/^custom_\d+$/),
      label: "Custom name",
      offsetSeconds: 259200
    });
  });
});