@netdata/charts
Version:
Netdata frontend SDK and chart utilities
347 lines • 10.3 kB
JavaScript
import React from "react";
import { screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart } from "@jest/testUtilities";
import CustomPeriodForm from "./customPeriodForm";
import { jsx as _jsx } from "react/jsx-runtime";
describe("CustomPeriodForm", function () {
var mockOnAdd = jest.fn();
var mockOnCancel = jest.fn();
beforeEach(function () {
jest.clearAllMocks();
});
it("renders form with all inputs", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
expect(screen.getByText("Add Custom Period")).toBeInTheDocument();
expect(screen.getByPlaceholderText("e.g. 3 days ago")).toBeInTheDocument();
expect(screen.getByText("Days")).toBeInTheDocument();
expect(screen.getByText("Hours")).toBeInTheDocument();
expect(screen.getByRole("button", {
name: "Add"
})).toBeInTheDocument();
expect(screen.getByRole("button", {
name: "Cancel"
})).toBeInTheDocument();
});
it("updates label input value", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
fireEvent.change(labelInput, {
target: {
value: "Custom period"
}
});
expect(labelInput.value).toBe("Custom period");
});
it("updates days input value", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var daysInputs = screen.getAllByRole("spinbutton");
var daysInput = daysInputs[0]; // First number input should be days
fireEvent.change(daysInput, {
target: {
value: "3"
}
});
expect(daysInput.value).toBe("3");
});
it("updates hours input value", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var hoursInputs = screen.getAllByRole("spinbutton");
var hoursInput = hoursInputs[1]; // Second number input should be hours
fireEvent.change(hoursInput, {
target: {
value: "12"
}
});
expect(hoursInput.value).toBe("12");
});
it("calls onCancel when cancel button is clicked", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
fireEvent.click(screen.getByRole("button", {
name: "Cancel"
}));
expect(mockOnCancel).toHaveBeenCalledTimes(1);
});
it("uses auto-generated label when label is empty but has valid offset", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var daysInputs = screen.getAllByRole("spinbutton");
fireEvent.change(daysInputs[0], {
target: {
value: "3"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
fireEvent.change(labelInput, {
target: {
value: "Test period"
}
});
fireEvent.click(screen.getByRole("button", {
name: "Add"
}));
expect(mockOnAdd).not.toHaveBeenCalled();
});
it("calls onAdd with correct values for days only", function () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var daysInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "3 days ago"
}
});
fireEvent.change(daysInputs[0], {
target: {
value: "3"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var hoursInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "12 hours ago"
}
});
fireEvent.change(hoursInputs[1], {
target: {
value: "12"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "1 day 12 hours ago"
}
});
fireEvent.change(numberInputs[0], {
target: {
value: "1"
}
});
fireEvent.change(numberInputs[1], {
target: {
value: "12"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var daysInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: " Test period "
}
});
fireEvent.change(daysInputs[0], {
target: {
value: "1"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "Test period"
}
});
fireEvent.change(numberInputs[0], {
target: {
value: "abc"
}
});
fireEvent.change(numberInputs[1], {
target: {
value: "12"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(numberInputs[1], {
target: {
value: "6"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(numberInputs[0], {
target: {
value: "2"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(numberInputs[0], {
target: {
value: "1"
}
});
fireEvent.change(numberInputs[1], {
target: {
value: "6"
}
});
fireEvent.click(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 () {
renderWithChart(/*#__PURE__*/_jsx(CustomPeriodForm, {
onAdd: mockOnAdd,
onCancel: mockOnCancel
}));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "Custom name"
}
});
fireEvent.change(numberInputs[0], {
target: {
value: "3"
}
});
fireEvent.click(screen.getByRole("button", {
name: "Add"
}));
expect(mockOnAdd).toHaveBeenCalledWith({
id: expect.stringMatching(/^custom_\d+$/),
label: "Custom name",
offsetSeconds: 259200
});
});
});