@skyux/forms 15.0.0-alpha.8 → 15.0.0-beta.0

package/fesm2022/skyux-forms-testing.mjs

@@ -8,6 +8,9 @@ import { SkyIconHarness } from '@skyux/icon/testing';
 
 /**
  * Harness for interacting with a character counter indicator component in tests.
+ *
+ * @deprecated Use `SkyInputBoxHarness` with an input box that sets the
+ * `characterLimit` input instead.
  */
 class SkyCharacterCounterIndicatorHarness extends SkyComponentHarness {
     /**
@@ -122,6 +125,75 @@ class SkyFormErrorsHarness extends SkyComponentHarness {
     }
 }
 
+/**
+ * @internal
+ */
+async function getCharacterLimitRatio(labelEl) {
+    const text = (await labelEl.text()).trim();
+    const parts = text.split('/');
+    const countText = parts[0]?.trim();
+    const limitText = parts[1]?.trim();
+    const count = Number(countText);
+    const limit = Number(limitText);
+    // The label mirrors whatever `characterLimit` coerced to, which allows
+    // decimals and negatives, so don't restrict this to digits.
+    if (parts.length !== 2 ||
+        !countText ||
+        !limitText ||
+        isNaN(count) ||
+        isNaN(limit)) {
+        throw new Error(`Expected the character limit label to read "count/limit" but found "${text}".`);
+    }
+    return { count, limit };
+}
+/**
+ * @internal
+ */
+async function isOverCharacterLimit(labelEl) {
+    return await labelEl.hasClass('sky-error-label');
+}
+
+/**
+ * Setting `characterLimit` on `sky-input-box` used to render a
+ * `sky-character-counter-indicator`, but now renders a
+ * `sky-input-box-character-limit`. Since `SkyInputBoxHarness.getCharacterCounter()`
+ * is public API, it must still return a `SkyCharacterCounterIndicatorHarness`,
+ * so this subclass preserves that type while reading the new markup. Delete it
+ * when the deprecated character counter component is removed.
+ *
+ * @internal
+ */
+class SkyInputBoxCharacterCounterIndicatorCompatHarness extends SkyCharacterCounterIndicatorHarness {
+    static { this.hostSelector = 'sky-input-box-character-limit'; }
+    #getLabel = this.locatorFor('.sky-input-box-character-limit-label');
+    async getCharacterCount() {
+        return (await getCharacterLimitRatio(await this.#getLabel())).count;
+    }
+    async getCharacterCountLimit() {
+        return (await getCharacterLimitRatio(await this.#getLabel())).limit;
+    }
+    async isOverLimit() {
+        return await isOverCharacterLimit(await this.#getLabel());
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyInputBoxCharacterLimitHarness extends SkyComponentHarness {
+    static { this.hostSelector = 'sky-input-box-character-limit'; }
+    #getLabel = this.locatorFor('.sky-input-box-character-limit-label');
+    async getCharacterCount() {
+        return (await getCharacterLimitRatio(await this.#getLabel())).count;
+    }
+    async getCharacterLimit() {
+        return (await getCharacterLimitRatio(await this.#getLabel())).limit;
+    }
+    async isOverCharacterLimit() {
+        return await isOverCharacterLimit(await this.#getLabel());
+    }
+}
+
 /**
  * Harness for interacting with an input box component in tests.
  */
@@ -130,6 +202,7 @@ class SkyInputBoxHarness extends SkyQueryableComponentHarness {
      * @internal
      */
     static { this.hostSelector = 'sky-input-box'; }
+    #getCharacterLimit = this.locatorForOptional(SkyInputBoxCharacterLimitHarness);
     #getHintText = this.locatorForOptional('.sky-input-box-hint-text');
     #getLabel = this.locatorForOptional('.sky-control-label');
     #getWrapper = this.locatorFor('.sky-input-box');
@@ -152,16 +225,46 @@ class SkyInputBoxHarness extends SkyQueryableComponentHarness {
     /**
      * Gets the character counter indicator for the input box or throws an error if
      * a character limit is not specified.
+     *
+     * @deprecated Use `getCharacterCount()`, `getCharacterLimit()`, and
+     * `isOverCharacterLimit()` instead. Those methods require the `characterLimit`
+     * input, so an input box that projects a `sky-character-counter-indicator` component
+     * must migrate to that input first.
      */
     async getCharacterCounter() {
-        const characterCounter = await this.locatorForOptional(new HarnessPredicate(SkyCharacterCounterIndicatorHarness, {
+        const characterCounter = (await this.locatorForOptional(new HarnessPredicate(SkyCharacterCounterIndicatorHarness, {
             ancestor: '.sky-input-box-label-wrapper',
-        }))();
+        }))()) ??
+            (await this.locatorForOptional(SkyInputBoxCharacterCounterIndicatorCompatHarness)());
         if (!characterCounter) {
             throw new Error('The input box does not have a character limit specified.');
         }
         return characterCounter;
     }
+    /**
+     * Gets the current character count, or throws an error if the input box does
+     * not set the `characterLimit` input.
+     */
+    async getCharacterCount() {
+        const harness = await this.#getCharacterLimitOrThrow();
+        return await harness.getCharacterCount();
+    }
+    /**
+     * Gets the character limit, or throws an error if the input box does not set
+     * the `characterLimit` input.
+     */
+    async getCharacterLimit() {
+        const harness = await this.#getCharacterLimitOrThrow();
+        return await harness.getCharacterLimit();
+    }
+    /**
+     * Whether the character count has exceeded the character limit. Throws an
+     * error if the input box does not set the `characterLimit` input.
+     */
+    async isOverCharacterLimit() {
+        const harness = await this.#getCharacterLimitOrThrow();
+        return await harness.isOverCharacterLimit();
+    }
     /**
      * Gets a list of status indicator harnesses for errors not automatically
      * handled by input box.
@@ -297,6 +400,13 @@ class SkyInputBoxHarness extends SkyQueryableComponentHarness {
         const host = await this.host();
         return await host.hasClass('sky-form-field-stacked');
     }
+    async #getCharacterLimitOrThrow() {
+        const characterLimit = await this.#getCharacterLimit();
+        if (!characterLimit) {
+            throw new Error('The input box does not have a character limit specified.');
+        }
+        return characterLimit;
+    }
     async #getElementTextOrDefault(el) {
         return (await el?.text())?.trim() ?? '';
     }
@@ -2014,9 +2124,142 @@ class SkyToggleSwitchHarness extends SkyComponentHarness {
     }
 }
 
+/**
+ * Harness for interacting with a button component in tests.
+ */
+class SkyButtonHarness extends SkyComponentHarness {
+    /**
+     * @internal
+     */
+    static { this.hostSelector = 'sky-button'; }
+    #getButton = this.locatorForOptional('button');
+    #getAnchor = this.locatorForOptional('a');
+    #getIcon = this.locatorForOptional(SkyIconHarness);
+    #getAnchorOrButton = this.locatorFor('button, a');
+    #getLabelTextLabel = this.locatorForOptional('span');
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a
+     * `SkyButtonHarness` that meets certain criteria.
+     */
+    static with(filters) {
+        return SkyButtonHarness.getDataSkyIdPredicate(filters);
+    }
+    /**
+     * Blurs the button.
+     */
+    async blur() {
+        await (await this.#getAnchorOrButton())?.blur();
+    }
+    /**
+     * Clicks the button.
+     */
+    async click() {
+        await (await this.#getAnchorOrButton())?.click();
+    }
+    /**
+     * Focuses the button.
+     */
+    async focus() {
+        await (await this.#getAnchorOrButton())?.focus();
+    }
+    /**
+     * Gets the button's style.
+     */
+    async getButtonStyle() {
+        const anchorOrButton = await this.#getAnchorOrButton();
+        const buttonStyles = [
+            'danger',
+            'default',
+            'icon-borderless',
+            'link',
+            'link-inline',
+            'primary',
+        ];
+        for (const buttonStyle of buttonStyles) {
+            if (await anchorOrButton?.hasClass(`sky-btn-${buttonStyle}`)) {
+                return buttonStyle;
+            }
+        }
+        /* istanbul ignore next */
+        throw new Error('Unable to determine button style.');
+    }
+    /**
+     * Gets the button's type.
+     */
+    async getButtonType() {
+        const button = await this.#getButton();
+        return (await button?.getAttribute('type'));
+    }
+    /**
+     * Gets the button's label text. If the label is set via `labelText` and `labelHidden` is true,
+     * the text will still be returned.
+     */
+    async getLabelText() {
+        const labelTextLabel = await this.#getLabelTextLabel();
+        if (labelTextLabel) {
+            return await labelTextLabel.text();
+        }
+        return (await this.#getAriaLabel());
+    }
+    /**
+     * Whether the label is hidden. Only supported when using the `labelText` input to set the label.
+     */
+    async getLabelHidden() {
+        const labelTextLabel = await this.#getLabelTextLabel();
+        return !(await labelTextLabel?.text());
+    }
+    /**
+     * Whether the button is disabled.
+     */
+    async isDisabled() {
+        const button = await this.#getButton();
+        if (button) {
+            return (await button.getAttribute('disabled')) !== null;
+        }
+        return false;
+    }
+    /**
+     * Whether the button is focused.
+     */
+    async isFocused() {
+        return await (await this.#getAnchorOrButton()).isFocused();
+    }
+    /**
+     * Gets the name of the displayed icon, or undefined if no icon is displayed.
+     */
+    async getIconName() {
+        return await (await this.#getIcon())?.getIconName();
+    }
+    /**
+     * Whether the button is a block button.
+     */
+    async isBlock() {
+        return await (await this.#getAnchorOrButton()).hasClass('sky-btn-block');
+    }
+    /**
+     * Whether the button is displaying a logo. This will return false when no icon
+     * is displayed, even when the logo input is set to true.
+     */
+    async isLogo() {
+        const iconHost = await (await this.#getIcon())?.host();
+        return !!(await iconHost?.hasClass('sky-btn-block-logo'));
+    }
+    /**
+     * Gets the resolved URL for the current permalink, or undefined if no permalink
+     * is specified.
+     */
+    async getLink() {
+        const anchor = await this.#getAnchor();
+        return (await anchor?.getAttribute('href')) ?? undefined;
+    }
+    async #getAriaLabel() {
+        return await (await this.#getAnchorOrButton()).getAttribute('aria-label');
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkyCharacterCounterIndicatorHarness, SkyCheckboxFixture, SkyCheckboxGroupHarness, SkyCheckboxHarness, SkyCheckboxLabelHarness, SkyFieldGroupHarness, SkyFileAttachmentHarness, SkyFileDropHarness, SkyFileItemHarness, SkyFormErrorHarness, SkyFormErrorsHarness, SkyInputBoxHarness, SkyRadioFixture, SkyRadioGroupHarness, SkyRadioHarness, SkyRadioLabelHarness, SkySelectionBoxGridHarness, SkySelectionBoxHarness, SkyToggleSwitchHarness, provideSkyFileAttachmentTesting };
+export { SkyButtonHarness, SkyCharacterCounterIndicatorHarness, SkyCheckboxFixture, SkyCheckboxGroupHarness, SkyCheckboxHarness, SkyCheckboxLabelHarness, SkyFieldGroupHarness, SkyFileAttachmentHarness, SkyFileDropHarness, SkyFileItemHarness, SkyFormErrorHarness, SkyFormErrorsHarness, SkyInputBoxHarness, SkyRadioFixture, SkyRadioGroupHarness, SkyRadioHarness, SkyRadioLabelHarness, SkySelectionBoxGridHarness, SkySelectionBoxHarness, SkyToggleSwitchHarness, provideSkyFileAttachmentTesting };
 //# sourceMappingURL=skyux-forms-testing.mjs.map