@dile/crud 2.9.5 → 2.10.1

package/components/crud/crud.spec.js

@@ -1,453 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { html } from 'lit';
-import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
-import './crud.js';
-
-describe('dile-crud initial filters', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('syncs active filters from config into the list and form on first render', async () => {
-    const config = new CrudConfigBuilder('https://example.test/api/countries', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: true,
-        disableFilter: false,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      availableFilters: [
-        {
-          name: 'continent',
-          label: 'Continent',
-          active: true,
-          value: 'Europe',
-          type: 'select',
-          options: [
-            { value: 'Europe', label: 'Europe' },
-            { value: 'Asia', label: 'Asia' },
-          ],
-        },
-      ],
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await Promise.resolve();
-
-    expect(el.config.availableFilters[0].active).toBe(true);
-    expect(el.config.availableFilters[0].value).toBe('Europe');
-    expect(el.listElement.filters).toHaveLength(1);
-    expect(el.listElement.filters[0].name).toBe('continent');
-    expect(el.listElement.filters[0].value).toBe('Europe');
-
-    const form = el.shadowRoot.querySelector('dile-crud-filters');
-    expect(form.filters[0].active).toBe(true);
-    expect(form.filters[0].value).toBe('Europe');
-  });
-
-  it('removes an active initial filter when the chip close icon is clicked', async () => {
-    const config = new CrudConfigBuilder('https://example.test/api/countries', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: true,
-        disableFilter: false,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      availableFilters: [
-        {
-          name: 'continent',
-          label: 'Continent',
-          active: true,
-          value: 'Europe',
-          type: 'select',
-          options: [
-            { value: 'Europe', label: 'Europe' },
-            { value: 'Asia', label: 'Asia' },
-          ],
-        },
-      ],
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await Promise.resolve();
-
-    const filterEl = el.shadowRoot.querySelector('dile-crud-filters');
-    filterEl.removeFilter('continent');
-
-    expect(filterEl.filters[0].active).toBe(false);
-    expect(filterEl.filters[0].value).toBe('');
-    expect(el.listElement.filters[0].active).toBe(false);
-    expect(el.listElement.filters[0].value).toBe('');
-  });
-
-  it('keeps an inactive select filter inactive when config uses the false sentinel', async () => {
-    const config = new CrudConfigBuilder('https://example.test/api/countries', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: true,
-        disableFilter: false,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      availableFilters: [
-        {
-          name: 'continent',
-          label: 'Continent',
-          active: false,
-          value: false,
-          type: 'select',
-          options: [
-            { value: 'Europe', label: 'Europe' },
-            { value: 'Asia', label: 'Asia' },
-          ],
-        },
-      ],
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await Promise.resolve();
-
-    expect(el.listElement.filters).toHaveLength(0);
-
-    const filtersForm = el.shadowRoot
-      .querySelector('dile-crud-filters')
-      .shadowRoot.querySelector('dile-crud-filters-form');
-    const select = filtersForm.shadowRoot.querySelector('dile-select');
-    expect(select.value).toBe('');
-  });
-});
-
-describe('dile-crud sort synchronization', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('syncs dile-crud-sort-form when the list sort changes (e.g. from a DataGrid column header)', async () => {
-    const config = new CrudConfigBuilder('https://example.test/api/customers', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: false,
-        disableFilter: true,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      sort: {
-        options: [
-          { name: 'name', label: 'Name', direction: 'asc' },
-        ],
-        initialSortField: null,
-      },
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await Promise.resolve();
-
-    expect(el.sortFormElement).toBeTruthy();
-
-    el.listElement.setSort({ sortField: 'name', sortDirection: 'desc' });
-    await el.updateComplete;
-
-    expect(el.sortFormElement.sortField).toBe('name');
-    expect(el.sortFormElement.sortDirection).toBe('desc');
-  });
-
-  it('ignores a grid sort field that is not listed in config.sort.options instead of crashing the sort-form', async () => {
-    // Reproduces a DataGrid column marked `sortable: true` for a field (e.g. "continent")
-    // that has no corresponding entry in config.sort.options.
-    const config = new CrudConfigBuilder('https://example.test/api/countries', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: false,
-        disableFilter: true,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      grid: {
-        columns: [
-          { field: 'name', header: 'Name', sortable: true },
-          { field: 'continent', header: 'Continent', sortable: true },
-        ],
-      },
-      sort: {
-        options: [
-          { name: 'name', label: 'Name', direction: 'asc' },
-        ],
-        initialSortField: 'name',
-      },
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await Promise.resolve();
-
-    const initialSortField = el.sortFormElement.sortField;
-
-    expect(() => {
-      el.listElement.dispatchEvent(new CustomEvent('crud-list-sort-changed', {
-        bubbles: true,
-        composed: true,
-        detail: { sortField: 'continent', sortDirection: 'asc' },
-      }));
-    }).not.toThrow();
-    await el.updateComplete;
-
-    // The sort-form's selection is left untouched rather than pointed at an unknown option.
-    expect(el.sortFormElement.sortField).toBe(initialSortField);
-  });
-
-  it('does not let the sort-form echo override a grid-driven sort with the field static configured default direction', async () => {
-    // "year" is configured with a static default direction of "desc". A DataGrid column
-    // header click always starts at "asc" on first click — reproduces the exact scenario
-    // where the sort silently snapped back to "desc" and repeated clicks appeared to
-    // "lose" the requested order.
-    const config = new CrudConfigBuilder('https://example.test/api/board-games', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: false,
-        disableFilter: true,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      grid: {
-        columns: [
-          { field: 'year', header: 'Year', sortable: true },
-        ],
-      },
-      sort: {
-        options: [
-          { name: 'year', label: 'Year', direction: 'desc' },
-        ],
-        initialSortField: 'year',
-      },
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-    await Promise.resolve();
-
-    let lastSetSort = null;
-    el.listElement.setSort = (sortObj) => {
-      lastSetSort = sortObj;
-    };
-
-    // Simulate what DileCrudList.setSort() dispatches after a grid header click requesting "asc".
-    el.listElement.dispatchEvent(new CustomEvent('crud-list-sort-changed', {
-      bubbles: true,
-      composed: true,
-      detail: { sortField: 'year', sortDirection: 'asc' },
-    }));
-    await el.updateComplete;
-    await new Promise((resolve) => setTimeout(resolve, 0)); // flush any echo microtasks
-
-    expect(el.sortFormElement.sortField).toBe('year');
-    expect(el.sortFormElement.sortDirection).toBe('asc');
-    // The echo must not have triggered a second, corrupting setSort() call.
-    expect(lastSetSort).toBeNull();
-  });
-});
-
-describe('dile-crud list/grid view switch', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  const baseCustomization = {
-    disableInsert: true,
-    disableHelp: true,
-    disableKeywordSearch: true,
-    disableSort: true,
-    disableFilter: true,
-    disablePagination: true,
-    hideCheckboxSelection: true,
-  };
-
-  function buildConfig(overrides = {}) {
-    return new CrudConfigBuilder('https://example.test/api/countries', {
-      customization: { ...baseCustomization, ...(overrides.customization || {}) },
-      grid: { columns: [{ field: 'name', header: 'Name' }] },
-      templates: { item: (item) => html`<span>${item.name}</span>` },
-      ...overrides,
-    }).getConfig();
-  }
-
-  it('shows the item template by default and renders no switch button when only one view is configured', async () => {
-    const config = new CrudConfigBuilder('https://example.test/api/countries', {
-      customization: baseCustomization,
-      templates: { item: (item) => html`<span>${item.name}</span>` },
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-
-    const switchButtons = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
-      .filter((btn) => /view/i.test(btn.textContent));
-    expect(switchButtons.length).toBe(0);
-  });
-
-  it('defaults to the item view and toggles to the grid on click when both views are configured', async () => {
-    // Rendering per view mode (item vs. grid DOM) is covered in crud-list.spec.js;
-    // here we only verify dile-crud's own state, wiring and button behavior, since
-    // driving dile-crud-list's real data load would race its own network refresh.
-    const config = buildConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-
-    expect(el._viewMode).toBe('item');
-    expect(el.listElement.viewMode).toBe('item');
-
-    const switchButton = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
-      .find((btn) => /view/i.test(btn.textContent));
-    expect(switchButton).toBeTruthy();
-    expect(switchButton.textContent.trim()).toBe('Grid view');
-
-    switchButton.click();
-    await el.updateComplete;
-
-    expect(el._viewMode).toBe('grid');
-    expect(el.listElement.viewMode).toBe('grid');
-
-    const switchButtonAfter = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
-      .find((btn) => /view/i.test(btn.textContent));
-    expect(switchButtonAfter.textContent.trim()).toBe('List view');
-  });
-
-  it('does not render the switch button when customization.disableListWiewSwitch is true', async () => {
-    const config = buildConfig({ customization: { disableListWiewSwitch: true } });
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    document.body.appendChild(el);
-    await el.updateComplete;
-
-    const switchButtons = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
-      .filter((btn) => /view/i.test(btn.textContent));
-    expect(switchButtons.length).toBe(0);
-    expect(el.listElement.viewMode).toBe('item');
-  });
-});
-
-describe('dile-crud scope and refresh', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-  async function createCrud() {
-    const config = new CrudConfigBuilder('https://example.test/api/invoices', {
-      customization: {
-        disableInsert: true,
-        disableHelp: true,
-        disableKeywordSearch: true,
-        disableSort: true,
-        disableFilter: true,
-        disablePagination: true,
-        hideCheckboxSelection: true,
-      },
-      templates: { item: (item) => html`<span>${item.name}</span>` },
-    }).getConfig();
-
-    const el = document.createElement('dile-crud');
-    el.config = config;
-    el.belongsTo = 'customer';
-    el.relationId = '10';
-    document.body.appendChild(el);
-    await el.updateComplete;
-    const list = el.listElement;
-    await list.updateComplete;
-    await list.elservice.updateComplete;
-
-    // Intercept the outgoing requests instead of hitting the network,
-    // and let the initial load (fired on start) settle first.
-    const requests = [];
-    const ajax = list.elservice.ajaxget;
-    ajax.generateRequest = () => requests.push({ url: ajax.url, data: ajax.data });
-    list.elservice.delayTime = 10;
-    await wait(250);
-    requests.length = 0;
-    return { el, list, requests, ajax };
-  }
-
-  it('setScope() updates belongsTo and relationId and reloads the list once from page 1', async () => {
-    const { el, list, requests, ajax } = await createCrud();
-    ajax.url = 'https://example.test/api/invoices?page=2';
-
-    el.setScope('supplier', '20');
-    expect(el.belongsTo).toBe('supplier');
-    expect(el.relationId).toBe('20');
-    await el.updateComplete;
-    await list.updateComplete;
-    await wait(50);
-
-    expect(list.belongsTo).toBe('supplier');
-    expect(list.relationId).toBe('20');
-    expect(requests).toHaveLength(1);
-    expect(requests[0].url).toBe('https://example.test/api/invoices');
-    expect(requests[0].data.belongsTo).toBe('supplier');
-    expect(requests[0].data.relationId).toBe('20');
-  });
-
-  it('setScope() without arguments clears the scope', async () => {
-    const { el, list, requests } = await createCrud();
-
-    el.setScope();
-    await el.updateComplete;
-    await list.updateComplete;
-    await wait(50);
-
-    expect(el.belongsTo).toBe('');
-    expect(el.relationId).toBe('');
-    expect(requests).toHaveLength(1);
-    expect(requests[0].data.belongsTo).toBeUndefined();
-    expect(requests[0].data.relationId).toBeUndefined();
-  });
-
-  it('refresh() keeps the current page and refresh({ resetPage: true }) goes back to page 1', async () => {
-    const { el, requests, ajax } = await createCrud();
-    const pagedUrl = 'https://example.test/api/invoices?page=2';
-
-    ajax.url = pagedUrl;
-    el.refresh();
-    await wait(50);
-    expect(requests.at(-1).url).toBe(pagedUrl);
-
-    el.refresh({ resetPage: true });
-    await wait(50);
-    expect(requests.at(-1).url).toBe('https://example.test/api/invoices');
-  });
-});

package/components/file-uploader/file-uploader.spec.js

@@ -1,32 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import './file-uploader.js';
-
-describe('dile-file-uploader', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  async function renderUploader(html) {
-    document.body.innerHTML = html;
-    const el = document.body.querySelector('dile-file-uploader');
-    await el.updateComplete;
-    const form = el.shadowRoot.querySelector('dile-file-uploader-form');
-    await form.updateComplete;
-    const dropFile = form.shadowRoot.querySelector('dile-drop-file');
-    await dropFile.updateComplete;
-    return { el, form, dropFile };
-  }
-
-  it('uses a single file field named "file" by default', async () => {
-    const { dropFile } = await renderUploader('<dile-file-uploader endpoint="/upload"></dile-file-uploader>');
-    expect(dropFile.getAttribute('name')).toBe('file');
-    expect(dropFile.multiple).toBe(false);
-  });
-
-  it('uses a multiple field named "files" when multiple is set', async () => {
-    const { form, dropFile } = await renderUploader('<dile-file-uploader endpoint="/upload" multiple></dile-file-uploader>');
-    expect(dropFile.getAttribute('name')).toBe('files');
-    expect(dropFile.multiple).toBe(true);
-    expect(form.getData()).toEqual({ files: [] });
-  });
-});