@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-alpha-webdev9189.0

package/test/image-block.test.ts

@@ -1,247 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import type { ImageBlock } from '../src/tiles/image-block';
-import type { TextOverlay } from '../src/tiles/overlay/text-overlay';
-
-import '../src/tiles/image-block';
-
-describe('Image block component', () => {
-  it('should render component grid display mode', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'grid'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const viewSize = el.shadowRoot?.querySelector('.grid');
-    const itemImage = el.shadowRoot?.querySelector('item-image');
-    const textOverlay = el.shadowRoot?.querySelector('text-overlay');
-
-    expect(viewSize).to.exist;
-    expect(itemImage).to.exist;
-    expect(textOverlay).to.exist;
-  });
-
-  it('should render component list display mode', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${true}
-        .viewSize=${'desktop'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const viewSize = el.shadowRoot?.querySelector('.list.desktop');
-    const itemImage = el.shadowRoot?.querySelector('item-image');
-    const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');
-
-    expect(viewSize).to.exist;
-    expect(itemImage).to.exist;
-    expect(iconOverlay).to.exist;
-  });
-
-  it('should render component compact display mode', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${true}
-        .isListTile=${true}
-        .viewSize=${'desktop'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const viewSize = el.shadowRoot?.querySelector('.list-compact.desktop');
-    const itemImage = el.shadowRoot?.querySelector('item-image');
-    const iconOverlay = el.shadowRoot?.querySelector('icon-overlay');
-
-    expect(viewSize).to.exist;
-    expect(itemImage).to.exist;
-    expect(iconOverlay).to.exist;
-  });
-
-  it('should render a login-required overlay if model requires it and not logged in', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).to.exist;
-    expect(textOverlay.type).to.equal('login-required');
-  });
-
-  it('should render no overlay if logged in and model only requires login', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${true}
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).not.to.exist;
-  });
-
-  it('should render a content-warning overlay if model requires it and no login overlay is present', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).to.exist;
-    expect(textOverlay.type).to.equal('content-warning');
-  });
-
-  it('should prioritize login-required overlay over content-warning if both required and logged out', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).to.exist;
-    expect(textOverlay.type).to.equal('login-required');
-  });
-
-  it('should show content-warning overlay if both types required and logged in', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${true}
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).to.exist;
-    expect(textOverlay.type).to.equal('content-warning');
-  });
-
-  it('should render no overlay if neither loginRequired nor contentWarning flag present', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${false}
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).not.to.exist;
-  });
-
-  it('should render no overlay if blurring is suppressed', async () => {
-    const el = await fixture<ImageBlock>(html`
-      <image-block
-        .model=${{
-          loginRequired: true,
-          contentWarning: true,
-          identifier: 'goody',
-        }}
-        .baseImageUrl=${'https://archive.org'}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'desktop'}
-        .loggedIn=${true}
-        suppressBlurring
-      >
-      </image-block>
-    `);
-
-    const textOverlay = el.shadowRoot?.querySelector(
-      'text-overlay',
-    ) as TextOverlay;
-    expect(textOverlay).not.to.exist;
-  });
-});

package/test/item-image.test.ts

@@ -1,220 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-
-import { TileModel } from '../src/models';
-import type { ItemImage } from '../src/tiles/item-image';
-
-import '../src/tiles/item-image';
-import { MediaType } from '@internetarchive/field-parsers';
-
-const baseImageUrl = 'https://archive.org';
-const testBookModel: TileModel = 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: TileModel = 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 () => {
-    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);
-  });
-
-  it('should not fetch image with undefined base url', async () => {
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${testBookModel}
-      >
-      </item-image>
-    `);
-
-    // Doesn't set the image src if base url is undefined
-    const img = el.shadowRoot?.querySelector('img');
-    expect(img).to.exist;
-    expect(img?.getAttribute('src')).not.to.exist;
-  });
-
-  it('should not fetch image with undefined model', async () => {
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-
-    // Doesn't set the image src if model is not present
-    const img = el.shadowRoot?.querySelector('img');
-    expect(img).to.exist;
-    expect(img?.getAttribute('src')).not.to.exist;
-  });
-
-  it('should not fetch image with undefined identifier', async () => {
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${{}}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-
-    // Doesn't set the image src if identifier is not present
-    const img = el.shadowRoot?.querySelector('img');
-    expect(img).to.exist;
-    expect(img?.getAttribute('src')).not.to.exist;
-  });
-
-  it('should blur image if login required flag set', async () => {
-    const model = new TileModel({ identifier: 'foo' });
-    model.loginRequired = true;
-
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${model}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-
-    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
-    expect(dropShadow).to.exist;
-
-    const imgClasses = dropShadow?.querySelector('img')?.classList;
-    expect(imgClasses?.contains('blur')).to.be.true;
-  });
-
-  it('should blur image if content warning flag set', async () => {
-    const model = new TileModel({ identifier: 'foo' });
-    model.contentWarning = true;
-
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${model}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-
-    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
-    expect(dropShadow).to.exist;
-
-    const imgClasses = dropShadow?.querySelector('img')?.classList;
-    expect(imgClasses?.contains('blur')).to.be.true;
-  });
-
-  it('should not blur image if no login required nor content warning', async () => {
-    const model = new TileModel({ identifier: 'foo' });
-
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${model}
-        .baseImageUrl=${baseImageUrl}
-      >
-      </item-image>
-    `);
-
-    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
-    expect(dropShadow).to.exist;
-
-    const imgClasses = dropShadow?.querySelector('img')?.classList;
-    expect(imgClasses?.contains('blur')).to.be.false;
-  });
-
-  it('should not blur image if blurring is suppressed, regardless of content flags', async () => {
-    const model = new TileModel({ identifier: 'foo' });
-    model.loginRequired = true;
-    model.contentWarning = true;
-
-    const el = await fixture<ItemImage>(html`
-      <item-image
-        .isListTile=${false}
-        .isCompactTile=${false}
-        .model=${model}
-        .baseImageUrl=${baseImageUrl}
-        suppressBlurring
-      >
-      </item-image>
-    `);
-
-    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
-    expect(dropShadow).to.exist;
-
-    const imgClasses = dropShadow?.querySelector('img')?.classList;
-    expect(imgClasses?.contains('blur')).to.be.false;
-  });
-});