xmlui 0.11.4 → 0.11.6

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

@@ -1,999 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../../testing/fixtures");
-// Test data helpers - using proper XMLUI data format
-const sampleData = `[
-  { name: '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();
-    }));
-});