@internetarchive/collection-browser 3.3.2 → 3.3.4-alpha-webdev7761.0

package/dist/test/collection-facets.test.js

@@ -0,0 +1,745 @@
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import { Aggregation } from '@internetarchive/search-service';
+import '@internetarchive/modal-manager';
+import '../src/collection-facets';
+import { 
+// SelectedFacets, Used in lending tests (disabled)
+getDefaultSelectedFacets, } from '../src/models';
+import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
+// import type { FacetsTemplate } from '../src/collection-facets/facets-template'; Used in lending tests (disabled)
+describe('Collection Facets', () => {
+    it('has loader', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(html `<collection-facets ?facetsLoading=${true}></collection-facets>`);
+        expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#container')) === null || _b === void 0 ? void 0 : _b.classList.contains('loading')).to.be.true;
+        el.facetsLoading = false;
+        await el.updateComplete;
+        expect((_d = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#container')) === null || _d === void 0 ? void 0 : _d.classList.contains('loading')).to.be.false;
+    });
+    it('renders a date picker loading placeholder when date picker enabled', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.histogramAggregationLoading = true;
+        el.showHistogramDatePicker = true;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const histogramLoader = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.histogram-loading-indicator');
+        expect(histogramLoader).to.exist;
+    });
+    it('does not render a date picker loading placeholder when date picker disabled', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.histogramAggregationLoading = true;
+        el.showHistogramDatePicker = false;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const histogramLoader = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.histogram-loading-indicator');
+        expect(histogramLoader).to.be.null;
+    });
+    it('renders the date picker when enabled with data present', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.histogramAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const histogram = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('histogram-date-range');
+        expect(histogram).to.exist;
+    });
+    it('does not render the date picker when disabled', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.histogramAggregationLoading = false;
+        el.showHistogramDatePicker = false;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const histogram = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('histogram-date-range');
+        expect(histogram).to.be.null;
+    });
+    it('renders button to expand the date picker when allowed', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.histogramAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = true;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.exist;
+    });
+    it('does not render button to expand the date picker when disallowed', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.histogramAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = false;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.be.null;
+    });
+    it('opens modal when date picker expand button clicked', async () => {
+        var _a, _b;
+        const modalManager = await fixture(html `<modal-manager></modal-manager>`);
+        const el = await fixture(html `<collection-facets
+        .modalManager=${modalManager}
+      ></collection-facets>`);
+        el.histogramAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = true;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.exist;
+        const showModalSpy = sinon.spy(el.modalManager, 'showModal');
+        // Click the expand button to open the modal
+        expandBtn === null || expandBtn === void 0 ? void 0 : expandBtn.click();
+        await el.updateComplete;
+        expect(showModalSpy.callCount).to.equal(1);
+        expect((_b = el.modalManager) === null || _b === void 0 ? void 0 : _b.classList.contains('expanded-date-picker')).to.be
+            .true;
+    });
+    it('renders aggregations as facets', async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        const aggs = {
+            subject: new Aggregation({
+                buckets: [
+                    {
+                        key: 'foo',
+                        doc_count: 5,
+                    },
+                ],
+            }),
+        };
+        el.aggregations = aggs;
+        await el.updateComplete;
+        const facetGroups = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.facet-group');
+        expect(facetGroups === null || facetGroups === void 0 ? void 0 : facetGroups.length).to.equal(1);
+        const titleFacetGroup = facetGroups === null || facetGroups === void 0 ? void 0 : facetGroups[0];
+        const facetGroupHeader = titleFacetGroup === null || titleFacetGroup === void 0 ? void 0 : titleFacetGroup.querySelector('h3');
+        // Every facet group header has an invisible " filters" suffix for screen-readers
+        expect((_c = (_b = facetGroupHeader === null || facetGroupHeader === void 0 ? void 0 : facetGroupHeader.querySelector('span.sr-only')) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('filters');
+        // Ignoring the screen-reader suffix, we should be left with only the readable, capitalized title
+        expect((_d = facetGroupHeader === null || facetGroupHeader === void 0 ? void 0 : facetGroupHeader.textContent) === null || _d === void 0 ? void 0 : _d.trim().replace(/\s*filters$/, '')).to.equal('Subject');
+        const titleFacetRow = (_f = (_e = titleFacetGroup === null || titleFacetGroup === void 0 ? void 0 : titleFacetGroup.querySelector('facets-template')) === null || _e === void 0 ? void 0 : _e.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('facet-row');
+        await titleFacetRow.updateComplete;
+    });
+    it('renders multiple aggregation types', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        const aggs = {
+            subject: new Aggregation({
+                buckets: [
+                    {
+                        key: 'foo',
+                        doc_count: 5,
+                    },
+                ],
+            }),
+            mediatype: new Aggregation({
+                buckets: [
+                    {
+                        key: 'bar',
+                        doc_count: 10,
+                    },
+                ],
+            }),
+        };
+        el.aggregations = aggs;
+        await el.updateComplete;
+        const facetGroups = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.facet-group');
+        expect(facetGroups === null || facetGroups === void 0 ? void 0 : facetGroups.length).to.equal(2);
+    });
+    it('does not render suppressed collection facets', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        const aggs = {
+            collection: new Aggregation({
+                buckets: [
+                    {
+                        key: 'deemphasize',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'community',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'foo',
+                        doc_count: 5,
+                    },
+                ],
+            }),
+        };
+        el.aggregations = aggs;
+        await el.updateComplete;
+        const collectionFacets = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('facets-template')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll('facet-row');
+        expect(collectionFacets === null || collectionFacets === void 0 ? void 0 : collectionFacets.length).to.equal(1);
+        // The first (and only) collection link should be for 'foo'
+        expect((_d = collectionFacets[0].bucket) === null || _d === void 0 ? void 0 : _d.key).to.equal('foo');
+    });
+    // Lending tests disabled because lending facet disabled
+    // it('renders lending facets with human-readable names', async () => {
+    //   const el = await fixture<CollectionFacets>(
+    //     html`<collection-facets></collection-facets>`
+    //   );
+    //   const aggs: Record<string, Aggregation> = {
+    //     lending: new Aggregation({
+    //       buckets: [
+    //         {
+    //           key: 'is_lendable',
+    //           doc_count: 3,
+    //         },
+    //         {
+    //           key: 'available_to_borrow',
+    //           doc_count: 2,
+    //         },
+    //         {
+    //           key: 'is_readable',
+    //           doc_count: 1,
+    //         },
+    //       ],
+    //     }),
+    //   };
+    //   el.aggregations = aggs;
+    //   await el.updateComplete;
+    //   const facetsTemplate = el.shadowRoot?.querySelector(
+    //     'facets-template'
+    //   ) as FacetsTemplate;
+    //   await facetsTemplate?.updateComplete;
+    //   const lendingFacets = facetsTemplate?.shadowRoot?.querySelectorAll(
+    //     'facet-row'
+    //   ) as ArrayLike<FacetRow>;
+    //   expect(lendingFacets?.length).to.equal(3);
+    //   expect(lendingFacets[0].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Lending Library\s*3$/
+    //   );
+    //   expect(lendingFacets[1].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Borrow 14 Days\s*2$/
+    //   );
+    //   expect(lendingFacets[2].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Always Available\s*1$/
+    //   );
+    // });
+    // it('renders selected/negative lending facets with human-readable names', async () => {
+    //   const el = await fixture<CollectionFacets>(
+    //     html`<collection-facets></collection-facets>`
+    //   );
+    //   const selectedFacets: SelectedFacets = {
+    //     subject: {},
+    //     lending: {
+    //       is_lendable: {
+    //         key: 'is_lendable',
+    //         count: 5,
+    //         state: 'selected',
+    //       },
+    //       available_to_borrow: {
+    //         key: 'available_to_borrow',
+    //         count: 4,
+    //         state: 'selected',
+    //       },
+    //       is_readable: {
+    //         key: 'is_readable',
+    //         count: 3,
+    //         state: 'hidden',
+    //       },
+    //     },
+    //     mediatype: {},
+    //     language: {},
+    //     creator: {},
+    //     collection: {},
+    //     year: {},
+    //   };
+    //   el.selectedFacets = selectedFacets;
+    //   await el.updateComplete;
+    //   const facetsTemplate = el.shadowRoot?.querySelector(
+    //     'facets-template'
+    //   ) as FacetsTemplate;
+    //   await facetsTemplate?.updateComplete;
+    //   const lendingFacets = facetsTemplate?.shadowRoot?.querySelectorAll(
+    //     'facet-row'
+    //   ) as ArrayLike<FacetRow>;
+    //   expect(lendingFacets?.length).to.equal(3);
+    //   expect(lendingFacets[0].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Lending Library\s*5$/
+    //   );
+    //   expect(lendingFacets[1].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Borrow 14 Days\s*4$/
+    //   );
+    //   expect(lendingFacets[2].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Always Available\s*3$/
+    //   );
+    // });
+    // it('only renders lending facets for is_lendable, available_to_borrow, and is_readable', async () => {
+    //   const el = await fixture<CollectionFacets>(
+    //     html`<collection-facets></collection-facets>`
+    //   );
+    //   const aggs: Record<string, Aggregation> = {
+    //     lending: new Aggregation({
+    //       buckets: [
+    //         {
+    //           key: 'is_lendable',
+    //           doc_count: 5,
+    //         },
+    //         {
+    //           key: 'is_borrowable',
+    //           doc_count: 4,
+    //         },
+    //         {
+    //           key: 'available_to_borrow',
+    //           doc_count: 5,
+    //         },
+    //         {
+    //           key: 'is_browsable',
+    //           doc_count: 4,
+    //         },
+    //         {
+    //           key: 'available_to_browse',
+    //           doc_count: 5,
+    //         },
+    //         {
+    //           key: 'is_readable',
+    //           doc_count: 4,
+    //         },
+    //         {
+    //           key: 'available_to_waitlist',
+    //           doc_count: 5,
+    //         },
+    //       ],
+    //     }),
+    //   };
+    //   el.aggregations = aggs;
+    //   await el.updateComplete;
+    //   const facetsTemplate = el.shadowRoot?.querySelector(
+    //     'facets-template'
+    //   ) as FacetsTemplate;
+    //   await facetsTemplate?.updateComplete;
+    //   await new Promise(res => {
+    //     setTimeout(res, 100);
+    //   });
+    //   const lendingFacets = facetsTemplate?.shadowRoot?.querySelectorAll(
+    //     'facet-row'
+    //   ) as ArrayLike<FacetRow>;
+    //   expect(lendingFacets?.length).to.equal(3);
+    //   expect(lendingFacets[0].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Lending Library\s*5$/
+    //   );
+    //   expect(lendingFacets[1].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Borrow 14 Days\s*5$/
+    //   );
+    //   expect(lendingFacets[2].shadowRoot?.textContent?.trim()).to.match(
+    //     /^Always Available\s*4$/
+    //   );
+    // });
+    // it('does not render a More... link for lending facets', async () => {
+    //   const el = await fixture<CollectionFacets>(
+    //     html`<collection-facets></collection-facets>`
+    //   );
+    //   const aggs: Record<string, Aggregation> = {
+    //     lending: new Aggregation({
+    //       buckets: [
+    //         {
+    //           key: 'is_lendable',
+    //           doc_count: 5,
+    //         },
+    //         {
+    //           key: 'is_borrowable',
+    //           doc_count: 4,
+    //         },
+    //         {
+    //           key: 'available_to_borrow',
+    //           doc_count: 5,
+    //         },
+    //         {
+    //           key: 'is_browsable',
+    //           doc_count: 4,
+    //         },
+    //         {
+    //           key: 'available_to_browse',
+    //           doc_count: 5,
+    //         },
+    //         {
+    //           key: 'is_readable',
+    //           doc_count: 4,
+    //         },
+    //         {
+    //           key: 'available_to_waitlist',
+    //           doc_count: 5,
+    //         },
+    //       ],
+    //     }),
+    //   };
+    //   el.aggregations = aggs;
+    //   await el.updateComplete;
+    //   const moreLink = el.shadowRoot?.querySelector('.more-link');
+    //   expect(moreLink).not.to.exist;
+    // });
+    it('always renders the mediatype:collection facet when present', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        const aggs = {
+            mediatype: new Aggregation({
+                buckets: [
+                    {
+                        key: 'texts',
+                        doc_count: 10000,
+                    },
+                    {
+                        key: 'image',
+                        doc_count: 9000,
+                    },
+                    {
+                        key: 'audio',
+                        doc_count: 8000,
+                    },
+                    {
+                        key: 'movies',
+                        doc_count: 7000,
+                    },
+                    {
+                        key: 'software',
+                        doc_count: 6000,
+                    },
+                    {
+                        key: 'data',
+                        doc_count: 5000,
+                    },
+                    {
+                        key: 'etree',
+                        doc_count: 4000,
+                    },
+                    {
+                        key: 'collection',
+                        doc_count: 1,
+                    },
+                ],
+            }),
+        };
+        el.aggregations = aggs;
+        await el.updateComplete;
+        const facetsTemplate = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('facets-template');
+        const facetRows = (_b = facetsTemplate === null || facetsTemplate === void 0 ? void 0 : facetsTemplate.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('facet-row');
+        expect(facetRows === null || facetRows === void 0 ? void 0 : facetRows.length).to.equal(6);
+        expect((_d = (_c = facetRows === null || facetRows === void 0 ? void 0 : facetRows[5]) === null || _c === void 0 ? void 0 : _c.bucket) === null || _d === void 0 ? void 0 : _d.key).to.equal('collection');
+    });
+    it('renders the mediatype:collection facet even when >=6 other mediatypes are selected', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        const aggs = {
+            mediatype: new Aggregation({
+                buckets: [
+                    {
+                        key: 'texts',
+                        doc_count: 10000,
+                    },
+                    {
+                        key: 'image',
+                        doc_count: 9000,
+                    },
+                    {
+                        key: 'audio',
+                        doc_count: 8000,
+                    },
+                    {
+                        key: 'movies',
+                        doc_count: 7000,
+                    },
+                    {
+                        key: 'software',
+                        doc_count: 6000,
+                    },
+                    {
+                        key: 'data',
+                        doc_count: 5000,
+                    },
+                    {
+                        key: 'etree',
+                        doc_count: 4000,
+                    },
+                    {
+                        key: 'collection',
+                        doc_count: 1,
+                    },
+                ],
+            }),
+        };
+        const selectedFacets = getDefaultSelectedFacets();
+        selectedFacets.mediatype = {
+            texts: { key: 'texts', count: 10000, state: 'selected' },
+            image: { key: 'image', count: 9000, state: 'selected' },
+            audio: { key: 'audio', count: 8000, state: 'selected' },
+            movies: { key: 'movies', count: 7000, state: 'selected' },
+            software: { key: 'software', count: 6000, state: 'selected' },
+            data: { key: 'data', count: 5000, state: 'selected' },
+            etree: { key: 'etree', count: 4000, state: 'selected' },
+        };
+        el.aggregations = aggs;
+        el.selectedFacets = selectedFacets;
+        await el.updateComplete;
+        const facetsTemplate = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('facets-template');
+        const facetRows = (_b = facetsTemplate === null || facetsTemplate === void 0 ? void 0 : facetsTemplate.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('facet-row');
+        expect(facetRows === null || facetRows === void 0 ? void 0 : facetRows.length).to.equal(8);
+        expect((_d = (_c = facetRows === null || facetRows === void 0 ? void 0 : facetRows[7]) === null || _c === void 0 ? void 0 : _c.bucket) === null || _d === void 0 ? void 0 : _d.key).to.equal('collection');
+    });
+    it('uses specified facet display order', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets
+        .facetDisplayOrder=${['language', 'creator']}
+      ></collection-facets>`);
+        const aggs = {
+            mediatype: new Aggregation({
+                buckets: [{ key: 'texts', doc_count: 5 }],
+            }),
+            collection: new Aggregation({
+                buckets: [{ key: 'foo', doc_count: 10 }],
+            }),
+            creator: new Aggregation({
+                buckets: [{ key: 'bar', doc_count: 15 }],
+            }),
+            language: new Aggregation({
+                buckets: [{ key: 'baz', doc_count: 20 }],
+            }),
+        };
+        el.aggregations = aggs;
+        await el.updateComplete;
+        const facetHeaders = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.facet-group-header');
+        // The only two facet groups should be Language and Creator (in that order)
+        expect(facetHeaders === null || facetHeaders === void 0 ? void 0 : facetHeaders.length).to.equal(2);
+        expect(facetHeaders === null || facetHeaders === void 0 ? void 0 : facetHeaders[0].textContent).to.contain('Language');
+        expect(facetHeaders === null || facetHeaders === void 0 ? void 0 : facetHeaders[1].textContent).to.contain('Creator');
+    });
+    describe('More Facets', () => {
+        it('Does not render < allowedFacetCount', async () => {
+            var _a;
+            const el = await fixture(html `<collection-facets></collection-facets>`);
+            const aggs = {
+                subject: new Aggregation({
+                    buckets: [
+                        {
+                            key: 'foo',
+                            doc_count: 5,
+                        },
+                    ],
+                }),
+            };
+            el.aggregations = aggs;
+            await el.updateComplete;
+            const moreLink = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.more-link');
+            expect(moreLink).to.be.null;
+        });
+        it('Render More Facets', async () => {
+            var _a, _b;
+            const modalManager = await fixture(html `<modal-manager></modal-manager>`);
+            const el = await fixture(html `<collection-facets
+          .modalManager=${modalManager}
+        ></collection-facets>`);
+            const aggs = {
+                subject: new Aggregation({
+                    buckets: [
+                        {
+                            key: 'foo',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'fi',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'fum',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'flee',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'wheee',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'whooo',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'boop',
+                            doc_count: 5,
+                        },
+                    ],
+                }),
+            };
+            el.aggregations = aggs;
+            await el.updateComplete;
+            let eventCaught = false;
+            let eventFacet = '';
+            el.addEventListener('showMoreFacets', e => {
+                eventFacet = e.detail;
+                eventCaught = true;
+            });
+            const moreLink = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.more-link');
+            expect(moreLink).to.exist; // has link
+            const showModalSpy = sinon.spy(el.modalManager, 'showModal');
+            // let's pop up modal
+            moreLink === null || moreLink === void 0 ? void 0 : moreLink.click();
+            await el.updateComplete;
+            expect(showModalSpy.callCount).to.equal(1);
+            expect((_b = el.modalManager) === null || _b === void 0 ? void 0 : _b.classList.contains('more-search-facets')).to.be
+                .true;
+            expect(eventCaught).to.be.true;
+            expect(eventFacet).to.equal('subject');
+        });
+    });
+    it('fire analytics on more link', async () => {
+        var _a;
+        const mockAnalyticsHandler = new MockAnalyticsHandler();
+        const el = await fixture(html `<collection-facets
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></collection-facets>`);
+        const aggs = {
+            subject: new Aggregation({
+                buckets: [
+                    {
+                        key: 'foo',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'fi',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'fum',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'flee',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'wheee',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'whooo',
+                        doc_count: 5,
+                    },
+                    {
+                        key: 'boop',
+                        doc_count: 5,
+                    },
+                ],
+            }),
+        };
+        el.aggregations = aggs;
+        await el.updateComplete;
+        const moreLink = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.more-link');
+        expect(moreLink).to.exist; // has link
+        moreLink === null || moreLink === void 0 ? void 0 : moreLink.click();
+        await el.updateComplete;
+        expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+        expect(mockAnalyticsHandler.callAction).to.equal('showMoreFacetsModal');
+        expect(mockAnalyticsHandler.callLabel).to.equal('subject');
+    });
+    it('includes Part Of section for collections', async () => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const el = await fixture(html `<collection-facets
+        .baseNavigationUrl=${''}
+        .withinCollection=${'foo'}
+        .parentCollections=${['bar', 'baz']}
+        .collectionTitles=${new Map([
+            ['foo', 'foo-name'],
+            ['bar', 'bar-name'],
+            ['baz', 'baz-name'],
+        ])}
+      ></collection-facets>`);
+        const partOfSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.partof-collections');
+        expect(partOfSection).to.exist;
+        const partOfLinks = partOfSection === null || partOfSection === void 0 ? void 0 : partOfSection.querySelectorAll('a[href]');
+        expect(partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks.length).to.equal(2);
+        expect((_c = (_b = partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks[0]) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.equal('bar-name');
+        expect((_d = partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks[0]) === null || _d === void 0 ? void 0 : _d.getAttribute('href')).to.equal('/details/bar');
+        expect((_f = (_e = partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks[1]) === null || _e === void 0 ? void 0 : _e.textContent) === null || _f === void 0 ? void 0 : _f.trim()).to.equal('baz-name');
+        expect((_g = partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks[1]) === null || _g === void 0 ? void 0 : _g.getAttribute('href')).to.equal('/details/baz');
+    });
+    it('does not include Part Of section without parent collections', async () => {
+        var _a;
+        // No parentCollections prop
+        const el = await fixture(html `<collection-facets .withinCollection=${'foo'}></collection-facets>`);
+        const partOfSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.partof-collections');
+        expect(partOfSection).not.to.exist;
+    });
+    it('fires analytics on expanding date picker', async () => {
+        var _a;
+        const mockAnalyticsHandler = new MockAnalyticsHandler();
+        const el = await fixture(html `<collection-facets
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></collection-facets>`);
+        el.histogramAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = true;
+        el.histogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.exist;
+        // Click the expand button to open the modal
+        expandBtn === null || expandBtn === void 0 ? void 0 : expandBtn.click();
+        await el.updateComplete;
+        expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+        expect(mockAnalyticsHandler.callAction).to.equal('histogramExpanded');
+        expect(mockAnalyticsHandler.callLabel).to.equal(window.location.href);
+    });
+    it('fires analytics on clicking Part Of collection link', async () => {
+        var _a;
+        const mockAnalyticsHandler = new MockAnalyticsHandler();
+        const el = await fixture(html `<collection-facets
+        .baseNavigationUrl=${''}
+        .withinCollection=${'foo'}
+        .parentCollections=${['bar']}
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></collection-facets>`);
+        const partOfLinks = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.partof-collections a[href]');
+        expect(partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks.length).to.equal(1);
+        // Click the expand button to open the modal
+        const link = partOfLinks === null || partOfLinks === void 0 ? void 0 : partOfLinks[0];
+        link === null || link === void 0 ? void 0 : link.addEventListener('click', e => e.preventDefault());
+        link === null || link === void 0 ? void 0 : link.click();
+        await el.updateComplete;
+        expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+        expect(mockAnalyticsHandler.callAction).to.equal('partOfCollectionClicked');
+        expect(mockAnalyticsHandler.callLabel).to.equal('bar');
+    });
+});
+//# sourceMappingURL=collection-facets.test.js.map