kempo-media 0.2.3

package/tests/components/MediaLibrary.browser-test.js

@@ -0,0 +1,412 @@
+import MediaLibrary from '../../admin/components/MediaLibrary.js';
+
+/*
+  MediaLibrary.js talks to /kempo-media/sdk.js by absolute URL, which
+  tests/browser-fixtures.node-test.js points at tests/fixtures/kempo-media-sdk-mock/sdk.js instead
+  of the real one — that fake delegates every call to window.__mediaSdkMock, which each test below
+  installs before rendering the component. This is the same "swap the boundary hook" shape as
+  kempo-ui's own window.kempo.openAssetPicker tests, just applied to a module import instead of a
+  global.
+*/
+
+const PAGE_SIZE = 24;
+
+const flush = (ms = 0) => new Promise(r => setTimeout(r, ms));
+
+const fixtureAsset = (overrides = {}) => ({
+  id: 'asset1',
+  filename: 'a1b2c3d4.png',
+  originalName: 'photo.png',
+  mimeType: 'image/png',
+  kind: 'image',
+  sizeBytes: 2048,
+  path: 'media/uploads/a1b2c3d4.png',
+  thumbnailPath: 'media/thumbnails/a1b2c3d4.png',
+  altText: '',
+  width: 800,
+  height: 600,
+  uploadedBy: 'user1',
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  ...overrides,
+});
+
+const defaultMock = () => ({
+  getMediaAssets: async () => [null, { assets: [], total: 0 }],
+  uploadMedia: async () => [null, {}],
+  deleteMediaAsset: async () => [null, {}],
+});
+
+const createLibrary = async (attrs = {}, mockOverrides = {}) => {
+  window.__mediaSdkMock = { ...defaultMock(), ...mockOverrides };
+
+  const container = document.createElement('div');
+  const el = document.createElement('kempo-media-library');
+  if(attrs.selectable) el.selectable = true;
+  if(attrs.canUpload) el.setAttribute('can-upload', '');
+  if(attrs.canDelete) el.setAttribute('can-delete', '');
+  if(attrs.kind) el.kind = attrs.kind;
+  container.appendChild(el);
+  document.body.appendChild(container);
+
+  await el.updateComplete;
+  await flush(20); // let the connectedCallback-triggered load() resolve and re-render
+  await el.updateComplete;
+
+  return { container, el };
+};
+
+const cleanup = container => {
+  if(container?.parentNode) container.parentNode.removeChild(container);
+  delete window.__mediaSdkMock;
+  // Toasts/dialogs default to a 5s auto-close and outlive a single test otherwise
+  document.querySelectorAll('k-toast-container').forEach(c => c.remove());
+  document.querySelectorAll('k-dialog').forEach(d => d.remove());
+};
+
+export default {
+  'creates a kempo-media-library element': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary();
+    const ok = el instanceof MediaLibrary;
+    cleanup(container);
+    return ok ? pass('MediaLibrary created') : fail('element is not a MediaLibrary instance');
+  },
+
+  'loads assets on connect with default paging': async ({ pass, fail }) => {
+    let received = null;
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async params => {
+        received = params;
+        return [null, { assets: [fixtureAsset(), fixtureAsset({ id: 'asset2' })], total: 2 }];
+      },
+    });
+    const tiles = el.shadowRoot.querySelectorAll('.grid .tile').length;
+    cleanup(container);
+    if(!received) return fail('getMediaAssets was never called');
+    if(received.limit !== PAGE_SIZE) return fail(`limit was ${received.limit}, expected ${PAGE_SIZE}`);
+    if(received.offset !== 0) return fail(`offset was ${received.offset}, expected 0`);
+    if(received.kind !== undefined) return fail(`kind was ${received.kind}, expected undefined with no filter set`);
+    if(received.search !== undefined) return fail(`search was ${received.search}, expected undefined with no filter set`);
+    if(tiles !== 2) return fail(`rendered ${tiles} tiles, expected 2`);
+    pass('loaded with default paging');
+  },
+
+  'shows an empty message when the library has no assets': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary();
+    const empty = el.shadowRoot.querySelector('.empty')?.textContent || '';
+    cleanup(container);
+    return empty.includes('No media yet.') ? pass('empty state shown') : fail(`unexpected empty text: ${empty}`);
+  },
+
+  'shows a different empty message when a filter matches nothing': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async () => [null, { assets: [], total: 0 }],
+    });
+    el.search = 'nothing-matches-this';
+    el.offset = 0;
+    await el.load();
+    await el.updateComplete;
+    const empty = el.shadowRoot.querySelector('.empty')?.textContent || '';
+    cleanup(container);
+    return empty.includes('Nothing matches that filter.') ? pass('filtered empty state shown') : fail(`unexpected empty text: ${empty}`);
+  },
+
+  'a load failure shows a toast and leaves the grid empty': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async () => [{ code: 500, msg: 'boom' }, null],
+    });
+    const toast = document.querySelector('k-toast.bg-danger');
+    const grid = el.shadowRoot.querySelector('.grid');
+    cleanup(container);
+    if(!toast) return fail('no error toast was shown');
+    if(grid) return fail('grid was rendered despite a load failure');
+    pass('error surfaced via toast');
+  },
+
+  'search is debounced to one request carrying the last-typed value': async ({ pass, fail }) => {
+    const calls = [];
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async params => { calls.push(params.search); return [null, { assets: [], total: 0 }]; },
+    });
+    const before = calls.length;
+
+    el.handleSearch({ target: { value: 'k' } });
+    el.handleSearch({ target: { value: 'ke' } });
+    el.handleSearch({ target: { value: 'kem' } });
+    await flush(400);
+
+    const after = calls.slice(before);
+    cleanup(container);
+    if(after.length !== 1) return fail(`expected exactly 1 debounced request, got ${after.length}: ${JSON.stringify(after)}`);
+    if(after[0] !== 'kem') return fail(`debounced request carried "${after[0]}", expected "kem"`);
+    pass('debounced to the last value');
+  },
+
+  'pagination requests the next and previous offsets': async ({ pass, fail }) => {
+    const calls = [];
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async params => { calls.push(params.offset); return [null, { assets: [fixtureAsset()], total: 50 }]; },
+    });
+
+    el.goTo(PAGE_SIZE);
+    await flush(20);
+    el.goTo(0);
+    await flush(20);
+
+    cleanup(container);
+    if(calls.length !== 3) return fail(`expected 3 loads (initial + 2 goTo), got ${calls.length}`);
+    if(calls[1] !== PAGE_SIZE) return fail(`goTo(${PAGE_SIZE}) requested offset ${calls[1]}`);
+    if(calls[2] !== 0) return fail(`goTo(0) requested offset ${calls[2]}`);
+    pass('paginated correctly');
+  },
+
+  'goTo never requests a negative offset': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary();
+    el.goTo(-PAGE_SIZE);
+    await flush(20);
+    cleanup(container);
+    return el.offset === 0 ? pass('clamped to 0') : fail(`offset was ${el.offset}`);
+  },
+
+  'pager buttons are disabled at the first and last page': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 50 }], // 3 pages
+    });
+    const prevAtStart = el.shadowRoot.querySelector('.pager button:first-child').disabled;
+
+    el.goTo(PAGE_SIZE * 2); // last page
+    await flush(20);
+    await el.updateComplete;
+    const nextAtEnd = el.shadowRoot.querySelector('.pager button:last-child').disabled;
+
+    cleanup(container);
+    if(!prevAtStart) return fail('Previous was enabled on the first page');
+    if(!nextAtEnd) return fail('Next was enabled on the last page');
+    pass('pager boundaries respected');
+  },
+
+  'uploads run one at a time, not in parallel': async ({ pass, fail }) => {
+    const started = [];
+    const pendingResolvers = [];
+    const uploadMedia = file => new Promise(resolve => {
+      started.push(file.name);
+      pendingResolvers.push(() => resolve([null, {}]));
+    });
+    const { container, el } = await createLibrary({ canUpload: true }, { uploadMedia });
+
+    const files = [{ name: 'a.png' }, { name: 'b.png' }, { name: 'c.png' }];
+    const done = el.uploadFiles(files);
+    await flush(20);
+    const startedBeforeAnyResolve = started.length;
+
+    pendingResolvers.shift()(); // resolve a.png
+    await flush(20);
+    const startedAfterFirstResolve = started.length;
+
+    pendingResolvers.shift()(); // resolve b.png
+    await flush(20);
+    pendingResolvers.shift()(); // resolve c.png
+    await done;
+
+    cleanup(container);
+    if(startedBeforeAnyResolve !== 1) return fail(`expected only 1 upload started before any resolved, got ${startedBeforeAnyResolve}`);
+    if(startedAfterFirstResolve !== 2) return fail(`expected b.png to start only after a.png resolved, got ${startedAfterFirstResolve} started`);
+    if(started.join(',') !== 'a.png,b.png,c.png') return fail(`wrong order: ${started.join(',')}`);
+    pass('uploaded sequentially');
+  },
+
+  'upload progress is tracked per file': async ({ pass, fail }) => {
+    let resolveUpload;
+    const uploadMedia = (file, opts, onProgress) => {
+      onProgress(0.5);
+      return new Promise(resolve => { resolveUpload = () => { onProgress(1); resolve([null, {}]); }; });
+    };
+    const { container, el } = await createLibrary({ canUpload: true }, { uploadMedia });
+
+    const done = el.uploadFiles([{ name: 'a.png' }]);
+    await flush(20);
+    const midProgress = el.uploads[0]?.progress;
+
+    resolveUpload();
+    await done;
+
+    cleanup(container);
+    if(midProgress !== 0.5) return fail(`expected mid-upload progress 0.5, got ${midProgress}`);
+    pass('progress tracked');
+  },
+
+  'a failed upload is flagged but does not stop the rest, and the library still reloads': async ({ pass, fail }) => {
+    let loadCount = 0;
+    const uploadMedia = file => file.name === 'bad.png'
+      ? Promise.resolve([{ code: 400, msg: 'rejected' }, null])
+      : Promise.resolve([null, {}]);
+    const { container, el } = await createLibrary({ canUpload: true }, {
+      uploadMedia,
+      getMediaAssets: async () => { loadCount++; return [null, { assets: [], total: 0 }]; },
+    });
+    const loadsBeforeUpload = loadCount;
+
+    await el.uploadFiles([{ name: 'bad.png' }, { name: 'good.png' }]);
+
+    const toast = document.querySelector('k-toast.bg-danger');
+    cleanup(container);
+    if(!toast) return fail('no error toast shown for the failed file');
+    if(loadCount !== loadsBeforeUpload + 1) return fail(`expected exactly 1 reload after uploadFiles, got ${loadCount - loadsBeforeUpload}`);
+    pass('failure isolated to one file, library still reloaded');
+  },
+
+  'delete asks for confirmation before removing anything': async ({ pass, fail }) => {
+    let deleteCalled = false;
+    const { container, el } = await createLibrary({ canDelete: true }, {
+      getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 1 }],
+      deleteMediaAsset: async () => { deleteCalled = true; return [null, {}]; },
+    });
+
+    const asset = fixtureAsset();
+    el.handleDelete(asset, { stopPropagation() {} });
+    await flush(20);
+    const calledBeforeConfirm = deleteCalled;
+
+    const dialog = document.querySelector('k-dialog');
+    cleanup(container);
+    if(!dialog) return fail('handleDelete did not open a confirmation dialog');
+    if(calledBeforeConfirm) return fail('deleteMediaAsset was called before the dialog was confirmed');
+    pass('confirmation required');
+  },
+
+  'confirming delete removes the asset and reloads': async ({ pass, fail }) => {
+    let deletedId = null;
+    let loadCount = 0;
+    const { container, el } = await createLibrary({ canDelete: true }, {
+      getMediaAssets: async () => { loadCount++; return [null, { assets: [fixtureAsset()], total: 1 }]; },
+      deleteMediaAsset: async id => { deletedId = id; return [null, {}]; },
+    });
+    const loadsBeforeDelete = loadCount;
+
+    el.handleDelete(fixtureAsset(), { stopPropagation() {} });
+    await flush(20);
+    document.querySelector('k-dialog')?.confirmAction();
+    await flush(20);
+
+    cleanup(container);
+    if(deletedId !== 'asset1') return fail(`deleteMediaAsset called with ${deletedId}, expected asset1`);
+    if(loadCount !== loadsBeforeDelete + 1) return fail('library did not reload after a successful delete');
+    pass('deleted and reloaded');
+  },
+
+  'declining the confirmation deletes nothing': async ({ pass, fail }) => {
+    let deleteCalled = false;
+    const { container, el } = await createLibrary({ canDelete: true }, {
+      getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 1 }],
+      deleteMediaAsset: async () => { deleteCalled = true; return [null, {}]; },
+    });
+
+    el.handleDelete(fixtureAsset(), { stopPropagation() {} });
+    await flush(20);
+    document.querySelector('k-dialog')?.cancelAction();
+    await flush(20);
+
+    cleanup(container);
+    return deleteCalled ? fail('deleteMediaAsset was called despite declining the confirmation') : pass('nothing deleted');
+  },
+
+  'deleting the last item on a page steps back to the previous page': async ({ pass, fail }) => {
+    const offsetsRequested = [];
+    const { container, el } = await createLibrary({ canDelete: true }, {
+      getMediaAssets: async params => {
+        offsetsRequested.push(params.offset);
+        // Page 1 (offset 0) is full; page 2 (offset 24) holds the single asset being deleted
+        return params.offset === PAGE_SIZE
+          ? [null, { assets: [fixtureAsset()], total: PAGE_SIZE + 1 }]
+          : [null, { assets: Array.from({ length: PAGE_SIZE }, (_, i) => fixtureAsset({ id: `page1-${i}` })), total: PAGE_SIZE + 1 }];
+      },
+      deleteMediaAsset: async () => [null, {}],
+    });
+
+    el.goTo(PAGE_SIZE);
+    await flush(20);
+
+    el.handleDelete(fixtureAsset(), { stopPropagation() {} });
+    await flush(20);
+    document.querySelector('k-dialog')?.confirmAction();
+    await flush(20);
+
+    cleanup(container);
+    const lastOffset = offsetsRequested[offsetsRequested.length - 1];
+    return lastOffset === 0 ? pass('stepped back a page') : fail(`final reload used offset ${lastOffset}, expected 0`);
+  },
+
+  'clicking a tile does nothing when the library is not selectable': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary({}, {
+      getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 1 }],
+    });
+    let fired = false;
+    el.addEventListener('asset-selected', () => { fired = true; });
+    el.shadowRoot.querySelector('.tile').click();
+    await el.updateComplete;
+
+    cleanup(container);
+    return fired ? fail('asset-selected fired despite selectable being false') : pass('click ignored');
+  },
+
+  'clicking a tile selects it and dispatches asset-selected when selectable': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary({ selectable: true }, {
+      getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 1 }],
+    });
+    let detail = null;
+    el.addEventListener('asset-selected', e => { detail = e.detail; });
+    el.shadowRoot.querySelector('.tile').click();
+    await el.updateComplete;
+
+    const selectedClass = el.shadowRoot.querySelector('.tile').classList.contains('selected');
+    cleanup(container);
+    if(!detail) return fail('asset-selected never fired');
+    if(detail.asset.id !== 'asset1') return fail(`selected asset id was ${detail.asset.id}`);
+    if(el.selectedAsset?.id !== 'asset1') return fail('selectedAsset getter did not reflect the selection');
+    if(!selectedClass) return fail('.tile did not get the selected class');
+    pass('selection worked');
+  },
+
+  'double-clicking a selectable tile dispatches asset-confirmed': async ({ pass, fail }) => {
+    const { container, el } = await createLibrary({ selectable: true }, {
+      getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 1 }],
+    });
+    let detail = null;
+    el.addEventListener('asset-confirmed', e => { detail = e.detail; });
+    el.shadowRoot.querySelector('.tile').dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+    await el.updateComplete;
+
+    cleanup(container);
+    return detail?.asset?.id === 'asset1' ? pass('confirmed') : fail(`asset-confirmed did not fire with the right asset: ${JSON.stringify(detail)}`);
+  },
+
+  'upload control is only rendered when canUpload is true': async ({ pass, fail }) => {
+    const { container: c1, el: withoutUpload } = await createLibrary({ canUpload: false });
+    const withoutButton = !!withoutUpload.shadowRoot.querySelector('.upload-button');
+    cleanup(c1);
+
+    const { container: c2, el: withUpload } = await createLibrary({ canUpload: true });
+    const withButton = !!withUpload.shadowRoot.querySelector('.upload-button');
+    cleanup(c2);
+
+    if(withoutButton) return fail('upload button rendered without can-upload');
+    if(!withButton) return fail('upload button missing with can-upload set');
+    pass('upload control gated correctly');
+  },
+
+  'delete button on a tile is only rendered when canDelete is true': async ({ pass, fail }) => {
+    const mock = { getMediaAssets: async () => [null, { assets: [fixtureAsset()], total: 1 }] };
+
+    const { container: c1, el: withoutDelete } = await createLibrary({ canDelete: false }, mock);
+    const withoutButton = !!withoutDelete.shadowRoot.querySelector('.tile .delete');
+    cleanup(c1);
+
+    const { container: c2, el: withDelete } = await createLibrary({ canDelete: true }, mock);
+    const withButton = !!withDelete.shadowRoot.querySelector('.tile .delete');
+    cleanup(c2);
+
+    if(withoutButton) return fail('delete button rendered without can-delete');
+    if(!withButton) return fail('delete button missing with can-delete set');
+    pass('delete control gated correctly');
+  },
+};

package/tests/fixtures/kempo-media-sdk-mock/sdk.js

@@ -0,0 +1,16 @@
+/*
+  Served at /kempo-media/sdk.js during browser tests (see ../../browser-fixtures.node-test.js and
+  MediaLibrary.browser-test.js), standing in for the real public/sdk.js. MediaLibrary.js imports
+  getMediaAssets/uploadMedia/deleteMediaAsset by name from that absolute URL, so the only way to
+  control what it sees without booting a real server is to have this URL resolve to something
+  test-controlled instead. Each test installs window.__mediaSdkMock before rendering the component.
+*/
+
+const mock = () => {
+  if(!window.__mediaSdkMock) throw new Error('window.__mediaSdkMock not installed before importing the mocked sdk.js');
+  return window.__mediaSdkMock;
+};
+
+export const getMediaAssets = (...args) => mock().getMediaAssets(...args);
+export const uploadMedia = (...args) => mock().uploadMedia(...args);
+export const deleteMediaAsset = (...args) => mock().deleteMediaAsset(...args);