xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,584 @@
+"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: 'Desktop', value: 400, fill: '#8884d8' },
+  { name: 'Mobile', value: 300, fill: '#82ca9d' },
+  { name: 'Tablet', value: 200, fill: '#ffc658' },
+  { name: 'Other', value: 100, fill: '#ff7300' }
+]`;
+const emptyData = `[]`;
+const singlePointData = `[
+  { name: 'Desktop', value: 400 }
+]`;
+const largeDataset = `[
+  { name: 'Category A', value: 400 },
+  { name: 'Category B', value: 300 },
+  { name: 'Category C', value: 200 },
+  { name: 'Category D', value: 100 },
+  { name: 'Category E', value: 150 },
+  { name: 'Category F', value: 250 },
+  { name: 'Category G', value: 180 }
+]`;
+// Chart selectors - PieChart specific
+const chartRoot = ".recharts-responsive-container";
+const chartSvg = ".recharts-surface";
+const pieSelector = ".recharts-pie";
+const pieSectorSelector = ".recharts-pie-sector";
+const legendSelector = ".recharts-legend-wrapper";
+const tooltipSelector = ".recharts-tooltip-wrapper";
+const labelListSelector = ".recharts-label-list";
+// --- 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(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders pie sectors for data points", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should have 4 pie sectors for 4 data points
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("renders pie chart with correct structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSelector)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(chartSvg)).toBeVisible();
+    }));
+});
+// --- 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(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${emptyData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("renders with single data point", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${singlePointData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(1);
+    }));
+    (0, fixtures_1.test)("handles non-array data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{null}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("handles large datasets", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${largeDataset}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(7);
+    }));
+});
+// --- 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(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        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(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        showLegend
+        width="400px"
+        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(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const pieSector = page.locator(pieSectorSelector).first();
+        yield pieSector.hover();
+        // Wait for tooltip to appear
+        yield page.waitForTimeout(500);
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("tooltip shows correct data on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const pieSector = page.locator(pieSectorSelector).first();
+        yield pieSector.hover();
+        yield page.waitForTimeout(500);
+        const tooltip = page.locator(tooltipSelector);
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Tooltip should contain data from the first sector
+        yield (0, fixtures_1.expect)(tooltip).toContainText("Desktop");
+        yield (0, fixtures_1.expect)(tooltip).toContainText("400");
+    }));
+});
+// --- Label Tests
+fixtures_1.test.describe("labels", () => {
+    (0, fixtures_1.test)("labels are shown by default (showLabel=true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Labels should be rendered as text elements
+        const labels = page.locator('text').filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
+        yield (0, fixtures_1.expect)(labels).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("labels are hidden when showLabel is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        showLabel="{false}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should have pie sectors but no labels
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+        const labels = page.locator('text').filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
+        yield (0, fixtures_1.expect)(labels).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("label list is hidden by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // When showLabelList is false (default), there should be no LabelList elements
+        // We check for the absence of the recharts-label-list class
+        yield (0, fixtures_1.expect)(page.locator(labelListSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("label list is shown when showLabelList is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        showLabel="{false}"
+        showLabelList
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // LabelList creates text elements with the label content
+        const labelTexts = page.locator('text').filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
+        yield (0, fixtures_1.expect)(labelTexts).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("label list position can be configured", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        showLabel="{false}"
+        showLabelList
+        labelListPosition="outside"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // LabelList creates text elements with the label content
+        const labelTexts = page.locator('text').filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
+        yield (0, fixtures_1.expect)(labelTexts).toHaveCount(4);
+    }));
+});
+// --- Radius Tests (PieChart specific)
+fixtures_1.test.describe("radius configuration", () => {
+    (0, fixtures_1.test)("renders with default outer radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("renders with custom outer radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        outerRadius="{100}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("renders as donut chart with inner radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        innerRadius="{50}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+        // With inner radius, it becomes a donut chart
+    }));
+    (0, fixtures_1.test)("renders with both inner and outer radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        innerRadius="{40}"
+        outerRadius="{80}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+});
+// --- Responsive Behavior Tests
+fixtures_1.test.describe("responsive behavior", () => {
+    (0, fixtures_1.test)("renders in small containers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="200px"
+        height="200px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("renders in very small containers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="100px"
+        height="100px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("renders in large containers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="800px"
+        height="600px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+    (0, fixtures_1.test)("handles rectangular containers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="600px"
+        height="300px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+});
+// --- Interaction Tests
+fixtures_1.test.describe("interaction", () => {
+    (0, fixtures_1.test)("pie sectors are interactive on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const pieSector = page.locator(pieSectorSelector).first();
+        // Hover should trigger active shape rendering
+        yield pieSector.hover();
+        yield page.waitForTimeout(300);
+        // The sector should still be visible (active shape effect)
+        yield (0, fixtures_1.expect)(pieSector).toBeVisible();
+    }));
+    (0, fixtures_1.test)("multiple sectors can be hovered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const sectors = page.locator(pieSectorSelector);
+        // Hover over different sectors
+        yield sectors.nth(0).hover();
+        yield page.waitForTimeout(200);
+        yield sectors.nth(1).hover();
+        yield page.waitForTimeout(200);
+        yield sectors.nth(2).hover();
+        yield page.waitForTimeout(200);
+        // All sectors should still be present
+        yield (0, fixtures_1.expect)(sectors).toHaveCount(4);
+    }));
+});
+// --- Children Support Tests
+fixtures_1.test.describe("children support", () => {
+    (0, fixtures_1.test)("renders with child components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Text>Chart Title</Text>
+      </PieChart>
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+        yield (0, fixtures_1.expect)(page.getByText("Chart Title")).toBeVisible();
+    }));
+});
+// --- Edge Cases
+fixtures_1.test.describe("edge cases", () => {
+    (0, fixtures_1.test)("handles missing dataKey gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should still render the container but may not have sectors
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles missing nameKey gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles data with missing values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const dataWithMissingValues = `[
+      { name: 'Desktop', value: 400 },
+      { name: 'Mobile', value: null },
+      { name: 'Tablet', value: 200 },
+      { name: 'Other' }
+    ]`;
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${dataWithMissingValues}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should render sectors for valid data points
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles data with zero values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const dataWithZeros = `[
+      { name: 'Desktop', value: 400 },
+      { name: 'Mobile', value: 0 },
+      { name: 'Tablet', value: 200 },
+      { name: 'Other', value: 0 }
+    ]`;
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${dataWithZeros}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        // Should handle zero values appropriately
+    }));
+    (0, fixtures_1.test)("handles negative values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const dataWithNegatives = `[
+      { name: 'Desktop', value: 400 },
+      { name: 'Mobile', value: -100 },
+      { name: 'Tablet', value: 200 },
+      { name: 'Other', value: 100 }
+    ]`;
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${dataWithNegatives}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        // Should handle negative values (though they may not render as sectors)
+    }));
+    (0, fixtures_1.test)("handles very large values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const dataWithLargeValues = `[
+      { name: 'Desktop', value: 1000000 },
+      { name: 'Mobile', value: 2000000 },
+      { name: 'Tablet', value: 500000 },
+      { name: 'Other', value: 100000 }
+    ]`;
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${dataWithLargeValues}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+    }));
+});