@dile/crud 2.10.0 → 2.10.2

package/components/select-ajax-simple/select-ajax-simple.spec.js

@@ -1,133 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import './select-ajax-simple.js';
-
-const MOCK_DATA = [
-  { id: 1, name: 'Fantasy' },
-  { id: 2, name: 'Strategy' },
-];
-
-function mockAxiosSuccess(data = MOCK_DATA) {
-  window.axiosInstance = {
-    get: vi.fn().mockResolvedValue({ status: 200, data: { data } }),
-  };
-}
-
-function mockAxiosError() {
-  window.axiosInstance = {
-    get: vi.fn().mockRejectedValue(new Error('Network error')),
-  };
-}
-
-async function renderEl(html) {
-  document.body.innerHTML = html;
-  const el = document.body.querySelector('dile-select-ajax-simple');
-  await el.updateComplete;
-  // Wait for async loadData to complete and re-render
-  await new Promise(resolve => setTimeout(resolve, 10));
-  await el.updateComplete;
-  return el;
-}
-
-describe('dile-select-ajax-simple', () => {
-  beforeEach(() => {
-    mockAxiosSuccess();
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    delete window.axiosInstance;
-    vi.restoreAllMocks();
-  });
-
-  it('shows a spinner while loading', async () => {
-    document.body.innerHTML = '<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>';
-    const el = document.body.querySelector('dile-select-ajax-simple');
-    await el.updateComplete;
-
-    expect(el.shadowRoot.querySelector('dile-spinner-horizontal')).toBeTruthy();
-  });
-
-  it('renders options after successful data load', async () => {
-    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
-
-    const options = el.shadowRoot.querySelectorAll('option');
-    // placeholder + 2 data options
-    expect(options.length).toBe(3);
-    expect(options[1].textContent).toBe('Fantasy');
-    expect(options[2].textContent).toBe('Strategy');
-  });
-
-  it('uses displayProperty and idProperty for option rendering', async () => {
-    window.axiosInstance = {
-      get: vi.fn().mockResolvedValue({
-        status: 200,
-        data: { data: [{ code: 'FR', title: 'France' }] }
-      }),
-    };
-    const el = await renderEl(
-      '<dile-select-ajax-simple endpoint="/api/countries" name="country" displayProperty="title" idProperty="code"></dile-select-ajax-simple>'
-    );
-
-    const options = el.shadowRoot.querySelectorAll('option');
-    expect(options[1].value).toBe('FR');
-    expect(options[1].textContent).toBe('France');
-  });
-
-  it('shows error message when request fails', async () => {
-    mockAxiosError();
-    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
-
-    expect(el.shadowRoot.querySelector('p.error')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('dile-select')).toBeNull();
-  });
-
-  it('shows empty message when response has no items', async () => {
-    window.axiosInstance = {
-      get: vi.fn().mockResolvedValue({ status: 200, data: { data: [] } }),
-    };
-    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
-
-    expect(el.shadowRoot.querySelector('p.empty')).toBeTruthy();
-  });
-
-  it('dispatches element-changed when an option is selected', async () => {
-    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
-
-    let detail = null;
-    el.addEventListener('element-changed', (e) => { detail = e.detail; });
-
-    el.value = '1';
-    await el.updateComplete;
-
-    expect(detail).not.toBeNull();
-    expect(detail.name).toBe('tag');
-    expect(detail.value).toBe('1');
-  });
-
-  it('supports getSelectResultList as custom extractor', async () => {
-    window.axiosInstance = {
-      get: vi.fn().mockResolvedValue({ status: 200, data: { result: { items: MOCK_DATA } } }),
-    };
-    // Set getSelectResultList before connectedCallback fires
-    const el = document.createElement('dile-select-ajax-simple');
-    el.getSelectResultList = (json) => json.result.items;
-    el.endpoint = '/api/tags';
-    el.name = 'tag';
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await new Promise(resolve => setTimeout(resolve, 10));
-    await el.updateComplete;
-
-    const options = el.shadowRoot.querySelectorAll('option');
-    expect(options.length).toBe(3);
-    expect(options[1].textContent).toBe('Fantasy');
-  });
-
-  it('renders label when provided', async () => {
-    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag" label="Category"></dile-select-ajax-simple>');
-
-    const label = el.shadowRoot.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label.textContent).toBe('Category');
-  });
-});

package/components/single/src/DileCrudSingle.spec.js

@@ -1,151 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import { html, LitElement } from 'lit';
-import { DileForm } from '@dile/ui/mixins/form';
-import '../crud-single.js';
-
-// Create a test form component
-class TestActionForm extends DileForm(LitElement) {
-  render() {
-    return html`
-      <input name="productUuid" />
-      <input name="units" type="number" value="1" />
-    `;
-  }
-}
-
-if (!customElements.get('test-action-form')) {
-  customElements.define('test-action-form', TestActionForm);
-}
-
-describe('DileCrudSingle.triggerAction and triggerDirectAction', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-    delete window.axiosInstance;
-  });
-
-  function mockAxios({ get = vi.fn(() => Promise.resolve({ status: 200, data: {} })) } = {}) {
-    window.axiosInstance = { get };
-    return window.axiosInstance;
-  }
-
-  const testActions = [
-    {
-      name: 'CreateInvoiceAction',
-      label: 'Create Invoice',
-      destructive: false,
-    },
-  ];
-
-  function createFormTemplate() {
-    return (selection, element) => html`
-      ${selection === 'CreateInvoiceAction'
-        ? html`<test-action-form action="CreateInvoiceAction"></test-action-form>`
-        : ''
-      }
-    `;
-  }
-
-  const testConfig = {
-    endpoint: 'https://example.test/api/items',
-    actions: {
-      single: testActions,
-      directSingleActions: [],
-      list: [],
-    },
-    customization: {
-      disableEdit: true,
-      disableListActionsOnSingleComponent: true,
-    },
-    labels: {
-      startUpdateAction: 'Edit',
-    },
-    templates: {
-      detail: (item) => html`<div class="item-detail">${item?.name || ''}</div>`,
-      formSingleActions: createFormTemplate(),
-      relations: () => html``,
-      updateForm: () => html``,
-    },
-    formIds: {
-      updateForm: 'update-form',
-    },
-    translations: {
-      element_actions: 'Actions',
-    },
-    responseAdapter: {
-      setResponse: () => {},
-      getData: () => ({ id: 1, name: 'Test Item' }),
-      getActionResponseMessage: () => 'Success',
-      getActionResponseActionName: () => 'CreateInvoiceAction',
-      getActionResponseActionData: () => ({}),
-    },
-    destructiveActionNames: [],
-  };
-
-  async function createCrudSingle() {
-    mockAxios({
-      get: vi.fn(() => Promise.resolve({ 
-        status: 200, 
-        data: { data: { id: 1, name: 'Test Item' } }
-      }))
-    });
-    const el = document.createElement('dile-crud-single');
-    el.relatedId = '1';
-    el.config = testConfig;
-    el.element = { id: 1, name: 'Test Item' };
-    document.body.appendChild(el);
-    await el.updateComplete;
-    return el;
-  }
-
-  it('triggerAction delegates to singleActionsElement.triggerAction', async () => {
-    const el = await createCrudSingle();
-    
-    const singleActionsElement = el.singleActionsElement;
-    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
-    
-    const initialData = { productUuid: 'uuid-123', units: 5 };
-    el.triggerAction('CreateInvoiceAction', initialData);
-    
-    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', initialData);
-    triggerActionSpy.mockRestore();
-  });
-
-  it('triggerDirectAction delegates to singleActionsElement.triggerAction', async () => {
-    const el = await createCrudSingle();
-    
-    const singleActionsElement = el.singleActionsElement;
-    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
-    
-    const initialData = { productUuid: 'uuid-456', units: 2 };
-    el.triggerDirectAction('CreateInvoiceAction', initialData);
-    
-    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', initialData);
-    triggerActionSpy.mockRestore();
-  });
-
-  it('triggerDirectAction without initialData still works (backward compatibility)', async () => {
-    const el = await createCrudSingle();
-    
-    const singleActionsElement = el.singleActionsElement;
-    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
-    
-    el.triggerDirectAction('CreateInvoiceAction');
-    
-    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', undefined);
-    triggerActionSpy.mockRestore();
-  });
-
-  it('triggerAction without initialData works', async () => {
-    const el = await createCrudSingle();
-    
-    const singleActionsElement = el.singleActionsElement;
-    const triggerActionSpy = vi.spyOn(singleActionsElement, 'triggerAction');
-    
-    el.triggerAction('CreateInvoiceAction');
-    
-    expect(triggerActionSpy).toHaveBeenCalledWith('CreateInvoiceAction', undefined);
-    triggerActionSpy.mockRestore();
-  });
-});
-
-

package/components/steps-form/steps-form.spec.js

@@ -1,230 +0,0 @@
-import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
-import './steps-form.js';
-import './step-form.js';
-
-class TestStepForm extends HTMLElement {
-  constructor() {
-    super();
-    this.value = '';
-    this.receivedData = [];
-    this.errors = null;
-  }
-  getData() {
-    return { name: this.value };
-  }
-  setData(data) {
-    this.receivedData.push(data);
-  }
-  showErrors(errors) {
-    this.errors = errors;
-  }
-}
-if (!customElements.get('test-step-form')) {
-  customElements.define('test-step-form', TestStepForm);
-}
-
-const loadedResource = { id: 1, name: 'Loaded' };
-
-function okResponse(data, message = 'Saved') {
-  return Promise.resolve({ status: 200, data: { message, data } });
-}
-
-function validationError(errors) {
-  return Promise.reject({
-    response: { status: 422, data: { message: 'Invalid data', errors } },
-  });
-}
-
-const flush = () => new Promise(resolve => setTimeout(resolve, 0));
-
-describe('dile-steps-form', () => {
-  let get;
-  let patch;
-
-  beforeEach(() => {
-    get = vi.fn(() => okResponse(loadedResource));
-    patch = vi.fn((url, data) => okResponse({ ...loadedResource, ...data, url }));
-    window.axiosInstance = { get, patch };
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    delete window.axiosInstance;
-  });
-
-  async function renderStepsForm(attributes = '', thirdStepAttributes = '') {
-    document.body.innerHTML = `
-      <dile-steps-form endpoint="/api/resource" ${attributes}>
-        <dile-step-form label="First" endpoint="/api/resource/first">
-          <test-step-form slot="form"></test-step-form>
-        </dile-step-form>
-        <dile-step-form label="Second" endpoint="/api/resource/second" alternativeExit alternativeExitLabel="Save as draft">
-          <test-step-form slot="form"></test-step-form>
-        </dile-step-form>
-        <dile-step-form label="Third" endpoint="/api/resource/third" ${thirdStepAttributes}>
-          <test-step-form slot="form"></test-step-form>
-        </dile-step-form>
-      </dile-steps-form>
-    `;
-    const el = document.body.querySelector('dile-steps-form');
-    await el.updateComplete;
-    await flush();
-    await el.updateComplete;
-    return el;
-  }
-
-  function stepForms(el) {
-    return [...el.querySelectorAll('dile-step-form')];
-  }
-
-  function forms(el) {
-    return [...el.querySelectorAll('test-step-form')];
-  }
-
-  it('takes the step labels from the label attribute of each step', async () => {
-    const el = await renderStepsForm();
-
-    expect(el.shadowRoot.querySelector('dile-steps').steps).toEqual(['First', 'Second', 'Third']);
-    expect(el.shadowRoot.querySelector('.step-label').textContent).toBe('First');
-  });
-
-  it('only shows the current step', async () => {
-    const el = await renderStepsForm();
-
-    expect(stepForms(el).map(step => step.active)).toEqual([true, false, false]);
-    expect(stepForms(el).map(step => getComputedStyle(step).display)).toEqual(['block', 'none', 'none']);
-  });
-
-  it('loads the endpoint and sets the data in every form', async () => {
-    const el = await renderStepsForm();
-    let loadedDetail;
-    el.addEventListener('dile-steps-form-loaded', e => { loadedDetail = e.detail; });
-
-    el.reload();
-    await flush();
-
-    expect(get).toHaveBeenCalledWith('/api/resource', expect.anything());
-    expect(loadedDetail).toEqual({ data: loadedResource });
-    forms(el).forEach(form => expect(form.receivedData.at(-1)).toEqual(loadedResource));
-  });
-
-  it('saves the step with PATCH and moves to the next step', async () => {
-    const el = await renderStepsForm();
-    forms(el)[0].value = 'Acme';
-    let successDetail;
-    el.addEventListener('dile-step-form-success', e => { successDetail = e.detail; });
-
-    stepForms(el)[0].next();
-    await flush();
-    await el.updateComplete;
-
-    expect(patch).toHaveBeenCalledWith('/api/resource/first', { name: 'Acme' }, undefined);
-    expect(successDetail.message).toBe('Saved');
-    expect(el.current).toBe(1);
-    expect(stepForms(el).map(step => step.active)).toEqual([false, true, false]);
-  });
-
-  it('dispatches dile-steps-form-complete after saving the last step', async () => {
-    const el = await renderStepsForm();
-    let completeDetail;
-    el.addEventListener('dile-steps-form-complete', e => { completeDetail = e.detail; });
-
-    el.navigateTo(2);
-    stepForms(el)[2].next();
-    await flush();
-
-    expect(completeDetail.alternativeExit).toBe(false);
-    expect(completeDetail.data.url).toBe('/api/resource/third');
-  });
-
-  it('completes with the alternative exit and sends the alternativeExit field', async () => {
-    const el = await renderStepsForm();
-    let completeDetail;
-    el.addEventListener('dile-steps-form-complete', e => { completeDetail = e.detail; });
-
-    el.navigateTo(1);
-    stepForms(el)[1].alternativeNext();
-    await flush();
-
-    expect(patch).toHaveBeenCalledWith('/api/resource/second', { name: '', alternativeExit: true }, undefined);
-    expect(completeDetail.alternativeExit).toBe(true);
-  });
-
-  it('does not keep the alternative exit after a failed save', async () => {
-    const el = await renderStepsForm();
-    let completed = false;
-    el.addEventListener('dile-steps-form-complete', () => { completed = true; });
-    el.navigateTo(1);
-
-    patch.mockImplementationOnce(() => validationError({ name: ['Required'] }));
-    stepForms(el)[1].alternativeNext();
-    await flush();
-    expect(forms(el)[1].errors).toEqual({ name: ['Required'] });
-
-    stepForms(el)[1].next();
-    await flush();
-
-    expect(completed).toBe(false);
-    expect(el.current).toBe(2);
-  });
-
-  it('dispatches dile-step-form-error with the validation errors and status', async () => {
-    const el = await renderStepsForm();
-    let errorDetail;
-    el.addEventListener('dile-step-form-error', e => { errorDetail = e.detail; });
-    patch.mockImplementationOnce(() => validationError({ name: ['Required'] }));
-
-    stepForms(el)[0].next();
-    await flush();
-
-    expect(errorDetail).toEqual({ message: 'Invalid data', errors: { name: ['Required'] }, status: 422 });
-    expect(el.current).toBe(0);
-  });
-
-  it('sends the saved data to the steps with refreshOnSave', async () => {
-    const el = await renderStepsForm('', 'refreshOnSave');
-    forms(el).forEach(form => { form.receivedData = []; });
-
-    stepForms(el)[0].next();
-    await flush();
-
-    expect(forms(el)[2].receivedData).toHaveLength(1);
-    expect(forms(el)[2].receivedData[0].url).toBe('/api/resource/first');
-    expect(forms(el)[1].receivedData).toHaveLength(0);
-  });
-
-  it('dispatches dile-steps-form-error with the status when the load fails', async () => {
-    get.mockImplementation(() => Promise.reject({
-      response: { status: 404, data: { message: 'Not found' } },
-    }));
-    let errorDetail;
-    document.body.addEventListener('dile-steps-form-error', e => { errorDetail = e.detail; });
-
-    await renderStepsForm();
-    await flush();
-
-    expect(errorDetail.status).toBe(404);
-    expect(errorDetail.message).toBe('Not found');
-  });
-
-  it('translates the navigation labels with the language property', async () => {
-    const el = await renderStepsForm('language="es"');
-    const nextPrev = stepForms(el)[0].shadowRoot.querySelector('dile-step-next-prev');
-
-    await vi.waitFor(() => {
-      expect(nextPrev.shadowRoot.querySelector('.next dile-button').textContent.trim()).toBe('Siguiente');
-    });
-  });
-
-  it('uses the labels defined in the step before the translations', async () => {
-    const el = await renderStepsForm('', 'endLabel="Create invoice"');
-    el.navigateTo(2);
-    await el.updateComplete;
-    await stepForms(el)[2].updateComplete;
-    const nextPrev = stepForms(el)[2].shadowRoot.querySelector('dile-step-next-prev');
-    await nextPrev.updateComplete;
-
-    expect(nextPrev.shadowRoot.querySelector('.next dile-button').textContent.trim()).toBe('Create invoice');
-    expect(nextPrev.shadowRoot.querySelector('.prev dile-button').textContent.trim()).toBe('Previous');
-  });
-});

package/components/ui/crud-sort-form.spec.js

@@ -1,132 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './crud-sort-form.js';
-
-describe('dile-crud-sort-form', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  const sortOptions = [
-    { name: 'name', label: 'Name', direction: 'asc' },
-    { name: 'id', label: 'Id', direction: 'asc' },
-  ];
-
-  async function createSortForm(props = {}) {
-    const el = document.createElement('dile-crud-sort-form');
-    el.sortOptions = props.sortOptions ?? sortOptions;
-    if (props.sortField !== undefined) {
-      el.sortField = props.sortField;
-    }
-    document.body.appendChild(el);
-    await el.updateComplete;
-    return el;
-  }
-
-  it('renders one radio/order-switch pair per configured sort option', async () => {
-    const el = await createSortForm();
-    expect(el.shadowRoot.querySelectorAll('dile-radio').length).toBe(2);
-    expect(el.shadowRoot.querySelectorAll('dile-order-switch').length).toBe(2);
-  });
-
-  it('getDirection returns the configured direction for a known field', async () => {
-    const el = await createSortForm();
-    await el.shadowRoot.querySelector('dile-order-switch[name="name"]').updateComplete;
-    expect(el.getDirection('name')).toBe('asc');
-  });
-
-  it('getDirection returns undefined instead of throwing for a field with no matching order-switch', async () => {
-    // Reproduces a DataGrid column marked sortable whose field isn't listed in config.sort.options.
-    const el = await createSortForm();
-    expect(() => el.getDirection('continent')).not.toThrow();
-    expect(el.getDirection('continent')).toBeUndefined();
-  });
-
-  it('getDirection returns undefined for a falsy field without touching the DOM', async () => {
-    const el = await createSortForm();
-    expect(el.getDirection(null)).toBeUndefined();
-    expect(el.getDirection('')).toBeUndefined();
-  });
-
-  // "year" has a static configured direction of "desc" so it can expose the regression:
-  // syncing an "asc" sort must not get silently corrected back to "desc".
-  const yearOptions = [{ name: 'year', label: 'Year', direction: 'desc' }];
-
-  it('syncSort reflects an externally-applied sort without re-dispatching sort-changed', async () => {
-    const el = await createSortForm({ sortOptions: yearOptions });
-
-    let dispatchCount = 0;
-    el.addEventListener('sort-changed', () => { dispatchCount++; });
-
-    el.syncSort('year', 'asc');
-    await el.updateComplete;
-
-    expect(el.sortField).toBe('year');
-    expect(el.sortDirection).toBe('asc');
-    expect(dispatchCount).toBe(0);
-  });
-
-  it('a genuine radio-group selection (not preceded by syncSort) still defaults to the option configured direction', async () => {
-    const el = await createSortForm({ sortOptions: yearOptions });
-
-    let receivedDetail = null;
-    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
-
-    const radioGroup = el.shadowRoot.querySelector('dile-radio-group');
-    radioGroup.dispatchEvent(new CustomEvent('dile-radio-group-changed', {
-      detail: { name: 'selector', value: 'year' },
-    }));
-    await el.updateComplete;
-
-    expect(el.sortField).toBe('year');
-    expect(el.sortDirection).toBe('desc');
-    expect(receivedDetail).toEqual({ sortField: 'year', sortDirection: 'desc' });
-  });
-
-  it('clicking the label of an inactive option switches to it using its own configured direction, without flipping it', async () => {
-    const el = await createSortForm({
-      sortOptions: [
-        { name: 'name', label: 'Name', direction: 'asc' },
-        { name: 'year', label: 'Year', direction: 'desc' },
-      ],
-      sortField: 'name',
-    });
-    el.sortDirection = 'asc';
-    await el.updateComplete;
-
-    let receivedDetail = null;
-    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
-
-    el.shadowRoot.querySelector('dile-order-switch[name="year"]').shadowRoot.querySelector('a').click();
-    await el.updateComplete;
-
-    expect(el.sortField).toBe('year');
-    expect(el.sortDirection).toBe('desc'); // year's own configured default, not flipped
-    expect(receivedDetail).toEqual({ sortField: 'year', sortDirection: 'desc' });
-  });
-
-  it('clicking the label of the already-active option toggles its direction instead of doing nothing', async () => {
-    // Reproduces the reported confusion: clicking "Name" again while already sorted by
-    // name silently did nothing, because the label always re-announced the same value.
-    const el = await createSortForm({
-      sortOptions: [{ name: 'name', label: 'Name', direction: 'asc' }],
-      sortField: 'name',
-    });
-    el.sortDirection = 'asc';
-    await el.updateComplete;
-
-    let receivedDetail = null;
-    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
-
-    const label = () => el.shadowRoot.querySelector('dile-order-switch[name="name"]').shadowRoot.querySelector('a');
-
-    label().click();
-    await el.updateComplete;
-    expect(el.sortField).toBe('name');
-    expect(el.sortDirection).toBe('desc'); // toggled, not a no-op
-    expect(receivedDetail).toEqual({ sortField: 'name', sortDirection: 'desc' });
-
-    label().click();
-    await el.updateComplete;
-    expect(el.sortDirection).toBe('asc'); // toggles back on a second click
-  });
-});