@kubex/zinc 1.0.25 → 1.0.99

package/src/components/inline-edit/inline-edit.test.ts

@@ -1,10 +1,323 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnInlineEdit from './inline-edit.component';
+import type ZnSelect from '../select/select.component';
 
 describe('<zn-inline-edit>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-inline-edit></zn-inline-edit> `);
-
     expect(el).to.exist;
   });
+
+  // -- Text input (default) --
+
+  it('should render a text input by default', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit value="hello"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    const input = el.shadowRoot?.querySelector('zn-input');
+    expect(input).to.exist;
+    expect(el.value).to.equal('hello');
+  });
+
+  it('should update value on text input', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit value="hello"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    el.value = 'world';
+    await el.updateComplete;
+
+    expect(el.value).to.equal('world');
+  });
+
+  // -- Number input --
+
+  it('should render a number input when input-type is number', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit input-type="number" value="42"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    const input = el.shadowRoot?.querySelector('zn-input');
+    expect(input).to.exist;
+    expect(el.value).to.equal('42');
+  });
+
+  // -- Textarea --
+
+  it('should render a textarea when input-type is textarea', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit input-type="textarea" value="long text"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    const textarea = el.shadowRoot?.querySelector('zn-textarea');
+    expect(textarea).to.exist;
+    expect(el.value).to.equal('long text');
+  });
+
+  // -- Single select --
+
+  it('should render a select when input-type is select', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit input-type="select" value="a">
+        <zn-option value="a">Option A</zn-option>
+        <zn-option value="b">Option B</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+    expect(el.value).to.equal('a');
+  });
+
+  it('should render a select from options property', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit value="x" .options=${{ x: 'X Label', y: 'Y Label' }}></zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+    expect(el.value).to.equal('x');
+  });
+
+  // -- Multiple select --
+
+  it('should accept a space-delimited value attribute for multi-select', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit input-type="select" value="a b" multiple>
+        <zn-option value="a">A</zn-option>
+        <zn-option value="b">B</zn-option>
+        <zn-option value="c">C</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    expect(el.value).to.deep.equal(['a', 'b']);
+  });
+
+  it('should accept an array value programmatically for multi-select', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit input-type="select" multiple>
+        <zn-option value="a">A</zn-option>
+        <zn-option value="b">B</zn-option>
+        <zn-option value="c">C</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    el.value = ['a', 'c'];
+    await el.updateComplete;
+
+    expect(el.value).to.deep.equal(['a', 'c']);
+  });
+
+  it('should convert string value to array when multiple is set', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit input-type="select" multiple>
+        <zn-option value="a">A</zn-option>
+        <zn-option value="b">B</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    el.value = 'a b';
+    await el.updateComplete;
+
+    expect(el.value).to.deep.equal(['a', 'b']);
+  });
+
+  it('should pass multiple attribute to inner zn-select', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit input-type="select" multiple>
+        <zn-option value="a">A</zn-option>
+        <zn-option value="b">B</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+    expect(select.multiple).to.be.true;
+  });
+
+  it('should keep value as string when multiple is not set', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit value="hello"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    expect(el.value).to.be.a('string');
+    expect(el.value).to.equal('hello');
+  });
+
+  it('should parse multiple space-delimited IDs and pass them to the inner select', async () => {
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit
+        name="exit_offers"
+        input-type="select"
+        multiple
+        value="1VGpJhp7pI62wSY04a6 6Yxa9ap7pI62wSAFFYf 8cwLe7p7pI62wSptw6C"
+        size="medium">
+        <zn-option value="1VGpJhp7pI62wSY04a6">Offer A</zn-option>
+        <zn-option value="6Yxa9ap7pI62wSAFFYf">Offer B</zn-option>
+        <zn-option value="8cwLe7p7pI62wSptw6C">Offer C</zn-option>
+        <zn-option value="otherValue">Offer D</zn-option>
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    // Value should be an array of the 3 IDs
+    expect(el.value).to.deep.equal([
+      '1VGpJhp7pI62wSY04a6',
+      '6Yxa9ap7pI62wSAFFYf',
+      '8cwLe7p7pI62wSptw6C'
+    ]);
+
+    // Inner select should exist with multiple enabled
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+    expect(select.multiple).to.be.true;
+
+    // Inner select value should match
+    await select.updateComplete;
+    const selectValue = Array.isArray(select.value) ? select.value : [select.value];
+    expect(selectValue).to.deep.equal([
+      '1VGpJhp7pI62wSY04a6',
+      '6Yxa9ap7pI62wSAFFYf',
+      '8cwLe7p7pI62wSptw6C'
+    ]);
+
+    // The 3 matching options should be selected, the 4th should not
+    const selectedOptions = select.selectedOptions;
+    expect(selectedOptions.length).to.equal(3);
+    expect(selectedOptions.map((o: any) => o.value)).to.deep.equal([
+      '1VGpJhp7pI62wSY04a6',
+      '6Yxa9ap7pI62wSAFFYf',
+      '8cwLe7p7pI62wSptw6C'
+    ]);
+  });
+
+  it('should select correct options when options are added after value is set (async load)', async () => {
+    // Simulates data-uri behavior: value is set before options exist
+    const el = await fixture<ZnInlineEdit>(html`
+      <zn-inline-edit
+        name="offers"
+        input-type="select"
+        multiple
+        value="1VGpJhp7pI62wSY04a6 6Yxa9ap7pI62wSAFFYf 8cwLe7p7pI62wSptw6C"
+        size="medium">
+      </zn-inline-edit>
+    `);
+    await el.updateComplete;
+
+    // Inline-edit value should be preserved as array even with no options yet
+    expect(el.value).to.deep.equal([
+      '1VGpJhp7pI62wSY04a6',
+      '6Yxa9ap7pI62wSAFFYf',
+      '8cwLe7p7pI62wSptw6C'
+    ]);
+
+    // Now simulate async option load by adding options to the inner select
+    const select = el.shadowRoot?.querySelector('zn-select') as ZnSelect;
+    expect(select).to.exist;
+
+    const ids = ['1VGpJhp7pI62wSY04a6', '6Yxa9ap7pI62wSAFFYf', '8cwLe7p7pI62wSptw6C', 'otherValue'];
+    const labels = ['40% Off', 'Ultimate Discount', '100% off', '30% Off'];
+    ids.forEach((id, i) => {
+      const opt = document.createElement('zn-option');
+      opt.setAttribute('value', id);
+      opt.textContent = labels[i];
+      select.appendChild(opt);
+    });
+
+    // Trigger the select to re-process options and re-apply the value
+    select.value = el.value;
+    await select.updateComplete;
+
+    // The 3 matching options should now be selected
+    const selectValue = Array.isArray(select.value) ? select.value : [select.value];
+    expect(selectValue).to.deep.equal([
+      '1VGpJhp7pI62wSY04a6',
+      '6Yxa9ap7pI62wSAFFYf',
+      '8cwLe7p7pI62wSptw6C'
+    ]);
+  });
+
+  // -- Empty value form data submission --
+
+  it('should include empty select value in form data', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <zn-inline-edit name="myfield" input-type="select" value="">
+          <zn-option value="a">Option A</zn-option>
+          <zn-option value="b">Option B</zn-option>
+        </zn-inline-edit>
+      </form>
+    `);
+    await form.querySelector<ZnInlineEdit>('zn-inline-edit')!.updateComplete;
+
+    // new FormData(form) fires the formdata event, triggering FormControlController injection
+    const formData = new FormData(form);
+
+    expect(formData.has('myfield')).to.be.true;
+    expect(formData.get('myfield')).to.equal('');
+  });
+
+  it('should include empty select value in form data after clearing', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <zn-inline-edit name="myfield" input-type="select" value="a">
+          <zn-option value="a">Option A</zn-option>
+          <zn-option value="b">Option B</zn-option>
+        </zn-inline-edit>
+      </form>
+    `);
+    const el = form.querySelector<ZnInlineEdit>('zn-inline-edit')!;
+    await el.updateComplete;
+
+    el.value = '';
+    await el.updateComplete;
+
+    const formData = new FormData(form);
+
+    expect(formData.has('myfield')).to.be.true;
+    expect(formData.get('myfield')).to.equal('');
+  });
+
+  it('should include empty multiple select value in form data', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <zn-inline-edit name="tags" input-type="select" multiple value="">
+          <zn-option value="a">A</zn-option>
+          <zn-option value="b">B</zn-option>
+        </zn-inline-edit>
+      </form>
+    `);
+    const el = form.querySelector<ZnInlineEdit>('zn-inline-edit')!;
+    await el.updateComplete;
+
+    const formData = new FormData(form);
+
+    expect(formData.has('tags')).to.be.true;
+    expect(formData.get('tags')).to.equal('');
+  });
+
+  it('should flatten array to string when multiple is not set', async () => {
+    const el = await fixture<ZnInlineEdit>(
+      html`<zn-inline-edit value="hello"></zn-inline-edit>`
+    );
+    await el.updateComplete;
+
+    el.value = ['a', 'b'] as any;
+    await el.updateComplete;
+
+    expect(el.value).to.equal('a b');
+  });
 });