xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,999 @@
+"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: 'Jan', value: 100, category: 400 },
+  { name: 'Feb', value: 150, category: 300 },
+  { name: 'Mar', value: 120, category: 500 },
+  { name: 'Apr', value: 180, category: 200 }
+]`;
+const emptyData = `[]`;
+const singlePointData = `[
+  { name: 'Jan', value: 100, category: 400 }
+]`;
+const multiSeriesData = `[
+  { month: 'Jan', sales: 1200, profit: 400, expenses: 800 },
+  { month: 'Feb', sales: 1900, profit: 600, expenses: 1300 },
+  { month: 'Mar', sales: 1500, profit: 500, expenses: 1000 },
+  { month: 'Apr', sales: 1800, profit: 700, expenses: 1100 }
+]`;
+const largeDataset = `[
+  ${Array.from({ length: 20 }, (_, i) => `{ name: 'Point${i + 1}', value: ${Math.floor(Math.random() * 1000)}, secondary: ${Math.floor(Math.random() * 500)} }`).join(', ')}
+]`;
+// Chart selectors - update based on specific Recharts component
+const chartRoot = ".recharts-responsive-container";
+const chartSvg = ".recharts-surface";
+const chartElementsSelector = ".recharts-area"; // AreaChart specific
+const legendSelector = ".recharts-legend-wrapper";
+const tooltipSelector = ".recharts-tooltip-wrapper";
+const xAxisSelector = ".recharts-xAxis";
+const yAxisSelector = ".recharts-yAxis";
+const xTicksSelector = ".recharts-xAxis .recharts-cartesian-axis-tick-value";
+const yTicksSelector = ".recharts-yAxis .recharts-cartesian-axis-tick-value";
+// --- 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(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders correct number of chart elements", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        const elements = page.locator(chartElementsSelector);
+        yield (0, fixtures_1.expect)(elements).toHaveCount(2); // Should match dataKeys length
+    }));
+    (0, fixtures_1.test)("handles empty data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${emptyData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles single data point", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${singlePointData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+});
+// --- Axis Tests
+fixtures_1.test.describe("x-axis", () => {
+    (0, fixtures_1.test)("x-axis is shown by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(xAxisSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("x-axis can be hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideX="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("x-axis tick labels can be hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTickX="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector)).not.toBeVisible();
+    }));
+});
+fixtures_1.test.describe("y-axis", () => {
+    (0, fixtures_1.test)("y-axis is shown by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(yAxisSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("y-axis can be hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideY="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("y-axis tick labels can be hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTickY="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector)).not.toBeVisible();
+    }));
+});
+// --- 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(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("legend can be shown", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        showLegend="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+    }));
+});
+// --- Area Chart Specific Tests
+fixtures_1.test.describe("stacked areas", () => {
+    (0, fixtures_1.test)("areas are not stacked by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        const areas = page.locator(chartElementsSelector);
+        yield (0, fixtures_1.expect)(areas).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("areas can be stacked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        stacked="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        const areas = page.locator(chartElementsSelector);
+        yield (0, fixtures_1.expect)(areas).toHaveCount(2);
+    }));
+});
+fixtures_1.test.describe("curved areas", () => {
+    (0, fixtures_1.test)("areas are linear by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("areas can be curved", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        curved="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toBeVisible();
+    }));
+});
+// --- Responsive Behavior Tests
+fixtures_1.test.describe("responsive behavior", () => {
+    (0, fixtures_1.test)("enters mini mode with very small container height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        showLegend="true"
+        width="600px"
+        height="100px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // In mini mode, legend and axes should be hidden
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("normal mode with adequate height", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        showLegend="true"
+        width="600px"
+        height="300px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // In normal mode, legend and axes should be visible
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeVisible();
+    }));
+});
+// --- Tooltip Tests
+fixtures_1.test.describe("tooltip", () => {
+    (0, fixtures_1.test)("tooltip is shown by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Hover over chart area to trigger tooltip
+        yield page.locator(chartElementsSelector).first().hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("tooltip can be hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTooltip="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        // Hover over chart area - tooltip should not appear
+        yield page.locator(chartElementsSelector).first().hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).not.toBeVisible();
+    }));
+});
+// --- Comprehensive Prop Tests
+fixtures_1.test.describe("data prop", () => {
+    (0, fixtures_1.test)("handles array data correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(1);
+    }));
+    (0, fixtures_1.test)("handles empty array gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${emptyData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles large datasets", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${largeDataset}}"
+        dataKeys="{['value', 'secondary']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("handles missing data prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("dataKeys prop", () => {
+    (0, fixtures_1.test)("renders single data series", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(1);
+    }));
+    (0, fixtures_1.test)("renders multiple data series", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="month"
+        data="{${multiSeriesData}}"
+        dataKeys="{['sales', 'profit', 'expenses']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(3);
+    }));
+    (0, fixtures_1.test)("handles empty dataKeys array", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{[]}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("handles non-existent dataKeys", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['nonexistent', 'alsononexistent']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("nameKey prop", () => {
+    (0, fixtures_1.test)("uses correct nameKey for x-axis labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(xTicksSelector, { timeout: 10000 });
+        const firstTick = page.locator(xTicksSelector).first();
+        yield (0, fixtures_1.expect)(firstTick).toContainText("Jan");
+    }));
+    (0, fixtures_1.test)("handles different nameKey", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="month"
+        data="{${multiSeriesData}}"
+        dataKeys="{['sales']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(xTicksSelector, { timeout: 10000 });
+        const firstTick = page.locator(xTicksSelector).first();
+        yield (0, fixtures_1.expect)(firstTick).toContainText("Jan");
+    }));
+    (0, fixtures_1.test)("handles missing nameKey", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles non-existent nameKey", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="nonexistent"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("hideX prop", () => {
+    (0, fixtures_1.test)("shows X-axis by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(xAxisSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides X-axis when hideX is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideX="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows X-axis when hideX is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideX="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(xAxisSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("hideY prop", () => {
+    (0, fixtures_1.test)("shows Y-axis by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(yAxisSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides Y-axis when hideY is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideY="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows Y-axis when hideY is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideY="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(yAxisSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("hideTickX prop", () => {
+    (0, fixtures_1.test)("shows X-axis ticks by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.waitForSelector(xAxisSelector, { timeout: 5000 });
+        // Wait a bit more for ticks to render
+        yield page.waitForTimeout(1000);
+        const ticks = page.locator(xTicksSelector);
+        yield (0, fixtures_1.expect)(ticks.first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides X-axis ticks when hideTickX is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTickX="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows X-axis ticks when hideTickX is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTickX="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.waitForSelector(xAxisSelector, { timeout: 5000 });
+        yield page.waitForTimeout(1000);
+        const ticks = page.locator(xTicksSelector);
+        yield (0, fixtures_1.expect)(ticks.first()).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("hideTickY prop", () => {
+    (0, fixtures_1.test)("shows Y-axis ticks by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.waitForSelector(yAxisSelector, { timeout: 5000 });
+        yield page.waitForTimeout(1000);
+        const ticks = page.locator(yTicksSelector);
+        yield (0, fixtures_1.expect)(ticks.first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides Y-axis ticks when hideTickY is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTickY="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows Y-axis ticks when hideTickY is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTickY="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.waitForSelector(yAxisSelector, { timeout: 5000 });
+        yield page.waitForTimeout(1000);
+        const ticks = page.locator(yTicksSelector);
+        yield (0, fixtures_1.expect)(ticks.first()).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("hideTooltip prop", () => {
+    (0, fixtures_1.test)("shows tooltip by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.locator(chartElementsSelector).first().hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides tooltip when hideTooltip is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTooltip="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.locator(chartElementsSelector).first().hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows tooltip when hideTooltip is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideTooltip="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.locator(chartElementsSelector).first().hover();
+        yield (0, fixtures_1.expect)(page.locator(tooltipSelector)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("showLegend prop", () => {
+    (0, fixtures_1.test)("hides legend by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows legend when showLegend is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        showLegend="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(legendSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides legend when showLegend is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        showLegend="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).not.toBeVisible();
+    }));
+});
+fixtures_1.test.describe("stacked prop", () => {
+    (0, fixtures_1.test)("areas are not stacked by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("stacks areas when stacked is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        stacked="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(2);
+    }));
+    (0, fixtures_1.test)("does not stack when stacked is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value', 'category']}"
+        stacked="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(2);
+    }));
+});
+fixtures_1.test.describe("curved prop", () => {
+    (0, fixtures_1.test)("areas are linear by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("curves areas when curved is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        curved="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("keeps areas linear when curved is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        curved="false"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartElementsSelector, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("tickFormatter props", () => {
+    (0, fixtures_1.test)("applies custom X-axis tick formatter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        tickFormatterX="{(value) => 'X-' + value}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(xTicksSelector, { timeout: 10000 });
+        const firstTick = page.locator(xTicksSelector).first();
+        yield (0, fixtures_1.expect)(firstTick).toContainText("X-");
+    }));
+    (0, fixtures_1.test)("applies custom Y-axis tick formatter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        tickFormatterY="{(value) => value + '%'}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(yTicksSelector, { timeout: 10000 });
+        const firstTick = page.locator(yTicksSelector).first();
+        yield (0, fixtures_1.expect)(firstTick).toContainText("%");
+    }));
+    (0, fixtures_1.test)("works without tick formatters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.waitForSelector(xAxisSelector, { timeout: 5000 });
+        yield page.waitForSelector(yAxisSelector, { timeout: 5000 });
+        yield page.waitForTimeout(1000);
+        const xTicks = page.locator(xTicksSelector);
+        const yTicks = page.locator(yTicksSelector);
+        yield (0, fixtures_1.expect)(xTicks.first()).toBeVisible();
+        yield (0, fixtures_1.expect)(yTicks.first()).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("combined props", () => {
+    (0, fixtures_1.test)("all visual props combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="month"
+        data="{${multiSeriesData}}"
+        dataKeys="{['sales', 'profit']}"
+        stacked="true"
+        curved="true"
+        showLegend="true"
+        hideTickX="true"
+        hideTickY="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(2);
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(xTicksSelector)).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(yTicksSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("minimal configuration", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="name"
+        data="{${sampleData}}"
+        dataKeys="{['value']}"
+        hideX="true"
+        hideY="true"
+        hideTooltip="true"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(1);
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("maximum configuration", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <AreaChart
+        nameKey="month"
+        data="{${multiSeriesData}}"
+        dataKeys="{['sales', 'profit', 'expenses']}"
+        stacked="true"
+        curved="true"
+        showLegend="true"
+        hideX="false"
+        hideY="false"
+        hideTickX="false"
+        hideTickY="false"
+        hideTooltip="false"
+        tickFormatterX="{(value) => 'Month: ' + value}"
+        tickFormatterY="{(value) => '$' + value}"
+        width="600px"
+        height="400px"
+      />
+    `);
+        yield page.waitForSelector(chartRoot, { timeout: 10000 });
+        yield page.waitForSelector(chartElementsSelector, { timeout: 5000 });
+        yield (0, fixtures_1.expect)(page.locator(chartElementsSelector)).toHaveCount(3);
+        yield page.waitForSelector(legendSelector, { timeout: 5000 });
+        yield (0, fixtures_1.expect)(page.locator(legendSelector)).toBeVisible();
+        yield page.waitForSelector(xAxisSelector, { timeout: 5000 });
+        yield page.waitForSelector(yAxisSelector, { timeout: 5000 });
+        yield (0, fixtures_1.expect)(page.locator(xAxisSelector)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator(yAxisSelector)).toBeVisible();
+        yield page.waitForTimeout(1000);
+        const xTicks = page.locator(xTicksSelector);
+        const yTicks = page.locator(yTicksSelector);
+        yield (0, fixtures_1.expect)(xTicks.first()).toBeVisible();
+        yield (0, fixtures_1.expect)(yTicks.first()).toBeVisible();
+    }));
+});