@internetarchive/collection-browser 1.14.17-beta.5 → 1.14.18-alpha.0

package/dist/test/expanded-date-picker.test.js

@@ -1,43 +1,43 @@
-import { ModalManager, ModalManagerMode, } from '@internetarchive/modal-manager';
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import '../src/expanded-date-picker';
-import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
-import { analyticsActions, analyticsCategories, } from '../src/utils/analytics-events';
-describe('Expanded Date Picker', () => {
-    it('should render with a date picker and Apply button', async () => {
-        var _a, _b;
-        const el = await fixture(html `<expanded-date-picker></expanded-date-picker>`);
-        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-picker')).to.exist;
-        expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#apply-btn')).to.exist;
-    });
-    it('should update its min/max selected date when date picker changes', async () => {
-        var _a;
+import { ModalManager, ModalManagerMode, } from '@internetarchive/modal-manager';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../src/expanded-date-picker';
+import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
+import { analyticsActions, analyticsCategories, } from '../src/utils/analytics-events';
+describe('Expanded Date Picker', () => {
+    it('should render with a date picker and Apply button', async () => {
+        var _a, _b;
+        const el = await fixture(html `<expanded-date-picker></expanded-date-picker>`);
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-picker')).to.exist;
+        expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#apply-btn')).to.exist;
+    });
+    it('should update its min/max selected date when date picker changes', async () => {
+        var _a;
         const el = await fixture(html `<expanded-date-picker
         .buckets=${[1, 2, 3, 4, 5]}
         .minDate=${'1'}
         .maxDate=${'5'}
         .minSelectedDate=${'1'}
         .maxSelectedDate=${'5'}
-      ></expanded-date-picker>`);
-        const datePicker = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-picker');
-        expect(datePicker).to.exist;
-        datePicker.minSelectedDate = '2';
-        datePicker.maxSelectedDate = '4';
-        datePicker.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', {
-            detail: {
-                minDate: datePicker.minSelectedDate,
-                maxDate: datePicker.maxSelectedDate,
-            },
-        }));
-        await el.updateComplete;
-        expect(el.minSelectedDate).to.equal('2');
-        expect(el.maxSelectedDate).to.equal('4');
-    });
-    it('should emit an event when a date range is applied', async () => {
-        var _a;
-        const applySpy = sinon.spy();
+      ></expanded-date-picker>`);
+        const datePicker = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-picker');
+        expect(datePicker).to.exist;
+        datePicker.minSelectedDate = '2';
+        datePicker.maxSelectedDate = '4';
+        datePicker.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', {
+            detail: {
+                minDate: datePicker.minSelectedDate,
+                maxDate: datePicker.maxSelectedDate,
+            },
+        }));
+        await el.updateComplete;
+        expect(el.minSelectedDate).to.equal('2');
+        expect(el.maxSelectedDate).to.equal('4');
+    });
+    it('should emit an event when a date range is applied', async () => {
+        var _a;
+        const applySpy = sinon.spy();
         const el = await fixture(html `<expanded-date-picker
         .buckets=${[1, 2, 3, 4, 5]}
         .minDate=${'1'}
@@ -45,19 +45,19 @@ describe('Expanded Date Picker', () => {
         .minSelectedDate=${'1'}
         .maxSelectedDate=${'5'}
         @histogramDateRangeApplied=${applySpy}
-      ></expanded-date-picker>`);
-        const applyBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#apply-btn');
-        expect(applyBtn).to.exist;
-        applyBtn.click();
-        await el.updateComplete;
-        expect(applySpy.callCount).to.equal(1);
-        expect(applySpy.calledWithMatch({ detail: { minDate: '1', maxDate: '5' } }));
-    });
-    it('should close its modal and emit close event when date range applied', async () => {
-        var _a;
-        const modalManager = new ModalManager();
-        modalManager.mode = ModalManagerMode.Open;
-        const modalClosed = sinon.spy();
+      ></expanded-date-picker>`);
+        const applyBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#apply-btn');
+        expect(applyBtn).to.exist;
+        applyBtn.click();
+        await el.updateComplete;
+        expect(applySpy.callCount).to.equal(1);
+        expect(applySpy.calledWithMatch({ detail: { minDate: '1', maxDate: '5' } }));
+    });
+    it('should close its modal and emit close event when date range applied', async () => {
+        var _a;
+        const modalManager = new ModalManager();
+        modalManager.mode = ModalManagerMode.Open;
+        const modalClosed = sinon.spy();
         const el = await fixture(html `<expanded-date-picker
         .buckets=${[1, 2, 3, 4, 5]}
         .minDate=${'1'}
@@ -66,16 +66,16 @@ describe('Expanded Date Picker', () => {
         .maxSelectedDate=${'5'}
         .modalManager=${modalManager}
         @modalClosed=${modalClosed}
-      ></expanded-date-picker>`);
-        const applyBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#apply-btn');
-        expect(applyBtn).to.exist;
-        applyBtn.click();
-        await el.updateComplete;
-        expect(modalManager.getMode()).to.equal(ModalManagerMode.Closed);
-        expect(modalClosed.callCount).to.equal(1);
-    });
-    it('closes the modal when Esc key is pressed', async () => {
-        var _a;
+      ></expanded-date-picker>`);
+        const applyBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#apply-btn');
+        expect(applyBtn).to.exist;
+        applyBtn.click();
+        await el.updateComplete;
+        expect(modalManager.getMode()).to.equal(ModalManagerMode.Closed);
+        expect(modalClosed.callCount).to.equal(1);
+    });
+    it('closes the modal when Esc key is pressed', async () => {
+        var _a;
         const el = await fixture(html `<expanded-date-picker
         .buckets=${[1, 2, 3, 4, 5]}
         .minDate=${'1'}
@@ -83,47 +83,47 @@ describe('Expanded Date Picker', () => {
         .minSelectedDate=${'1'}
         .maxSelectedDate=${'5'}
         .modalManager=${new ModalManager()}
-      ></expanded-date-picker>`);
-        const closeModalSpy = sinon.spy(el.modalManager, 'closeModal');
-        // Dispatch an Esc keydown event
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-        await el.updateComplete;
-        expect(closeModalSpy.callCount).to.equal(1);
-        expect((_a = el.modalManager) === null || _a === void 0 ? void 0 : _a.classList.contains('expanded-date-picker')).to.be
-            .false;
-    });
-    it('sends analytics when date range is applied', async () => {
-        var _a, _b;
-        const analyticsHandler = new MockAnalyticsHandler();
+      ></expanded-date-picker>`);
+        const closeModalSpy = sinon.spy(el.modalManager, 'closeModal');
+        // Dispatch an Esc keydown event
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+        await el.updateComplete;
+        expect(closeModalSpy.callCount).to.equal(1);
+        expect((_a = el.modalManager) === null || _a === void 0 ? void 0 : _a.classList.contains('expanded-date-picker')).to.be
+            .false;
+    });
+    it('sends analytics when date range is applied', async () => {
+        var _a, _b;
+        const analyticsHandler = new MockAnalyticsHandler();
         const el = await fixture(html `<expanded-date-picker
         .buckets=${[1, 2, 3, 4, 5]}
         .minDate=${'1'}
         .maxDate=${'5'}
         .analyticsHandler=${analyticsHandler}
-      ></expanded-date-picker>`);
-        const applyBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#apply-btn');
-        expect(applyBtn).to.exist;
-        applyBtn.click();
-        await el.updateComplete;
-        expect(analyticsHandler.callCategory).to.equal(analyticsCategories.default);
-        expect(analyticsHandler.callAction).to.equal(analyticsActions.histogramChangedFromModal);
-        expect(analyticsHandler.callLabel).to.equal(window.location.href);
-        const datePicker = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#date-picker');
-        expect(datePicker).to.exist;
-        datePicker.minSelectedDate = '2';
-        datePicker.maxSelectedDate = '5';
-        datePicker.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', {
-            detail: {
-                minDate: datePicker.minSelectedDate,
-                maxDate: datePicker.maxSelectedDate,
-            },
-        }));
-        await el.updateComplete;
-        applyBtn.click();
-        await el.updateComplete;
-        expect(analyticsHandler.callCategory).to.equal(analyticsCategories.default);
-        expect(analyticsHandler.callAction).to.equal(analyticsActions.histogramChangedFromModal);
-        expect(analyticsHandler.callLabel).to.equal(window.location.href);
-    });
-});
+      ></expanded-date-picker>`);
+        const applyBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#apply-btn');
+        expect(applyBtn).to.exist;
+        applyBtn.click();
+        await el.updateComplete;
+        expect(analyticsHandler.callCategory).to.equal(analyticsCategories.default);
+        expect(analyticsHandler.callAction).to.equal(analyticsActions.histogramChangedFromModal);
+        expect(analyticsHandler.callLabel).to.equal(window.location.href);
+        const datePicker = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#date-picker');
+        expect(datePicker).to.exist;
+        datePicker.minSelectedDate = '2';
+        datePicker.maxSelectedDate = '5';
+        datePicker.dispatchEvent(new CustomEvent('histogramDateRangeUpdated', {
+            detail: {
+                minDate: datePicker.minSelectedDate,
+                maxDate: datePicker.maxSelectedDate,
+            },
+        }));
+        await el.updateComplete;
+        applyBtn.click();
+        await el.updateComplete;
+        expect(analyticsHandler.callCategory).to.equal(analyticsCategories.default);
+        expect(analyticsHandler.callAction).to.equal(analyticsActions.histogramChangedFromModal);
+        expect(analyticsHandler.callLabel).to.equal(window.location.href);
+    });
+});
 //# sourceMappingURL=expanded-date-picker.test.js.map

package/dist/test/icon-overlay.test.d.ts

@@ -1 +1 @@
-import '../src/tiles/overlay/icon-overlay';
+import '../src/tiles/overlay/icon-overlay';

package/dist/test/icon-overlay.test.js

@@ -1,31 +1,31 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/tiles/overlay/icon-overlay';
-describe('Icon Overlay component', () => {
-    it('should render component if loggedIn required', async () => {
-        var _a, _b, _c;
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/tiles/overlay/icon-overlay';
+describe('Icon Overlay component', () => {
+    it('should render component if loggedIn required', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <icon-overlay .loggedIn=${false} .loginRequired=${true}> </icon-overlay>
-    `);
-        const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
-        expect(svgTitle).to.equal('Log in to view this item');
-    });
-    it('should render component if content warning', async () => {
-        var _a, _b, _c;
+    `);
+        const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
+        expect(svgTitle).to.equal('Log in to view this item');
+    });
+    it('should render component if content warning', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <icon-overlay .loggedIn=${false} .loginRequired=${false}> </icon-overlay>
-    `);
-        const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
-        expect(svgTitle).to.equal('Content may be inappropriate');
-    });
-    it('should render component if content warning', async () => {
-        var _a, _b, _c;
+    `);
+        const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
+        expect(svgTitle).to.equal('Content may be inappropriate');
+    });
+    it('should render component if content warning', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <icon-overlay .loggedIn=${true} .loginRequired=${true}> </icon-overlay>
-    `);
-        const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
-        expect(svgTitle).to.equal('Content may be inappropriate');
-    });
-});
+    `);
+        const svgTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg')) === null || _b === void 0 ? void 0 : _b.querySelector('title')) === null || _c === void 0 ? void 0 : _c.textContent;
+        expect(svgTitle).to.equal('Content may be inappropriate');
+    });
+});
 //# sourceMappingURL=icon-overlay.test.js.map

package/dist/test/image-block.test.d.ts

@@ -1 +1 @@
-import '../src/tiles/image-block';
+import '../src/tiles/image-block';

package/dist/test/image-block.test.js

@@ -1,16 +1,16 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/tiles/image-block';
-describe('Image block component', () => {
-    it('should render component grid display mode', async () => {
-        var _a, _b, _c;
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/tiles/image-block';
+describe('Image block component', () => {
+    it('should render component grid display mode', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <image-block
-        .model=${{
-            loggedInRequired: true,
-            contentWarning: true,
-            identifier: 'goody',
+        .model=${{
+            loggedInRequired: true,
+            contentWarning: true,
+            identifier: 'goody',
         }}
         .baseImageUrl=${'https://archive.org'}
         .isCompactTile=${false}
@@ -19,22 +19,22 @@ describe('Image block component', () => {
         .loggedIn=${false}
       >
       </image-block>
-    `);
-        const viewSize = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.grid');
-        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
-        const textOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('text-overlay');
-        expect(viewSize).to.exist;
-        expect(itemImage).to.exist;
-        expect(textOverlay).to.exist;
-    });
-    it('should render component list display mode', async () => {
-        var _a, _b, _c;
+    `);
+        const viewSize = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.grid');
+        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
+        const textOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('text-overlay');
+        expect(viewSize).to.exist;
+        expect(itemImage).to.exist;
+        expect(textOverlay).to.exist;
+    });
+    it('should render component list display mode', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <image-block
-        .model=${{
-            loggedInRequired: true,
-            contentWarning: true,
-            identifier: 'goody',
+        .model=${{
+            loggedInRequired: true,
+            contentWarning: true,
+            identifier: 'goody',
         }}
         .baseImageUrl=${'https://archive.org'}
         .isCompactTile=${false}
@@ -43,22 +43,22 @@ describe('Image block component', () => {
         .loggedIn=${false}
       >
       </image-block>
-    `);
-        const viewSize = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list.desktop');
-        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
-        const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('icon-overlay');
-        expect(viewSize).to.exist;
-        expect(itemImage).to.exist;
-        expect(iconOverlay).to.exist;
-    });
-    it('should render component compact display mode', async () => {
-        var _a, _b, _c;
+    `);
+        const viewSize = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list.desktop');
+        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
+        const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('icon-overlay');
+        expect(viewSize).to.exist;
+        expect(itemImage).to.exist;
+        expect(iconOverlay).to.exist;
+    });
+    it('should render component compact display mode', async () => {
+        var _a, _b, _c;
         const el = await fixture(html `
       <image-block
-        .model=${{
-            loggedInRequired: true,
-            contentWarning: true,
-            identifier: 'goody',
+        .model=${{
+            loggedInRequired: true,
+            contentWarning: true,
+            identifier: 'goody',
         }}
         .baseImageUrl=${'https://archive.org'}
         .isCompactTile=${true}
@@ -67,13 +67,13 @@ describe('Image block component', () => {
         .loggedIn=${false}
       >
       </image-block>
-    `);
-        const viewSize = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list-compact.desktop');
-        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
-        const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('icon-overlay');
-        expect(viewSize).to.exist;
-        expect(itemImage).to.exist;
-        expect(iconOverlay).to.exist;
-    });
-});
+    `);
+        const viewSize = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list-compact.desktop');
+        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
+        const iconOverlay = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('icon-overlay');
+        expect(viewSize).to.exist;
+        expect(itemImage).to.exist;
+        expect(iconOverlay).to.exist;
+    });
+});
 //# sourceMappingURL=image-block.test.js.map

package/dist/test/item-image.test.d.ts

@@ -1 +1 @@
-import '../src/tiles/item-image';
+import '../src/tiles/item-image';

package/dist/test/item-image.test.js

@@ -1,45 +1,44 @@
-/* eslint-disable import/no-duplicates */
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/tiles/item-image';
-const baseImageUrl = 'https://archive.org';
-const testBookModel = {
-    checked: false,
-    collections: [],
-    commentCount: 0,
-    creators: [],
-    favCount: 0,
-    identifier: '18730130BloomfieldRecordCompleteIssue',
-    itemCount: 0,
-    mediatype: 'texts',
-    subjects: [],
-    title: 'Sample Waveform',
-    viewCount: 0,
-    loginRequired: false,
-    contentWarning: false,
-    collectionFilesCount: 0,
-    collectionSize: 0,
-};
-const testAudioModel = {
-    checked: false,
-    collections: [],
-    commentCount: 0,
-    creators: [],
-    favCount: 0,
-    identifier: 'dwd2015-01-24',
-    itemCount: 0,
-    mediatype: 'audio',
-    subjects: [],
-    title: 'Sample Waveform',
-    viewCount: 0,
-    loginRequired: false,
-    contentWarning: false,
-    collectionFilesCount: 0,
-    collectionSize: 0,
-};
-describe('ItemImage component', () => {
-    it('should render initial component', async () => {
-        var _a, _b;
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { TileModel } from '../src/models';
+import '../src/tiles/item-image';
+const baseImageUrl = 'https://archive.org';
+const testBookModel = new TileModel({});
+testBookModel.checked = false;
+testBookModel.collections = [];
+testBookModel.commentCount = 0;
+testBookModel.creators = [];
+testBookModel.favCount = 0;
+testBookModel.identifier = '18730130BloomfieldRecordCompleteIssue';
+testBookModel.itemCount = 0;
+testBookModel.mediatype = 'texts';
+testBookModel.subjects = [];
+testBookModel.title = 'Sample Waveform';
+testBookModel.viewCount = 0;
+testBookModel.loginRequired = false;
+testBookModel.contentWarning = false;
+testBookModel.collectionFilesCount = 0;
+testBookModel.collectionSize = 0;
+const testAudioModel = new TileModel({});
+testAudioModel.checked = false;
+testAudioModel.collections = [];
+testAudioModel.commentCount = 0;
+testAudioModel.creators = [];
+testAudioModel.favCount = 0;
+testAudioModel.identifier = 'dwd2015-01-24';
+testAudioModel.itemCount = 0;
+testAudioModel.mediatype = 'audio';
+testAudioModel.subjects = [];
+testAudioModel.title = 'Sample Waveform';
+testAudioModel.viewCount = 0;
+testAudioModel.loginRequired = false;
+testAudioModel.contentWarning = false;
+testAudioModel.collectionFilesCount = 0;
+testAudioModel.collectionSize = 0;
+describe('ItemImage component', () => {
+    it('should render initial component', async () => {
+        var _a, _b;
         const el = await fixture(html `
       <item-image
         .isListTile=${false}
@@ -48,14 +47,14 @@ describe('ItemImage component', () => {
         .baseImageUrl=${baseImageUrl}
       >
       </item-image>
-    `);
-        const dropShadow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drop-shadow');
-        const imgClassName = (_b = dropShadow === null || dropShadow === void 0 ? void 0 : dropShadow.querySelector('img')) === null || _b === void 0 ? void 0 : _b.className;
-        expect(dropShadow).to.exist;
-        expect(imgClassName).to.eql(' contain ');
-    });
-    it('should render component if mediatype is waveform', async () => {
-        var _a;
+    `);
+        const dropShadow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drop-shadow');
+        const imgClassName = (_b = dropShadow === null || dropShadow === void 0 ? void 0 : dropShadow.querySelector('img')) === null || _b === void 0 ? void 0 : _b.className;
+        expect(dropShadow).to.exist;
+        expect(imgClassName).to.eql(' contain ');
+    });
+    it('should render component if mediatype is waveform', async () => {
+        var _a;
         const el = await fixture(html `
       <item-image
         .isListTile=${false}
@@ -64,19 +63,19 @@ describe('ItemImage component', () => {
         .baseImageUrl=${baseImageUrl}
       >
       </item-image>
-    `);
-        const dropShadow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drop-shadow');
-        const image = dropShadow === null || dropShadow === void 0 ? void 0 : dropShadow.querySelector('img');
-        expect(dropShadow).to.exist;
-        expect(image).to.exist;
-        // simulate image onLoad event check if image className is waveform
-        setTimeout(() => {
-            const imgClassName = image === null || image === void 0 ? void 0 : image.className;
-            expect(imgClassName).to.eql(' waveform ');
-        }, 1000);
-    });
-    it('should not fetch image with undefined base url', async () => {
-        var _a;
+    `);
+        const dropShadow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drop-shadow');
+        const image = dropShadow === null || dropShadow === void 0 ? void 0 : dropShadow.querySelector('img');
+        expect(dropShadow).to.exist;
+        expect(image).to.exist;
+        // simulate image onLoad event check if image className is waveform
+        setTimeout(() => {
+            const imgClassName = image === null || image === void 0 ? void 0 : image.className;
+            expect(imgClassName).to.eql(' waveform ');
+        }, 1000);
+    });
+    it('should not fetch image with undefined base url', async () => {
+        var _a;
         const el = await fixture(html `
       <item-image
         .isListTile=${false}
@@ -84,14 +83,14 @@ describe('ItemImage component', () => {
         .model=${testBookModel}
       >
       </item-image>
-    `);
-        // Doesn't set the image src if base url is undefined
-        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
-        expect(img).to.exist;
-        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
-    });
-    it('should not fetch image with undefined model', async () => {
-        var _a;
+    `);
+        // Doesn't set the image src if base url is undefined
+        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+        expect(img).to.exist;
+        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
+    });
+    it('should not fetch image with undefined model', async () => {
+        var _a;
         const el = await fixture(html `
       <item-image
         .isListTile=${false}
@@ -99,14 +98,14 @@ describe('ItemImage component', () => {
         .baseImageUrl=${baseImageUrl}
       >
       </item-image>
-    `);
-        // Doesn't set the image src if model is not present
-        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
-        expect(img).to.exist;
-        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
-    });
-    it('should not fetch image with undefined identifier', async () => {
-        var _a;
+    `);
+        // Doesn't set the image src if model is not present
+        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+        expect(img).to.exist;
+        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
+    });
+    it('should not fetch image with undefined identifier', async () => {
+        var _a;
         const el = await fixture(html `
       <item-image
         .isListTile=${false}
@@ -115,11 +114,11 @@ describe('ItemImage component', () => {
         .baseImageUrl=${baseImageUrl}
       >
       </item-image>
-    `);
-        // Doesn't set the image src if identifier is not present
-        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
-        expect(img).to.exist;
-        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
-    });
-});
+    `);
+        // Doesn't set the image src if identifier is not present
+        const img = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+        expect(img).to.exist;
+        expect(img === null || img === void 0 ? void 0 : img.getAttribute('src')).not.to.exist;
+    });
+});
 //# sourceMappingURL=item-image.test.js.map