@internetarchive/collection-browser 4.5.2 → 4.7.0

package/.claude/worktrees/WEBDEV-9127-fix-publish-dist-tag/test/image-block.test.ts

@@ -0,0 +1,247 @@
+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/.claude/worktrees/WEBDEV-9127-fix-publish-dist-tag/test/item-image.test.ts

@@ -0,0 +1,220 @@
+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;
+  });
+});