@netdata/charts
Version:
Netdata frontend SDK and chart utilities
80 lines • 3.02 kB
JavaScript
import React from "react";
import { screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { makeTestChart, renderWithChart } from "@jest/testUtilities";
import ValueWithUnit, { ValueUnitGrid, ValueUnitHeader } from "./valueWithUnit";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
describe("ValueWithUnit", function () {
it("renders one header for the value and unit subcolumns", function () {
renderWithChart(/*#__PURE__*/_jsx(ValueUnitHeader, {
label: "Value"
}));
expect(screen.getByText("Value")).toHaveStyle("grid-column: 1/-1; text-align: center");
expect(screen.queryByText("Unit")).not.toBeInTheDocument();
});
it("scales each value independently and renders its unit in a separate cell", function () {
var _makeTestChart = makeTestChart({
attributes: {
units: ["By"],
desiredUnits: ["auto"],
viewDimensions: {
ids: ["bytes"],
names: ["bytes"],
units: ["By"],
contexts: ["test.bytes"]
},
dimensionIds: ["bytes"],
visibleDimensionIds: ["bytes"]
}
}),
chart = _makeTestChart.chart;
chart.updateDimensions();
renderWithChart(/*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(ValueWithUnit, {
value: 1,
dimensionId: "bytes"
}), /*#__PURE__*/_jsx(ValueWithUnit, {
value: 1024,
dimensionId: "bytes"
})]
}), {
chart: chart
});
var grids = screen.getAllByTestId("drawer-value-unit-grid");
var units = screen.getAllByTestId("drawer-value-unit-cell");
expect(grids[0]).toHaveTextContent("1B");
expect(units[0]).toHaveTextContent("B");
expect(grids[1]).toHaveTextContent("1KiB");
expect(units[1]).toHaveTextContent("KiB");
expect(grids[1]).toHaveStyle("grid-template-columns: minmax(0,1fr) 44px");
expect(units[1]).toHaveStyle({
minWidth: "0px",
padding: "0px 0px 0px 8px"
});
});
it("supports units that belong to a derived value instead of the chart", function () {
renderWithChart(/*#__PURE__*/_jsx(ValueWithUnit, {
value: 25.4,
valueKey: "percent",
unit: "%"
}));
expect(screen.getByTestId("drawer-value-unit-grid")).toHaveTextContent("25.40%");
expect(screen.getByTestId("drawer-value-unit-cell")).toHaveTextContent("%");
});
it("renders details beneath the value subcolumn", function () {
renderWithChart(/*#__PURE__*/_jsx(ValueUnitGrid, {
value: "99.5",
unit: "%",
detail: "Strong"
}));
var grid = screen.getByTestId("drawer-value-unit-grid");
var detail = screen.getByTestId("drawer-value-unit-detail");
expect(grid).toContainElement(detail);
expect(grid).toHaveStyle("grid-template-columns: minmax(0,1fr) 44px");
expect(detail).toHaveStyle({
margin: "4px 0px 0px",
textAlign: "right"
});
expect(detail).toHaveTextContent("Strong");
});
});