xmlui 0.11.3 → 0.11.6

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

@@ -1,584 +0,0 @@
-"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);
-    }));
-});