xmlui 0.10.13 → 0.10.14

package/dist/scripts/src/components/Charts/Tooltip/TooltipContent.spec.js

@@ -0,0 +1,449 @@
+"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 multiSeriesData = `[
+  { name: 'Jan', sales: 100, profit: 20, expenses: 80 },
+  { name: 'Feb', sales: 150, profit: 30, expenses: 120 },
+  { name: 'Mar', sales: 120, profit: 25, expenses: 95 },
+  { name: 'Apr', sales: 180, profit: 40, expenses: 140 }
+]`;
+const largeValueData = `[
+  { name: 'Category A', value: 1234567 },
+  { name: 'Category B', value: 9876543 },
+  { name: 'Category C', value: 5555555 }
+]`;
+// Chart selectors - Tooltip specific
+const chartRoot = ".recharts-responsive-container";
+const tooltipSelector = ".recharts-tooltip-wrapper";
+const tooltipContentSelector = "[class*='tooltipContainer']";
+const tooltipLabelSelector = ".label";
+const tooltipIndicatorSelector = "[class*='indicator']";
+const tooltipValueSelector = "[class*='valueText']";
+const tooltipNameSelector = "[class*='mutedText']";
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    // Smoke tests
+    fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+        (0, fixtures_1.test)("TooltipContent renders in PieChart 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 });
+            // Hover over a pie sector to trigger tooltip
+            const pieSector = page.locator(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            // Tooltip should appear
+            yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+        }));
+        (0, fixtures_1.test)("TooltipContent renders in BarChart on hover", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <BarChart
+          xKey="name"
+          yKeys="{['value']}"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            // Hover over a bar to trigger tooltip
+            const barElement = page.locator(".recharts-bar-rectangle").first();
+            yield barElement.hover();
+            // Check if tooltip content is visible
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toBeVisible();
+        }));
+    });
+    // Indicator prop tests
+    fixtures_1.test.describe("indicator prop", () => {
+        (0, fixtures_1.test)("displays dot indicator 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(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            const indicator = page.locator(tooltipIndicatorSelector);
+            yield (0, fixtures_1.expect)(indicator).toBeVisible();
+            // Should have dot styling (default)
+            yield (0, fixtures_1.expect)(indicator).toHaveClass(/dot/);
+        }));
+        (0, fixtures_1.test)("displays line indicator when specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            // Note: Since TooltipContent is used internally, we test through chart context
+            // The indicator prop would be passed through chart tooltip configuration
+            yield initTestBed(`
+        <BarChart
+          xKey="name"
+          yKeys="{['value']}"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            // Hover over a bar to trigger tooltip
+            const barElement = page.locator(".recharts-bar-rectangle").first();
+            yield barElement.hover();
+            // Check if tooltip content is visible with proper styling
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toBeVisible();
+        }));
+    });
+    // Data handling tests
+    fixtures_1.test.describe("data handling", () => {
+        (0, fixtures_1.test)("displays single data point correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const singleData = `[{ name: 'Single', value: 100 }]`;
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${singleData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            const pieSector = page.locator(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toContainText("Single");
+            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toContainText("100");
+        }));
+        (0, fixtures_1.test)("displays multiple data series correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <BarChart
+          xKey="name"
+          yKeys="{['sales', 'profit']}"
+          data="{${multiSeriesData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            // Hover over a bar to trigger tooltip
+            const barElement = page.locator(".recharts-bar-rectangle").first();
+            yield barElement.hover();
+            // Check if tooltip shows multiple series data
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            // Should show data for both series - check for multiple indicators
+            const indicators = page.locator(tooltipIndicatorSelector);
+            yield (0, fixtures_1.expect)(indicators).toHaveCount(2);
+        }));
+        (0, fixtures_1.test)("formats large numbers with locale string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${largeValueData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            const pieSector = page.locator(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            // Should format large numbers with commas
+            const valueText = yield page.locator(tooltipValueSelector).textContent();
+            (0, fixtures_1.expect)(valueText).toMatch(/1,234,567/);
+        }));
+        (0, fixtures_1.test)("handles zero values correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const zeroData = `[
+        { name: 'Zero', value: 0 },
+        { name: 'Positive', value: 100 }
+      ]`;
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${zeroData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            const pieSector = page.locator(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            // Should handle zero values gracefully
+            const valueElements = page.locator(tooltipValueSelector);
+            yield (0, fixtures_1.expect)(valueElements.first()).toBeVisible();
+        }));
+    });
+    // Label handling tests
+    fixtures_1.test.describe("label handling", () => {
+        (0, fixtures_1.test)("displays tooltip content without label 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(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            // Default PieChart tooltip doesn't have a label, so check for name and value instead
+            yield (0, fixtures_1.expect)(page.locator(tooltipNameSelector)).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles Unicode characters in labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const unicodeData = `[
+        { name: 'Desktop 🖥️', value: 400 },
+        { name: 'Mobile 📱', value: 300 }
+      ]`;
+            yield initTestBed(`
+        <PieChart
+          nameKey="name"
+          dataKey="value"
+          data="{${unicodeData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            const pieSector = page.locator(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            // Should display Unicode characters correctly
+            const nameText = page.locator(tooltipNameSelector);
+            yield (0, fixtures_1.expect)(nameText).toContainText("🖥️");
+        }));
+    });
+    // Color and styling tests
+    fixtures_1.test.describe("color and styling", () => {
+        (0, fixtures_1.test)("displays indicator with correct colors", (_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(".recharts-pie-sector").first();
+            yield pieSector.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            const indicator = page.locator(tooltipIndicatorSelector);
+            yield (0, fixtures_1.expect)(indicator).toBeVisible();
+            // Indicator should have background color
+            const backgroundColor = yield indicator.evaluate(el => window.getComputedStyle(el).backgroundColor);
+            (0, fixtures_1.expect)(backgroundColor).not.toBe("rgba(0, 0, 0, 0)"); // Not transparent
+        }));
+        (0, fixtures_1.test)("applies consistent styling across different chart types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            // Test in LineChart context
+            yield initTestBed(`
+        <LineChart
+          xKey="name"
+          yKeys="{['value']}"
+          data="{${sampleData}}"
+          width="400px"
+          height="400px"
+        />
+      `);
+            yield page.waitForSelector(chartRoot, { timeout: 10000 });
+            // Hover over line to trigger tooltip
+            const line = page.locator(".recharts-line-curve");
+            yield line.hover();
+            yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+            // Should have consistent styling
+            const indicator = page.locator(tooltipIndicatorSelector);
+            yield (0, fixtures_1.expect)(indicator).toBeVisible();
+        }));
+    });
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("tooltip content is accessible to screen readers", (_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(".recharts-pie-sector").first();
+        yield pieSector.hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+        // Tooltip content should be accessible
+        const tooltipContent = page.locator(tooltipContentSelector);
+        yield (0, fixtures_1.expect)(tooltipContent).toBeVisible();
+        // Text content should be readable
+        const nameText = page.locator(tooltipNameSelector);
+        const valueText = page.locator(tooltipValueSelector);
+        yield (0, fixtures_1.expect)(nameText).toBeVisible();
+        yield (0, fixtures_1.expect)(valueText).toBeVisible();
+    }));
+    (0, fixtures_1.test)("tooltip has proper contrast and readability", (_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(".recharts-pie-sector").first();
+        yield pieSector.hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+        // Text should have readable font size
+        const valueText = page.locator(tooltipValueSelector);
+        yield (0, fixtures_1.expect)(valueText).toHaveCSS("font-size", /\d+px/);
+        // Should have proper contrast (background vs text)
+        const tooltipContainer = page.locator(tooltipContentSelector);
+        const backgroundColor = yield tooltipContainer.evaluate(el => window.getComputedStyle(el).backgroundColor);
+        (0, fixtures_1.expect)(backgroundColor).not.toBe("transparent");
+    }));
+    (0, fixtures_1.test)("tooltip appears on keyboard navigation", (_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 });
+        // Focus on chart and use keyboard navigation
+        yield page.keyboard.press("Tab");
+        // Chart should be focusable and tooltip may appear on focus
+        const focusedElement = page.locator(":focus");
+        yield (0, fixtures_1.expect)(focusedElement).toBeVisible();
+    }));
+});
+// =============================================================================
+// PERFORMANCE AND EDGE CASES
+// =============================================================================
+fixtures_1.test.describe("Performance and Edge Cases", () => {
+    (0, fixtures_1.test)("handles rapid hover events efficiently", (_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(".recharts-pie-sector");
+        // Rapidly hover over different sectors
+        for (let i = 0; i < 3; i++) {
+            yield sectors.nth(i).hover();
+            yield page.waitForTimeout(100);
+        }
+        // Tooltip should still work correctly
+        yield sectors.first().hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles empty or null data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const emptyData = `[]`;
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{${emptyData}}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Should not crash with empty data
+        // Tooltip won't appear since there's no data to hover over
+        const chart = page.locator(chartRoot);
+        yield (0, fixtures_1.expect)(chart).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles special characters and long text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <PieChart
+        nameKey="name"
+        dataKey="value"
+        data="{[
+          { name: 'Category with quotes & symbols', value: 400 },
+          { name: 'Very long category name that might wrap to multiple lines in the tooltip', value: 300 }
+        ]}"
+        width="400px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        const pieSector = page.locator(".recharts-pie-sector").first();
+        yield pieSector.hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+        // Should handle special characters correctly
+        const nameText = page.locator(tooltipNameSelector);
+        yield (0, fixtures_1.expect)(nameText).toContainText("quotes");
+        yield (0, fixtures_1.expect)(page.locator(tooltipValueSelector)).toContainText("400");
+    }));
+    (0, fixtures_1.test)("tooltip positioning adapts to chart boundaries", (_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 });
+        // Hover near edge of small chart
+        const pieSector = page.locator(".recharts-pie-sector").first();
+        yield pieSector.hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipContentSelector)).toBeVisible();
+        // Tooltip should be positioned within viewport
+        const tooltip = page.locator(tooltipSelector);
+        const boundingBox = yield tooltip.boundingBox();
+        (0, fixtures_1.expect)(boundingBox).toBeTruthy();
+        if (boundingBox) {
+            (0, fixtures_1.expect)(boundingBox.x).toBeGreaterThanOrEqual(0);
+            (0, fixtures_1.expect)(boundingBox.y).toBeGreaterThanOrEqual(0);
+        }
+    }));
+});