xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,418 @@
+"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 component_test_helpers_1 = require("../../testing/component-test-helpers");
+const fixtures_1 = require("../../testing/fixtures");
+// Use low delay duration for faster tests as suggested
+const LOW_DELAY = 10;
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip delayDuration="${LOW_DELAY}" text="I'm a tooltip!">
+        <Button label="Hover me!" testId="tooltip-button" />
+      </Tooltip>
+    `);
+        const button = page.getByTestId("tooltip-button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Hover over the button to trigger tooltip
+        yield button.hover();
+        // Wait for tooltip to appear with low delay
+        yield (0, fixtures_1.expect)(page.locator("[data-tooltip-container]")).toBeVisible();
+    }));
+    // Note: This test is mainly to verify that the tooltip has the correct role for accessibility but
+    // is placed here since we use getByRole for the content.
+    // Fetching by data attribute is for the dimension tests below.
+    (0, fixtures_1.test)("has correct 'role' attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="Tooltip" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `);
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip).toContainText("Tooltip");
+    }));
+    (0, fixtures_1.test)("renders with tooltip property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip delayDuration="${LOW_DELAY}" text="I'm a tooltip!">
+        <Button label="Hover me!" testId="tooltip-button" />
+      </Tooltip>
+    `);
+        const button = page.getByTestId("tooltip-button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Hover over the button to trigger tooltip
+        yield button.hover();
+        // Wait for tooltip to appear with low delay
+        yield (0, fixtures_1.expect)(page.getByRole("tooltip")).toHaveText("I'm a tooltip!");
+        // Note: We skip testing tooltip hiding as it's dependent on implementation details
+        // and the main functionality test is that it appears correctly on hover
+    }));
+    (0, fixtures_1.test)("renders with markdown content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip delayDuration="${LOW_DELAY}" markdown="This *example* uses \`tooltipMarkdown\`">
+        <Card title="Tooltip with markdown" testId="markdown-card" />
+      </Tooltip>
+    `);
+        const card = page.getByTestId("markdown-card");
+        yield (0, fixtures_1.expect)(card).toBeVisible();
+        // Hover to show tooltip
+        yield card.hover();
+        // Check that markdown is rendered (looking for emphasis and code elements)
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip.locator("em")).toContainText("example");
+        yield (0, fixtures_1.expect)(tooltip.locator("code")).toContainText("tooltipMarkdown");
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned right" side="right">
+          <Button label="Hover me!" testId="right-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("right-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned right");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned to the right of the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.left).toBeGreaterThan(buttonBox.right);
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned left" side="left">
+          <Button label="Hover me!" testId="left-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("left-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned left");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned to the right of the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.right).toBeLessThan(buttonBox.left);
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned top" side="top">
+          <Button label="Hover me!" testId="top-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("top-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned top");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned above the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.bottom).toBeLessThan(buttonBox.top);
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned bottom" side="bottom">
+          <Button label="Hover me!" testId="bottom-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("bottom-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned bottom");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned below the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.top).toBeGreaterThan(buttonBox.bottom);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is top`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="top" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const icon = page.getByTestId("tooltip-icon");
+        yield icon.hover();
+        const tooltip = page.locator("[data-tooltip-container]");
+        // Verify tooltip is positioned above the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(iconBox.top - tooltipBox.bottom).toEqualWithTolerance(28, 4);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is bottom`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="bottom" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon" />
+        </Tooltip>
+      </Stack>
+    `);
+        const icon = page.getByTestId("tooltip-icon");
+        yield icon.hover();
+        const tooltip = page.locator("[data-tooltip-container]");
+        // Verify tooltip is positioned below the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.top - iconBox.bottom).toBeGreaterThanOrEqual(28);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is left`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="left" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon-left" />
+        </Tooltip>
+      </Stack>
+    `);
+        const icon = page.getByTestId("tooltip-icon-left");
+        yield icon.hover();
+        const tooltip = page.getByRole("tooltip");
+        // Verify tooltip is positioned to the left of the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(iconBox.left - tooltipBox.right).toBeGreaterThanOrEqual(28);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is right`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="right" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon-right" />
+        </Tooltip>
+      </Stack>
+    `);
+        const icon = page.getByTestId("tooltip-icon-right");
+        yield icon.hover();
+        const tooltip = page.getByRole("tooltip");
+        // Verify tooltip is positioned to the right of the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.left - iconBox.right).toBeGreaterThanOrEqual(28);
+    }));
+    (0, fixtures_1.test)("Tooltip is shown for all wrapped children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip side="bottom" markdown="This *example* uses a \`Tooltip\` component" delayDuration="${LOW_DELAY}">
+        <VStack horizontalAlignment="center">
+          <Card title="Card 1: within a Tooltip" testId="tooltip-card-1" />
+          <Card title="Card 2: within the same Tooltip" testId="tooltip-card-2" />
+        </VStack>
+      </Tooltip>
+    `);
+        const card1 = page.getByTestId("tooltip-card-1");
+        const card2 = page.getByTestId("tooltip-card-2");
+        yield (0, fixtures_1.expect)(card1).toBeVisible();
+        yield (0, fixtures_1.expect)(card2).toBeVisible();
+        // Hover over first card
+        yield card1.hover();
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip.locator("em")).toContainText("example");
+        yield (0, fixtures_1.expect)(tooltip.locator("code")).toContainText("Tooltip");
+        // Move to second card - tooltip should still be visible
+        yield card2.hover();
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with 'tooltipTemplate' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <VStack height="100px" horizontalAlignment="center">
+        <Tooltip side="bottom" delayDuration="${LOW_DELAY}">
+          <property name="tooltipTemplate">
+            <HStack>
+              <Stack width="24px" height="24px" backgroundColor="purple" testId="purple-square" />
+              <H2>This is a tooltip</H2>
+            </HStack>
+          </property>
+          <Card title="I have a templated Tooltip!" testId="template-card" />
+        </Tooltip>
+      </VStack>
+    `);
+        const card = page.getByTestId("template-card");
+        yield card.hover();
+        // Check that custom template elements are present
+        const tooltip = page.locator('[role="tooltip"]');
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip.getByTestId("purple-square")).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip.getByRole("heading", { level: 2 })).toContainText("This is a tooltip");
+    }));
+    (0, fixtures_1.test)("renders with start 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack horizontalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="Start aligned" side="bottom" align="start">
+          <Button label="Start aligned Start aligned" testId="start-button" />
+        </Tooltip>
+      </HStack>
+    `);
+        const startButton = page.getByTestId("start-button");
+        yield startButton.hover();
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(startButton);
+        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toBeLessThan(buttonBox.left + buttonBox.width / 2);
+    }));
+    (0, fixtures_1.test)("renders with center 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack horizontalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="Center aligned" side="bottom" align="center">
+          <Button label="Center aligned Center aligned" testId="center-button" />
+        </Tooltip>
+      </HStack>
+    `);
+        const centerButton = page.getByTestId("center-button");
+        yield centerButton.hover();
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(centerButton);
+        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toEqualWithTolerance(buttonBox.left + buttonBox.width / 2, 10);
+    }));
+    (0, fixtures_1.test)("renders with end 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack horizontalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="End aligned" side="bottom" align="end">
+          <Button label="End aligned End aligned" testId="end-button" />
+        </Tooltip>
+      </HStack>
+    `);
+        const endButton = page.getByTestId("end-button");
+        yield endButton.hover();
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(endButton);
+        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toBeGreaterThan(buttonBox.left + buttonBox.width / 2);
+    }));
+    (0, fixtures_1.test)("renders with 'defaultOpen' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="Always visible tooltip" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" testId="default-open-button" />
+      </Tooltip>
+    `);
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("default-open-button")).toBeVisible();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("tooltip content is accessible via screen reader", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `);
+        // Check that tooltip has proper accessibility attributes
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip content is properly exposed
+        yield (0, fixtures_1.expect)(tooltip).toHaveText("This tooltip is accessible");
+    }));
+});
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies 'backgroundColor-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "backgroundColor-Tooltip": "rgb(255, 0, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("background-color", "rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("applies 'textColor-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "textColor-Tooltip": "rgb(0, 255, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("color", "rgb(0, 255, 0)");
+    }));
+    (0, fixtures_1.test)("applies 'borderRadius-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "borderRadius-Tooltip": "12px" },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("border-radius", "12px");
+    }));
+    (0, fixtures_1.test)("applies 'fontSize-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "fontSize-Tooltip": "20px" },
+        });
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip).toHaveCSS("font-size", "20px");
+    }));
+    (0, fixtures_1.test)("applies 'paddingLeft-Tooltip' and 'paddingRight-Tooltip' theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: {
+                "paddingLeft-Tooltip": "20px",
+                "paddingRight-Tooltip": "25px",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("padding-left", "20px");
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("padding-right", "25px");
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles empty tooltip text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with empty tooltip" />
+      </Tooltip>
+    `);
+        // There should be no visible tooltip with meaningful content
+        const tooltips = page.getByRole("tooltip");
+        const count = yield tooltips.count();
+        if (count > 0) {
+            // If tooltip exists, it should be empty or not visible
+            const tooltip = tooltips.first();
+            const text = yield tooltip.textContent();
+            (0, fixtures_1.expect)(text === null || text === void 0 ? void 0 : text.trim()).toBe("");
+        }
+    }));
+    (0, fixtures_1.test)("handles tooltip without any content properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip>
+        <Button label="Button in tooltip without content" testId="no-content-button" />
+      </Tooltip>
+    `);
+        const button = page.getByTestId("no-content-button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Hover should not show tooltip since there's no content
+        yield button.hover();
+        // Should not find any tooltip with content
+        const tooltips = page.getByRole("tooltip");
+        const count = yield tooltips.count();
+        (0, fixtures_1.expect)(count).toBe(0);
+    }));
+});

package/dist/scripts/src/components/chart-color-schemes.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const colorSchemes = {
+    "set3": "set3",
+    "tableau10": "tableau10",
+    "brown_blueGreen": "brown_blueGreen",
+    "purpleRed_green": "purpleRed_green",
+    "pink_yellowGreen": "pink_yellowGreen",
+    "purple_orange": "purple_orange",
+    "red_blue": "red_blue",
+    "red_grey": "red_grey",
+    "red_yellow_blue": "red_yellow_blue",
+    "red_yellow_green": "red_yellow_green",
+    "spectral": "spectral",
+    "blues": "blues",
+    "greens": "greens",
+    "greys": "greys",
+    "oranges": "oranges",
+    "purples": "purples",
+    "reds": "reds",
+    "blue_green": "blue_green",
+    "blue_purple": "blue_purple",
+    "green_blue": "green_blue",
+    "orange_red": "orange_red",
+    "purple_blue_green": "purple_blue_green",
+    "purple_blue": "purple_blue",
+    "purple_red": "purple_red",
+    "red_purple": "red_purple",
+    "yellow_green_blue": "yellow_green_blue",
+    "yellow_green": "yellow_green",
+    "yellow_orange_brown": "yellow_orange_brown",
+    "yellow_orange_red": "yellow_orange_red",
+    "nivo": "nivo",
+    "category10": "category10",
+    "accent": "accent",
+    "dark2": "dark2",
+    "paired": "paired",
+    "pastel1": "pastel1",
+    "pastel2": "pastel2",
+    "set1": "set1",
+    "set2": "set2"
+};
+exports.default = colorSchemes;

package/dist/scripts/src/components-core/ApiBoundComponent.js

@@ -42,19 +42,30 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
         function generateloaderUid(key) {
             return `${node.uid}_data_${key}`;
         }
-        const loaders = [...(node.loaders || [])];
-        const events = Object.assign({}, (node.events || {}));
-        const props = Object.assign({}, (node.props || {}));
-        const vars = Object.assign({}, (node.vars || {}));
-        const api = Object.assign({}, (node.api || {}));
-        apiBoundEvents.forEach((key) => {
-            const { type } = node.events[key];
+        // Generates a string representation of an event handler function that calls 
+        // the appropriate action. This function is used recursively for nested actions.
+        function generateEventHandler(actionComponent) {
+            const { type } = actionComponent;
+            // Prepares an event handler, which can be several types of data
+            // (string for inline JS functions, parsed objects, or nested action components)
+            const prepareEvent = (eventData) => {
+                if (!eventData) {
+                    return "undefined";
+                }
+                if (typeof eventData === "string") {
+                    return `"${eventData}"`;
+                }
+                if (typeof eventData.type === "string") {
+                    return generateEventHandler(eventData);
+                }
+                return JSON.stringify(eventData);
+            };
+            // --- Prepare event handlers
+            const { success, error, progress, beforeRequest } = actionComponent.events || {};
             switch (type) {
                 case "FileUpload": {
-                    const actionComponent = node.events[key];
                     const { invalidates, asForm, formParams, queryParams, rawBody, body, url, headers, method, file, } = actionComponent.props;
-                    const { success, error } = actionComponent.events || {};
-                    events[key] = `(eventArgs) => {
+                    return `(eventArgs) => {
             return Actions.upload({
               asForm: ${JSON.stringify(asForm)}, 
               formParams: ${JSON.stringify(formParams)}, 
@@ -66,17 +77,15 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
               method: ${JSON.stringify(method)}, 
               file: ${JSON.stringify(file)}, 
               params: { '$param': eventArgs }, 
-              onError: ${JSON.stringify(error)}, 
-              onSuccess: ${JSON.stringify(success)}, 
+              onError: ${prepareEvent(error)}, 
+              onSuccess: ${prepareEvent(success)}, 
               onProgress: eventArgs.onProgress, 
               invalidates: ${invalidates === undefined ? undefined : JSON.stringify(invalidates)}  }, { resolveBindingExpressions: true });
           }`;
-                    break;
                 }
                 case "FileDownload": {
-                    const actionComponent = node.events[key];
                     const { url, queryParams, rawBody, body, headers, method, fileName } = actionComponent.props;
-                    events[key] = `(eventArgs) => {
+                    return `(eventArgs) => {
             return Actions.download({
               queryParams: ${JSON.stringify(queryParams)}, 
               rawBody: ${JSON.stringify(rawBody)}, 
@@ -88,14 +97,11 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
               params: { '$param': eventArgs },
             }, { resolveBindingExpressions: true });
           }`;
-                    break;
                 }
                 case "APICall": {
-                    const actionComponent = node.events[key];
                     const { when, uid } = actionComponent;
                     const { confirmTitle, confirmMessage, confirmButtonLabel, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, invalidates, updates, optimisticValue, getOptimisticValue, headers, payloadType, method, url, queryParams, rawBody, body, } = actionComponent.props;
-                    const { success, error, progress, beforeRequest } = actionComponent.events || {};
-                    events[key] = `(eventArgs, options) => {
+                    return `(eventArgs, options) => {
             return Actions.callApi({
               uid: ${JSON.stringify(uid)},
               headers: ${JSON.stringify(headers)}, 
@@ -111,10 +117,10 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
               completedNotificationMessage: ${JSON.stringify(completedNotificationMessage)}, 
               errorNotificationMessage: ${JSON.stringify(errorNotificationMessage)}, 
               params: { '$param': eventArgs }, 
-              onError: ${JSON.stringify(error)}, 
-              onProgress: ${JSON.stringify(progress)}, 
-              onBeforeRequest: ${JSON.stringify(beforeRequest)}, 
-              onSuccess: ${JSON.stringify(success)}, 
+              onError: ${prepareEvent(error)}, 
+              onProgress: ${prepareEvent(progress)}, 
+              onBeforeRequest: ${prepareEvent(beforeRequest)}, 
+              onSuccess: ${prepareEvent(success)}, 
               updates: ${JSON.stringify(updates)}, 
               optimisticValue: ${JSON.stringify(optimisticValue)}, 
               payloadType: ${JSON.stringify(payloadType)}, 
@@ -122,12 +128,20 @@ function ApiBoundComponent({ uid, node, apiBoundProps, apiBoundEvents, renderChi
               invalidates: ${invalidates === undefined ? undefined : JSON.stringify(invalidates)}, 
               when: ${when === undefined ? undefined : JSON.stringify(when)} }, { resolveBindingExpressions: true });
           }`;
-                    break;
                 }
                 default: {
                     throw new Error("Unknown event handler component type: ", type);
                 }
             }
+        }
+        const loaders = [...(node.loaders || [])];
+        const events = Object.assign({}, (node.events || {}));
+        const props = Object.assign({}, (node.props || {}));
+        const vars = Object.assign({}, (node.vars || {}));
+        const api = Object.assign({}, (node.api || {}));
+        apiBoundEvents.forEach((key) => {
+            const actionComponent = node.events[key];
+            events[key] = generateEventHandler(actionComponent);
         });
         apiBoundProps.forEach((key) => {
             var _a, _b, _c;

package/dist/scripts/src/components-core/CompoundComponent.js

@@ -84,7 +84,7 @@ exports.CompoundComponent = (0, react_1.forwardRef)((_a, forwardedRef) => {
             api,
             scriptCollected,
             loaders: loaders,
-            vars: vars,
+            vars,
             functions: functions,
             scriptError: scriptError,
             containerUid: uid,