@justeattakeaway/pie-webc-core - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240404092836 to 0.0.0-snapshot-release-20240404115951

CHANGELOG.md

 # Changelog
 
-## 0.0.0-snapshot-release-20240404092836
+## 0.0.0-snapshot-release-20240404115951
 
@@ -5,0 +5,0 @@ ### Minor Changes

dist/index.js

@@ -1,2 +0,2 @@
-import { isServer as c } from "lit";
+import { isServer as l } from "lit";
 const m = (t, e, n) => function(s, i) {
@@ -29,6 +29,6 @@ const o = `#${i}`;
 };
-function h(t, e) {
+function p(t, e) {
   customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, e);
 }
-function p(t) {
+function h(t) {
   return new CustomEvent(t.type, {
@@ -63,3 +63,3 @@ detail: {
     get isRTL() {
-      return this.dir ? this.dir === "rtl" : !c && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+      return this.dir ? this.dir === "rtl" : !l && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
     }
@@ -69,7 +69,7 @@ }
 };
-function d(t) {
-  const e = t.querySelectorAll("pie-input"), n = Array.from(e).find((r) => !r.validity.valid);
-  n == null || n.focus();
+function c(t, e) {
+  const n = t.querySelectorAll("pie-input"), r = Array.from(n).find((s) => !s.validity.valid);
+  r && (e.preventDefault(), r.focus());
 }
-class l {
+class d {
   constructor() {
@@ -83,3 +83,3 @@ this._forms = /* @__PURE__ */ new WeakMap();
     const n = e.target;
-    d(n);
+    c(n, e);
   }
@@ -126,6 +126,6 @@ /**
       var r;
-      super.connectedCallback(), this.form && (window.pieFormManager || (window.pieFormManager = new l()), window.pieFormManager && (window.pieFormManager.addForm(this.form), this._managedForm = (r = window.pieFormManager.getForm(this.form)) == null ? void 0 : r.form));
+      super.connectedCallback(), this.form && (window.pieFormManager || (window.pieFormManager = new d()), window.pieFormManager && (window.pieFormManager.addForm(this.form), this._managedForm = (r = window.pieFormManager.getForm(this.form)) == null ? void 0 : r.form));
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this._managedForm && window.pieFormManager && this._managedForm.querySelectorAll("pie-input[required]").length === 0 && window.pieFormManager.deleteForm(this._managedForm);
+      super.disconnectedCallback(), this._managedForm && window.pieFormManager && this._managedForm.querySelectorAll("pie-input").length === 0 && window.pieFormManager.deleteForm(this._managedForm);
     }
@@ -137,9 +137,9 @@ }
   F as FormControlMixin,
-  l as PieFormManager,
+  d as PieFormManager,
   b as RtlMixin,
-  h as defineCustomElement,
+  p as defineCustomElement,
   g as dispatchCustomEvent,
   f as requiredProperty,
   m as validPropertyValues,
-  p as wrapNativeEvent
+  h as wrapNativeEvent
 };

package.json

 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.0.0-snapshot-release-20240404092836",
+  "version": "0.0.0-snapshot-release-20240404115951",
   "description": "PIE design system base classes, mixins and utilities for web components",
@@ -5,0 +5,0 @@ "type": "module",

src/forms/index.ts

@@ -1,1 +0,1 @@
-export * from './PieFormManager';
+export * from './pie-form-manager';

src/mixins/formControl/formControlMixin.ts

 import type { LitElement } from 'lit';
 import type { GenericConstructor } from '../types/GenericConstructor';
-import { PieFormManager } from '../../forms/PieFormManager';
+import { PieFormManager } from '../../forms/pie-form-manager';
 
@@ -81,7 +81,8 @@ /**
                 if (this._managedForm && window.pieFormManager) {
-                    const requiredPieInputs = this._managedForm.querySelectorAll('pie-input[required]');
+                    // We can extend this to include more form control components as we create them.
+                    const pieInputsInForm = this._managedForm.querySelectorAll('pie-input');
 
                     // This particular component instance is not queryable in the DOM during disconnectedCallback
                     // so if it was the last require field then the length would be 0
-                    if (requiredPieInputs.length === 0) {
+                    if (pieInputsInForm.length === 0) {
                         window.pieFormManager.deleteForm(this._managedForm);
@@ -88,0 +89,0 @@ }

src/test/mixins/formControlMixin/formControlMixin.browser.spec.ts

@@ -28,2 +28,12 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
             });
+
+            test('should not instantiate a PieFormManager instance', async ({ mount, page }) => {
+                // Arrange
+                await mount(MockComponent);
+
+                const formManagerExists = await page.evaluate(() => !!window.pieFormManager);
+
+                // Assert
+                expect(formManagerExists).toBe(false);
+            });
         });
@@ -52,2 +62,88 @@
             });
+
+            test.describe('PieFormManager integration', () => {
+                test('should instantiate a PieFormManager instance if one does not exist and attach it to the window', async ({ mount, page }) => {
+                    // Arrange
+                    await page.setContent(`
+                        <form id="testForm" action="/foo" method="POST">
+                            <form-control-mixin-mock></form-control-mixin-mock>
+                        </form>
+                    `);
+
+                    const formManagerExists = await page.evaluate(() => !!window.pieFormManager);
+
+                    // Assert
+                    expect(formManagerExists).toBe(true);
+                });
+
+                test('should add the associated form to the PieFormManager instance', async ({ page }) => {
+                    // Arrange
+                    await page.setContent(`
+                        <form id="testForm" action="/foo" method="POST">
+                            <form-control-mixin-mock></form-control-mixin-mock>
+                        </form>
+                    `);
+
+                    const formExists = await page.evaluate(() => {
+                        const form = document.getElementById('testForm') as HTMLFormElement;
+                        const formManager = window.pieFormManager;
+
+                        return !!formManager?.getForm(form);
+                    });
+
+                    // Assert
+                    expect(formExists).toBe(true);
+                });
+
+                test('should remove the associated form from the PieFormManager instance when disconnected and no pie-input instances are in the form', async ({ page }) => {
+                    // Arrange
+                    await page.setContent(`
+                        <form id="testForm" action="/foo" method="POST">
+                            <form-control-mixin-mock></form-control-mixin-mock>
+                        </form>
+                    `);
+
+                    await page.evaluate(() => {
+                        const component = document.querySelector('form-control-mixin-mock');
+                        component?.remove();
+                    });
+
+                    const formExists = await page.evaluate(() => {
+                        const form = document.getElementById('testForm') as HTMLFormElement;
+                        const formManager = window.pieFormManager;
+
+                        return !!formManager?.getForm(form);
+                    });
+
+                    // Assert
+                    expect(formExists).toBe(false);
+                });
+
+                test('should not remove the associated form from the PieFormManager instance when disconnected and other form controls remain inside the form', async ({ page }) => {
+                    // Arrange
+                    // We don't actually need pie-input to be defined here, as the tags will still appear in the DOM which the form manager queries.
+                    // Once we add more form control components, we can add them here.
+                    await page.setContent(`
+                        <form id="testForm" action="/foo" method="POST">
+                            <pie-input></pie-input>
+                            <form-control-mixin-mock id="remove"></form-control-mixin-mock>
+                            <pie-input></pie-input>
+                            <pie-input></pie-input>
+                        </form>
+                    `);
+
+                    const formExists = await page.evaluate(() => {
+                        const component = document.querySelector('#remove');
+                        component?.remove();
+
+                        const form = document.getElementById('testForm') as HTMLFormElement;
+                        const formManager = window.pieFormManager;
+
+                        return !!formManager?.getForm(form);
+                    });
+
+                    // Assert
+                    expect(formExists).toBe(true);
+                });
+            });
         });
@@ -76,4 +172,20 @@
             });
+
+            test('should not instantiate a PieFormManager instance', async ({ mount, page }) => {
+                // Arrange
+                await page.setContent(`
+                    <form id="siblingForm" action="/foo" method="POST">
+                        <input type="text" id="username" name="username" required>
+                        <input type="password" id="password" name="password" required>
+                    </form>
+                    <form-control-mixin-mock></form-control-mixin-mock>
+                `);
+
+                const formManagerExists = await page.evaluate(() => !!window.pieFormManager);
+
+                // Assert
+                expect(formManagerExists).toBe(false);
+            });
         });
     });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

62870

increased by23.03%

Number of package files

38

increased by2.7%

Lines of code

1274

increased by23.93%

No dependency changes