@internetarchive/collection-browser 0.2.10 → 0.2.13

package/test/empty-placeholder.test.ts

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/empty-placeholder';
+
+import type { EmptyPlaceholder } from '../src/empty-placeholder';
+
+describe('Empty Placeholder', () => {
+  it('should render with empty-query placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'empty-query';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.exist;
+    expect(el.shadowRoot?.querySelector('.null-result')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('infinite-scroller')).to.not.exist;
+  });
+
+  it('should render with null-result placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'null-result';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.null-result')).to.exist;
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+  });
+
+  it('should not render any empty placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = null;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.null-result')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+  });
+});

package/test/icon-overlay.test.ts

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

package/test/item-image.test.ts

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+
+import type { TileModel } from '../src/models';
+import type { ItemImage } from '../src/tiles/item-image';
+
+import '../src/tiles/item-image';
+
+const baseImageUrl = 'https://archive.org';
+const testBookModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: '18730130BloomfieldRecordCompleteIssue',
+  itemCount: 0,
+  mediatype: 'texts',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+const testAudioModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: 'dwd2015-01-24',
+  itemCount: 0,
+  mediatype: 'audio',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+describe('ItemImage component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testBookModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const imgClassName = dropShadow?.querySelector('img')?.className;
+
+    expect(dropShadow).to.exist;
+    expect(imgClassName).to.eql(' contain ');
+  });
+
+  it('should render component if mediatype is waveform', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testAudioModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const image = 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?.className;
+      expect(imgClassName).to.eql(' waveform ');
+    }, 1000);
+  });
+});

package/test/mocks/mock-collection-name-cache.ts

@@ -1,4 +1,4 @@
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 
 export class MockCollectionNameCache implements CollectionNameCacheInterface {
   collectionNamesRequested: string[] = [];

package/test/mocks/mock-search-responses.ts

@@ -1,4 +1,4 @@
-import { Result } from '@internetarchive/result-type';
+import type { Result } from '@internetarchive/result-type';
 import {
   Metadata,
   SearchResponse,

package/test/mocks/mock-search-service.ts

@@ -1,5 +1,5 @@
-import { Result } from '@internetarchive/result-type';
-import {
+import type { Result } from '@internetarchive/result-type';
+import type {
   MetadataResponse,
   SearchParams,
   SearchResponse,

package/test/text-overlay.test.ts

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TextOverlay } from '../src/tiles/overlay/text-overlay';
+
+import '../src/tiles/overlay/text-overlay';
+
+describe('Text Overlay component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+  });
+
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Log in\nto view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${true} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+});

package/test/tile-stats.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { TileStats } from '../src/tiles/grid/tile-stats';
+import type { TileStats } from '../src/tiles/grid/tile-stats';
 
 import '../src/tiles/grid/tile-stats';
 

package/test/tiles/grid/item-tile.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { ItemTile } from '../../../src/tiles/grid/item-tile';
+import type { ItemTile } from '../../../src/tiles/grid/item-tile';
 
 import '../../../src/tiles/grid/item-tile';
 
@@ -10,11 +10,11 @@ describe('Item Tile', () => {
     const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
 
     const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const itemImage = el.shadowRoot?.querySelector('item-image');
     const itemTitle = el.shadowRoot?.querySelector('#title');
+    const imageBlock = el.shadowRoot?.querySelector('image-block');
 
     expect(itemInfo).to.exist;
-    expect(itemImage).to.exist;
+    expect(imageBlock).to.exist;
     expect(itemTitle).to.exist;
   });
 

package/tsconfig.json

@@ -14,7 +14,8 @@
     "sourceMap": true,
     "inlineSources": true,
     "rootDir": "./",
-    "declaration": true
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
   },
   "include": ["src", "test", "index.ts"],
 }

package/src/tiles/item-tile-image.ts

@@ -1,61 +0,0 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { TileModel } from '../models';
-
-import './image/item-image';
-import './image/waveform-image';
-
-@customElement('item-tile-image')
-export class ItemTileImage extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: Boolean }) isListTile = false;
-
-  @property({ type: Boolean }) isCompactTile = false;
-
-  render() {
-    return html`
-      ${this.isWithWaveformMediatype
-        ? this.waveformImageTemplate
-        : this.itemImageTemplate}
-    `;
-  }
-
-  private get imageSrc() {
-    return `${this.baseImageUrl}/services/img/${this.model?.identifier}`;
-  }
-
-  private get isWithWaveformMediatype() {
-    return (
-      this.model?.mediatype === 'audio' || this.model?.mediatype === 'etree'
-    );
-  }
-
-  // Templates
-  private get itemImageTemplate() {
-    return html`
-      <item-image
-        .model=${this.model}
-        .imageSrc=${this.imageSrc}
-        .isCompactTile=${this.isCompactTile}
-        .isListTile=${this.isListTile}
-      >
-      </item-image>
-    `;
-  }
-
-  private get waveformImageTemplate() {
-    return html`
-      <waveform-image
-        .imageSrc=${this.imageSrc}
-        .identifier=${this.model?.identifier}
-        .isCompactTile=${this.isCompactTile}
-        .isListTile=${this.isListTile}
-      >
-      </waveform-image>
-    `;
-  }
-}