xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/Charts/LineChart/LineChart.spec.js

@@ -0,0 +1,450 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../testing/fixtures");
+// Test data helpers - using proper XMLUI data format
+const sampleData = `[
+  { name: 'Jan', sales: 100, profit: 20 },
+  { name: 'Feb', sales: 150, profit: 30 },
+  { name: 'Mar', sales: 120, profit: 25 },
+  { name: 'Apr', sales: 180, profit: 40 }
+]`;
+const emptyData = `[]`;
+const singlePointData = `[
+  { name: 'Jan', sales: 100, profit: 20 }
+]`;
+// Chart selectors - updated for actual Recharts output
+const chartRoot = ".recharts-responsive-container";
+const chartSvg = ".recharts-surface";
+const linesSelector = ".recharts-line";
+const legendSelector = ".recharts-legend-wrapper";
+const tooltipSelector = ".recharts-tooltip-wrapper";
+const xAxisSelector = ".recharts-xAxis";
+const yAxisSelector = ".recharts-yAxis";
+const xTicksSelector = ".recharts-xAxis .recharts-cartesian-axis-tick-value";
+const yTicksSelector = ".recharts-yAxis .recharts-cartesian-axis-tick-value";
+// --- Smoke Tests
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders correct number of line series", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(linesSelector)).toHaveCount(2);
+    }));
+});
+// --- Data Handling Tests
+fixtures_1.test.describe("data handling", () => {
+    (0, fixtures_1.test)("renders with empty data array", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${emptyData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(linesSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("renders with single data point", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${singlePointData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(linesSelector)).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("handles non-array data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{null}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(linesSelector)).toHaveCount(0);
+    }));
+});
+// --- Legend Tests
+fixtures_1.test.describe("legend", () => {
+    (0, fixtures_1.test)("legend is hidden by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("legend is shown when showLegend is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        showLegend
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+    }));
+});
+// --- Tooltip Tests
+fixtures_1.test.describe("tooltip", () => {
+    (0, fixtures_1.test)("tooltip appears on hover by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const chart = page.locator(chartSvg).first();
+        yield chart.hover({ position: { x: 200, y: 100 } });
+        // Wait for tooltip to appear
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("tooltip is hidden when hideTooltip is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        hideTooltip
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const chart = page.locator(chartSvg).first();
+        yield chart.hover({ position: { x: 200, y: 100 } });
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).not.toBeVisible();
+    }));
+});
+// --- Axis Tests
+fixtures_1.test.describe("x-axis", () => {
+    (0, fixtures_1.test)("x-axis is shown by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeVisible();
+        // Check that at least one tick is present
+        const tickCount = yield page.locator(xTicksSelector).count();
+        (0, fixtures_1.expect)(tickCount).toBeGreaterThan(0);
+    }));
+    (0, fixtures_1.test)("x-axis is hidden when hideX is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        hideX
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("x-axis ticks are hidden when hideTickX is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        hideTickX
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // When hideTickX is true, ticks should not be rendered in DOM
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector)).toHaveCount(0);
+        // But the axis line itself should still be present (though not visible due to tickLine=false)
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeAttached();
+    }));
+});
+fixtures_1.test.describe("y-axis", () => {
+    (0, fixtures_1.test)("y-axis is shown by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeVisible();
+        // Check that at least one tick is present
+        const tickCount = yield page.locator(yTicksSelector).count();
+        (0, fixtures_1.expect)(tickCount).toBeGreaterThan(0);
+    }));
+    (0, fixtures_1.test)("y-axis is hidden when hideY is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        hideY
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("y-axis ticks are hidden when hideTickY is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        hideTickY
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // When hideTickY is true, ticks should not be rendered in DOM
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector)).toHaveCount(0);
+        // But the axis line itself should still be present (though not visible due to tickLine=false)
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeAttached();
+    }));
+});
+// --- Formatter Tests
+fixtures_1.test.describe("formatters", () => {
+    (0, fixtures_1.test)("applies tickFormatterX when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+          xKey="name"
+          data="{${sampleData}}"
+          yKeys="{['sales', 'profit']}"
+          tickFormatterX="{(value) => value + ' (X)'}"
+          width="600px"
+          height="400px"
+        />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Check that formatted text appears in x-axis ticks
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector).first()).toContainText("(X)");
+    }));
+    (0, fixtures_1.test)("applies tickFormatterY when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+          xKey="name"
+          data="{${sampleData}}"
+          yKeys="{['sales', 'profit']}"
+          tickFormatterY="{(value) => '$' + value}"
+          width="600px"
+          height="400px"
+        />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Check that formatted text appears in y-axis ticks
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector).first()).toContainText("$");
+    }));
+});
+// --- Margin Tests
+fixtures_1.test.describe("margins", () => {
+    (0, fixtures_1.test)("applies custom margins", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        marginTop="{20}"
+        marginRight="{30}"
+        marginBottom="{40}"
+        marginLeft="{50}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Chart should render with custom margins applied
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+});
+// --- Responsive Behavior Tests
+fixtures_1.test.describe("responsive behavior", () => {
+    (0, fixtures_1.test)("enters mini mode with very small container height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="50px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // In mini mode, x-axis ticks should be hidden (tick=false)
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector)).toHaveCount(0);
+        // Y-axis ticks should also be hidden in mini mode
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector)).toHaveCount(0);
+        // Chart should still render the lines
+        yield (0, fixtures_1.expect)(page.locator(linesSelector)).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("renders normally with adequate height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="200px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // With adequate height, should have ticks
+        const tickCount = yield page.locator(xTicksSelector).count();
+        (0, fixtures_1.expect)(tickCount).toBeGreaterThan(0);
+        // Chart should render normally
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("adjusts tick intervals for narrow containers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="150px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should still render with narrow width
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(linesSelector)).toHaveCount(2);
+    }));
+});
+// --- Tooltip Template Tests
+fixtures_1.test.describe("tooltipTemplate", () => {
+    (0, fixtures_1.test)("renders custom tooltip template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        width="600px"
+        height="400px"
+      >
+        <property name="tooltipTemplate">
+          <VStack>
+            <Text>Custom Tooltip</Text>
+            <Text>Label: {$tooltip.label}</Text>
+            <Text>Active: {$tooltip.active}</Text>
+          </VStack>
+        </property>
+      </LineChart>
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const chart = page.locator(chartSvg).first();
+        yield chart.hover({ position: { x: 200, y: 100 } });
+        // Wait for tooltip to appear
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+        // Check for custom tooltip content
+        yield (0, fixtures_1.expect)(page.getByText("Custom Tooltip")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText(/Label:/)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText(/Active:/)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("tooltip template is not rendered when hideTooltip is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <LineChart
+        xKey="name"
+        data="{${sampleData}}"
+        yKeys="{['sales', 'profit']}"
+        hideTooltip
+        width="600px"
+        height="400px"
+      >
+        <property name="tooltipTemplate">
+          <Text>This tooltip should not appear</Text>
+        </property>
+      </LineChart>
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const chart = page.locator(chartSvg).first();
+        yield chart.hover({ position: { x: 200, y: 100 } });
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("This tooltip should not appear")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("falls back to default tooltip when tooltipTemplate is not provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <LineChart
+          xKey="name"
+          data="{${sampleData}}"
+          yKeys="{['sales', 'profit']}"
+          width="600px"
+          height="400px"
+        />
+      `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const chart = page.locator(chartSvg).first();
+        yield chart.hover({ position: { x: 200, y: 100 } });
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+        // Default tooltip should contain standard recharts tooltip content
+        const tooltip = page.locator(tooltipSelector);
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+    }));
+});