@internetarchive/collection-browser 4.7.0 → 4.8.0

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

@@ -1,126 +0,0 @@
-import { expect, fixture, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import '../../src/collection-facets/more-facets-pagination';
-afterEach(() => {
-    sinon.restore();
-});
-describe('More facets pagination', () => {
-    describe('5 pages or less', () => {
-        it('shows all pages', async () => {
-            const el = await fixture(html `<more-facets-pagination .size=${5}></more-facets-pagination>`);
-            await el.updateComplete;
-            const pageButtons = el.shadowRoot?.querySelectorAll('button[data-page]');
-            expect(pageButtons.length).to.greaterThan(0);
-            pageButtons.forEach((button, index) => {
-                expect(button.textContent).to.contain(index + 1);
-            });
-        });
-    });
-    it('should render pagination template', async () => {
-        const el = await fixture(html `<more-facets-pagination .size=${10}></more-facets-pagination>`);
-        await el.updateComplete;
-        expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
-        expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;
-    });
-    it('should render page numbers', async () => {
-        const el = await fixture(html `<more-facets-pagination .size=${3}></more-facets-pagination>`);
-        await el.updateComplete;
-        const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-        expect(pageNumberElement).to.exist;
-        expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);
-    });
-    it('check current page and total pages', async () => {
-        const el = await fixture(html `<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`);
-        await el.updateComplete;
-        const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-        expect(pageNumberElement).to.exist;
-        expect(pageNumberElement
-            ?.querySelectorAll('button')[1]
-            .classList.contains('current')).to.be.true;
-        expect(el.pages?.length).to.equal(4);
-    });
-    it('get page numbers based of size and currentPage', async () => {
-        const el = await fixture(html `<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`);
-        await el.updateComplete;
-        expect(el.pages?.length).to.equal(4);
-    });
-    describe('Selecting a page', () => {
-        it('fires event', async () => {
-            const el = await fixture(html `<more-facets-pagination></more-facets-pagination>`);
-            await el.updateComplete;
-            setTimeout(() => el.dispatchEvent(new CustomEvent('pageNumberClicked', { detail: { page: 15 } })));
-            const { detail } = await oneEvent(el, 'pageNumberClicked');
-            expect(detail?.page).to.equal(15);
-        });
-        it('sets off side effects with `onChange`', async () => {
-            const el = await fixture(html `<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`);
-            expect(el.currentPage).to.equal(2); // confirm current page
-            const fake1 = sinon.fake();
-            const fake2 = sinon.fake();
-            el.observePageCount = fake1;
-            el.emitPageClick = fake2;
-            // select first page button
-            const pageButton = el.shadowRoot?.querySelector('.page-numbers > button');
-            // confirm button isn't selected
-            expect(pageButton.classList.contains('current')).to.be.false;
-            pageButton.click();
-            await el.updateComplete;
-            expect(fake1.callCount).to.equal(1);
-            expect(fake2.callCount).to.equal(1);
-            expect(el.currentPage).to.equal(1); // brings us back to currentPage
-            // confirm button is selected
-            expect(pageButton.classList.contains('current')).to.be.true;
-        });
-    });
-    describe('Using Arrows', () => {
-        it('going backwards', async () => {
-            const el = await fixture(html `<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`);
-            expect(el.currentPage).to.equal(2); // confirm current page
-            const fake1 = sinon.fake();
-            const fake2 = sinon.fake();
-            el.observePageCount = fake1;
-            el.emitPageClick = fake2;
-            // select first page button
-            const rewindButton = el.shadowRoot?.querySelector('.facets-pagination > button.rewind');
-            rewindButton.click();
-            await el.updateComplete;
-            expect(fake1.callCount).to.equal(1);
-            expect(fake2.callCount).to.equal(1);
-            expect(el.currentPage).to.equal(1); // brings us back 1 page
-            // confirm button is selected
-            expect((el.shadowRoot?.querySelector('.page-numbers > button[data-page="1"]')).classList.contains('current')).to.be.true;
-        });
-        it('going forwards', async () => {
-            const el = await fixture(html `<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${5}
-        ></more-facets-pagination>`);
-            expect(el.currentPage).to.equal(5); // confirm current page
-            const fake1 = sinon.fake();
-            const fake2 = sinon.fake();
-            el.observePageCount = fake1;
-            el.emitPageClick = fake2;
-            // select first page button
-            const forwardButton = el.shadowRoot?.querySelector('.facets-pagination > button.forward');
-            forwardButton.click();
-            await el.updateComplete;
-            expect(fake1.callCount).to.equal(1);
-            expect(fake2.callCount).to.equal(1);
-            expect(el.currentPage).to.equal(6); // brings us forward 1 page
-        });
-    });
-});
-//# sourceMappingURL=more-facets-pagination.test.js.map

package/dist/test/collection-facets/more-facets-pagination.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"more-facets-pagination.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-pagination.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html } from 'lit';\nimport sinon from 'sinon';\nimport '../../src/collection-facets/more-facets-pagination';\nimport type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';\n\nafterEach(() => {\n  sinon.restore();\n});\n\ndescribe('More facets pagination', () => {\n  describe('5 pages or less', () => {\n    it('shows all pages', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination .size=${5}></more-facets-pagination>`,\n      );\n\n      await el.updateComplete;\n\n      const pageButtons = el.shadowRoot?.querySelectorAll(\n        'button[data-page]',\n      ) as NodeList;\n      expect(pageButtons.length).to.greaterThan(0);\n\n      pageButtons.forEach((button, index) => {\n        expect(button.textContent).to.contain(index + 1);\n      });\n    });\n  });\n\n  it('should render pagination template', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination .size=${10}></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;\n    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;\n  });\n\n  it('should render page numbers', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination .size=${3}></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');\n    expect(pageNumberElement).to.exist;\n    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);\n  });\n\n  it('check current page and total pages', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination\n        .size=${4}\n        .currentPage=${2}\n      ></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');\n    expect(pageNumberElement).to.exist;\n    expect(\n      pageNumberElement\n        ?.querySelectorAll('button')[1]\n        .classList.contains('current'),\n    ).to.be.true;\n    expect(el.pages?.length).to.equal(4);\n  });\n\n  it('get page numbers based of size and currentPage', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination\n        .size=${4}\n        .currentPage=${2}\n      ></more-facets-pagination>`,\n    );\n\n    await el.updateComplete;\n\n    expect(el.pages?.length).to.equal(4);\n  });\n\n  describe('Selecting a page', () => {\n    it('fires event', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination></more-facets-pagination>`,\n      );\n\n      await el.updateComplete;\n\n      setTimeout(() =>\n        el.dispatchEvent(\n          new CustomEvent('pageNumberClicked', { detail: { page: 15 } }),\n        ),\n      );\n      const { detail } = await oneEvent(el, 'pageNumberClicked');\n      expect(detail?.page).to.equal(15);\n    });\n    it('sets off side effects with `onChange`', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${2}\n        ></more-facets-pagination>`,\n      );\n\n      expect(el.currentPage).to.equal(2); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const pageButton = el.shadowRoot?.querySelector(\n        '.page-numbers > button',\n      ) as HTMLButtonElement;\n      // confirm button isn't selected\n      expect(pageButton.classList.contains('current')).to.be.false;\n      pageButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(1); // brings us back to currentPage\n      // confirm button is selected\n      expect(pageButton.classList.contains('current')).to.be.true;\n    });\n  });\n\n  describe('Using Arrows', () => {\n    it('going backwards', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${2}\n        ></more-facets-pagination>`,\n      );\n\n      expect(el.currentPage).to.equal(2); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const rewindButton = el.shadowRoot?.querySelector(\n        '.facets-pagination > button.rewind',\n      ) as HTMLButtonElement;\n      rewindButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(1); // brings us back 1 page\n      // confirm button is selected\n      expect(\n        (\n          el.shadowRoot?.querySelector(\n            '.page-numbers > button[data-page=\"1\"]',\n          ) as HTMLButtonElement\n        ).classList.contains('current'),\n      ).to.be.true;\n    });\n\n    it('going forwards', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${5}\n        ></more-facets-pagination>`,\n      );\n\n      expect(el.currentPage).to.equal(5); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const forwardButton = el.shadowRoot?.querySelector(\n        '.facets-pagination > button.forward',\n      ) as HTMLButtonElement;\n      forwardButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(6); // brings us forward 1 page\n    });\n  });\n});\n"]}

package/src/collection-facets/more-facets-pagination.ts

@@ -1,294 +0,0 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  TemplateResult,
-} from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import arrowLeftIcon from '../assets/img/icons/arrow-left';
-import arrowRightIcon from '../assets/img/icons/arrow-right';
-import { srOnlyStyle } from '../styles/sr-only';
-
-@customElement('more-facets-pagination')
-export class MoreFacetsPagination extends LitElement {
-  /**
-   * Total number of pages
-   */
-  @property({ type: Number }) size!: number;
-
-  /**
-   * Number of pages can be moved in back/forward
-   */
-  @property({ type: Number }) step = 2;
-
-  @property({ type: Number }) currentPage: number = 1;
-
-  @state() pages?: number[] = [];
-
-  firstUpdated() {
-    this.observePageCount();
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  override updated(changed: Map<string, any>) {
-    if (changed.has('size')) {
-      this.observePageCount();
-    }
-    if (changed.has('currentPage')) {
-      this.observePageCount();
-      this.emitPageClick();
-    }
-  }
-
-  /** creates `this.pages` array that notes which pages to draw
-   * - `0` is elipses marker
-   * - rule: selected page is centered between -2/+2 pages
-   * - outlier: first page selected, show _1_ 2 3 ... N
-   * - outlier: second page selected, show 1 _2_ 3 4 ... N
-   * - outlier: last page selected, show 1 ... N-2 N-1 _N_
-   * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
-   */
-  observePageCount() {
-    this.pages = []; /* `0` is elipses marker */
-
-    const paginatorMaxPagesToShow = 7;
-    const atMinThreshold = this.size <= paginatorMaxPagesToShow;
-
-    /** Display outliers  */
-    if (this.size <= 5) {
-      // display all pages
-      this.pages = [...Array(this.size).keys()].map(i => i + 1);
-      return;
-    }
-
-    if (this.size === paginatorMaxPagesToShow) {
-      // edge: 7 pages
-      if (this.currentPage === 2) {
-        this.pages = [1, 2, 3, 4, 0, this.size];
-        return;
-      }
-
-      if (this.currentPage === this.size - 1) {
-        this.pages = [1, 0, 4, 5, this.size - 1, this.size];
-        return;
-      }
-    }
-
-    if (this.currentPage === 1) {
-      // first page
-      this.pages = [1, 2, 3, 0, this.size];
-      return;
-    }
-
-    if (this.currentPage === this.size) {
-      // last page
-      this.pages = [1, 0, this.size - 2, this.size - 1, this.size];
-      return;
-    }
-
-    if (this.currentPage === this.size - 1) {
-      // second last page
-      this.pages = [
-        1,
-        0,
-        this.size - 3,
-        this.size - 2,
-        this.size - 1,
-        this.size,
-      ];
-      return;
-    }
-
-    if (
-      atMinThreshold &&
-      this.currentPage > 1 &&
-      this.currentPage < paginatorMaxPagesToShow
-    ) {
-      this.pages = [...Array(this.size).keys()].map(i => i + 1);
-      return;
-    }
-
-    /* The rest here calculates the range to display in "page window" */
-    let startPage = this.currentPage - this.step;
-    let endPage = this.currentPage + this.step;
-
-    if (startPage <= 0) {
-      endPage += -startPage + 1;
-      startPage = 1;
-    }
-
-    if (endPage >= this.size) {
-      startPage = Math.max(startPage - (endPage - this.size), 1);
-      endPage = this.size;
-    }
-
-    if (startPage === 2) {
-      endPage -= 1;
-    }
-
-    if (endPage === this.size - 1) {
-      startPage += 1;
-    }
-
-    // create first page node
-    this.createFirstNode(startPage);
-
-    // create middle pages node
-    this.createMiddelNode(startPage, endPage);
-
-    // create last page node
-    this.createLastNode(endPage);
-  }
-
-  private createFirstNode(startPage: number) {
-    if (startPage > 1) {
-      this.pages?.push(1);
-    }
-    if (startPage > 2) {
-      this.pages?.push(0); // let's asssume 0 is for ellipsis template
-    }
-  }
-
-  private createMiddelNode(startPage: number, endPage: number) {
-    for (let page = startPage; page <= endPage; page += 1) {
-      this.pages?.push(page);
-    }
-  }
-
-  private createLastNode(endPage: number) {
-    if (endPage < this.size - 1) {
-      this.pages?.push(0); // let's asssume 0 is for ellipsis template
-    }
-    if (endPage < this.size) {
-      this.pages?.push(this.size);
-    }
-  }
-
-  private get getEllipsisTemplate() {
-    return html`<i class="ellipses">...</i>`;
-  }
-
-  emitPageClick() {
-    this.dispatchEvent(
-      new CustomEvent('pageNumberClicked', {
-        detail: { page: this.currentPage },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  private onRewind() {
-    this.currentPage -= 1;
-    if (this.currentPage < 1) {
-      this.currentPage = 1;
-    }
-  }
-
-  private onForward() {
-    this.currentPage += 1;
-    if (this.currentPage > this.size) {
-      this.currentPage = this.size;
-    }
-  }
-
-  private onChange(page: number) {
-    this.currentPage = page;
-  }
-
-  private getPageTemplate(page: number) {
-    return html`
-      <button
-        @click=${() => this.onChange(page)}
-        class=${this.currentPage === page ? 'current' : ''}
-        data-page=${page}
-      >
-        ${page}
-      </button>
-    `;
-  }
-
-  private get getPagesTemplate(): TemplateResult | typeof nothing {
-    if (!this.pages || !this.pages.length) {
-      return nothing;
-    }
-
-    return html`
-      ${this.pages?.map(
-        page =>
-          html`${page !== 0
-            ? this.getPageTemplate(page)
-            : this.getEllipsisTemplate}`,
-      )}
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="facets-pagination">
-        <button class="arrow-icon rewind" @click=${this.onRewind}>
-          <span class="sr-only">Rewind pagination:</span>
-          ${arrowLeftIcon}
-        </button>
-        <div class="page-numbers">${this.getPagesTemplate}</div>
-        <button class="arrow-icon forward" @click=${this.onForward}>
-          <span class="sr-only">Forward pagination:</span>
-          ${arrowRightIcon}
-        </button>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      srOnlyStyle,
-      css`
-        .facets-pagination {
-          user-select: none;
-          margin-top: 10px;
-          background-color: #eee;
-          text-align: center;
-        }
-        .facets-pagination button {
-          border: none;
-          background: none;
-        }
-        .facets-pagination .arrow-icon {
-          width: 2.5rem;
-          vertical-align: middle;
-        }
-        .facets-pagination .arrow-icon svg {
-          height: 14px;
-          fill: #2c2c2c;
-        }
-        .facets-pagination button,
-        .facets-pagination i {
-          background: none;
-          border: 0;
-          cursor: pointer;
-          border-radius: 4px;
-          margin: 10px 5px;
-          padding: 5px;
-          font-size: 1.4rem;
-          color: inherit;
-          vertical-align: baseline;
-          display: inline-block;
-          min-width: 2.5rem;
-        }
-        .facets-pagination i {
-          cursor: auto;
-          display: inline;
-        }
-        .facets-pagination button.current {
-          background: #2c2c2c;
-          color: white;
-        }
-        .page-numbers {
-          display: inline-block;
-        }
-      `,
-    ];
-  }
-}

package/test/collection-facets/more-facets-pagination.test.ts

@@ -1,201 +0,0 @@
-import { expect, fixture, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import sinon from 'sinon';
-import '../../src/collection-facets/more-facets-pagination';
-import type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';
-
-afterEach(() => {
-  sinon.restore();
-});
-
-describe('More facets pagination', () => {
-  describe('5 pages or less', () => {
-    it('shows all pages', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination .size=${5}></more-facets-pagination>`,
-      );
-
-      await el.updateComplete;
-
-      const pageButtons = el.shadowRoot?.querySelectorAll(
-        'button[data-page]',
-      ) as NodeList;
-      expect(pageButtons.length).to.greaterThan(0);
-
-      pageButtons.forEach((button, index) => {
-        expect(button.textContent).to.contain(index + 1);
-      });
-    });
-  });
-
-  it('should render pagination template', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination .size=${10}></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
-    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;
-  });
-
-  it('should render page numbers', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination .size=${3}></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-    expect(pageNumberElement).to.exist;
-    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);
-  });
-
-  it('check current page and total pages', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
-    expect(pageNumberElement).to.exist;
-    expect(
-      pageNumberElement
-        ?.querySelectorAll('button')[1]
-        .classList.contains('current'),
-    ).to.be.true;
-    expect(el.pages?.length).to.equal(4);
-  });
-
-  it('get page numbers based of size and currentPage', async () => {
-    const el = await fixture<MoreFacetsPagination>(
-      html`<more-facets-pagination
-        .size=${4}
-        .currentPage=${2}
-      ></more-facets-pagination>`,
-    );
-
-    await el.updateComplete;
-
-    expect(el.pages?.length).to.equal(4);
-  });
-
-  describe('Selecting a page', () => {
-    it('fires event', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination></more-facets-pagination>`,
-      );
-
-      await el.updateComplete;
-
-      setTimeout(() =>
-        el.dispatchEvent(
-          new CustomEvent('pageNumberClicked', { detail: { page: 15 } }),
-        ),
-      );
-      const { detail } = await oneEvent(el, 'pageNumberClicked');
-      expect(detail?.page).to.equal(15);
-    });
-    it('sets off side effects with `onChange`', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`,
-      );
-
-      expect(el.currentPage).to.equal(2); // confirm current page
-
-      const fake1 = sinon.fake();
-      const fake2 = sinon.fake();
-      el.observePageCount = fake1;
-      el.emitPageClick = fake2;
-
-      // select first page button
-      const pageButton = el.shadowRoot?.querySelector(
-        '.page-numbers > button',
-      ) as HTMLButtonElement;
-      // confirm button isn't selected
-      expect(pageButton.classList.contains('current')).to.be.false;
-      pageButton.click();
-
-      await el.updateComplete;
-
-      expect(fake1.callCount).to.equal(1);
-      expect(fake2.callCount).to.equal(1);
-      expect(el.currentPage).to.equal(1); // brings us back to currentPage
-      // confirm button is selected
-      expect(pageButton.classList.contains('current')).to.be.true;
-    });
-  });
-
-  describe('Using Arrows', () => {
-    it('going backwards', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${2}
-        ></more-facets-pagination>`,
-      );
-
-      expect(el.currentPage).to.equal(2); // confirm current page
-
-      const fake1 = sinon.fake();
-      const fake2 = sinon.fake();
-      el.observePageCount = fake1;
-      el.emitPageClick = fake2;
-
-      // select first page button
-      const rewindButton = el.shadowRoot?.querySelector(
-        '.facets-pagination > button.rewind',
-      ) as HTMLButtonElement;
-      rewindButton.click();
-
-      await el.updateComplete;
-
-      expect(fake1.callCount).to.equal(1);
-      expect(fake2.callCount).to.equal(1);
-      expect(el.currentPage).to.equal(1); // brings us back 1 page
-      // confirm button is selected
-      expect(
-        (
-          el.shadowRoot?.querySelector(
-            '.page-numbers > button[data-page="1"]',
-          ) as HTMLButtonElement
-        ).classList.contains('current'),
-      ).to.be.true;
-    });
-
-    it('going forwards', async () => {
-      const el = await fixture<MoreFacetsPagination>(
-        html`<more-facets-pagination
-          .size=${'10'}
-          .currentPage=${5}
-        ></more-facets-pagination>`,
-      );
-
-      expect(el.currentPage).to.equal(5); // confirm current page
-
-      const fake1 = sinon.fake();
-      const fake2 = sinon.fake();
-      el.observePageCount = fake1;
-      el.emitPageClick = fake2;
-
-      // select first page button
-      const forwardButton = el.shadowRoot?.querySelector(
-        '.facets-pagination > button.forward',
-      ) as HTMLButtonElement;
-      forwardButton.click();
-
-      await el.updateComplete;
-
-      expect(fake1.callCount).to.equal(1);
-      expect(fake2.callCount).to.equal(1);
-      expect(el.currentPage).to.equal(6); // brings us forward 1 page
-    });
-  });
-});