xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,558 @@
+"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: 320 },
+  { name: 'Category I', value: 275 },
+  { name: 'Category J', value: 190 }
+]`;
+// Chart selectors - Legend specific
+const chartRoot = ".recharts-responsive-container";
+const chartSvg = ".recharts-surface";
+const legendSelector = ".recharts-legend-wrapper";
+const legendItemSelector = ".recharts-legend-item";
+const legendTextSelector = ".recharts-legend-item-text";
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    // Smoke tests
+    fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+        (0, fixtures_1.test)("Legend renders within PieChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+        (0, fixtures_1.test)("Legend renders within BarChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <BarChart
+          xKey="name"
+          yKeys="{['value']}"
+          data="{${sampleData}}"
+          width="600px"
+          height="400px"
+          showLegend
+        >
+          <Legend />
+        </BarChart>
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+    });
+    // Align prop tests
+    fixtures_1.test.describe("align prop", () => {
+        (0, fixtures_1.test)("handles 'left' alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend align="left" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legend = page.locator(legendSelector);
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+            // Legend should be visible with left alignment
+            // Note: Actual positioning may vary based on chart implementation
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles 'center' alignment (default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legend = page.locator(legendSelector);
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles 'right' alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend align="right" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legend = page.locator(legendSelector);
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+            // Legend should be visible with right alignment
+            // Note: Actual positioning may vary based on chart implementation
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+        }));
+    });
+    // VerticalAlign prop tests
+    fixtures_1.test.describe("verticalAlign prop", () => {
+        (0, fixtures_1.test)("handles 'top' vertical alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend verticalAlign="top" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legend = page.locator(legendSelector);
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+            // Legend should be visible with top alignment
+            // Note: Actual positioning may vary based on chart implementation
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles 'bottom' vertical alignment (default)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legend = page.locator(legendSelector);
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles 'middle' vertical alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend verticalAlign="middle" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legend = page.locator(legendSelector);
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+            // Legend should be visible with middle alignment
+            // Note: Actual positioning may vary based on chart implementation
+            yield (0, fixtures_1.expect)(legend).toBeVisible();
+        }));
+    });
+    // Combined alignment tests
+    fixtures_1.test.describe("combined alignment", () => {
+        (0, fixtures_1.test)("handles top-left alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend align="left" verticalAlign="top" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles bottom-right alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend align="right" verticalAlign="bottom" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles center-middle alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend align="center" verticalAlign="middle" />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+    });
+    // Data handling tests
+    fixtures_1.test.describe("data handling", () => {
+        (0, fixtures_1.test)("displays legend items for all data entries", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legendItems = page.locator(legendItemSelector);
+            yield (0, fixtures_1.expect)(legendItems).toHaveCount(4); // Desktop, Mobile, Tablet, Other
+            // Check that legend text matches data names
+            yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "Desktop" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "Mobile" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "Tablet" })).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "Other" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles 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"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legendItems = page.locator(legendItemSelector);
+            yield (0, fixtures_1.expect)(legendItems).toHaveCount(1);
+            yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "Desktop" })).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles empty data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${emptyData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            // Legend should still be present but with no items
+            const legendItems = page.locator(legendItemSelector);
+            yield (0, fixtures_1.expect)(legendItems).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"
+        >
+          <Legend />
+        </PieChart>
+      `);
+            yield page.waitForSelector(legendSelector, { timeout: 10000 });
+            const legendItems = page.locator(legendItemSelector);
+            yield (0, fixtures_1.expect)(legendItems).toHaveCount(10);
+        }));
+    });
+    // Integration with different chart types
+    fixtures_1.test.describe("chart type integration", () => {
+        (0, fixtures_1.test)("works with LineChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <LineChart
+          xKey="name"
+          yKeys="{['value']}"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+          showLegend
+        >
+          <Legend />
+        </LineChart>
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+        (0, fixtures_1.test)("works with DonutChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <DonutChart
+          nameKey="name"
+          dataKey="value"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        >
+          <Legend />
+        </DonutChart>
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        }));
+    });
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("legend has proper ARIA structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend />
+      </PieChart>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        const legend = page.locator(legendSelector);
+        yield (0, fixtures_1.expect)(legend).toBeVisible();
+        // Legend should be accessible to screen readers
+        const legendItems = page.locator(legendItemSelector);
+        yield (0, fixtures_1.expect)(legendItems.first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("legend items are keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend />
+      </PieChart>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        // Tab navigation should work through legend items
+        yield page.keyboard.press("Tab");
+        const focusedElement = page.locator(":focus");
+        yield (0, fixtures_1.expect)(focusedElement).toBeVisible();
+    }));
+    (0, fixtures_1.test)("legend text is readable and properly contrasted", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend />
+      </PieChart>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        const legendText = page.locator(legendTextSelector).first();
+        yield (0, fixtures_1.expect)(legendText).toBeVisible();
+        // Text should have readable font size
+        yield (0, fixtures_1.expect)(legendText).toHaveCSS("font-size", /\d+px/);
+    }));
+    (0, fixtures_1.test)("supports screen reader navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend />
+      </PieChart>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        // Legend should be announced properly by screen readers
+        const legendItems = page.locator(legendItemSelector);
+        for (let i = 0; i < (yield legendItems.count()); i++) {
+            const item = legendItems.nth(i);
+            yield (0, fixtures_1.expect)(item).toBeVisible();
+        }
+    }));
+});
+// =============================================================================
+// PERFORMANCE AND EDGE CASES
+// =============================================================================
+fixtures_1.test.describe("Performance and Edge Cases", () => {
+    (0, fixtures_1.test)("handles rapid prop changes efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend align="{testState || 'center'}" />
+      </PieChart>
+      <Button onClick="testState = testState === 'center' ? 'left' : 'center'">Toggle Align</Button>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        // Rapidly change alignment
+        for (let i = 0; i < 5; i++) {
+            yield page.getByRole("button", { name: "Toggle Align" }).click();
+            yield page.waitForTimeout(100);
+        }
+        // Legend should still be visible and functional
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("maintains performance with 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"
+      >
+        <Legend />
+      </PieChart>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        const legendItems = page.locator(legendItemSelector);
+        yield (0, fixtures_1.expect)(legendItems).toHaveCount(10);
+        // All legend items should be visible
+        for (let i = 0; i < 10; i++) {
+            yield (0, fixtures_1.expect)(legendItems.nth(i)).toBeVisible();
+        }
+    }));
+    (0, fixtures_1.test)("handles responsive container changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="{testState || '400px'}"
+        height="400px"
+      >
+        <Legend />
+      </PieChart>
+      <Button onClick="testState = testState === '400px' ? '200px' : '400px'">Toggle Size</Button>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        // Change container size
+        yield page.getByRole("button", { name: "Toggle Size" }).click();
+        yield page.waitForTimeout(500);
+        // Legend should still be visible and properly positioned
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles Unicode and special characters in legend text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const unicodeData = `[
+      { name: 'Desktop 🖥️', value: 400 },
+      { name: 'Mobile 📱', value: 300 },
+      { name: 'Tablet 📟', value: 200 },
+      { name: 'Other ⚡', value: 100 }
+    ]`;
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${unicodeData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend />
+      </PieChart>
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        // Check that Unicode characters are displayed correctly
+        yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "🖥️" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "📱" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "📟" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(legendTextSelector).filter({ hasText: "⚡" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles null and undefined prop values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend align="{null}" verticalAlign="{undefined}" />
+      </PieChart>
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should fall back to default values and still render
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("works correctly when multiple Legend components are present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${sampleData}}"
+        width="400px"
+        height="400px"
+      >
+        <Legend align="left" />
+        <Legend align="right" />
+      </PieChart>
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Only one legend should be rendered (last one wins)
+        const legends = page.locator(legendSelector);
+        yield (0, fixtures_1.expect)(legends).toHaveCount(1);
+    }));
+});