@internetarchive/collection-browser 4.3.0 → 4.3.1-alpha-webdev8257.0

package/dist/test/tiles/list/tile-list.test.js

@@ -12,8 +12,8 @@ describe('List Tile', () => {
         expect(imageBlock).to.exist;
     });
     it('should render the mobile template if below mobile breakpoint', async () => {
-        const el = await fixture(html `
-      <tile-list .mobileBreakpoint=${500} .currentWidth=${400}> </tile-list>
+        const el = await fixture(html `
+      <tile-list .mobileBreakpoint=${500} .currentWidth=${400}> </tile-list>
     `);
         const listContainer = el.shadowRoot?.getElementById('list-line');
         const topLine = el.shadowRoot?.getElementById('list-line-top');
@@ -24,30 +24,30 @@ describe('List Tile', () => {
         expect(bottomLine).to.exist;
     });
     it('should render title link with model href if provided', async () => {
-        const el = await fixture(html `
-      <tile-list
-        .baseNavigationUrl=${''}
-        .model=${{ title: 'foo', href: '/foo/bar' }}
-      ></tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .baseNavigationUrl=${''}
+        .model=${{ title: 'foo', href: '/foo/bar' }}
+      ></tile-list>
     `);
         const title = el.shadowRoot?.querySelector('#title > a');
         expect(title).to.exist;
         expect(title?.getAttribute('href')).to.equal('/foo/bar');
     });
     it('should add title to image link if provided', async () => {
-        const el = await fixture(html `
-      <tile-list
-        .baseNavigationUrl=${''}
-        .model=${{ title: 'foo', href: '/foo/bar' }}
-      ></tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .baseNavigationUrl=${''}
+        .model=${{ title: 'foo', href: '/foo/bar' }}
+      ></tile-list>
     `);
         const imageLink = el.shadowRoot?.querySelector('#image-link');
         expect(imageLink).to.exist;
         expect(imageLink?.getAttribute('title')).to.equal('View foo');
     });
     it('should render with creator element but not dates', async () => {
-        const el = await fixture(html `
-      <tile-list .model=${{ creators: ['someone'] }}></tile-list>
+        const el = await fixture(html `
+      <tile-list .model=${{ creators: ['someone'] }}></tile-list>
     `);
         const creator = el.shadowRoot?.querySelector('#creator');
         const datesLine = el.shadowRoot?.querySelector('#dates-line');
@@ -55,9 +55,9 @@ describe('List Tile', () => {
         expect(datesLine?.children.length).to.equal(0);
     });
     it('should render with snippet block when it has snippets', async () => {
-        const el = await fixture(html `
-      <tile-list .model=${{ snippets: ['some {{{snippet}}} text'] }}>
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list .model=${{ snippets: ['some {{{snippet}}} text'] }}>
+      </tile-list>
     `);
         const snippetBlock = el.shadowRoot?.querySelector('text-snippet-block');
         expect(snippetBlock).to.exist;
@@ -68,12 +68,12 @@ describe('List Tile', () => {
         expect(snippetBlock).to.not.exist;
     });
     it('should not render suppressed collections', async () => {
-        const el = await fixture(html `
-      <tile-list
-        .model=${{ collections: ['deemphasize', 'community', 'foo'] }}
-        .baseNavigationUrl=${'base'}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${{ collections: ['deemphasize', 'community', 'foo'] }}
+        .baseNavigationUrl=${'base'}
+      >
+      </tile-list>
     `);
         const collectionsRow = el.shadowRoot?.getElementById('collections');
         expect(collectionsRow).to.exist;
@@ -82,12 +82,12 @@ describe('List Tile', () => {
         expect(collectionLinks?.item(0).getAttribute('href')).to.equal('base/details/foo');
     });
     it('should not render fav- collections', async () => {
-        const el = await fixture(html `
-      <tile-list
-        .model=${{ collections: ['fav-foo', 'bar'] }}
-        .baseNavigationUrl=${'base'}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${{ collections: ['fav-foo', 'bar'] }}
+        .baseNavigationUrl=${'base'}
+      >
+      </tile-list>
     `);
         const collectionsRow = el.shadowRoot?.getElementById('collections');
         expect(collectionsRow).to.exist;
@@ -96,32 +96,32 @@ describe('List Tile', () => {
         expect(collectionLinks?.item(0).getAttribute('href')).to.equal('base/details/bar');
     });
     it('should render weekly views when sorting by week', async () => {
-        const el = await fixture(html `
-      <tile-list
-        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
-        .sortParam=${{ field: 'week', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
+        .sortParam=${{ field: 'week', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const viewsRow = el.shadowRoot?.getElementById('views-line');
         expect(viewsRow).to.exist;
         expect(viewsRow?.textContent?.trim()).to.equal('Weekly views:  10');
     });
     it('should render all-time views when sorting by non-week field', async () => {
-        const el = await fixture(html `
-      <tile-list
-        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
-        .sortParam=${{ field: 'downloads', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
+        .sortParam=${{ field: 'downloads', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const viewsRow = el.shadowRoot?.getElementById('views-line');
         expect(viewsRow).to.exist;
         expect(viewsRow?.textContent?.trim()).to.equal('All-time views:  50');
     });
     it('should render all-time views with no sort param', async () => {
-        const el = await fixture(html `
-      <tile-list .model=${{ viewCount: 50, weeklyViewCount: 10 }}> </tile-list>
+        const el = await fixture(html `
+      <tile-list .model=${{ viewCount: 50, weeklyViewCount: 10 }}> </tile-list>
     `);
         const viewsRow = el.shadowRoot?.getElementById('views-line');
         expect(viewsRow).to.exist;
@@ -134,12 +134,12 @@ describe('List Tile', () => {
             datePublished: new Date(2012, 0, 2),
             dateReviewed: new Date(2013, 0, 2),
         };
-        const el = await fixture(html `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'date', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -152,12 +152,12 @@ describe('List Tile', () => {
             datePublished: new Date(2012, 0, 2),
             dateReviewed: new Date(2013, 0, 2),
         };
-        const el = await fixture(html `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -170,12 +170,12 @@ describe('List Tile', () => {
             datePublished: new Date(2012, 0, 2),
             dateReviewed: new Date(2013, 0, 2),
         };
-        const el = await fixture(html `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -188,12 +188,12 @@ describe('List Tile', () => {
             datePublished: new Date(2012, 0, 2),
             dateReviewed: new Date(2013, 0, 2),
         };
-        const el = await fixture(html `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -203,12 +203,12 @@ describe('List Tile', () => {
         const model = {
             datePublished: new Date('2012-01-01T00:00:00Z'),
         };
-        const el = await fixture(html `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'date', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -221,12 +221,12 @@ describe('List Tile', () => {
             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 `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         let dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -246,12 +246,12 @@ describe('List Tile', () => {
         const model = {
             datePublished: new Date('2012-02-15T00:00:00Z'),
         };
-        const el = await fixture(html `
-      <tile-list
-        .model=${model}
-        .sortParam=${{ field: 'date', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -279,13 +279,13 @@ describe('List Tile', () => {
         const model = {
             datePublished,
         };
-        const el = await fixture(html `
-      <tile-list
-        useLocalTime
-        .model=${model}
-        .sortParam=${{ field: 'date', direction: 'desc' }}
-      >
-      </tile-list>
+        const el = await fixture(html `
+      <tile-list
+        useLocalTime
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list>
     `);
         const dateRow = el.shadowRoot?.getElementById('dates-line');
         expect(dateRow).to.exist;
@@ -297,8 +297,8 @@ describe('List Tile', () => {
             creators: ['bar'],
             source: 'baz',
         };
-        const el = await fixture(html `
-      <tile-list .model=${model}></tile-list>
+        const el = await fixture(html `
+      <tile-list .model=${model}></tile-list>
     `);
         const subjectLink = el.shadowRoot?.querySelector('#topics a[href]');
         expect(subjectLink).to.exist;
@@ -311,8 +311,8 @@ describe('List Tile', () => {
         expect(sourceLink?.getAttribute('href')).to.equal(`/search?query=${encodeURIComponent('source:"baz"')}`);
     });
     it('should render multi-line descriptions with spaces b/w lines', async () => {
-        const el = await fixture(html `
-      <tile-list .model=${{ description: 'line1\nline2' }}> </tile-list>
+        const el = await fixture(html `
+      <tile-list .model=${{ description: 'line1\nline2' }}> </tile-list>
     `);
         const descriptionBlock = el.shadowRoot?.getElementById('description');
         expect(descriptionBlock).to.exist;
@@ -322,11 +322,11 @@ describe('List Tile', () => {
         const model = {
             mediatype: 'texts',
         };
-        const el = await fixture(html `
-      <tile-list
-        .baseNavigationUrl=${'https://archive.org'}
-        .model=${model}
-      ></tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .baseNavigationUrl=${'https://archive.org'}
+        .model=${model}
+      ></tile-list>
     `);
         const mediatypeLink = el.shadowRoot?.querySelector('a#icon-right');
         expect(mediatypeLink).to.exist;
@@ -337,8 +337,8 @@ describe('List Tile', () => {
         const model = {
             mediatype: 'texts',
         };
-        const el = await fixture(html `
-      <tile-list .baseNavigationUrl=${''} .model=${model}></tile-list>
+        const el = await fixture(html `
+      <tile-list .baseNavigationUrl=${''} .model=${model}></tile-list>
     `);
         const mediatypeLink = el.shadowRoot?.querySelector('a#icon-right');
         expect(mediatypeLink).to.exist;
@@ -348,11 +348,11 @@ describe('List Tile', () => {
         const model = {
             mediatype: 'collection',
         };
-        const el = await fixture(html `
-      <tile-list
-        .baseNavigationUrl=${'https://archive.org'}
-        .model=${model}
-      ></tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .baseNavigationUrl=${'https://archive.org'}
+        .model=${model}
+      ></tile-list>
     `);
         const mediatypeLink = el.shadowRoot?.querySelector('a#icon-right');
         expect(mediatypeLink).to.exist;
@@ -362,25 +362,25 @@ describe('List Tile', () => {
         const model = {
             mediatype: 'account',
         };
-        const el = await fixture(html `
-      <tile-list
-        .baseNavigationUrl=${'https://archive.org'}
-        .model=${model}
-      ></tile-list>
+        const el = await fixture(html `
+      <tile-list
+        .baseNavigationUrl=${'https://archive.org'}
+        .model=${model}
+      ></tile-list>
     `);
         const mediatypeLink = el.shadowRoot?.querySelector('a#icon-right');
         expect(mediatypeLink).to.exist;
         expect(mediatypeLink?.getAttribute('href')).not.to.exist;
     });
     it('should render date added for accounts', async () => {
-        const el = await fixture(html `
-      <tile-list
+        const el = await fixture(html `
+      <tile-list
         .model=${{
             mediatype: 'account',
             dateAdded: new Date('2015-05-05T00:00:00'),
-        }}
-      >
-      </tile-list>
+        }}
+      >
+      </tile-list>
     `);
         const creatorBlock = el.shadowRoot?.getElementById('creator');
         expect(creatorBlock).to.exist;
@@ -391,14 +391,14 @@ describe('List Tile', () => {
             new Date('2010-01-02T12:34:56Z'),
             new Date('2011-02-03T12:43:21Z'),
         ];
-        const el = await fixture(html `
-      <tile-list
+        const el = await fixture(html `
+      <tile-list
         .model=${{
             identifier: 'foo',
             title: 'https://example.com/',
             captureDates,
-        }}
-      ></tile-list>
+        }}
+      ></tile-list>
     `);
         const captureDatesUl = el.shadowRoot?.querySelector('.capture-dates');
         expect(captureDatesUl, 'capture dates container').to.exist;
@@ -417,13 +417,13 @@ describe('List Tile', () => {
             new Date('2010-01-02T12:34:56Z'),
             new Date('2011-02-03T12:43:21Z'),
         ];
-        const el = await fixture(html `
-      <tile-list
+        const el = await fixture(html `
+      <tile-list
         .model=${{
             identifier: 'foo',
             captureDates,
-        }}
-      ></tile-list>
+        }}
+      ></tile-list>
     `);
         const captureDatesUl = el.shadowRoot?.querySelector('.capture-dates');
         expect(captureDatesUl).not.to.exist;
@@ -434,24 +434,24 @@ describe('List Tile', () => {
             body: 'foo bar baz',
             stars: 3,
         };
-        const el = await fixture(html `
-      <tile-list
+        const el = await fixture(html `
+      <tile-list
         .model=${{
             identifier: 'foo',
             review,
-        }}
-      ></tile-list>
+        }}
+      ></tile-list>
     `);
         const reviewBlock = el.shadowRoot?.querySelector('review-block');
         expect(reviewBlock).to.exist;
     });
     it('should not render review snippet block when no review is present', async () => {
-        const el = await fixture(html `
-      <tile-list
+        const el = await fixture(html `
+      <tile-list
         .model=${{
             identifier: 'foo',
-        }}
-      ></tile-list>
+        }}
+      ></tile-list>
     `);
         const reviewBlock = el.shadowRoot?.querySelector('review-block');
         expect(reviewBlock).not.to.exist;