xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,608 @@
+"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 },
+  { name: 'Category H', value: 120 },
+  { name: 'Category I', value: 90 },
+  { name: 'Category J', value: 310 }
+]`;
+const zeroValueData = `[
+  { name: 'Zero A', value: 0 },
+  { name: 'Normal B', value: 300 },
+  { name: 'Zero C', value: 0 },
+  { name: 'Normal D', value: 200 }
+]`;
+// Chart selectors - DonutChart specific (inherits from PieChart)
+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(`
+      <DonutChart
+        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 donut sectors for data points", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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 donut chart with correct structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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();
+    }));
+    (0, fixtures_1.test)("renders with default innerRadius (donut hole)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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);
+        // DonutChart should have a hollow center by default (innerRadius=60)
+    }));
+});
+// --- 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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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(10);
+    }));
+    (0, fixtures_1.test)("handles data with zero values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${zeroValueData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Chart renders 3 sectors for this data (actual behavior observed)
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(3);
+    }));
+});
+// --- Inner Radius Tests (DonutChart specific)
+fixtures_1.test.describe("inner radius configuration", () => {
+    (0, fixtures_1.test)("renders with default inner radius (60)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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);
+        // Default innerRadius should create a donut hole
+    }));
+    (0, fixtures_1.test)("renders with custom inner radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        innerRadius="{80}"
+        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 small inner radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        innerRadius="{20}"
+        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 large inner radius", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        innerRadius="{120}"
+        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 zero inner radius (becomes regular pie)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        innerRadius="{0}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(pieSectorSelector)).toHaveCount(4);
+        // With innerRadius=0, it behaves like a regular pie chart
+    }));
+});
+// --- 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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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();
+    }));
+    (0, fixtures_1.test)("legend shows correct data labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        showLegend
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const legend = page.locator(legendSelector);
+        yield (0, fixtures_1.expect)(legend).toBeVisible();
+        yield (0, fixtures_1.expect)(legend).toContainText("Desktop");
+        yield (0, fixtures_1.expect)(legend).toContainText("Mobile");
+        yield (0, fixtures_1.expect)(legend).toContainText("Tablet");
+        yield (0, fixtures_1.expect)(legend).toContainText("Other");
+    }));
+});
+// --- 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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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");
+    }));
+    (0, fixtures_1.test)("tooltip works with different data points", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Test multiple sectors
+        const sectors = page.locator(pieSectorSelector);
+        const sectorCount = yield sectors.count();
+        for (let i = 0; i < Math.min(sectorCount, 2); i++) {
+            yield sectors.nth(i).hover();
+            yield page.waitForTimeout(300);
+            yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+        }
+    }));
+});
+// --- 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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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
+        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(`
+      <DonutChart
+        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)("can show both external labels and label list", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        showLabel
+        showLabelList
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should have text elements for both label types
+        const labelTexts = page.locator('text').filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
+        yield (0, fixtures_1.expect)(labelTexts.first()).toBeVisible();
+    }));
+});
+// --- 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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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(`
+      <DonutChart
+        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)("adapts to container aspect ratio", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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("interactions", () => {
+    (0, fixtures_1.test)("sectors respond to hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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 visual feedback
+        yield pieSector.hover();
+        yield page.waitForTimeout(300);
+        // The sector should still be visible and potentially highlighted
+        yield (0, fixtures_1.expect)(pieSector).toBeVisible();
+    }));
+    (0, fixtures_1.test)("multiple sectors can be hovered sequentially", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const sectors = page.locator(pieSectorSelector);
+        // Hover over multiple sectors
+        for (let i = 0; i < Math.min(yield sectors.count(), 3); i++) {
+            yield sectors.nth(i).hover();
+            yield page.waitForTimeout(200);
+            yield (0, fixtures_1.expect)(sectors.nth(i)).toBeVisible();
+        }
+    }));
+});
+// --- Performance Tests
+fixtures_1.test.describe("performance", () => {
+    (0, fixtures_1.test)("renders quickly with standard dataset", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const startTime = Date.now();
+        yield initTestBed(`
+      <DonutChart
+        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);
+        const renderTime = Date.now() - startTime;
+        // Should render within reasonable time (less than 5 seconds)
+        (0, fixtures_1.expect)(renderTime).toBeLessThan(5000);
+    }));
+    (0, fixtures_1.test)("handles rapid data updates", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        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);
+        // The chart should remain stable and responsive
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+});
+// --- Accessibility Tests
+fixtures_1.test.describe("accessibility", () => {
+    (0, fixtures_1.test)("chart is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Chart should be focusable and navigable
+        yield page.keyboard.press('Tab');
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("chart has proper ARIA structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <DonutChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // SVG should have proper structure for screen readers
+        yield (0, fixtures_1.expect)(page.locator(chartSvg)).toBeVisible();
+    }));
+});