xmlui 0.10.13 → 0.10.15

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

@@ -0,0 +1,479 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("RadioGroup with Option elements as children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Option value="1"></Option>
+        <Option value="2"></Option>
+        <Option value="3"></Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options).toHaveCount(3);
+    }));
+    (0, fixtures_1.test)("RadioGroup with Option elements with labels as children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+        <Option value="3">Option 3</Option>
+      </RadioGroup>
+    `);
+        const optionLabels = page.getByRole("radiogroup").locator("label");
+        yield (0, fixtures_1.expect)(optionLabels).toHaveCount(3);
+        yield (0, fixtures_1.expect)(optionLabels.nth(0)).toHaveText("Option 1");
+        yield (0, fixtures_1.expect)(optionLabels.nth(1)).toHaveText("Option 2");
+        yield (0, fixtures_1.expect)(optionLabels.nth(2)).toHaveText("Option 3");
+    }));
+    (0, fixtures_1.test)("Providing non-Option elements as children still renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Text>Not an Option</Text>
+      </RadioGroup>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("radiogroup")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Not an Option")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Mixing Option and non-Option elements as children renders all", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Text>Not an Option</Text>
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("radiogroup")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Not an Option")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Option 1")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("autoFocus sets focus on the first Option on page load", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup autoFocus="true">
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("radiogroup").getByRole("radio")).toBeFocused();
+    }));
+    (0, fixtures_1.test)("field is marked as required in the DOM when required=true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup required="true">
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        yield (0, fixtures_1.expect)(page.getByRole("radiogroup")).toHaveAttribute("aria-required");
+    }));
+    (0, fixtures_1.test)("making field required shows a visual indicator", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup required="true" label="Radio Group Label">
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        yield (0, fixtures_1.expect)(page.getByText("*")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("initialValue sets the initial selected option (string initialValue & options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="2">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+        <Option value="3">Option 3</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("initialValue sets the initial selected option (number initialValue & options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="{2}">
+        <Option value="{1}">Option 1</Option>
+        <Option value="{2}">Option 2</Option>
+        <Option value="{3}">Option 3</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("initialValue does not set the initial selected option (number initialValue, string options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="{2}">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+        <Option value="3">Option 3</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("initialValue does not set the initial selected option (string initialValue, number options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="2">
+        <Option value="{1}">Option 1</Option>
+        <Option value="{2}">Option 2</Option>
+        <Option value="{3}">Option 3</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(2)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("initialValue sets the initial selected option (boolean initialValue & options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="{true}">
+        <Option value="{true}">Option 1</Option>
+        <Option value="{false}">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("initialValue does not set the initial selected option (boolean initialValue, string options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="{true}">
+        <Option value="true">Option 1</Option>
+        <Option value="false">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("initialValue does not set the initial selected option (string initialValue, boolean options)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="true">
+        <Option value="{true}">Option 1</Option>
+        <Option value="{false}">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("undefined does not render Radio Option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Option value="1">Option 1</Option>
+        <Option value="{undefined}">Option 2</Option>
+      </RadioGroup>
+    `);
+        const optionLabels = page.getByRole("radiogroup").locator("label");
+        yield (0, fixtures_1.expect)(optionLabels).toHaveCount(1);
+        yield (0, fixtures_1.expect)(optionLabels.first()).toHaveText("Option 1");
+    }));
+    (0, fixtures_1.test)("null renders Radio Option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup>
+        <Option value="1">Option 1</Option>
+        <Option value="{null}">Option 2</Option>
+      </RadioGroup>
+    `);
+        const optionLabels = page.getByRole("radiogroup").locator("label");
+        yield (0, fixtures_1.expect)(optionLabels).toHaveCount(2);
+        yield (0, fixtures_1.expect)(optionLabels.first()).toHaveText("Option 1");
+        yield (0, fixtures_1.expect)(optionLabels.nth(1)).toHaveText("Option 2");
+    }));
+    [
+        { label: "empty object", value: "{}" },
+        { label: "object", value: "{ a: 1 }" },
+        { label: "function", value: "() => {}" },
+        { label: "NaN", value: "NaN" },
+    ].forEach(({ label, value }) => {
+        (0, fixtures_1.test)(`initialValue=${label} falls back to default (empty string)`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+            yield initTestBed(`
+      <RadioGroup initialValue="{${value}}">
+        <Option value="{${value}}">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+            const options = page.getByRole("radiogroup").getByRole("radio");
+            yield (0, fixtures_1.expect)(options.nth(0)).not.toBeChecked();
+            yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+        }));
+    });
+    (0, fixtures_1.test)("readOnly disables switching between options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="1" readOnly="true">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).toBeChecked();
+        yield options.nth(1).click();
+        yield (0, fixtures_1.expect)(options.nth(0)).toBeChecked();
+        yield (0, fixtures_1.expect)(options.nth(1)).not.toBeChecked();
+    }));
+    (0, fixtures_1.test)("enabled input field allows user interaction for field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="1" enabled="true">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+        const radios = yield page.getByRole("radiogroup").getByRole("radio").all();
+        for (const radio of radios) {
+            yield (0, fixtures_1.expect)(radio).toBeEnabled();
+        }
+    }));
+    (0, fixtures_1.test)("disabled input field stops user interaction for field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="1" enabled="false">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+        const radios = yield page.getByRole("radiogroup").getByRole("radio").all();
+        for (const radio of radios) {
+            yield (0, fixtures_1.expect)(radio).toBeDisabled();
+        }
+    }));
+    (0, fixtures_1.test)("disabled option does not disable field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <RadioGroup initialValue="1">
+        <Option value="1" enabled="false">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield (0, fixtures_1.expect)(options.nth(0)).toBeDisabled();
+        yield (0, fixtures_1.expect)(options.nth(1)).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("onDidChange is called on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <RadioGroup initialValue="1" onDidChange="(value) => testState = value">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield options.nth(1).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2");
+    }));
+    (0, fixtures_1.test)("onDidChange is not called if field is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <RadioGroup enabled="false" initialValue="1" onDidChange="(value) => testState = value">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        // Verify the radio buttons are disabled
+        yield (0, fixtures_1.expect)(options.nth(1)).toBeDisabled();
+        yield options.nth(1).click({ force: true });
+        // Verify the state hasn't changed (should still be null since no change handler was called)
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
+    }));
+    (0, fixtures_1.test)("gotFocus event fires on focusing the field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <RadioGroup initialValue="1" onGotFocus="() => testState = 'focused'">
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield options.nth(0).focus();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
+    }));
+    (0, fixtures_1.test)("lostFocus event fires on blurring the field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <RadioGroup initialValue="1" onLostFocus="() => testState = 'blurred'">
+        <Option value="1">Option 1</Option>
+      </RadioGroup>
+    `);
+        const options = page.getByRole("radiogroup").getByRole("radio");
+        yield options.nth(0).focus();
+        yield options.nth(0).blur();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
+    }));
+});
+(0, fixtures_1.test)("validationStatus 'none' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup validationStatus="none" initialValue="1">
+      <Option value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+
+  `, {
+        testThemeVars: {
+            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
+        },
+    });
+    const options = page.getByRole("radiogroup").getByRole("radio");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+}));
+(0, fixtures_1.test)("validationStatus 'error' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <Theme
+      borderColor-RadioGroupOption-error="rgb(255, 32, 0)"
+      borderColor-checked-RadioGroupOption="rgb(80, 80, 80)"
+    >
+      <RadioGroup validationStatus="error" initialValue="1">
+        <Option value="1">Option 1</Option>
+        <Option value="2">Option 2</Option>
+      </RadioGroup>
+    </Theme>
+  `);
+    const options = page.getByRole("radiogroup").getByRole("radio");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(255, 32, 0)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+}));
+(0, fixtures_1.test)("validationStatus 'warning' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup validationStatus="warning" initialValue="1">
+      <Option value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `, {
+        testThemeVars: {
+            "borderColor-RadioGroupOption-warning": "rgb(255, 180, 0)",
+            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
+        },
+    });
+    const options = page.getByRole("radiogroup").getByRole("radio");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(255, 180, 0)");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+}));
+(0, fixtures_1.test)("validationStatus 'valid' is applied correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup validationStatus="valid" initialValue="1">
+      <Option value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `, {
+        testThemeVars: {
+            "borderColor-RadioGroupOption-success": "rgb(0, 180, 0)",
+            "borderColor-checked-RadioGroupOption": "rgb(80, 80, 80)",
+        },
+    });
+    const options = page.getByRole("radiogroup").getByRole("radio");
+    yield (0, fixtures_1.expect)(options.nth(1)).toHaveCSS("border-top-color", "rgb(80, 80, 80)");
+    yield (0, fixtures_1.expect)(options.nth(0)).toHaveCSS("border-top-color", "rgb(0, 180, 0)");
+}));
+(0, fixtures_1.test)("label is rendered if provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup label="Test Label" initialValue="1">
+      <Option value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `);
+    const labels = page.locator("label");
+    yield (0, fixtures_1.expect)(labels).toHaveCount(3);
+    yield (0, fixtures_1.expect)(labels.nth(0)).toHaveText("Test Label");
+    yield (0, fixtures_1.expect)(labels.nth(1)).toHaveText("Option 1");
+    yield (0, fixtures_1.expect)(labels.nth(2)).toHaveText("Option 2");
+}));
+(0, fixtures_1.test)("empty string label is not rendered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup initialValue="1">
+      <Option value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `);
+    const labels = page.locator("label");
+    yield (0, fixtures_1.expect)(labels).toHaveCount(2);
+    yield (0, fixtures_1.expect)(labels.nth(0)).toHaveText("Option 1");
+    yield (0, fixtures_1.expect)(labels.nth(1)).toHaveText("Option 2");
+}));
+(0, fixtures_1.test)("labelPosition=start positions label before input with ltr", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup direction="ltr" label="test" labelPosition="start" initialValue="1">
+      <Option testId="option1" value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `);
+    const labels = page.locator("label");
+    (0, fixtures_1.expect)(labels).toHaveCount(3);
+    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(1));
+    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
+    (0, fixtures_1.expect)(labelRight).toBeLessThan(optionLeft);
+}));
+(0, fixtures_1.test)("labelPosition=start positions label after input with rtl", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup direction="rtl" label="test" labelPosition="start" initialValue="1">
+      <Option testId="option1" value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `);
+    const labels = page.locator("label");
+    (0, fixtures_1.expect)(labels).toHaveCount(3);
+    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
+    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(2));
+    (0, fixtures_1.expect)(labelRight).toBeLessThan(optionLeft);
+}));
+(0, fixtures_1.test)("labelPosition=end positions label after input with ltr", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup direction="ltr" label="test" labelPosition="end" initialValue="1">
+      <Option testId="option1" value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `);
+    const labels = page.locator("label");
+    (0, fixtures_1.expect)(labels).toHaveCount(3);
+    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
+    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(1));
+    (0, fixtures_1.expect)(labelRight).toBeLessThan(optionLeft);
+}));
+(0, fixtures_1.test)("labelPosition=end positions label after input with rtl", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <RadioGroup direction="rtl" label="test" labelPosition="end" initialValue="1">
+      <Option testId="option1" value="1">Option 1</Option>
+      <Option value="2">Option 2</Option>
+    </RadioGroup>
+  `);
+    const labels = page.locator("label");
+    (0, fixtures_1.expect)(labels).toHaveCount(3);
+    (0, fixtures_1.expect)(labels.nth(2)).toHaveText("Option 2");
+    const { left: optionLeft } = yield (0, component_test_helpers_1.getBounds)(labels.nth(0));
+    const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(labels.nth(2));
+    (0, fixtures_1.expect)(optionLeft).toBeLessThan(labelRight);
+}));
+(0, fixtures_1.test)("value returns current input value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+      <Fragment>
+      <RadioGroup id="radioGroup" initialValue="2">
+        <Option value="1"></Option>
+        <Option value="2"></Option>
+      </RadioGroup>
+      <Text testId="valueDisplay">{radioGroup.value}</Text>
+      </Fragment>
+    `);
+    const valueDisplay = page.getByTestId("valueDisplay");
+    yield (0, fixtures_1.expect)(valueDisplay).toHaveText("2");
+}));
+// --- --- setValue
+(0, fixtures_1.test)("setValue input value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+      <Fragment>
+      <RadioGroup id="radioGroup" initialValue="2">
+        <Option value="1"></Option>
+        <Option value="2"></Option>
+      </RadioGroup>
+      <Text testId="valueDisplay">{radioGroup.value}</Text>
+      <Button onClick="() => radioGroup.setValue('1')" testId="setValueButton">Set Value</Button>
+      </Fragment>
+    `);
+    const valueDisplay = page.getByTestId("valueDisplay");
+    yield (0, fixtures_1.expect)(valueDisplay).toHaveText("2");
+    yield page.getByTestId("setValueButton").click();
+    yield (0, fixtures_1.expect)(valueDisplay).toHaveText("1");
+}));