refactor(foxy-item-form): use async list instead of async details for…

… sections Closes #141
Foxy · Jan 16, 2024 · fd5c4e2 · fd5c4e2
1 parent 1508379
commit fd5c4e2
Show file tree

Hide file tree

Showing 26 changed files with 780 additions and 953 deletions.
diff --git a/src/elements/public/ItemForm/ItemForm.test.ts b/src/elements/public/ItemForm/ItemForm.test.ts
@@ -9,12 +9,18 @@ import { ItemForm } from './ItemForm';
 import { html } from 'lit-html';
 
 describe('ItemForm', () => {
+  const OriginalResizeObserver = window.ResizeObserver;
+
+  // @ts-expect-error disabling ResizeObserver because it errors in test env
+  before(() => (window.ResizeObserver = undefined));
+  after(() => (window.ResizeObserver = OriginalResizeObserver));
+
   it('imports and defines foxy-internal-integer-control', () => {
     expect(customElements.get('foxy-internal-integer-control')).to.exist;
   });
 
-  it('imports and defines foxy-internal-async-details-control', () => {
-    expect(customElements.get('foxy-internal-async-details-control')).to.exist;
+  it('imports and defines foxy-internal-async-list-control', () => {
+    expect(customElements.get('foxy-internal-async-list-control')).to.exist;
   });
 
   it('imports and defines foxy-internal-number-control', () => {
@@ -194,7 +200,7 @@ describe('ItemForm', () => {
 
     await waitUntil(() => element.in({ idle: 'snapshot' }));
     const control = element.renderRoot.querySelector(
-      'foxy-internal-async-details-control[infer="discount-details"]'
+      'foxy-internal-async-list-control[infer="discount-details"]'
     );
 
     expect(control).to.exist;
@@ -217,7 +223,7 @@ describe('ItemForm', () => {
 
     await waitUntil(() => element.in({ idle: 'snapshot' }));
     const control = element.renderRoot.querySelector(
-      'foxy-internal-async-details-control[infer="coupon-details"]'
+      'foxy-internal-async-list-control[infer="coupon-details"]'
     );
 
     expect(control).to.exist;
@@ -240,7 +246,7 @@ describe('ItemForm', () => {
 
     await waitUntil(() => element.in({ idle: 'snapshot' }));
     const control = element.renderRoot.querySelector(
-      'foxy-internal-async-details-control[infer="attributes"]'
+      'foxy-internal-async-list-control[infer="attributes"]'
     );
 
     expect(control).to.exist;
@@ -265,7 +271,7 @@ describe('ItemForm', () => {
 
     await waitUntil(() => element.in({ idle: 'snapshot' }));
     const control = element.renderRoot.querySelector(
-      'foxy-internal-async-details-control[infer="item-options"]'
+      'foxy-internal-async-list-control[infer="item-options"]'
     );
 
     expect(control).to.exist;

diff --git a/src/elements/public/ItemForm/ItemForm.ts b/src/elements/public/ItemForm/ItemForm.ts
@@ -92,54 +92,67 @@ export class ItemForm extends TranslatableMixin(InternalForm, 'item-form')<Data>
         <foxy-internal-integer-control infer="quantity"></foxy-internal-integer-control>
       </div>
 
-      <foxy-internal-item-form-subscription-control></foxy-internal-item-form-subscription-control>
+      <foxy-internal-item-form-subscription-control infer="subscription">
+      </foxy-internal-item-form-subscription-control>
 
       ${this.data
         ? html`
-            <foxy-internal-async-details-control
+            <foxy-internal-async-list-control
+              label=${this.t('item-options.title')}
               infer="item-options"
               first=${this.data._links['fx:item_options'].href}
               limit="5"
               form="foxy-item-option-form"
               item="foxy-item-option-card"
+              alert
               .related=${this.__itemOptionRelatedUrls}
               .props=${{ 'locale-codes': this.localeCodes ?? '' }}
             >
-            </foxy-internal-async-details-control>
+            </foxy-internal-async-list-control>
           `
         : ''}
 
-      <foxy-internal-item-form-line-item-discount-control></foxy-internal-item-form-line-item-discount-control>
-      <foxy-internal-item-form-cart-control></foxy-internal-item-form-cart-control>
-      <foxy-internal-item-form-shipping-control></foxy-internal-item-form-shipping-control>
-      <foxy-internal-item-form-inventory-control></foxy-internal-item-form-inventory-control>
+      <foxy-internal-item-form-line-item-discount-control infer="line-item-discount">
+      </foxy-internal-item-form-line-item-discount-control>
+
+      <foxy-internal-item-form-cart-control infer="cart"></foxy-internal-item-form-cart-control>
+
+      <foxy-internal-item-form-shipping-control infer="shipping">
+      </foxy-internal-item-form-shipping-control>
+
+      <foxy-internal-item-form-inventory-control infer="inventory">
+      </foxy-internal-item-form-inventory-control>
 
       ${this.data
         ? html`
-            <foxy-internal-async-details-control
+            <foxy-internal-async-list-control
+              label=${this.t('discount-details.title')}
               infer="discount-details"
               first=${this.data._links['fx:discount_details'].href}
               limit="5"
               item="foxy-discount-detail-card"
             >
-            </foxy-internal-async-details-control>
+            </foxy-internal-async-list-control>
 
-            <foxy-internal-async-details-control
+            <foxy-internal-async-list-control
+              label=${this.t('coupon-details.title')}
               infer="coupon-details"
               first=${this.data._links['fx:coupon_details'].href}
               limit="5"
               item="foxy-coupon-detail-card"
             >
-            </foxy-internal-async-details-control>
+            </foxy-internal-async-list-control>
 
-            <foxy-internal-async-details-control
+            <foxy-internal-async-list-control
+              label=${this.t('attributes.title')}
               infer="attributes"
               first=${this.data._links['fx:attributes'].href}
               limit="5"
               item="foxy-attribute-card"
               form="foxy-attribute-form"
+              alert
             >
-            </foxy-internal-async-details-control>
+            </foxy-internal-async-list-control>
           `
         : ''}
       ${super.renderBody()}

diff --git a/src/elements/public/ItemForm/index.ts b/src/elements/public/ItemForm/index.ts
@@ -1,5 +1,5 @@
 import '../../internal/InternalIntegerControl/index';
-import '../../internal/InternalAsyncDetailsControl/index';
+import '../../internal/InternalAsyncListControl/index';
 import '../../internal/InternalNumberControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';

diff --git a/.../public/ItemForm/internal/InternalItemFormCartControl/InternalItemFormCartControl.test.ts b/.../public/ItemForm/internal/InternalItemFormCartControl/InternalItemFormCartControl.test.ts
@@ -5,9 +5,11 @@ import { InternalItemFormCartControl } from './index';
 
 describe('ItemForm', () => {
   describe('InternalItemFormCartControl', () => {
-    it('imports and defines foxy-internal-details', () => {
-      expect(customElements.get('foxy-internal-details')).to.exist;
-    });
+    const OriginalResizeObserver = window.ResizeObserver;
+
+    // @ts-expect-error disabling ResizeObserver because it errors in test env
+    before(() => (window.ResizeObserver = undefined));
+    after(() => (window.ResizeObserver = OriginalResizeObserver));
 
     it('imports and defines foxy-internal-integer-control', () => {
       expect(customElements.get('foxy-internal-integer-control')).to.exist;
@@ -40,22 +42,6 @@ describe('ItemForm', () => {
       expect(new InternalItemFormCartControl()).to.have.property('ns', '');
     });
 
-    it('has a default inference target named "cart"', () => {
-      expect(new InternalItemFormCartControl()).to.have.property('infer', 'cart');
-    });
-
-    it('renders details with summary', async () => {
-      const element = await fixture<InternalItemFormCartControl>(html`
-        <foxy-internal-item-form-cart-control></foxy-internal-item-form-cart-control>
-      `);
-
-      const details = element.renderRoot.querySelector('foxy-internal-details');
-
-      expect(details).to.exist;
-      expect(details).to.have.property('infer', '');
-      expect(details).to.have.property('summary', 'title');
-    });
-
     it('renders expiration timeout as a control', async () => {
       const element = await fixture<InternalItemFormCartControl>(html`
         <foxy-internal-item-form-cart-control></foxy-internal-item-form-cart-control>

diff --git a/...ments/public/ItemForm/internal/InternalItemFormCartControl/InternalItemFormCartControl.ts b/...ments/public/ItemForm/internal/InternalItemFormCartControl/InternalItemFormCartControl.ts
@@ -4,20 +4,16 @@ import { InternalEditableControl } from '../../../../internal/InternalEditableCo
 import { html } from 'lit-html';
 
 export class InternalItemFormCartControl extends InternalEditableControl {
-  infer = 'cart';
-
   renderControl(): TemplateResult {
     return html`
-      <foxy-internal-details summary="title" infer="">
-        <div class="grid grid-cols-2 gap-m p-m">
-          <foxy-internal-date-control class="col-span-2" infer="expires" format="unix">
-          </foxy-internal-date-control>
-          <foxy-internal-text-control class="col-span-2" infer="url"></foxy-internal-text-control>
-          <foxy-internal-text-control class="col-span-2" infer="image"></foxy-internal-text-control>
-          <foxy-internal-integer-control infer="quantity-min"></foxy-internal-integer-control>
-          <foxy-internal-integer-control infer="quantity-max"></foxy-internal-integer-control>
-        </div>
-      </foxy-internal-details>
+      <div class="grid grid-cols-2 gap-m">
+        <foxy-internal-date-control class="col-span-2" infer="expires" format="unix">
+        </foxy-internal-date-control>
+        <foxy-internal-text-control class="col-span-2" infer="url"></foxy-internal-text-control>
+        <foxy-internal-text-control class="col-span-2" infer="image"></foxy-internal-text-control>
+        <foxy-internal-integer-control infer="quantity-min"></foxy-internal-integer-control>
+        <foxy-internal-integer-control infer="quantity-max"></foxy-internal-integer-control>
+      </div>
     `;
   }
 }
diff --git a/src/elements/public/ItemForm/internal/InternalItemFormCartControl/index.ts b/src/elements/public/ItemForm/internal/InternalItemFormCartControl/index.ts
@@ -2,7 +2,6 @@ import '../../../../internal/InternalEditableControl/index';
 import '../../../../internal/InternalIntegerControl/index';
 import '../../../../internal/InternalTextControl/index';
 import '../../../../internal/InternalDateControl/index';
-import '../../../../internal/InternalDetails/index';
 
 import { InternalItemFormCartControl } from './InternalItemFormCartControl';
 

diff --git a/...emForm/internal/InternalItemFormInventoryControl/InternalItemFormInventoryControl.test.ts b/...emForm/internal/InternalItemFormInventoryControl/InternalItemFormInventoryControl.test.ts
@@ -1,3 +1,5 @@
+import type { InternalAsyncComboBoxControl } from '../../../../internal/InternalAsyncComboBoxControl';
+
 import '../../index';
 
 import { expect, fixture } from '@open-wc/testing';
@@ -7,14 +9,16 @@ import { InternalItemFormInventoryControl } from './index';
 
 describe('ItemForm', () => {
   describe('InternalItemFormInventoryControl', () => {
+    const OriginalResizeObserver = window.ResizeObserver;
+
+    // @ts-expect-error disabling ResizeObserver because it errors in test env
+    before(() => (window.ResizeObserver = undefined));
+    after(() => (window.ResizeObserver = OriginalResizeObserver));
+
     it('imports and defines foxy-internal-async-combo-box-control', () => {
       expect(customElements.get('foxy-internal-async-combo-box-control')).to.exist;
     });
 
-    it('imports and defines foxy-internal-details', () => {
-      expect(customElements.get('foxy-internal-details')).to.exist;
-    });
-
     it('imports and defines foxy-internal-text-control', () => {
       expect(customElements.get('foxy-internal-text-control')).to.exist;
     });
@@ -38,30 +42,17 @@ describe('ItemForm', () => {
       expect(new InternalItemFormInventoryControl()).to.have.property('ns', '');
     });
 
-    it('has a default inference target named "inventory"', () => {
-      expect(new InternalItemFormInventoryControl()).to.have.property('infer', 'inventory');
-    });
-
-    it('renders details with summary', async () => {
-      const element = await fixture<InternalItemFormInventoryControl>(html`
-        <foxy-internal-item-form-inventory-control></foxy-internal-item-form-inventory-control>
-      `);
-
-      const details = element.renderRoot.querySelector('foxy-internal-details');
-
-      expect(details).to.exist;
-      expect(details).to.have.property('infer', '');
-      expect(details).to.have.property('summary', 'title');
-    });
-
     it('renders item category as a control', async () => {
       const wrapper = await fixture(html`
         <foxy-item-form item-categories="https://demo.api/hapi/item_categories">
-          <foxy-internal-item-form-inventory-control></foxy-internal-item-form-inventory-control>
+          <foxy-internal-item-form-inventory-control infer="inventory">
+          </foxy-internal-item-form-inventory-control>
         </foxy-item-form>
       `);
 
       const element = wrapper.firstElementChild as InternalItemFormInventoryControl;
+      await element.requestUpdate();
+
       const control = element.renderRoot.querySelector(
         'foxy-internal-async-combo-box-control[infer="category"]'
       );

diff --git a/...ic/ItemForm/internal/InternalItemFormInventoryControl/InternalItemFormInventoryControl.ts b/...ic/ItemForm/internal/InternalItemFormInventoryControl/InternalItemFormInventoryControl.ts
@@ -6,26 +6,22 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
 
 export class InternalItemFormInventoryControl extends InternalEditableControl {
-  infer = 'inventory';
-
   renderControl(): TemplateResult {
     return html`
-      <foxy-internal-details summary="title" infer="">
-        <div class="grid grid-cols-2 gap-m p-m">
-          <foxy-internal-async-combo-box-control
-            item-value-path="_links.self.href"
-            item-label-path="name"
-            property="item_category_uri"
-            first=${ifDefined((this.nucleon as ItemForm | null)?.itemCategories ?? undefined)}
-            class="col-span-2"
-            infer="category"
-          >
-          </foxy-internal-async-combo-box-control>
+      <div class="grid grid-cols-2 gap-m">
+        <foxy-internal-async-combo-box-control
+          item-value-path="_links.self.href"
+          item-label-path="name"
+          property="item_category_uri"
+          first=${ifDefined((this.nucleon as ItemForm | null)?.itemCategories ?? undefined)}
+          class="col-span-2"
+          infer="category"
+        >
+        </foxy-internal-async-combo-box-control>
 
-          <foxy-internal-text-control infer="code"></foxy-internal-text-control>
-          <foxy-internal-text-control infer="parent-code"></foxy-internal-text-control>
-        </div>
-      </foxy-internal-details>
+        <foxy-internal-text-control infer="code"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="parent-code"></foxy-internal-text-control>
+      </div>
     `;
   }
 }
diff --git a/src/elements/public/ItemForm/internal/InternalItemFormInventoryControl/index.ts b/src/elements/public/ItemForm/internal/InternalItemFormInventoryControl/index.ts
@@ -1,7 +1,6 @@
 import '../../../../internal/InternalAsyncComboBoxControl/index';
 import '../../../../internal/InternalEditableControl/index';
 import '../../../../internal/InternalTextControl/index';
-import '../../../../internal/InternalDetails/index';
 
 import { InternalItemFormInventoryControl as Control } from './InternalItemFormInventoryControl';