@skyux/forms 15.0.0-alpha.1 → 15.0.0-alpha.10

package/fesm2022/skyux-forms-testing.mjs

@@ -1,14 +1,16 @@
 import { HarnessPredicate, ComponentHarness } from '@angular/cdk/testing';
-import { SkyComponentHarness, SkyQueryableComponentHarness, SkyInputHarness, provideSkyFileReaderTesting } from '@skyux/core/testing';
+import { SkyComponentHarness, SkyQueryableComponentHarness, SkyAppTestUtility, SkyInputHarness, provideSkyFileReaderTesting } from '@skyux/core/testing';
 import { SkyHelpInlineHarness } from '@skyux/help-inline/testing';
 import { SkyStatusIndicatorHarness } from '@skyux/indicators/testing';
 import { SkyPopoverHarness } from '@skyux/popovers/testing';
 import { By } from '@angular/platform-browser';
-import { SkyAppTestUtility } from '@skyux-sdk/testing';
 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 {
     /**
@@ -123,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.
  */
@@ -131,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');
@@ -153,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.
@@ -298,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() ?? '';
     }
@@ -1897,24 +2006,6 @@ class SkySelectionBoxGridHarness extends SkyComponentHarness {
     }
 }
 
-/**
- * Harness for interacting with a toggle switch label component in tests.
- * @internal
- */
-class SkyToggleSwitchLabelHarness extends ComponentHarness {
-    /**
-     * @internal
-     */
-    static { this.hostSelector = 'sky-toggle-switch-label'; }
-    #getLabelContent = this.locatorFor('span[skyTrim]');
-    /**
-     * Gets the text content of the toggle switch label.
-     */
-    async getText() {
-        return await (await this.#getLabelContent()).text();
-    }
-}
-
 /**
  * Harness for interacting with a toggle switch component in tests.
  */
@@ -1924,7 +2015,6 @@ class SkyToggleSwitchHarness extends SkyComponentHarness {
      */
     static { this.hostSelector = 'sky-toggle-switch'; }
     #getButton = this.locatorFor('button.sky-toggle-switch-button');
-    #getLabel = this.locatorForOptional(SkyToggleSwitchLabelHarness);
     #getLabelText = this.locatorForOptional('span.sky-toggle-switch-label-text');
     /**
      * Gets a `HarnessPredicate` that can be used to search for a
@@ -1976,13 +2066,7 @@ class SkyToggleSwitchHarness extends SkyComponentHarness {
      */
     async getLabelHidden() {
         const labelText = await this.#getLabelText();
-        const labelComponent = await this.#getLabel();
-        if (labelComponent) {
-            throw new Error('`labelHidden` is only supported when setting the toggle switch label via the `labelText` input.');
-        }
-        else {
-            return !(await labelText?.text());
-        }
+        return !(await labelText?.text());
     }
     /**
      * Gets the toggle switch's label text. If the label is set via `labelText` and `labelHidden` is true,
@@ -1991,7 +2075,7 @@ class SkyToggleSwitchHarness extends SkyComponentHarness {
     async getLabelText() {
         const labelText = await (await this.#getLabelText())?.text();
         const ariaLabel = await this.#getAriaLabel();
-        return (labelText || ariaLabel || (await (await this.#getLabel())?.getText()));
+        return labelText || ariaLabel || undefined;
     }
     /**
      * Whether the toggle switch is checked.