@internetarchive/collection-browser 1.14.2 → 1.14.4

package/dist/test/tiles/grid/item-tile.test.js

@@ -1,303 +1,303 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import sinon from 'sinon';
-import { html } from 'lit';
-import '../../../src/tiles/grid/item-tile';
-describe('Item Tile', () => {
-    it('should render initial component', async () => {
-        var _a, _b, _c, _d, _e;
-        const el = await fixture(html `<item-tile></item-tile>`);
-        const container = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container');
-        const tileDetails = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tile-details');
-        const itemInfo = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.item-info');
-        const itemTitle = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#title');
-        const imageBlock = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('image-block');
-        expect(container).to.exist;
-        expect(tileDetails).to.exist;
-        expect(itemInfo).to.exist;
-        expect(imageBlock).to.exist;
-        expect(itemTitle).to.exist;
-    });
-    it('should render with created-by element', async () => {
-        var _a, _b, _c, _d, _e;
-        const el = await fixture(html `<item-tile .model=${{ creator: 'someone' }}></item-tile>`);
-        const container = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container');
-        const tileDetails = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tile-details');
-        const itemInfo = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.item-info');
-        const createdBy = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.created-by');
-        const truncatedCreatorText = createdBy === null || createdBy === void 0 ? void 0 : createdBy.querySelector('.truncated');
-        const dateSortedBy = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.date-sorted-by');
-        expect(container).to.exist;
-        expect(tileDetails).to.exist;
-        expect(itemInfo).to.exist;
-        expect(createdBy).to.exist;
-        expect(truncatedCreatorText).to.exist;
-        expect(dateSortedBy).to.not.exist;
-    });
-    it('should not render with created-by but date element', async () => {
-        var _a, _b;
-        const el = await fixture(html `<item-tile .model=${{ datePublished: new Date() }}></item-tile>`);
-        el.sortParam = {
-            field: 'date',
-            direction: 'desc',
-        };
-        await el.updateComplete;
-        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
-        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
-        expect(createdBy).to.not.exist;
-        expect(dateSortedBy).to.exist;
-    });
-    it('should not render with created-by but reviewdate element', async () => {
-        var _a, _b;
-        const el = await fixture(html `<item-tile .model=${{ dateReviewed: new Date() }}></item-tile>`);
-        el.sortParam = {
-            field: 'reviewdate',
-            direction: 'desc',
-        };
-        await el.updateComplete;
-        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
-        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
-        expect(createdBy).to.not.exist;
-        expect(dateSortedBy).to.exist;
-    });
-    it('should not render with created-by but publicdate element', async () => {
-        var _a, _b;
-        const el = await fixture(html `<item-tile .model=${{ dateArchived: new Date() }}></item-tile>`);
-        el.sortParam = {
-            field: 'publicdate',
-            direction: 'desc',
-        };
-        await el.updateComplete;
-        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
-        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
-        expect(createdBy).to.not.exist;
-        expect(dateSortedBy).to.exist;
-    });
-    it('should not render date-sorted-by element if date is not provided', async () => {
-        var _a, _b;
-        const el = await fixture(html `<item-tile .model=${{ dateArchived: undefined }}></item-tile>`);
-        el.sortParam = {
-            field: 'publicdate',
-            direction: 'desc',
-        };
-        await el.updateComplete;
-        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
-        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
-        expect(createdBy).to.not.exist;
-        expect(dateSortedBy).to.not.exist;
-    });
-    it('should render without created-by when sorting by a date field', async () => {
-        var _a, _b, _c;
-        const el = await fixture(html `<item-tile .model=${{ dateAdded: new Date() }}></item-tile>`);
-        el.sortParam = {
-            field: 'addeddate',
-            direction: 'asc',
-        };
-        await el.updateComplete;
-        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
-        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
-        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
-        expect(itemInfo).to.exist;
-        expect(createdBy).to.not.exist;
-        expect(dateSortedBy).to.exist;
-    });
-    it('should render with created-by when sort field is not a date', async () => {
-        var _a, _b, _c;
-        const el = await fixture(html `<item-tile .model=${{ creator: 'someone' }}></item-tile>`);
-        el.sortParam = {
-            field: 'week',
-            direction: 'asc',
-        };
-        await el.updateComplete;
-        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
-        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
-        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
-        expect(itemInfo).to.exist;
-        expect(dateSortedBy).to.not.exist; // it should not exist because this is not a date sort
-        expect(createdBy).to.exist;
-    });
-    it('should render published date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date(2010, 0, 2),
-            dateArchived: new Date(2011, 0, 2),
-            datePublished: new Date(2012, 0, 2),
-            dateReviewed: new Date(2013, 0, 2),
-        };
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import '../../../src/tiles/grid/item-tile';
+describe('Item Tile', () => {
+    it('should render initial component', async () => {
+        var _a, _b, _c, _d, _e;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        const container = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container');
+        const tileDetails = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tile-details');
+        const itemInfo = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.item-info');
+        const itemTitle = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#title');
+        const imageBlock = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('image-block');
+        expect(container).to.exist;
+        expect(tileDetails).to.exist;
+        expect(itemInfo).to.exist;
+        expect(imageBlock).to.exist;
+        expect(itemTitle).to.exist;
+    });
+    it('should render with created-by element', async () => {
+        var _a, _b, _c, _d, _e;
+        const el = await fixture(html `<item-tile .model=${{ creator: 'someone' }}></item-tile>`);
+        const container = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.container');
+        const tileDetails = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tile-details');
+        const itemInfo = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.item-info');
+        const createdBy = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.created-by');
+        const truncatedCreatorText = createdBy === null || createdBy === void 0 ? void 0 : createdBy.querySelector('.truncated');
+        const dateSortedBy = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.date-sorted-by');
+        expect(container).to.exist;
+        expect(tileDetails).to.exist;
+        expect(itemInfo).to.exist;
+        expect(createdBy).to.exist;
+        expect(truncatedCreatorText).to.exist;
+        expect(dateSortedBy).to.not.exist;
+    });
+    it('should not render with created-by but date element', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile .model=${{ datePublished: new Date() }}></item-tile>`);
+        el.sortParam = {
+            field: 'date',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should not render with created-by but reviewdate element', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile .model=${{ dateReviewed: new Date() }}></item-tile>`);
+        el.sortParam = {
+            field: 'reviewdate',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should not render with created-by but publicdate element', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile .model=${{ dateArchived: new Date() }}></item-tile>`);
+        el.sortParam = {
+            field: 'publicdate',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should not render date-sorted-by element if date is not provided', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile .model=${{ dateArchived: undefined }}></item-tile>`);
+        el.sortParam = {
+            field: 'publicdate',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.not.exist;
+    });
+    it('should render without created-by when sorting by a date field', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<item-tile .model=${{ dateAdded: new Date() }}></item-tile>`);
+        el.sortParam = {
+            field: 'addeddate',
+            direction: 'asc',
+        };
+        await el.updateComplete;
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
+        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
+        expect(itemInfo).to.exist;
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should render with created-by when sort field is not a date', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<item-tile .model=${{ creator: 'someone' }}></item-tile>`);
+        el.sortParam = {
+            field: 'week',
+            direction: 'asc',
+        };
+        await el.updateComplete;
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
+        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
+        expect(itemInfo).to.exist;
+        expect(dateSortedBy).to.not.exist; // it should not exist because this is not a date sort
+        expect(createdBy).to.exist;
+    });
+    it('should render published date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date(2010, 0, 2),
+            dateArchived: new Date(2011, 0, 2),
+            datePublished: new Date(2012, 0, 2),
+            dateReviewed: new Date(2013, 0, 2),
+        };
         const el = await fixture(html `
       <item-tile
         .model=${model}
         .sortParam=${{ field: 'date', direction: 'desc' }}
       >
       </item-tile>
-    `);
-        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('published Jan 02, 2012');
-    });
-    it('should render added date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date(2010, 0, 2),
-            dateArchived: new Date(2011, 0, 2),
-            datePublished: new Date(2012, 0, 2),
-            dateReviewed: new Date(2013, 0, 2),
-        };
+    `);
+        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('published Jan 02, 2012');
+    });
+    it('should render added date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date(2010, 0, 2),
+            dateArchived: new Date(2011, 0, 2),
+            datePublished: new Date(2012, 0, 2),
+            dateReviewed: new Date(2013, 0, 2),
+        };
         const el = await fixture(html `
       <item-tile
         .model=${model}
         .sortParam=${{ field: 'addeddate', direction: 'desc' }}
       >
       </item-tile>
-    `);
-        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('added Jan 02, 2010');
-    });
-    it('should render archived date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date(2010, 0, 2),
-            dateArchived: new Date(2011, 0, 2),
-            datePublished: new Date(2012, 0, 2),
-            dateReviewed: new Date(2013, 0, 2),
-        };
+    `);
+        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('added Jan 02, 2010');
+    });
+    it('should render archived date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date(2010, 0, 2),
+            dateArchived: new Date(2011, 0, 2),
+            datePublished: new Date(2012, 0, 2),
+            dateReviewed: new Date(2013, 0, 2),
+        };
         const el = await fixture(html `
       <item-tile
         .model=${model}
         .sortParam=${{ field: 'publicdate', direction: 'desc' }}
       >
       </item-tile>
-    `);
-        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('archived Jan 02, 2011');
-    });
-    it('should render reviewed date when sorting by it', async () => {
-        var _a, _b;
-        const model = {
-            dateAdded: new Date(2010, 0, 2),
-            dateArchived: new Date(2011, 0, 2),
-            datePublished: new Date(2012, 0, 2),
-            dateReviewed: new Date(2013, 0, 2),
-        };
+    `);
+        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('archived Jan 02, 2011');
+    });
+    it('should render reviewed date when sorting by it', async () => {
+        var _a, _b;
+        const model = {
+            dateAdded: new Date(2010, 0, 2),
+            dateArchived: new Date(2011, 0, 2),
+            datePublished: new Date(2012, 0, 2),
+            dateReviewed: new Date(2013, 0, 2),
+        };
         const el = await fixture(html `
       <item-tile
         .model=${model}
         .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
       >
       </item-tile>
-    `);
-        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('reviewed Jan 02, 2013');
-    });
-    it('should only show the year for a date published of Jan 1 at midnight UTC', async () => {
-        var _a, _b;
-        const model = {
-            datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
-        };
+    `);
+        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.contain('reviewed Jan 02, 2013');
+    });
+    it('should only show the year for a date published of Jan 1 at midnight UTC', async () => {
+        var _a, _b;
+        const model = {
+            datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
+        };
         const el = await fixture(html `
       <item-tile
         .model=${model}
         .sortParam=${{ field: 'date', direction: 'desc' }}
       >
       </item-tile>
-    `);
-        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('published 2012');
-    });
-    it('should show full date added/archived/reviewed, even on Jan 1 at midnight UTC', async () => {
-        var _a, _b, _c, _d, _e, _f;
-        const model = {
-            dateAdded: new Date(2010, 0, 1, 0, 0, 0, 0),
-            dateArchived: new Date(2011, 0, 1, 0, 0, 0, 0),
-            datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
-            dateReviewed: new Date(2013, 0, 1, 0, 0, 0, 0),
-        };
+    `);
+        const dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('published 2012');
+    });
+    it('should show full date added/archived/reviewed, even on Jan 1 at midnight UTC', async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const model = {
+            dateAdded: new Date(2010, 0, 1, 0, 0, 0, 0),
+            dateArchived: new Date(2011, 0, 1, 0, 0, 0, 0),
+            datePublished: new Date(2012, 0, 1, 0, 0, 0, 0),
+            dateReviewed: new Date(2013, 0, 1, 0, 0, 0, 0),
+        };
         const el = await fixture(html `
       <item-tile
         .model=${model}
         .sortParam=${{ field: 'addeddate', direction: 'desc' }}
       >
       </item-tile>
-    `);
-        let dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('added Jan 01, 2010');
-        el.sortParam = { field: 'publicdate', direction: 'desc' };
-        await el.updateComplete;
-        dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_d = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _d === void 0 ? void 0 : _d.trim()).to.equal('archived Jan 01, 2011');
-        el.sortParam = { field: 'reviewdate', direction: 'desc' };
-        await el.updateComplete;
-        dateSortedBy = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.date-sorted-by');
-        expect(dateSortedBy).to.exist;
-        expect((_f = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _f === void 0 ? void 0 : _f.trim()).to.equal('reviewed Jan 01, 2013');
-    });
-    it('should show the first creator matching the letter filter, if defined', async () => {
-        var _a, _b;
-        const model = {
-            creator: 'foo',
-            creators: ['foo', 'bar', 'baz'],
-        };
+    `);
+        let dateSortedBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_b = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('added Jan 01, 2010');
+        el.sortParam = { field: 'publicdate', direction: 'desc' };
+        await el.updateComplete;
+        dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_d = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _d === void 0 ? void 0 : _d.trim()).to.equal('archived Jan 01, 2011');
+        el.sortParam = { field: 'reviewdate', direction: 'desc' };
+        await el.updateComplete;
+        dateSortedBy = (_e = el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.date-sorted-by');
+        expect(dateSortedBy).to.exist;
+        expect((_f = dateSortedBy === null || dateSortedBy === void 0 ? void 0 : dateSortedBy.textContent) === null || _f === void 0 ? void 0 : _f.trim()).to.equal('reviewed Jan 01, 2013');
+    });
+    it('should show the first creator matching the letter filter, if defined', async () => {
+        var _a, _b;
+        const model = {
+            creator: 'foo',
+            creators: ['foo', 'bar', 'baz'],
+        };
         const el = await fixture(html `
       <item-tile .model=${model} .creatorFilter=${'B'}> </item-tile>
-    `);
-        const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
-        expect(creator).to.exist;
-        expect((_b = creator === null || creator === void 0 ? void 0 : creator.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.match(/by\s+bar/);
-    });
-    it('should render with snippet block when it has snippets', async () => {
-        var _a;
+    `);
+        const creator = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        expect(creator).to.exist;
+        expect((_b = creator === null || creator === void 0 ? void 0 : creator.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.match(/by\s+bar/);
+    });
+    it('should render with snippet block when it has snippets', async () => {
+        var _a;
         const el = await fixture(html `
       <item-tile .model=${{ snippets: ['some {{{snippet}}} text'] }}>
       </item-tile>
-    `);
-        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
-        expect(snippetBlock).to.exist;
-    });
-    it('should not render snippet block when no snippets are present', async () => {
-        var _a;
-        const el = await fixture(html `<item-tile></item-tile>`);
-        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
-        expect(snippetBlock).to.not.exist;
-    });
-    it('should render info button when showInfoButton flag is set', async () => {
-        var _a;
+    `);
+        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
+        expect(snippetBlock).to.exist;
+    });
+    it('should not render snippet block when no snippets are present', async () => {
+        var _a;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        const snippetBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('text-snippet-block');
+        expect(snippetBlock).to.not.exist;
+    });
+    it('should render info button when showInfoButton flag is set', async () => {
+        var _a;
         const el = await fixture(html `
       <item-tile ?showInfoButton=${true}> </item-tile>
-    `);
-        const infoButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.info-button');
-        expect(infoButton).to.exist;
-    });
-    it('should dispatch event when info button tapped', async () => {
-        var _a;
-        const infoButtonSpy = sinon.spy();
+    `);
+        const infoButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.info-button');
+        expect(infoButton).to.exist;
+    });
+    it('should dispatch event when info button tapped', async () => {
+        var _a;
+        const infoButtonSpy = sinon.spy();
         const el = await fixture(html `
       <item-tile ?showInfoButton=${true} @infoButtonPressed=${infoButtonSpy}>
       </item-tile>
-    `);
-        const infoButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.info-button');
-        infoButton.click();
-        await el.updateComplete;
-        expect(infoButtonSpy.callCount).to.equal(1);
-    });
-    it('should render with volume/issue view', async () => {
-        var _a;
+    `);
+        const infoButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.info-button');
+        infoButton.click();
+        await el.updateComplete;
+        expect(infoButtonSpy.callCount).to.equal(1);
+    });
+    it('should render with volume/issue view', async () => {
+        var _a;
         const el = await fixture(html `
       <item-tile .model=${{ volume: '1', issue: 'Index' }}></item-tile>
-    `);
-        const volumeIssueBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.volume-issue');
-        expect(volumeIssueBlock).to.exist;
-    });
-    it('should render with volume/issue view to not render', async () => {
-        var _a;
-        const el = await fixture(html `<item-tile></item-tile>`);
-        const volumeIssueBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.volume-issue');
-        expect(volumeIssueBlock).to.not.exist;
-    });
-});
+    `);
+        const volumeIssueBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.volume-issue');
+        expect(volumeIssueBlock).to.exist;
+    });
+    it('should render with volume/issue view to not render', async () => {
+        var _a;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        const volumeIssueBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.volume-issue');
+        expect(volumeIssueBlock).to.not.exist;
+    });
+});
 //# sourceMappingURL=item-tile.test.js.map

package/dist/test/tiles/grid/search-tile.test.d.ts

@@ -0,0 +1 @@
+import '../../../src/tiles/grid/search-tile';

package/dist/test/tiles/grid/search-tile.test.js

@@ -0,0 +1,67 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../../src/tiles/grid/search-tile';
+describe('Search Tile', () => {
+    it('should render initial component', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(html `<search-tile></search-tile>`);
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('image-block');
+        const title = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#title');
+        const itemStats = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#item-stats');
+        expect(itemInfo).to.exist;
+        expect(itemImage).to.exist;
+        expect(title).to.exist;
+        expect(itemStats).not.exist; // search tiles doesn't have stats bar
+    });
+    it('should render with title element', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `
+      <search-tile
+        .model=${{
+            identifier: 'searched query',
+            title: 'searched query',
+        }}
+      >
+      </search-tile>
+    `);
+        await el.updateComplete;
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const itemTitle = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#title');
+        expect(itemInfo).to.exist;
+        expect(itemTitle).to.exist;
+        expect((_c = itemTitle === null || itemTitle === void 0 ? void 0 : itemTitle.querySelector('.truncated')) === null || _c === void 0 ? void 0 : _c.textContent).to.equal('searched query');
+    });
+    it('should render with image-block element', async () => {
+        var _a;
+        const el = await fixture(html `
+      <search-tile
+        .model=${{
+            identifier: 'title:hello-world',
+        }}
+      >
+      </search-tile>
+    `);
+        await el.updateComplete;
+        const itemImageBlock = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('image-block');
+        expect(itemImageBlock).to.exist;
+    });
+    it('should not render with item stats element', async () => {
+        var _a;
+        const el = await fixture(html `
+      <search-tile
+        .model=${{
+            identifier: '@jack-sparrow',
+            itemCount: 14521,
+            collectionSize: 23222543,
+        }}
+      >
+      </search-tile>
+    `);
+        await el.updateComplete;
+        const itemStats = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#item-stats');
+        expect(itemStats).not.exist;
+    });
+});
+//# sourceMappingURL=search-tile.test.js.map

package/dist/test/tiles/grid/search-tile.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-tile.test.js","sourceRoot":"","sources":["../../../../test/tiles/grid/search-tile.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,qCAAqC,CAAC;AAE7C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAExE,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,KAAK,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrD,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAE9D,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvB,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,sCAAsC;IACrE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;;QAChD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,UAAU,EAAE,gBAAgB;YAC5B,KAAK,EAAE,gBAAgB;SACxB;;;KAGJ,CAAC,CAAC;QACH,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QAEzD,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAClE,gBAAgB,CACjB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;;QACtD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,UAAU,EAAE,mBAAmB;SAChC;;;KAGJ,CAAC,CAAC;QACH,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,cAAc,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QACnE,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;;QACzD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;iBAE5B;YACP,UAAU,EAAE,eAAe;YAC3B,SAAS,EAAE,KAAK;YAChB,cAAc,EAAE,QAAQ;SACzB;;;KAGJ,CAAC,CAAC;QACH,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { SearchTile } from '../../../src/tiles/grid/search-tile';\n\nimport '../../../src/tiles/grid/search-tile';\n\ndescribe('Search Tile', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<SearchTile>(html`<search-tile></search-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const itemImage = el.shadowRoot?.querySelector('image-block');\n    const title = el.shadowRoot?.querySelector('#title');\n    const itemStats = el.shadowRoot?.querySelector('#item-stats');\n\n    expect(itemInfo).to.exist;\n    expect(itemImage).to.exist;\n    expect(title).to.exist;\n    expect(itemStats).not.exist; // search tiles doesn't have stats bar\n  });\n\n  it('should render with title element', async () => {\n    const el = await fixture<SearchTile>(html`\n      <search-tile\n        .model=${{\n          identifier: 'searched query',\n          title: 'searched query',\n        }}\n      >\n      </search-tile>\n    `);\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const itemTitle = el.shadowRoot?.querySelector('#title');\n\n    expect(itemInfo).to.exist;\n    expect(itemTitle).to.exist;\n    expect(itemTitle?.querySelector('.truncated')?.textContent).to.equal(\n      'searched query'\n    );\n  });\n\n  it('should render with image-block element', async () => {\n    const el = await fixture<SearchTile>(html`\n      <search-tile\n        .model=${{\n          identifier: 'title:hello-world',\n        }}\n      >\n      </search-tile>\n    `);\n    await el.updateComplete;\n\n    const itemImageBlock = el.shadowRoot?.querySelector('image-block');\n    expect(itemImageBlock).to.exist;\n  });\n\n  it('should not render with item stats element', async () => {\n    const el = await fixture<SearchTile>(html`\n      <search-tile\n        .model=${{\n          identifier: '@jack-sparrow',\n          itemCount: 14521,\n          collectionSize: 23222543,\n        }}\n      >\n      </search-tile>\n    `);\n    await el.updateComplete;\n\n    const itemStats = el.shadowRoot?.querySelector('#item-stats');\n    expect(itemStats).not.exist;\n  });\n});\n"]}