@octopusdeploy/design-system-components/dist/src/__testing__/recharts.spec.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const user_event_1 = __importDefault(require("@testing-library/user-event"));
const recharts_1 = require("recharts");
const vitest_1 = require("vitest");
const data = [
    { name: "Page A", value1: 2400, value2: 2400 },
    { name: "Page B", value1: 1398, value2: 2210 },
    { name: "Page C", value1: 9800, value2: 2290 },
    { name: "Page D", value1: 3908, value2: 2000 },
    { name: "Page E", value1: 4800, value2: 2181 },
    { name: "Page F", value1: 3800, value2: 2500 },
    { name: "Page G", value1: 4300, value2: 2100 },
];
//These tests exist to provide additional confidence when updating this particular dependency
(0, vitest_1.describe)("recharts", () => {
    /**
     * We rely on some seemingly undocumented behaviour where the payload property of the payload received in legend event handlers
     * includes the id prop set on corresponding <Line /> components.
     *
     * This is not included as part of the package's typings, so they are marked as `any` in code. This test should help detect if this breaks.
     */
    (0, vitest_1.it)("passes the id of <Line > components as part of the payload's payload in the <Legend /> event handlers", async () => {
        const onMouseOver = vitest_1.vi.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: data, width: 600, height: 480, children: [(0, jsx_runtime_1.jsx)(recharts_1.Legend, { onMouseOver: onMouseOver }), (0, jsx_runtime_1.jsx)(recharts_1.Line, { id: "value1-series-id", dataKey: "value1" }), (0, jsx_runtime_1.jsx)(recharts_1.Line, { id: "value2-series-id", dataKey: "value2" })] }));
        const legendLabel = await react_1.screen.findByText("value1");
        await user_event_1.default.hover(legendLabel);
        (0, vitest_1.expect)(onMouseOver).toHaveBeenCalledWith(vitest_1.expect.objectContaining({
            payload: vitest_1.expect.objectContaining({
                id: "value1-series-id",
            }),
        }), vitest_1.expect.anything(), vitest_1.expect.anything());
    });
});