@dile/crud 2.9.5 → 2.10.1

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/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
-  });
-});

package/lib/CrudConfigBuilder.spec.js

@@ -1,32 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { CrudConfigBuilder } from './CrudConfigBuilder.js';
-
-describe('CrudConfigBuilder', () => {
-  it('merges customConfig.grid.columns over the default null grid', () => {
-    const columns = [{ field: 'id', header: 'ID' }];
-
-    const config = new CrudConfigBuilder('https://example.test/api/items', {
-      grid: { columns },
-    }).getConfig();
-
-    expect(config.grid.columns).toEqual(columns);
-  });
-
-  it('sets the endpoint from the constructor argument', () => {
-    const config = new CrudConfigBuilder('https://example.test/api/items', {}).getConfig();
-
-    expect(config.endpoint).toBe('https://example.test/api/items');
-  });
-
-  it('getConfig(endpoint) returns a copy with an overridden endpoint without mutating the original config', () => {
-    const builder = new CrudConfigBuilder('https://example.test/api/items', {
-      grid: { columns: [{ field: 'id' }] },
-    });
-
-    const relatedConfig = builder.getConfig('https://example.test/api/items/1/related');
-
-    expect(relatedConfig.endpoint).toBe('https://example.test/api/items/1/related');
-    expect(builder.getConfig().endpoint).toBe('https://example.test/api/items');
-    expect(relatedConfig.grid.columns).toEqual([{ field: 'id' }]);
-  });
-});

package/lib/deepMerge.spec.js

@@ -1,45 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { deepMerge } from './deepMerge.js';
-
-describe('deepMerge', () => {
-  it('replaces a null target property with a plain object from source', () => {
-    const target = { grid: null };
-    const source = { grid: { columns: [{ field: 'id' }] } };
-
-    const result = deepMerge(target, source);
-
-    expect(result.grid).toEqual({ columns: [{ field: 'id' }] });
-  });
-
-  it('preserves array order and content when merging a columns array under a previously-null key', () => {
-    const columns = [
-      { field: 'id', header: 'ID' },
-      { field: 'name', header: 'Name' },
-      { field: 'continent', header: 'Continent' },
-    ];
-
-    const result = deepMerge({ grid: null }, { grid: { columns } });
-
-    expect(result.grid.columns).toEqual(columns);
-    expect(result.grid.columns).not.toBe(columns);
-  });
-
-  it('does not mutate the source when merging into a null target key', () => {
-    const source = { grid: { columns: [{ field: 'id' }] } };
-
-    const result = deepMerge({ grid: null }, source);
-    result.grid.columns.push({ field: 'extra' });
-
-    expect(source.grid.columns.length).toBe(1);
-  });
-
-  it('overwrites configured overwriteProperties instances as-is instead of merging them', () => {
-    class Adapter {}
-    const targetAdapter = new Adapter();
-    const sourceAdapter = new Adapter();
-
-    const result = deepMerge({ responseAdapter: targetAdapter }, { responseAdapter: sourceAdapter });
-
-    expect(result.responseAdapter).toBe(sourceAdapter);
-  });
-});

package/lib/listViewMode.spec.js

@@ -1,73 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { html } from 'lit';
-import { CrudConfigBuilder } from './CrudConfigBuilder.js';
-import { hasGridView, hasItemView, canSwitchListView } from './listViewMode.js';
-
-describe('listViewMode', () => {
-  it('detects a grid view from templates.grid', () => {
-    const config = new CrudConfigBuilder('https://example.test/api', {
-      templates: { grid: () => html`` },
-    }).getConfig();
-
-    expect(hasGridView(config)).toBe(true);
-  });
-
-  it('detects a grid view from grid.columns', () => {
-    const config = new CrudConfigBuilder('https://example.test/api', {
-      grid: { columns: [{ field: 'id', header: 'ID' }] },
-    }).getConfig();
-
-    expect(hasGridView(config)).toBe(true);
-  });
-
-  it('reports no grid view when neither is configured', () => {
-    const config = new CrudConfigBuilder('https://example.test/api', {
-      templates: { item: () => html`` },
-    }).getConfig();
-
-    expect(hasGridView(config)).toBe(false);
-  });
-
-  it('detects an item view only when templates.item was explicitly configured', () => {
-    const withItem = new CrudConfigBuilder('https://example.test/api', {
-      templates: { item: () => html`` },
-    }).getConfig();
-    const withoutItem = new CrudConfigBuilder('https://example.test/api', {
-      grid: { columns: [{ field: 'id', header: 'ID' }] },
-    }).getConfig();
-
-    expect(hasItemView(withItem)).toBe(true);
-    expect(hasItemView(withoutItem)).toBe(false);
-  });
-
-  it('allows switching only when both views are configured and the switch is not disabled', () => {
-    const both = new CrudConfigBuilder('https://example.test/api', {
-      grid: { columns: [{ field: 'id', header: 'ID' }] },
-      templates: { item: () => html`` },
-    }).getConfig();
-
-    expect(canSwitchListView(both)).toBe(true);
-  });
-
-  it('disallows switching when customization.disableListWiewSwitch is true', () => {
-    const config = new CrudConfigBuilder('https://example.test/api', {
-      grid: { columns: [{ field: 'id', header: 'ID' }] },
-      templates: { item: () => html`` },
-      customization: { disableListWiewSwitch: true },
-    }).getConfig();
-
-    expect(canSwitchListView(config)).toBe(false);
-  });
-
-  it('disallows switching when only one view is configured', () => {
-    const gridOnly = new CrudConfigBuilder('https://example.test/api', {
-      grid: { columns: [{ field: 'id', header: 'ID' }] },
-    }).getConfig();
-    const itemOnly = new CrudConfigBuilder('https://example.test/api', {
-      templates: { item: () => html`` },
-    }).getConfig();
-
-    expect(canSwitchListView(gridOnly)).toBe(false);
-    expect(canSwitchListView(itemOnly)).toBe(false);
-  });
-});