@skyux/forms 15.0.0-alpha.7 → 15.0.0-alpha.9

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() ?? '';
     }