@esri/calcite-components 2.4.0 → 2.4.1-next.0

package/dist/collection/tests/commonTests.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.4.1-next.0
  */
 /* eslint-disable jest/no-conditional-expect -- Using conditional logic in a confined test helper to handle specific scenarios, reducing duplication, balancing test readability and maintainability. **/
 /* eslint-disable jest/no-export -- Util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks. */
@@ -9,7 +9,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { toHaveNoViolations } from "jest-axe";
 import { config } from "../../stencil.config";
 import { html } from "../../support/formatting";
-import { hiddenFormInputSlotName } from "../utils/form";
+import { getClearValidationEventName, hiddenFormInputSlotName, componentsWithInputEvent } from "../utils/form";
 import { isElementFocused, newProgrammaticE2EPage, skipAnimations, } from "./utils";
 expect.extend(toHaveNoViolations);
 export const HYDRATED_ATTR = config.hydratedFlag.name;
@@ -488,8 +488,12 @@ export function labelable(componentTagOrHtml, options) {
  * @param {FormAssociatedOptions} options - form associated options
  */
 export function formAssociated(componentTagOrHtml, options) {
-    it("supports association via ancestry", () => testAncestorFormAssociated());
-    it("supports association via form ID", () => testIdFormAssociated());
+    const inputTypeContext = options?.inputType ? ` (input type="${options.inputType}")` : "";
+    it(`supports association via ancestry${inputTypeContext}`, () => testAncestorFormAssociated());
+    it(`supports association via form ID${inputTypeContext}`, () => testIdFormAssociated());
+    if (options?.validation && !["color", "month", "time"].includes(options?.inputType)) {
+        it(`supports required property validation${inputTypeContext}`, () => testRequiredPropertyValidation());
+    }
     async function testAncestorFormAssociated() {
         const { beforeContent, tagOrHTML } = getTagOrHTMLWithBeforeContent(componentTagOrHtml);
         const tag = getTag(tagOrHTML);
@@ -536,12 +540,40 @@ export function formAssociated(componentTagOrHtml, options) {
             await assertFormSubmitOnEnter(page, component, options);
         }
     }
-    function ensureForm(html, componentTag) {
-        return html.includes("form=") ? html : html.replace(componentTag, `${componentTag} form="test-form" `);
+    async function testRequiredPropertyValidation() {
+        const requiredValidationMessage = "Please fill out this field.";
+        const { beforeContent, tagOrHTML } = getTagOrHTMLWithBeforeContent(componentTagOrHtml);
+        const tag = getTag(tagOrHTML);
+        const componentHtml = ensureUnchecked(ensureRequired(ensureName(isHTML(tagOrHTML) ? tagOrHTML : `<${tag}></${tag}>`, tag), tag));
+        const page = await newE2EPage();
+        await beforeContent?.(page);
+        const content = html `
+      <form>
+        ${componentHtml}
+        <calcite-button id="submitButton" type="submit">Submit</calcite-button>
+      </form>
+    `;
+        await page.setContent(content);
+        await page.waitForChanges();
+        const component = await page.find(tag);
+        const submitButton = await page.find("#submitButton");
+        const spyEvent = await page.spyOnEvent(getClearValidationEventName(tag));
+        await assertPreventsFormSubmission(page, component, submitButton, requiredValidationMessage);
+        await assertClearsValidationOnValueChange(page, component, options, spyEvent, tag);
+        await assertUserMessageNotOverridden(page, component, submitButton);
     }
     function ensureName(html, componentTag) {
         return html.includes("name=") ? html : html.replace(componentTag, `${componentTag} name="testName" `);
     }
+    function ensureRequired(html, componentTag) {
+        return html.includes("required") ? html : html.replace(componentTag, `${componentTag} required `);
+    }
+    function ensureUnchecked(html) {
+        return html.replace(/(checked|selected)/, "");
+    }
+    function ensureForm(html, componentTag) {
+        return html.includes("form=") ? html : html.replace(componentTag, `${componentTag} form="test-form" `);
+    }
     async function isCheckable(page, component, options) {
         return (typeof options.testValue === "boolean" &&
             (await page.$eval(component.tagName.toLowerCase(), (component) => "checked" in component)));
@@ -668,6 +700,53 @@ export function formAssociated(componentTagOrHtml, options) {
         const called = await page.evaluate(() => window.called);
         expect(called).toBe(true);
     }
+    async function assertPreventsFormSubmission(page, component, submitButton, message) {
+        await submitButton.click();
+        await page.waitForChanges();
+        await expectValidationInvalid(component, message);
+    }
+    async function assertClearsValidationOnValueChange(page, component, options, event, tag) {
+        if (options?.changeValueKeys) {
+            for (const key of options.changeValueKeys) {
+                await page.keyboard.press(key);
+            }
+        }
+        else {
+            await page.keyboard.type(options?.validUserInputTestValue ?? options.testValue);
+            await page.keyboard.press("Tab");
+        }
+        await page.waitForChanges();
+        // components with an Input event will emit multiple times depending on the length of testValue
+        if (componentsWithInputEvent.includes(tag)) {
+            expect(event.length).toBeGreaterThanOrEqual(1);
+        }
+        else {
+            expect(event).toHaveReceivedEventTimes(1);
+        }
+        await expectValidationIdle(component);
+    }
+    async function assertUserMessageNotOverridden(page, component, submitButton) {
+        const customValidationMessage = "This is a custom message.";
+        const customValidationIcon = "banana";
+        // don't override custom validation message and icon
+        component.setProperty("validationMessage", customValidationMessage);
+        component.setProperty("validationIcon", customValidationIcon);
+        component.setProperty("value", undefined);
+        await page.waitForChanges();
+        await submitButton.click();
+        await page.waitForChanges();
+        await expectValidationInvalid(component, customValidationMessage, customValidationIcon);
+    }
+    async function expectValidationIdle(element) {
+        expect(await element.getProperty("status")).toBe("idle");
+        expect(await element.getProperty("validationMessage")).toBe("");
+        expect(await element.getProperty("validationIcon")).toBe(false);
+    }
+    async function expectValidationInvalid(element, message, icon = "") {
+        expect(await element.getProperty("status")).toBe("invalid");
+        expect(await element.getProperty("validationMessage")).toBe(message);
+        expect(element.getAttribute("validation-icon")).toBe(icon);
+    }
 }
 async function getTagAndPage(componentTestSetup) {
     if (typeof componentTestSetup === "function") {