From ca27036797f0b95f2d9779d374e2f125f41096e6 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:30:00 +0200
Subject: [PATCH 01/11] fix(vue-instantsearch): prevent click on navigation
 items when holding modifiers

---
 .../src/components/Pagination.vue             | 29 +++++++++++--------
 .../src/util/isModifierClick.js               | 11 +++++++
 2 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 packages/vue-instantsearch/src/util/isModifierClick.js

diff --git a/packages/vue-instantsearch/src/components/Pagination.vue b/packages/vue-instantsearch/src/components/Pagination.vue
index 6edd32a035..635e34b207 100644
--- a/packages/vue-instantsearch/src/components/Pagination.vue
+++ b/packages/vue-instantsearch/src/components/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="state" :class="suit()">
     <slot
-      :refine="refine"
+      :refine="(page) => refine(page, $event)"
       :createURL="state.createURL"
       :current-refinement="state.currentRefinement"
       :nb-hits="state.nbHits"
@@ -23,14 +23,14 @@
             name="first"
             :createURL="() => state.createURL(0)"
             :is-first-page="state.isFirstPage"
-            :refine="() => refine(0)"
+            :refine="() => refine(0, $event)"
           >
             <template v-if="!state.isFirstPage">
               <a
                 :class="suit('link')"
                 aria-label="First"
                 :href="state.createURL(0)"
-                @click.prevent="refine(0)"
+                @click.prevent="refine(0, $event)"
                 >‹‹</a
               >
             </template>
@@ -51,14 +51,14 @@
             name="previous"
             :createURL="() => state.createURL(state.currentRefinement - 1)"
             :is-first-page="state.isFirstPage"
-            :refine="() => refine(state.currentRefinement - 1)"
+            :refine="() => refine(state.currentRefinement - 1, $event)"
           >
             <template v-if="!state.isFirstPage">
               <a
                 :class="suit('link')"
                 aria-label="Previous"
                 :href="state.createURL(state.currentRefinement - 1)"
-                @click.prevent="refine(state.currentRefinement - 1)"
+                @click.prevent="refine(state.currentRefinement - 1, $event)"
                 >‹</a
               >
             </template>
@@ -83,13 +83,13 @@
             :createURL="() => state.createURL(page)"
             :is-first-page="state.isFirstPage"
             :is-last-page="state.isLastPage"
-            :refine="() => refine(page)"
+            :refine="() => refine(page, $event)"
           >
             <a
               :class="suit('link')"
               :href="state.createURL(page)"
               :aria-label="`Page ${page + 1}`"
-              @click.prevent="refine(page)"
+              @click.prevent="refine(page, $event)"
               >{{ page + 1 }}</a
             >
           </slot>
@@ -107,14 +107,14 @@
             name="next"
             :createURL="() => state.createURL(state.currentRefinement + 1)"
             :is-last-page="state.isLastPage"
-            :refine="() => refine(state.currentRefinement + 1)"
+            :refine="() => refine(state.currentRefinement + 1, $event)"
           >
             <template v-if="!state.isLastPage">
               <a
                 :class="suit('link')"
                 aria-label="Next"
                 :href="state.createURL(state.currentRefinement + 1)"
-                @click.prevent="refine(state.currentRefinement + 1)"
+                @click.prevent="refine(state.currentRefinement + 1, $event)"
                 >›</a
               >
             </template>
@@ -135,14 +135,14 @@
             name="last"
             :createURL="() => state.createURL(state.nbPages - 1)"
             :is-last-page="state.isLastPage"
-            :refine="() => refine(state.nbPages - 1)"
+            :refine="() => refine(state.nbPages - 1, $event)"
           >
             <template v-if="!state.isLastPage">
               <a
                 :class="suit('link')"
                 aria-label="Last"
                 :href="state.createURL(state.nbPages - 1)"
-                @click.prevent="refine(state.nbPages - 1)"
+                @click.prevent="refine(state.nbPages - 1, $event)"
                 >››</a
               >
             </template>
@@ -162,6 +162,7 @@ import { connectPagination } from 'instantsearch.js/es/connectors';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 import { createWidgetMixin } from '../mixins/widget';
+import { isModifierClick } from '../util/isModifierClick';
 
 export default {
   name: 'AisPagination',
@@ -219,7 +220,11 @@ export default {
   },
   emits: ['page-change'],
   methods: {
-    refine(page) {
+    refine(page, event) {
+      if (isModifierClick(event)) {
+        return;
+      }
+
       const p = Math.min(Math.max(page, 0), this.state.nbPages - 1);
       this.state.refine(p);
       // TODO: do this in a general way
diff --git a/packages/vue-instantsearch/src/util/isModifierClick.js b/packages/vue-instantsearch/src/util/isModifierClick.js
new file mode 100644
index 0000000000..de67e51d15
--- /dev/null
+++ b/packages/vue-instantsearch/src/util/isModifierClick.js
@@ -0,0 +1,11 @@
+export function isModifierClick(event) {
+  const isMiddleClick = event.button === 1;
+
+  return Boolean(
+    isMiddleClick ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.shiftKey
+  );
+}

From 33d25bf51d78f0540bf78d8f1471541d09e6c65b Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:38:54 +0200
Subject: [PATCH 02/11] chore: increase bundle size

---
 bundlesize.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 8d83809581..1013168aeb 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "63.25 kB"
+      "maxSize": "63.5 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",

From 97171a64e50fa2d346c7c5759e42698081480f41 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 09:59:37 +0200
Subject: [PATCH 03/11] refactor: use modifier

---
 bundlesize.config.json                        |  2 +-
 .../src/components/Pagination.vue             | 29 ++++++++-----------
 .../src/util/isModifierClick.js               | 11 -------
 3 files changed, 13 insertions(+), 29 deletions(-)
 delete mode 100644 packages/vue-instantsearch/src/util/isModifierClick.js

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 1013168aeb..8d83809581 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "63.5 kB"
+      "maxSize": "63.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",
diff --git a/packages/vue-instantsearch/src/components/Pagination.vue b/packages/vue-instantsearch/src/components/Pagination.vue
index 635e34b207..a1982e4cb8 100644
--- a/packages/vue-instantsearch/src/components/Pagination.vue
+++ b/packages/vue-instantsearch/src/components/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="state" :class="suit()">
     <slot
-      :refine="(page) => refine(page, $event)"
+      :refine="refine"
       :createURL="state.createURL"
       :current-refinement="state.currentRefinement"
       :nb-hits="state.nbHits"
@@ -23,14 +23,14 @@
             name="first"
             :createURL="() => state.createURL(0)"
             :is-first-page="state.isFirstPage"
-            :refine="() => refine(0, $event)"
+            :refine="() => refine(0)"
           >
             <template v-if="!state.isFirstPage">
               <a
                 :class="suit('link')"
                 aria-label="First"
                 :href="state.createURL(0)"
-                @click.prevent="refine(0, $event)"
+                @click.exact.left.prevent="refine(0)"
                 >‹‹</a
               >
             </template>
@@ -51,14 +51,14 @@
             name="previous"
             :createURL="() => state.createURL(state.currentRefinement - 1)"
             :is-first-page="state.isFirstPage"
-            :refine="() => refine(state.currentRefinement - 1, $event)"
+            :refine="() => refine(state.currentRefinement - 1)"
           >
             <template v-if="!state.isFirstPage">
               <a
                 :class="suit('link')"
                 aria-label="Previous"
                 :href="state.createURL(state.currentRefinement - 1)"
-                @click.prevent="refine(state.currentRefinement - 1, $event)"
+                @click.exact.left.prevent="refine(state.currentRefinement - 1)"
                 >‹</a
               >
             </template>
@@ -83,13 +83,13 @@
             :createURL="() => state.createURL(page)"
             :is-first-page="state.isFirstPage"
             :is-last-page="state.isLastPage"
-            :refine="() => refine(page, $event)"
+            :refine="() => refine(page)"
           >
             <a
               :class="suit('link')"
               :href="state.createURL(page)"
               :aria-label="`Page ${page + 1}`"
-              @click.prevent="refine(page, $event)"
+              @click.exact.left.prevent="refine(page)"
               >{{ page + 1 }}</a
             >
           </slot>
@@ -107,14 +107,14 @@
             name="next"
             :createURL="() => state.createURL(state.currentRefinement + 1)"
             :is-last-page="state.isLastPage"
-            :refine="() => refine(state.currentRefinement + 1, $event)"
+            :refine="() => refine(state.currentRefinement + 1)"
           >
             <template v-if="!state.isLastPage">
               <a
                 :class="suit('link')"
                 aria-label="Next"
                 :href="state.createURL(state.currentRefinement + 1)"
-                @click.prevent="refine(state.currentRefinement + 1, $event)"
+                @click.exact.left.prevent="refine(state.currentRefinement + 1)"
                 >›</a
               >
             </template>
@@ -135,14 +135,14 @@
             name="last"
             :createURL="() => state.createURL(state.nbPages - 1)"
             :is-last-page="state.isLastPage"
-            :refine="() => refine(state.nbPages - 1, $event)"
+            :refine="() => refine(state.nbPages - 1)"
           >
             <template v-if="!state.isLastPage">
               <a
                 :class="suit('link')"
                 aria-label="Last"
                 :href="state.createURL(state.nbPages - 1)"
-                @click.prevent="refine(state.nbPages - 1, $event)"
+                @click.exact.left.prevent="refine(state.nbPages - 1)"
                 >››</a
               >
             </template>
@@ -162,7 +162,6 @@ import { connectPagination } from 'instantsearch.js/es/connectors';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 import { createWidgetMixin } from '../mixins/widget';
-import { isModifierClick } from '../util/isModifierClick';
 
 export default {
   name: 'AisPagination',
@@ -220,11 +219,7 @@ export default {
   },
   emits: ['page-change'],
   methods: {
-    refine(page, event) {
-      if (isModifierClick(event)) {
-        return;
-      }
-
+    refine(page) {
       const p = Math.min(Math.max(page, 0), this.state.nbPages - 1);
       this.state.refine(p);
       // TODO: do this in a general way
diff --git a/packages/vue-instantsearch/src/util/isModifierClick.js b/packages/vue-instantsearch/src/util/isModifierClick.js
deleted file mode 100644
index de67e51d15..0000000000
--- a/packages/vue-instantsearch/src/util/isModifierClick.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export function isModifierClick(event) {
-  const isMiddleClick = event.button === 1;
-
-  return Boolean(
-    isMiddleClick ||
-      event.altKey ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.shiftKey
-  );
-}

From d6cbd566b0a17f5fa697159a45699f8a3f6573ef Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Wed, 6 Sep 2023 14:57:22 +0200
Subject: [PATCH 04/11] test(pagination): add common test suite

---
 .../src/components/Pagination/Pagination.tsx  |    3 +-
 .../src/widgets/__tests__/Pagination.test.tsx | 1969 ----------------
 .../src/components/Pagination.vue             |   13 +-
 tests/common/widgets/pagination/index.ts      |    2 +
 tests/common/widgets/pagination/options.ts    | 2037 +++++++++++++++++
 tests/utils/normalizeSnapshot.ts              |    4 +-
 6 files changed, 2051 insertions(+), 1977 deletions(-)
 create mode 100644 tests/common/widgets/pagination/options.ts

diff --git a/packages/instantsearch.js/src/components/Pagination/Pagination.tsx b/packages/instantsearch.js/src/components/Pagination/Pagination.tsx
index e6e14db5c4..94c1fa4bfd 100644
--- a/packages/instantsearch.js/src/components/Pagination/Pagination.tsx
+++ b/packages/instantsearch.js/src/components/Pagination/Pagination.tsx
@@ -158,8 +158,8 @@ function PaginationLink({
     <li
       className={cx(
         cssClasses.item,
-        className,
         isDisabled && cssClasses.disabledItem,
+        className,
         isSelected && cssClasses.selectedItem
       )}
     >
@@ -168,6 +168,7 @@ function PaginationLink({
           rootTagName="span"
           rootProps={{
             className: cssClasses.link,
+            'aria-label': ariaLabel,
           }}
           templateKey={templateKey}
           templates={templates}
diff --git a/packages/react-instantsearch/src/widgets/__tests__/Pagination.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/Pagination.test.tsx
index 5a10467aba..259b09ecf8 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/Pagination.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/Pagination.test.tsx
@@ -39,1975 +39,6 @@ function createMockedSearchClient({ nbPages }: { nbPages?: number } = {}) {
 }
 
 describe('Pagination', () => {
-  test('renders with default props', async () => {
-    const { container } = render(
-      <InstantSearchTestWrapper>
-        <Pagination />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(container.querySelectorAll('.ais-Pagination-item').length).toEqual(
-        5
-      )
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination ais-Pagination--noRefinement"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
-            >
-              <span
-                aria-label="Next"
-                class="ais-Pagination-link"
-              >
-                ›
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
-            >
-              <span
-                aria-label="Last"
-                class="ais-Pagination-link"
-              >
-                ››
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('renders with props', async () => {
-    const searchClient = createMockedSearchClient();
-    const { container } = render(
-      <InstantSearchTestWrapper searchClient={searchClient}>
-        <Pagination />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        document.querySelectorAll('.ais-Pagination-item--page')
-      ).toHaveLength(7)
-    );
-
-    expect(
-      document.querySelectorAll('.ais-Pagination-item--page')[0]
-    ).toHaveClass('ais-Pagination-item--selected');
-    expect(
-      document.querySelector('.ais-Pagination-item--firstPage')
-    ).toHaveClass('ais-Pagination-item--disabled');
-    expect(
-      document.querySelector('.ais-Pagination-item--previousPage')
-    ).toHaveClass('ais-Pagination-item--disabled');
-    expect(
-      document.querySelector('.ais-Pagination-item--nextPage')
-    ).not.toHaveClass('ais-Pagination-item--disabled');
-    expect(
-      document.querySelector('.ais-Pagination-item--lastPage')
-    ).not.toHaveClass('ais-Pagination-item--disabled');
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('navigates between pages', async () => {
-    const searchClient = createMockedSearchClient();
-    const { container, getByText } = render(
-      <InstantSearchTestWrapper searchClient={searchClient}>
-        <Pagination />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        document.querySelectorAll('.ais-Pagination-item--page')
-      ).toHaveLength(7)
-    );
-
-    expect(
-      document.querySelector('.ais-Pagination-item--selected')
-    ).toHaveTextContent('1');
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-
-    const firstPageItem = document.querySelector(
-      '.ais-Pagination-item--firstPage'
-    );
-    const previousPageItem = document.querySelector(
-      '.ais-Pagination-item--previousPage'
-    );
-    const nextPageItem = document.querySelector(
-      '.ais-Pagination-item--nextPage'
-    );
-    const lastPageItem = document.querySelector(
-      '.ais-Pagination-item--lastPage'
-    );
-
-    searchClient.search.mockClear();
-
-    // We're on page 1, "First" and "Previous" links are disabled
-    expect(firstPageItem).toHaveClass('ais-Pagination-item--disabled');
-    expect(previousPageItem).toHaveClass('ais-Pagination-item--disabled');
-
-    userEvent.click(
-      firstPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
-    );
-    userEvent.click(
-      previousPageItem!.querySelector(
-        '.ais-Pagination-link'
-      ) as HTMLAnchorElement
-    );
-
-    await waitFor(() => expect(searchClient.search).not.toHaveBeenCalled());
-
-    // We navigate to page 2
-    userEvent.click(getByText('2'));
-
-    await waitFor(() => {
-      expect(searchClient.search).toHaveBeenLastCalledWith([
-        expect.objectContaining({
-          params: expect.objectContaining({ page: 1 }),
-        }),
-      ]);
-      expect(
-        document.querySelector('.ais-Pagination-item--selected')
-      ).toHaveTextContent('2');
-    });
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-
-    // We click on "Next" link
-    userEvent.click(getByText('›'));
-
-    await waitFor(() => {
-      expect(searchClient.search).toHaveBeenLastCalledWith([
-        expect.objectContaining({
-          params: expect.objectContaining({ page: 2 }),
-        }),
-      ]);
-      expect(
-        document.querySelector('.ais-Pagination-item--selected')
-      ).toHaveTextContent('3');
-    });
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-
-    // We click on "Last" link
-    userEvent.click(getByText('››'));
-
-    await waitFor(() => {
-      expect(searchClient.search).toHaveBeenLastCalledWith([
-        expect.objectContaining({
-          params: expect.objectContaining({ page: 49 }),
-        }),
-      ]);
-      expect(
-        document.querySelector('.ais-Pagination-item--selected')
-      ).toHaveTextContent('50');
-    });
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 44"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                44
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 45"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                45
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 46"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                46
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 47"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                47
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 48"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                48
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 49"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                49
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 50"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                50
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
-            >
-              <span
-                aria-label="Next"
-                class="ais-Pagination-link"
-              >
-                ›
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
-            >
-              <span
-                aria-label="Last"
-                class="ais-Pagination-link"
-              >
-                ››
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-
-    searchClient.search.mockClear();
-
-    // We're on last page, "Next" and "Last" links are disabled
-    expect(nextPageItem).toHaveClass('ais-Pagination-item--disabled');
-    expect(lastPageItem).toHaveClass('ais-Pagination-item--disabled');
-
-    userEvent.click(
-      nextPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
-    );
-    userEvent.click(
-      lastPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
-    );
-
-    await waitFor(() => expect(searchClient.search).not.toHaveBeenCalled());
-
-    // We click on "Previous" link
-    userEvent.click(
-      previousPageItem!.querySelector(
-        '.ais-Pagination-link'
-      ) as HTMLAnchorElement
-    );
-
-    await waitFor(() => {
-      expect(searchClient.search).toHaveBeenLastCalledWith([
-        expect.objectContaining({
-          params: expect.objectContaining({ page: 48 }),
-        }),
-      ]);
-      expect(
-        document.querySelector('.ais-Pagination-item--selected')
-      ).toHaveTextContent('49');
-    });
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 44"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                44
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 45"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                45
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 46"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                46
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 47"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                47
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 48"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                48
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 49"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                49
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 50"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                50
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-
-    // We click on "First" link
-    userEvent.click(
-      firstPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
-    );
-
-    await waitFor(() => {
-      expect(searchClient.search).toHaveBeenLastCalledWith([
-        expect.objectContaining({
-          params: expect.objectContaining({ page: 0 }),
-        }),
-      ]);
-      expect(
-        document.querySelector('.ais-Pagination-item--selected')
-      ).toHaveTextContent('1');
-    });
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('does not navigate when pressing a modifier key', async () => {
-    const searchClient = createMockedSearchClient();
-    const { getByText } = render(
-      <InstantSearchTestWrapper searchClient={searchClient}>
-        <Pagination />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() => expect(searchClient.search).toHaveBeenCalledTimes(1));
-
-    searchClient.search.mockClear();
-
-    const firstPageItem = document.querySelector(
-      '.ais-Pagination-item--firstPage'
-    );
-    const firstPageLink = firstPageItem!.querySelector('.ais-Pagination-link');
-
-    userEvent.click(firstPageLink as HTMLAnchorElement, { button: 1 });
-    userEvent.click(firstPageLink as HTMLAnchorElement, { altKey: true });
-    userEvent.click(firstPageLink as HTMLAnchorElement, { ctrlKey: true });
-    userEvent.click(firstPageLink as HTMLAnchorElement, { metaKey: true });
-    userEvent.click(firstPageLink as HTMLAnchorElement, { shiftKey: true });
-
-    const previousPageItem = document.querySelector(
-      '.ais-Pagination-item--previousPage'
-    );
-    const previousPageLink = previousPageItem!.querySelector(
-      '.ais-Pagination-link'
-    );
-
-    userEvent.click(previousPageLink as HTMLAnchorElement, { button: 1 });
-    userEvent.click(previousPageLink as HTMLAnchorElement, { altKey: true });
-    userEvent.click(previousPageLink as HTMLAnchorElement, { ctrlKey: true });
-    userEvent.click(previousPageLink as HTMLAnchorElement, { metaKey: true });
-    userEvent.click(previousPageLink as HTMLAnchorElement, { shiftKey: true });
-
-    const nextPageItem = document.querySelector(
-      '.ais-Pagination-item--nextPage'
-    );
-    const nextPageLink = nextPageItem!.querySelector('.ais-Pagination-link');
-
-    userEvent.click(nextPageLink as HTMLAnchorElement, { button: 1 });
-    userEvent.click(nextPageLink as HTMLAnchorElement, { altKey: true });
-    userEvent.click(nextPageLink as HTMLAnchorElement, { ctrlKey: true });
-    userEvent.click(nextPageLink as HTMLAnchorElement, { metaKey: true });
-    userEvent.click(nextPageLink as HTMLAnchorElement, { shiftKey: true });
-
-    const lastPageItem = document.querySelector(
-      '.ais-Pagination-item--lastPage'
-    );
-    const lastPageLink = lastPageItem!.querySelector('.ais-Pagination-link');
-
-    userEvent.click(lastPageLink as HTMLAnchorElement, { button: 1 });
-    userEvent.click(lastPageLink as HTMLAnchorElement, { altKey: true });
-    userEvent.click(lastPageLink as HTMLAnchorElement, { ctrlKey: true });
-    userEvent.click(lastPageLink as HTMLAnchorElement, { metaKey: true });
-    userEvent.click(lastPageLink as HTMLAnchorElement, { shiftKey: true });
-
-    const pageOneLink = getByText('1');
-
-    userEvent.click(pageOneLink as HTMLAnchorElement, { button: 1 });
-    userEvent.click(pageOneLink as HTMLAnchorElement, { altKey: true });
-    userEvent.click(pageOneLink as HTMLAnchorElement, { ctrlKey: true });
-    userEvent.click(pageOneLink as HTMLAnchorElement, { metaKey: true });
-    userEvent.click(pageOneLink as HTMLAnchorElement, { shiftKey: true });
-
-    expect(searchClient.search).not.toHaveBeenCalled();
-  });
-
-  test('adds items around the current one', async () => {
-    const searchClient = createMockedSearchClient();
-    const { container } = render(
-      <InstantSearchTestWrapper searchClient={searchClient}>
-        <Pagination padding={4} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        document.querySelectorAll('.ais-Pagination-item--page')
-      ).toHaveLength(9)
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 8"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                8
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 9"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                9
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('does not add items around the current one when there are not enough pages', async () => {
-    const client = createAlgoliaSearchClient({
-      search: jest.fn((requests: Parameters<SearchClient['search']>[0]) =>
-        Promise.resolve(
-          createMultiSearchResponse(
-            ...requests.map((request) =>
-              createSingleSearchResponse({
-                hits: Array.from({ length: 120 }).map((_, index) => ({
-                  objectID: String(index),
-                })),
-                index: request.indexName,
-              })
-            )
-          )
-        )
-      ) as MockSearchClient['search'],
-    });
-
-    const { container } = render(
-      <InstantSearchTestWrapper searchClient={client}>
-        <Pagination padding={4} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        document.querySelectorAll('.ais-Pagination-item--page')
-      ).toHaveLength(6)
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('limits the total pages to display', async () => {
-    const searchClient = createMockedSearchClient();
-    const { container } = render(
-      <InstantSearchTestWrapper searchClient={searchClient}>
-        <Pagination totalPages={4} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        document.querySelectorAll('.ais-Pagination-item--page')
-      ).toHaveLength(4)
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('hides the "First" item when `showFirst` is `false`', async () => {
-    const { container } = render(
-      <InstantSearchTestWrapper>
-        <Pagination showFirst={false} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        Array.from(container.querySelectorAll('.ais-Pagination-item')).map(
-          (item) => item.textContent
-        )
-      ).toEqual(['‹', '1', '›', '››'])
-    );
-
-    expect(
-      document.querySelector('.ais-Pagination-item--firstPage')
-    ).toBeNull();
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination ais-Pagination--noRefinement"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
-            >
-              <span
-                aria-label="Next"
-                class="ais-Pagination-link"
-              >
-                ›
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
-            >
-              <span
-                aria-label="Last"
-                class="ais-Pagination-link"
-              >
-                ››
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('hides the "Previous" item when `showPrevious` is `false`', async () => {
-    const { container } = render(
-      <InstantSearchTestWrapper>
-        <Pagination showPrevious={false} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        Array.from(container.querySelectorAll('.ais-Pagination-item')).map(
-          (item) => item.textContent
-        )
-      ).toEqual(['‹‹', '1', '›', '››'])
-    );
-
-    expect(
-      document.querySelector('.ais-Pagination-item--previousPage')
-    ).toBeNull();
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination ais-Pagination--noRefinement"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
-            >
-              <span
-                aria-label="Next"
-                class="ais-Pagination-link"
-              >
-                ›
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
-            >
-              <span
-                aria-label="Last"
-                class="ais-Pagination-link"
-              >
-                ››
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('hides the "Next" item when `showNext` is `false`', async () => {
-    const { container } = render(
-      <InstantSearchTestWrapper>
-        <Pagination showNext={false} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        Array.from(container.querySelectorAll('.ais-Pagination-item')).map(
-          (item) => item.textContent
-        )
-      ).toEqual(['‹‹', '‹', '1', '››'])
-    );
-
-    expect(document.querySelector('.ais-Pagination-item--nextPage')).toBeNull();
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination ais-Pagination--noRefinement"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
-            >
-              <span
-                aria-label="Last"
-                class="ais-Pagination-link"
-              >
-                ››
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
-  test('hides the "Last" item when `showLast` is `false`', async () => {
-    const { container } = render(
-      <InstantSearchTestWrapper>
-        <Pagination showLast={false} />
-      </InstantSearchTestWrapper>
-    );
-
-    await waitFor(() =>
-      expect(
-        Array.from(container.querySelectorAll('.ais-Pagination-item')).map(
-          (item) => item.textContent
-        )
-      ).toEqual(['‹‹', '‹', '1', '›'])
-    );
-
-    expect(document.querySelector('.ais-Pagination-item--lastPage')).toBeNull();
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <div
-          class="ais-Pagination ais-Pagination--noRefinement"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
-            >
-              <span
-                aria-label="Next"
-                class="ais-Pagination-link"
-              >
-                ›
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    `);
-  });
-
   test('forwards custom class names and `div` props to the root element', () => {
     const { container } = render(
       <InstantSearchTestWrapper>
diff --git a/packages/vue-instantsearch/src/components/Pagination.vue b/packages/vue-instantsearch/src/components/Pagination.vue
index a1982e4cb8..b4420b5aab 100644
--- a/packages/vue-instantsearch/src/components/Pagination.vue
+++ b/packages/vue-instantsearch/src/components/Pagination.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="state" :class="suit()">
+  <div
+    v-if="state"
+    :class="{ [suit()]: true, [suit('', 'noRefinement')]: state.nbPages <= 1 }"
+  >
     <slot
       :refine="refine"
       :createURL="state.createURL"
@@ -14,8 +17,8 @@
         <li
           :class="{
             [suit('item')]: true,
-            [suit('item', 'firstPage')]: true,
             [suit('item', 'disabled')]: state.isFirstPage,
+            [suit('item', 'firstPage')]: true,
           }"
           v-if="showFirst"
         >
@@ -42,8 +45,8 @@
         <li
           :class="{
             [suit('item')]: true,
-            [suit('item', 'previousPage')]: true,
             [suit('item', 'disabled')]: state.isFirstPage,
+            [suit('item', 'previousPage')]: true,
           }"
           v-if="showPrevious"
         >
@@ -98,8 +101,8 @@
         <li
           :class="{
             [suit('item')]: true,
-            [suit('item', 'nextPage')]: true,
             [suit('item', 'disabled')]: state.isLastPage,
+            [suit('item', 'nextPage')]: true,
           }"
           v-if="showNext"
         >
@@ -126,8 +129,8 @@
         <li
           :class="{
             [suit('item')]: true,
-            [suit('item', 'lastPage')]: true,
             [suit('item', 'disabled')]: state.isLastPage,
+            [suit('item', 'lastPage')]: true,
           }"
           v-if="showLast"
         >
diff --git a/tests/common/widgets/pagination/index.ts b/tests/common/widgets/pagination/index.ts
index 438d92e610..1c18766cbf 100644
--- a/tests/common/widgets/pagination/index.ts
+++ b/tests/common/widgets/pagination/index.ts
@@ -1,6 +1,7 @@
 import { fakeAct } from '../../common';
 
 import { createOptimisticUiTests } from './optimistic-ui';
+import { createOptionsTests } from './options';
 
 import type { TestOptions, TestSetup } from '../../common';
 import type { PaginationWidget } from 'instantsearch.js/es/widgets/pagination/pagination';
@@ -20,5 +21,6 @@ export function createPaginationWidgetTests(
 
   describe('Pagination widget common tests', () => {
     createOptimisticUiTests(setup, { act, skippedTests });
+    createOptionsTests(setup, { act, skippedTests });
   });
 }
diff --git a/tests/common/widgets/pagination/options.ts b/tests/common/widgets/pagination/options.ts
new file mode 100644
index 0000000000..7310f7d9f4
--- /dev/null
+++ b/tests/common/widgets/pagination/options.ts
@@ -0,0 +1,2037 @@
+import {
+  createAlgoliaSearchClient,
+  createMultiSearchResponse,
+  createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import {
+  normalizeSnapshot as commonNormalizeSnapshot,
+  wait,
+} from '@instantsearch/testutils';
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+
+import type { PaginationWidgetSetup } from '.';
+import type { TestOptions } from '../../common';
+import type { MockSearchClient } from '@instantsearch/mocks';
+import type { SearchClient } from 'instantsearch.js';
+
+function normalizeSnapshot(html: string) {
+  // InstantSearch.js uses different text in the page items.
+  // @MAJOR: Standardize page item text between all flavors.
+  return commonNormalizeSnapshot(html).replace('«', '‹‹').replace('»', '››');
+}
+
+export function createOptionsTests(
+  setup: PaginationWidgetSetup,
+  { act }: Required<TestOptions>
+) {
+  describe('options', () => {
+    test('renders with default props', async () => {
+      const searchClient = createMockedSearchClient();
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {},
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelectorAll('.ais-Pagination-item--page')
+      ).toHaveLength(7);
+      expect(
+        document.querySelectorAll('.ais-Pagination-item--page')[0]
+      ).toHaveClass('ais-Pagination-item--selected');
+      expect(
+        document.querySelector('.ais-Pagination-item--firstPage')
+      ).toHaveClass('ais-Pagination-item--disabled');
+      expect(
+        document.querySelector('.ais-Pagination-item--previousPage')
+      ).toHaveClass('ais-Pagination-item--disabled');
+      expect(
+        document.querySelector('.ais-Pagination-item--nextPage')
+      ).not.toHaveClass('ais-Pagination-item--disabled');
+      expect(
+        document.querySelector('.ais-Pagination-item--lastPage')
+      ).not.toHaveClass('ais-Pagination-item--disabled');
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 7"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                7
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('navigates between pages', async () => {
+      const searchClient = createMockedSearchClient();
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {},
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelectorAll('.ais-Pagination-item--page')
+      ).toHaveLength(7);
+      expect(
+        document.querySelector('.ais-Pagination-item--selected')
+      ).toHaveTextContent('1');
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 7"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                7
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+
+      const firstPageItem = document.querySelector(
+        '.ais-Pagination-item--firstPage'
+      );
+      const previousPageItem = document.querySelector(
+        '.ais-Pagination-item--previousPage'
+      );
+      const nextPageItem = document.querySelector(
+        '.ais-Pagination-item--nextPage'
+      );
+      const lastPageItem = document.querySelector(
+        '.ais-Pagination-item--lastPage'
+      );
+
+      searchClient.search.mockClear();
+
+      // We're on page 1, "First" and "Previous" links are disabled
+      expect(firstPageItem).toHaveClass('ais-Pagination-item--disabled');
+      expect(previousPageItem).toHaveClass('ais-Pagination-item--disabled');
+
+      userEvent.click(
+        firstPageItem!.querySelector(
+          '.ais-Pagination-link'
+        ) as HTMLAnchorElement
+      );
+      userEvent.click(
+        previousPageItem!.querySelector(
+          '.ais-Pagination-link'
+        ) as HTMLAnchorElement
+      );
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).not.toHaveBeenCalled();
+
+      // We navigate to page 2
+      userEvent.click(screen.getByText('2'));
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        expect.objectContaining({
+          params: expect.objectContaining({ page: 1 }),
+        }),
+      ]);
+      expect(
+        document.querySelector('.ais-Pagination-item--selected')
+      ).toHaveTextContent('2');
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--firstPage"
+            >
+              <a
+                aria-label="First"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--previousPage"
+            >
+              <a
+                aria-label="Previous"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 7"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                7
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+
+      // We click on "Next" link
+      userEvent.click(screen.getByText('›'));
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        expect.objectContaining({
+          params: expect.objectContaining({ page: 2 }),
+        }),
+      ]);
+      expect(
+        document.querySelector('.ais-Pagination-item--selected')
+      ).toHaveTextContent('3');
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--firstPage"
+            >
+              <a
+                aria-label="First"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--previousPage"
+            >
+              <a
+                aria-label="Previous"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 7"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                7
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+
+      // We click on "Last" link
+      // InstantSearch.js uses different text in the page items.
+      // @MAJOR: Standardize page item text between all flavors.
+      userEvent.click(screen.queryByText('››') || screen.getByText('»'));
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        expect.objectContaining({
+          params: expect.objectContaining({ page: 49 }),
+        }),
+      ]);
+      expect(
+        document.querySelector('.ais-Pagination-item--selected')
+      ).toHaveTextContent('50');
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--firstPage"
+            >
+              <a
+                aria-label="First"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--previousPage"
+            >
+              <a
+                aria-label="Previous"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 44"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                44
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 45"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                45
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 46"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                46
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 47"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                47
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 48"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                48
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 49"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                49
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 50"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                50
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
+            >
+              <span
+                aria-label="Next"
+                class="ais-Pagination-link"
+              >
+                ›
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
+            >
+              <span
+                aria-label="Last"
+                class="ais-Pagination-link"
+              >
+                ››
+              </span>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+
+      searchClient.search.mockClear();
+
+      // We're on last page, "Next" and "Last" links are disabled
+      expect(nextPageItem).toHaveClass('ais-Pagination-item--disabled');
+      expect(lastPageItem).toHaveClass('ais-Pagination-item--disabled');
+
+      userEvent.click(
+        nextPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
+      );
+      userEvent.click(
+        lastPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
+      );
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).not.toHaveBeenCalled();
+
+      // We click on "Previous" link
+      userEvent.click(
+        previousPageItem!.querySelector(
+          '.ais-Pagination-link'
+        ) as HTMLAnchorElement
+      );
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        expect.objectContaining({
+          params: expect.objectContaining({ page: 48 }),
+        }),
+      ]);
+      expect(
+        document.querySelector('.ais-Pagination-item--selected')
+      ).toHaveTextContent('49');
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--firstPage"
+            >
+              <a
+                aria-label="First"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--previousPage"
+            >
+              <a
+                aria-label="Previous"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ‹
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 44"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                44
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 45"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                45
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 46"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                46
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 47"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                47
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 48"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                48
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 49"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                49
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 50"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                50
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+
+      // We click on "First" link
+      userEvent.click(
+        firstPageItem!.querySelector(
+          '.ais-Pagination-link'
+        ) as HTMLAnchorElement
+      );
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        expect.objectContaining({
+          params: expect.objectContaining({ page: 0 }),
+        }),
+      ]);
+      expect(
+        document.querySelector('.ais-Pagination-item--selected')
+      ).toHaveTextContent('1');
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 7"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                7
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('does not navigate when pressing a modifier key', async () => {
+      const searchClient = createMockedSearchClient();
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {},
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenCalledTimes(1);
+
+      searchClient.search.mockClear();
+
+      const firstPageItem = document.querySelector(
+        '.ais-Pagination-item--firstPage'
+      )!;
+      const firstPageLink = firstPageItem.querySelector<HTMLAnchorElement>(
+        '.ais-Pagination-link'
+      )!;
+
+      userEvent.click(firstPageLink, { button: 1 });
+      userEvent.click(firstPageLink, { altKey: true });
+      userEvent.click(firstPageLink, { ctrlKey: true });
+      userEvent.click(firstPageLink, { metaKey: true });
+      userEvent.click(firstPageLink, { shiftKey: true });
+
+      const previousPageItem = document.querySelector(
+        '.ais-Pagination-item--previousPage'
+      )!;
+      const previousPageLink =
+        previousPageItem.querySelector<HTMLAnchorElement>(
+          '.ais-Pagination-link'
+        )!;
+
+      userEvent.click(previousPageLink, { button: 1 });
+      userEvent.click(previousPageLink, { altKey: true });
+      userEvent.click(previousPageLink, { ctrlKey: true });
+      userEvent.click(previousPageLink, { metaKey: true });
+      userEvent.click(previousPageLink, {
+        shiftKey: true,
+      });
+
+      const nextPageItem = document.querySelector(
+        '.ais-Pagination-item--nextPage'
+      );
+      const nextPageLink = nextPageItem!.querySelector<HTMLAnchorElement>(
+        '.ais-Pagination-link'
+      )!;
+
+      userEvent.click(nextPageLink, { button: 1 });
+      userEvent.click(nextPageLink, { altKey: true });
+      userEvent.click(nextPageLink, { ctrlKey: true });
+      userEvent.click(nextPageLink, { metaKey: true });
+      userEvent.click(nextPageLink, { shiftKey: true });
+
+      const lastPageItem = document.querySelector(
+        '.ais-Pagination-item--lastPage'
+      );
+      const lastPageLink = lastPageItem!.querySelector<HTMLAnchorElement>(
+        '.ais-Pagination-link'
+      )!;
+
+      userEvent.click(lastPageLink, { button: 1 });
+      userEvent.click(lastPageLink, { altKey: true });
+      userEvent.click(lastPageLink, { ctrlKey: true });
+      userEvent.click(lastPageLink, { metaKey: true });
+      userEvent.click(lastPageLink, { shiftKey: true });
+
+      const pageOneLink = screen.getByText<HTMLAnchorElement>('1');
+
+      userEvent.click(pageOneLink, { button: 1 });
+      userEvent.click(pageOneLink, { altKey: true });
+      userEvent.click(pageOneLink, { ctrlKey: true });
+      userEvent.click(pageOneLink, { metaKey: true });
+      userEvent.click(pageOneLink, { shiftKey: true });
+
+      expect(searchClient.search).not.toHaveBeenCalled();
+    });
+
+    test('adds items around the current one', async () => {
+      const searchClient = createMockedSearchClient();
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { padding: 4 },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelectorAll('.ais-Pagination-item--page')
+      ).toHaveLength(9);
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 7"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                7
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 8"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                8
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 9"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                9
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('does not add items around the current one when there are not enough pages', async () => {
+      const searchClient = createMockedSearchClient({ nbHits: 120 });
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { padding: 4 },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelectorAll('.ais-Pagination-item--page')
+      ).toHaveLength(6);
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 5"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                5
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 6"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                6
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('limits the total pages to display', async () => {
+      const searchClient = createMockedSearchClient();
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { totalPages: 4 },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelectorAll('.ais-Pagination-item--page')
+      ).toHaveLength(4);
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 2"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                2
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 3"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                3
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page"
+            >
+              <a
+                aria-label="Page 4"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                4
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--nextPage"
+            >
+              <a
+                aria-label="Next"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ›
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--lastPage"
+            >
+              <a
+                aria-label="Last"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                ››
+              </a>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('hides the "First" item when `showFirst` is `false`', async () => {
+      const searchClient = createAlgoliaSearchClient({});
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { showFirst: false },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelector('.ais-Pagination-item--firstPage')
+      ).toBeNull();
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination ais-Pagination--noRefinement"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
+            >
+              <span
+                aria-label="Next"
+                class="ais-Pagination-link"
+              >
+                ›
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
+            >
+              <span
+                aria-label="Last"
+                class="ais-Pagination-link"
+              >
+                ››
+              </span>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('hides the "Previous" item when `showPrevious` is `false`', async () => {
+      const searchClient = createAlgoliaSearchClient({});
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { showPrevious: false },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelector('.ais-Pagination-item--previousPage')
+      ).toBeNull();
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination ais-Pagination--noRefinement"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
+            >
+              <span
+                aria-label="Next"
+                class="ais-Pagination-link"
+              >
+                ›
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
+            >
+              <span
+                aria-label="Last"
+                class="ais-Pagination-link"
+              >
+                ››
+              </span>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('hides the "Next" item when `showNext` is `false`', async () => {
+      const searchClient = createAlgoliaSearchClient({});
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { showNext: false },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelector('.ais-Pagination-item--nextPage')
+      ).toBeNull();
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination ais-Pagination--noRefinement"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
+            >
+              <span
+                aria-label="Last"
+                class="ais-Pagination-link"
+              >
+                ››
+              </span>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+
+    test('hides the "Last" item when `showLast` is `false`', async () => {
+      const searchClient = createAlgoliaSearchClient({});
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: { showLast: false },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(
+        document.querySelector('.ais-Pagination-item--lastPage')
+      ).toBeNull();
+
+      expect(
+        document.querySelector('.ais-Pagination')
+      ).toMatchNormalizedInlineSnapshot(
+        normalizeSnapshot,
+        `
+        <div
+          class="ais-Pagination ais-Pagination--noRefinement"
+        >
+          <ul
+            class="ais-Pagination-list"
+          >
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
+            >
+              <span
+                aria-label="First"
+                class="ais-Pagination-link"
+              >
+                ‹‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
+            >
+              <span
+                aria-label="Previous"
+                class="ais-Pagination-link"
+              >
+                ‹
+              </span>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
+            >
+              <a
+                aria-label="Page 1"
+                class="ais-Pagination-link"
+                href="#"
+              >
+                1
+              </a>
+            </li>
+            <li
+              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
+            >
+              <span
+                aria-label="Next"
+                class="ais-Pagination-link"
+              >
+                ›
+              </span>
+            </li>
+          </ul>
+        </div>
+      `
+      );
+    });
+  });
+}
+
+function createMockedSearchClient({ nbHits = 1000 }: { nbHits?: number } = {}) {
+  return createAlgoliaSearchClient({
+    search: jest.fn((requests) =>
+      Promise.resolve(
+        createMultiSearchResponse(
+          ...requests.map(
+            (request: Parameters<SearchClient['search']>[0][number]) =>
+              createSingleSearchResponse({
+                hits: Array.from({ length: nbHits }).map((_, index) => ({
+                  objectID: String(index),
+                })),
+                index: request.indexName,
+              })
+          )
+        )
+      )
+    ) as MockSearchClient['search'],
+  });
+}
diff --git a/tests/utils/normalizeSnapshot.ts b/tests/utils/normalizeSnapshot.ts
index ab93b30eb5..3fd53aa133 100644
--- a/tests/utils/normalizeSnapshot.ts
+++ b/tests/utils/normalizeSnapshot.ts
@@ -16,8 +16,8 @@ export function normalizeSnapshot(html: string) {
       // Vue renders extra whitespace between span elements
       .replace(/<\/span> <span/g, '</span><span')
       // Vue renders an empty comment for falsy v-if predicates
-      .replace(/(\s+)?<!---->/g, '') // Vue 2
-      .replace(/(\s+)?<!--v-if-->/g, '') // Vue 3
+      .replace(/(\s+)?<!---->(\s+)?/g, '') // Vue 2
+      .replace(/(\s+)?<!--v-if-->(\s+)?/g, '') // Vue 3
       // Vue renders extra whitespace after list elements
       .replace(/<\/ul> </g, '</ul><')
   );

From 451140d53722a8b1eddfa58b899b977b010d8927 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Wed, 6 Sep 2023 15:03:01 +0200
Subject: [PATCH 05/11] test: remove unnecessary tests

---
 .../Pagination/__tests__/Pagination-test.tsx  | 146 ------
 .../__snapshots__/Pagination-test.tsx.snap    | 461 ------------------
 .../src/components/__tests__/Pagination.js    | 225 ---------
 .../__snapshots__/Pagination.js.snap          | 282 -----------
 4 files changed, 1114 deletions(-)
 delete mode 100644 packages/instantsearch.js/src/components/Pagination/__tests__/Pagination-test.tsx
 delete mode 100644 packages/instantsearch.js/src/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
 delete mode 100644 packages/vue-instantsearch/src/components/__tests__/Pagination.js
 delete mode 100644 packages/vue-instantsearch/src/components/__tests__/__snapshots__/Pagination.js.snap

diff --git a/packages/instantsearch.js/src/components/Pagination/__tests__/Pagination-test.tsx b/packages/instantsearch.js/src/components/Pagination/__tests__/Pagination-test.tsx
deleted file mode 100644
index edadd914e5..0000000000
--- a/packages/instantsearch.js/src/components/Pagination/__tests__/Pagination-test.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-/** @jsx h */
-
-import { render, fireEvent, createEvent } from '@testing-library/preact';
-import { h } from 'preact';
-
-import Paginator from '../../../connectors/pagination/Paginator';
-import Pagination from '../Pagination';
-
-import type { PaginationProps } from '../Pagination';
-
-describe('Pagination', () => {
-  const pager = new Paginator({
-    currentPage: 0,
-    total: 20,
-    padding: 3,
-  });
-  const defaultProps: PaginationProps = {
-    cssClasses: {
-      root: 'root',
-      noRefinementRoot: 'noRefinementRoot',
-      list: 'list',
-      item: 'item',
-      firstPageItem: 'firstPageItem',
-      lastPageItem: 'lastPageItem',
-      previousPageItem: 'previousPageItem',
-      nextPageItem: 'nextPageItem',
-      pageItem: 'pageItem',
-      selectedItem: 'selectedItem',
-      disabledItem: 'disabledItem',
-      link: 'link',
-    },
-    createURL: (args) => JSON.stringify(args),
-    templates: {
-      first: '',
-      last: '',
-      next: '',
-      page: ({ page }) => `${page}`,
-      previous: '',
-    },
-    currentPage: 0,
-    pages: pager.pages(),
-    isFirstPage: pager.isFirstPage(),
-    isLastPage: pager.isLastPage(),
-    nbPages: 20,
-    setCurrentPage: () => {},
-  };
-
-  it('should render five elements', () => {
-    const { container } = render(<Pagination {...defaultProps} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should display the first/last link', () => {
-    const { container } = render(
-      <Pagination {...defaultProps} showFirst showLast />
-    );
-
-    expect(container.querySelectorAll('.firstPageItem')).toHaveLength(1);
-    expect(container.querySelectorAll('.lastPageItem')).toHaveLength(1);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should add the noRefinement CSS class with a single page', () => {
-    const { container } = render(<Pagination {...defaultProps} nbPages={1} />);
-
-    expect(container.querySelectorAll('.noRefinementRoot')).toHaveLength(1);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should disable last page if already on it', () => {
-    const { container } = render(
-      <Pagination
-        {...defaultProps}
-        showFirst
-        showLast
-        showPrevious
-        showNext
-        pages={[13, 14, 15, 16, 17, 18, 19]}
-        currentPage={19}
-        isFirstPage={false}
-        isLastPage={true}
-      />
-    );
-
-    expect(container.querySelectorAll('.lastPageItem')).toHaveLength(1);
-    expect(
-      container
-        .querySelector('.lastPageItem')
-        ?.classList.contains('disabledItem')
-    ).toBe(true);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('should handle special clicks', () => {
-    const props = {
-      setCurrentPage: jest.fn(),
-    };
-
-    const { container } = render(<Pagination {...defaultProps} {...props} />);
-
-    const firstItem = container.querySelector('.link')!;
-
-    const modifiers = ['ctrlKey', 'shiftKey', 'altKey', 'metaKey'] as const;
-    modifiers.forEach((modifier) => {
-      const clickEvent = createEvent.click(firstItem, { [modifier]: true });
-      fireEvent(firstItem, clickEvent);
-
-      expect(props.setCurrentPage).toHaveBeenCalledTimes(0);
-      expect(clickEvent.defaultPrevented).toBe(false);
-    });
-
-    const clickEvent = createEvent.click(firstItem);
-    fireEvent(firstItem, clickEvent);
-
-    expect(props.setCurrentPage).toHaveBeenCalledTimes(1);
-    expect(clickEvent.defaultPrevented).toBe(true);
-  });
-
-  it('should have all buttons disabled if there are no results', () => {
-    const localPager = new Paginator({
-      currentPage: 0,
-      total: 0,
-      padding: 3,
-    });
-    const { container } = render(
-      <Pagination
-        {...defaultProps}
-        showFirst
-        showLast
-        showPrevious
-        showNext
-        currentPage={0}
-        nbPages={0}
-        pages={localPager.pages()}
-        isFirstPage={localPager.isFirstPage()}
-        isLastPage={localPager.isLastPage()}
-      />
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/packages/instantsearch.js/src/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap b/packages/instantsearch.js/src/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
deleted file mode 100644
index d89a31a68b..0000000000
--- a/packages/instantsearch.js/src/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
+++ /dev/null
@@ -1,461 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pagination should add the noRefinement CSS class with a single page 1`] = `
-<div>
-  <div
-    class="root noRefinementRoot"
-  >
-    <ul
-      class="list"
-    >
-      <li
-        class="item pageItem selectedItem"
-      >
-        <a
-          aria-label="Page 1"
-          class="link"
-          href="0"
-        >
-          1
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 2"
-          class="link"
-          href="1"
-        >
-          2
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 3"
-          class="link"
-          href="2"
-        >
-          3
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 4"
-          class="link"
-          href="3"
-        >
-          4
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 5"
-          class="link"
-          href="4"
-        >
-          5
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 6"
-          class="link"
-          href="5"
-        >
-          6
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 7"
-          class="link"
-          href="6"
-        >
-          7
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Pagination should disable last page if already on it 1`] = `
-<div>
-  <div
-    class="root"
-  >
-    <ul
-      class="list"
-    >
-      <li
-        class="item firstPageItem"
-      >
-        <a
-          aria-label="First"
-          class="link"
-          href="0"
-        />
-      </li>
-      <li
-        class="item previousPageItem"
-      >
-        <a
-          aria-label="Previous"
-          class="link"
-          href="18"
-        />
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 14"
-          class="link"
-          href="13"
-        >
-          14
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 15"
-          class="link"
-          href="14"
-        >
-          15
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 16"
-          class="link"
-          href="15"
-        >
-          16
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 17"
-          class="link"
-          href="16"
-        >
-          17
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 18"
-          class="link"
-          href="17"
-        >
-          18
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 19"
-          class="link"
-          href="18"
-        >
-          19
-        </a>
-      </li>
-      <li
-        class="item pageItem selectedItem"
-      >
-        <a
-          aria-label="Page 20"
-          class="link"
-          href="19"
-        >
-          20
-        </a>
-      </li>
-      <li
-        class="item nextPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-      <li
-        class="item lastPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Pagination should display the first/last link 1`] = `
-<div>
-  <div
-    class="root"
-  >
-    <ul
-      class="list"
-    >
-      <li
-        class="item firstPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-      <li
-        class="item pageItem selectedItem"
-      >
-        <a
-          aria-label="Page 1"
-          class="link"
-          href="0"
-        >
-          1
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 2"
-          class="link"
-          href="1"
-        >
-          2
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 3"
-          class="link"
-          href="2"
-        >
-          3
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 4"
-          class="link"
-          href="3"
-        >
-          4
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 5"
-          class="link"
-          href="4"
-        >
-          5
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 6"
-          class="link"
-          href="5"
-        >
-          6
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 7"
-          class="link"
-          href="6"
-        >
-          7
-        </a>
-      </li>
-      <li
-        class="item lastPageItem"
-      >
-        <a
-          aria-label="Last"
-          class="link"
-          href="19"
-        />
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Pagination should have all buttons disabled if there are no results 1`] = `
-<div>
-  <div
-    class="root noRefinementRoot"
-  >
-    <ul
-      class="list"
-    >
-      <li
-        class="item firstPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-      <li
-        class="item previousPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-      <li
-        class="item pageItem selectedItem"
-      >
-        <a
-          aria-label="Page 1"
-          class="link"
-          href="0"
-        >
-          1
-        </a>
-      </li>
-      <li
-        class="item nextPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-      <li
-        class="item lastPageItem disabledItem"
-      >
-        <span
-          class="link"
-        />
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Pagination should render five elements 1`] = `
-<div>
-  <div
-    class="root"
-  >
-    <ul
-      class="list"
-    >
-      <li
-        class="item pageItem selectedItem"
-      >
-        <a
-          aria-label="Page 1"
-          class="link"
-          href="0"
-        >
-          1
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 2"
-          class="link"
-          href="1"
-        >
-          2
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 3"
-          class="link"
-          href="2"
-        >
-          3
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 4"
-          class="link"
-          href="3"
-        >
-          4
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 5"
-          class="link"
-          href="4"
-        >
-          5
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 6"
-          class="link"
-          href="5"
-        >
-          6
-        </a>
-      </li>
-      <li
-        class="item pageItem"
-      >
-        <a
-          aria-label="Page 7"
-          class="link"
-          href="6"
-        >
-          7
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
diff --git a/packages/vue-instantsearch/src/components/__tests__/Pagination.js b/packages/vue-instantsearch/src/components/__tests__/Pagination.js
deleted file mode 100644
index 6a85eb5a0e..0000000000
--- a/packages/vue-instantsearch/src/components/__tests__/Pagination.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { mount } from '../../../test/utils';
-import { __setState } from '../../mixins/widget';
-import Pagination from '../Pagination.vue';
-import '../../../test/utils/sortedHtmlSerializer';
-
-jest.mock('../../mixins/widget');
-jest.mock('../../mixins/panel');
-
-const defaultState = {
-  createURL: () => '#',
-  refine: jest.fn(),
-  pages: [0, 1, 2, 3, 4, 5, 6],
-  nbPages: 20,
-  currentRefinement: 0,
-  isFirstPage: true,
-  isLastPage: false,
-};
-
-it('accepts a padding prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(Pagination, {
-    propsData: {
-      padding: 5,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.padding).toBe(5);
-});
-
-it('accepts a totalPages prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(Pagination, {
-    propsData: {
-      totalPages: 10,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.totalPages).toBe(10);
-});
-
-it('renders correctly first page', () => {
-  __setState(defaultState);
-  const wrapper = mount(Pagination);
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('renders correctly another page', () => {
-  __setState({
-    ...defaultState,
-    pages: [3, 4, 5, 6, 7, 8, 9],
-    nbPages: 20,
-    currentRefinement: 6,
-    isFirstPage: false,
-    isLastPage: false,
-  });
-  const wrapper = mount(Pagination);
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('renders correctly last page', () => {
-  __setState({
-    ...defaultState,
-    pages: [3, 4, 5, 6, 7, 8, 9],
-    nbPages: 9,
-    currentRefinement: 9,
-    isFirstPage: false,
-    isLastPage: true,
-  });
-  const wrapper = mount(Pagination);
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('Moves to the first page on that button', async () => {
-  __setState({
-    ...defaultState,
-    isFirstPage: false,
-  });
-  const wrapper = mount(Pagination);
-
-  const firstPage = wrapper.find(
-    '.ais-Pagination-item--firstPage .ais-Pagination-link'
-  );
-  await firstPage.trigger('click');
-  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(0);
-});
-
-it('Moves to the next page on that button', async () => {
-  const currentRefinement = 5;
-  __setState({
-    ...defaultState,
-    currentRefinement,
-  });
-  const wrapper = mount(Pagination);
-
-  const nextPage = wrapper.find(
-    '.ais-Pagination-item--nextPage .ais-Pagination-link'
-  );
-  await nextPage.trigger('click');
-  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(
-    currentRefinement + 1
-  );
-});
-
-it('Moves to the last page on that button', async () => {
-  const nbPages = 1000;
-  __setState({
-    ...defaultState,
-    isLastPage: false,
-    nbPages,
-  });
-  const wrapper = mount(Pagination);
-
-  const lastPage = wrapper.find(
-    '.ais-Pagination-item--lastPage .ais-Pagination-link'
-  );
-  await lastPage.trigger('click');
-  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(nbPages - 1);
-});
-
-it('Moves to the previous page on that button', async () => {
-  const currentRefinement = 5;
-  __setState({
-    ...defaultState,
-    isFirstPage: false,
-    currentRefinement,
-  });
-  const wrapper = mount(Pagination);
-
-  const previousPage = wrapper.find(
-    '.ais-Pagination-item--previousPage .ais-Pagination-link'
-  );
-  await previousPage.trigger('click');
-  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(
-    currentRefinement - 1
-  );
-});
-
-it('implements showFirst', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Pagination, {
-    propsData: {
-      showFirst: false,
-    },
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--firstPage').exists()).toBe(false);
-
-  await wrapper.setProps({
-    showFirst: true,
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--firstPage').exists()).toBe(true);
-});
-
-it('implements showPrevious', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Pagination, {
-    propsData: {
-      showPrevious: false,
-    },
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--previousPage').exists()).toBe(
-    false
-  );
-
-  await wrapper.setProps({
-    showPrevious: true,
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--previousPage').exists()).toBe(
-    true
-  );
-});
-
-it('implements showLast', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Pagination, {
-    propsData: {
-      showLast: false,
-    },
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--lastPage').exists()).toBe(false);
-
-  await wrapper.setProps({
-    showLast: true,
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--lastPage').exists()).toBe(true);
-});
-
-it('implements showNext', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(Pagination, {
-    propsData: {
-      showNext: false,
-    },
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--nextPage').exists()).toBe(false);
-
-  await wrapper.setProps({
-    showNext: true,
-  });
-
-  expect(wrapper.find('.ais-Pagination-item--nextPage').exists()).toBe(true);
-});
diff --git a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/Pagination.js.snap b/packages/vue-instantsearch/src/components/__tests__/__snapshots__/Pagination.js.snap
deleted file mode 100644
index 624de3cd83..0000000000
--- a/packages/vue-instantsearch/src/components/__tests__/__snapshots__/Pagination.js.snap
+++ /dev/null
@@ -1,282 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly another page 1`] = `
-<div class="ais-Pagination">
-  <ul class="ais-Pagination-list">
-    <li class="ais-Pagination-item ais-Pagination-item--firstPage">
-      <a aria-label="First"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ‹‹
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--previousPage">
-      <a aria-label="Previous"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ‹
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 4"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        4
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 5"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        5
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 6"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        6
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-      <a aria-label="Page 7"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        7
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 8"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        8
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 9"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        9
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 10"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        10
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--nextPage">
-      <a aria-label="Next"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ›
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--lastPage">
-      <a aria-label="Last"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ››
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`renders correctly first page 1`] = `
-<div class="ais-Pagination">
-  <ul class="ais-Pagination-list">
-    <li class="ais-Pagination-item ais-Pagination-item--firstPage ais-Pagination-item--disabled">
-      <span aria-label="First"
-            class="ais-Pagination-link"
-      >
-        ‹‹
-      </span>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--previousPage ais-Pagination-item--disabled">
-      <span aria-label="Previous"
-            class="ais-Pagination-link"
-      >
-        ‹
-      </span>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-      <a aria-label="Page 1"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        1
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 2"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        2
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 3"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        3
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 4"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        4
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 5"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        5
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 6"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        6
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 7"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        7
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--nextPage">
-      <a aria-label="Next"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ›
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--lastPage">
-      <a aria-label="Last"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ››
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`renders correctly last page 1`] = `
-<div class="ais-Pagination">
-  <ul class="ais-Pagination-list">
-    <li class="ais-Pagination-item ais-Pagination-item--firstPage">
-      <a aria-label="First"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ‹‹
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--previousPage">
-      <a aria-label="Previous"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        ‹
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 4"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        4
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 5"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        5
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 6"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        6
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 7"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        7
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 8"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        8
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a aria-label="Page 9"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        9
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-      <a aria-label="Page 10"
-         class="ais-Pagination-link"
-         href="#"
-      >
-        10
-      </a>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--nextPage ais-Pagination-item--disabled">
-      <span aria-label="Next"
-            class="ais-Pagination-link"
-      >
-        ›
-      </span>
-    </li>
-    <li class="ais-Pagination-item ais-Pagination-item--lastPage ais-Pagination-item--disabled">
-      <span aria-label="Last"
-            class="ais-Pagination-link"
-      >
-        ››
-      </span>
-    </li>
-  </ul>
-</div>
-`;

From 3c879553af6c2e34b501cc89d42ba8f13ae663ac Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 10:05:32 +0200
Subject: [PATCH 06/11] build: increase bundle size

---
 bundlesize.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 8d83809581..1013168aeb 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "63.25 kB"
+      "maxSize": "63.5 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",

From 5e0d4bb5f72f4d5caa5f221bc53175a989fa8a68 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 10:45:00 +0200
Subject: [PATCH 07/11] test: lighten up tests

---
 tests/common/widgets/pagination/options.ts | 752 ++-------------------
 1 file changed, 43 insertions(+), 709 deletions(-)

diff --git a/tests/common/widgets/pagination/options.ts b/tests/common/widgets/pagination/options.ts
index 7310f7d9f4..555a4fa0a9 100644
--- a/tests/common/widgets/pagination/options.ts
+++ b/tests/common/widgets/pagination/options.ts
@@ -59,6 +59,7 @@ export function createOptionsTests(
       expect(
         document.querySelector('.ais-Pagination-item--lastPage')
       ).not.toHaveClass('ais-Pagination-item--disabled');
+
       expect(
         document.querySelector('.ais-Pagination')
       ).toMatchNormalizedInlineSnapshot(
@@ -353,16 +354,16 @@ export function createOptionsTests(
 
       const firstPageItem = document.querySelector(
         '.ais-Pagination-item--firstPage'
-      );
+      )!;
       const previousPageItem = document.querySelector(
         '.ais-Pagination-item--previousPage'
-      );
+      )!;
       const nextPageItem = document.querySelector(
         '.ais-Pagination-item--nextPage'
-      );
+      )!;
       const lastPageItem = document.querySelector(
         '.ais-Pagination-item--lastPage'
-      );
+      )!;
 
       searchClient.search.mockClear();
 
@@ -371,14 +372,12 @@ export function createOptionsTests(
       expect(previousPageItem).toHaveClass('ais-Pagination-item--disabled');
 
       userEvent.click(
-        firstPageItem!.querySelector(
-          '.ais-Pagination-link'
-        ) as HTMLAnchorElement
+        firstPageItem.querySelector<HTMLAnchorElement>('.ais-Pagination-link')!
       );
       userEvent.click(
-        previousPageItem!.querySelector(
+        previousPageItem.querySelector<HTMLAnchorElement>(
           '.ais-Pagination-link'
-        ) as HTMLAnchorElement
+        )!
       );
 
       await act(async () => {
@@ -403,145 +402,14 @@ export function createOptionsTests(
         document.querySelector('.ais-Pagination-item--selected')
       ).toHaveTextContent('2');
 
-      expect(
-        document.querySelector('.ais-Pagination')
-      ).toMatchNormalizedInlineSnapshot(
-        normalizeSnapshot,
-        `
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      `
-      );
+      // We're on page 2, "First" and "Previous" links are no longer disabled
+      expect(firstPageItem).not.toHaveClass('ais-Pagination-item--disabled');
+      expect(previousPageItem).not.toHaveClass('ais-Pagination-item--disabled');
 
       // We click on "Next" link
-      userEvent.click(screen.getByText('›'));
+      userEvent.click(
+        nextPageItem.querySelector<HTMLAnchorElement>('.ais-Pagination-link')!
+      );
 
       await act(async () => {
         await wait(0);
@@ -556,307 +424,37 @@ export function createOptionsTests(
         document.querySelector('.ais-Pagination-item--selected')
       ).toHaveTextContent('3');
 
-      expect(
-        document.querySelector('.ais-Pagination')
-      ).toMatchNormalizedInlineSnapshot(
-        normalizeSnapshot,
-        `
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      `
-      );
-
-      // We click on "Last" link
-      // InstantSearch.js uses different text in the page items.
-      // @MAJOR: Standardize page item text between all flavors.
-      userEvent.click(screen.queryByText('››') || screen.getByText('»'));
-
-      await act(async () => {
-        await wait(0);
-      });
-
-      expect(searchClient.search).toHaveBeenLastCalledWith([
-        expect.objectContaining({
-          params: expect.objectContaining({ page: 49 }),
-        }),
-      ]);
+      // We click on "Last" link
+      // InstantSearch.js uses different text in the page items.
+      // @MAJOR: Standardize page item text between all flavors.
+      userEvent.click(
+        lastPageItem.querySelector<HTMLAnchorElement>('.ais-Pagination-link')!
+      );
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.search).toHaveBeenLastCalledWith([
+        expect.objectContaining({
+          params: expect.objectContaining({ page: 49 }),
+        }),
+      ]);
       expect(
         document.querySelector('.ais-Pagination-item--selected')
       ).toHaveTextContent('50');
 
-      expect(
-        document.querySelector('.ais-Pagination')
-      ).toMatchNormalizedInlineSnapshot(
-        normalizeSnapshot,
-        `
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 44"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                44
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 45"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                45
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 46"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                46
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 47"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                47
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 48"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                48
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 49"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                49
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 50"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                50
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--nextPage"
-            >
-              <span
-                aria-label="Next"
-                class="ais-Pagination-link"
-              >
-                ›
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--lastPage"
-            >
-              <span
-                aria-label="Last"
-                class="ais-Pagination-link"
-              >
-                ››
-              </span>
-            </li>
-          </ul>
-        </div>
-      `
-      );
-
-      searchClient.search.mockClear();
-
-      // We're on last page, "Next" and "Last" links are disabled
+      // We're on the last page, "Next" and "Last" links are disabled
       expect(nextPageItem).toHaveClass('ais-Pagination-item--disabled');
       expect(lastPageItem).toHaveClass('ais-Pagination-item--disabled');
 
+      searchClient.search.mockClear();
+
       userEvent.click(
-        nextPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
+        nextPageItem.querySelector<HTMLAnchorElement>('.ais-Pagination-link')!
       );
       userEvent.click(
-        lastPageItem!.querySelector('.ais-Pagination-link') as HTMLAnchorElement
+        lastPageItem.querySelector<HTMLAnchorElement>('.ais-Pagination-link')!
       );
 
       await act(async () => {
@@ -867,9 +465,9 @@ export function createOptionsTests(
 
       // We click on "Previous" link
       userEvent.click(
-        previousPageItem!.querySelector(
+        previousPageItem.querySelector<HTMLAnchorElement>(
           '.ais-Pagination-link'
-        ) as HTMLAnchorElement
+        )!
       );
 
       await act(async () => {
@@ -885,142 +483,9 @@ export function createOptionsTests(
         document.querySelector('.ais-Pagination-item--selected')
       ).toHaveTextContent('49');
 
-      expect(
-        document.querySelector('.ais-Pagination')
-      ).toMatchNormalizedInlineSnapshot(
-        normalizeSnapshot,
-        `
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--firstPage"
-            >
-              <a
-                aria-label="First"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--previousPage"
-            >
-              <a
-                aria-label="Previous"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ‹
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 44"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                44
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 45"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                45
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 46"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                46
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 47"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                47
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 48"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                48
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 49"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                49
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 50"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                50
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      `
-      );
+      // We're on page 49, "Next" and "Last" links are no longer disabled
+      expect(nextPageItem).not.toHaveClass('ais-Pagination-item--disabled');
+      expect(lastPageItem).not.toHaveClass('ais-Pagination-item--disabled');
 
       // We click on "First" link
       userEvent.click(
@@ -1042,140 +507,9 @@ export function createOptionsTests(
         document.querySelector('.ais-Pagination-item--selected')
       ).toHaveTextContent('1');
 
-      expect(
-        document.querySelector('.ais-Pagination')
-      ).toMatchNormalizedInlineSnapshot(
-        normalizeSnapshot,
-        `
-        <div
-          class="ais-Pagination"
-        >
-          <ul
-            class="ais-Pagination-list"
-          >
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--firstPage"
-            >
-              <span
-                aria-label="First"
-                class="ais-Pagination-link"
-              >
-                ‹‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--disabled ais-Pagination-item--previousPage"
-            >
-              <span
-                aria-label="Previous"
-                class="ais-Pagination-link"
-              >
-                ‹
-              </span>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected"
-            >
-              <a
-                aria-label="Page 1"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                1
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 2"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                2
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 3"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                3
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 4"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                4
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 5"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                5
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 6"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                6
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--page"
-            >
-              <a
-                aria-label="Page 7"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                7
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--nextPage"
-            >
-              <a
-                aria-label="Next"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ›
-              </a>
-            </li>
-            <li
-              class="ais-Pagination-item ais-Pagination-item--lastPage"
-            >
-              <a
-                aria-label="Last"
-                class="ais-Pagination-link"
-                href="#"
-              >
-                ››
-              </a>
-            </li>
-          </ul>
-        </div>
-      `
-      );
+      // We're back on page 1, "First" and "Previous" links are disabled
+      expect(firstPageItem).toHaveClass('ais-Pagination-item--disabled');
+      expect(previousPageItem).toHaveClass('ais-Pagination-item--disabled');
     });
 
     test('does not navigate when pressing a modifier key', async () => {

From 9feed2003a902b4da4f633d485d1f4c96e851048 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 10:58:58 +0200
Subject: [PATCH 08/11] style: lint

---
 tests/common/widgets/pagination/options.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/common/widgets/pagination/options.ts b/tests/common/widgets/pagination/options.ts
index 555a4fa0a9..5e1bcdc381 100644
--- a/tests/common/widgets/pagination/options.ts
+++ b/tests/common/widgets/pagination/options.ts
@@ -489,9 +489,7 @@ export function createOptionsTests(
 
       // We click on "First" link
       userEvent.click(
-        firstPageItem!.querySelector(
-          '.ais-Pagination-link'
-        ) as HTMLAnchorElement
+        firstPageItem.querySelector<HTMLAnchorElement>('.ais-Pagination-link')!
       );
 
       await act(async () => {

From 28ae4315a0a343ed20946652201f0858b0be79c6 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 14:32:53 +0200
Subject: [PATCH 09/11] test: clean up InstantSearch.js tests

---
 .../__snapshots__/pagination-test.ts.snap     |  91 ------
 .../pagination/__tests__/pagination-test.ts   | 258 ------------------
 .../pagination/__tests__/pagination.test.tsx  | 106 +++++++
 3 files changed, 106 insertions(+), 349 deletions(-)
 delete mode 100644 packages/instantsearch.js/src/widgets/pagination/__tests__/__snapshots__/pagination-test.ts.snap
 delete mode 100644 packages/instantsearch.js/src/widgets/pagination/__tests__/pagination-test.ts

diff --git a/packages/instantsearch.js/src/widgets/pagination/__tests__/__snapshots__/pagination-test.ts.snap b/packages/instantsearch.js/src/widgets/pagination/__tests__/__snapshots__/pagination-test.ts.snap
deleted file mode 100644
index 1a020a7d06..0000000000
--- a/packages/instantsearch.js/src/widgets/pagination/__tests__/__snapshots__/pagination-test.ts.snap
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`pagination() calls twice render(<Pagination props />, container) 1`] = `
-{
-  "createURL": [Function],
-  "cssClasses": {
-    "disabledItem": "ais-Pagination-item--disabled disabledItem",
-    "firstPageItem": "ais-Pagination-item--firstPage firstPageItem",
-    "item": "ais-Pagination-item item",
-    "lastPageItem": "ais-Pagination-item--lastPage lastPageItem",
-    "link": "ais-Pagination-link link",
-    "list": "ais-Pagination-list list",
-    "nextPageItem": "ais-Pagination-item--nextPage nextPageItem",
-    "noRefinementRoot": "ais-Pagination--noRefinement noRefinementRoot",
-    "pageItem": "ais-Pagination-item--page pageItem",
-    "previousPageItem": "ais-Pagination-item--previousPage previousPageItem",
-    "root": "ais-Pagination root customRoot",
-    "selectedItem": "ais-Pagination-item--selected selectedItem",
-  },
-  "currentPage": 0,
-  "isFirstPage": true,
-  "isLastPage": false,
-  "nbPages": 20,
-  "pages": [
-    0,
-    1,
-    2,
-    3,
-    4,
-    5,
-    6,
-  ],
-  "setCurrentPage": [Function],
-  "showFirst": true,
-  "showLast": true,
-  "showNext": true,
-  "showPrevious": true,
-  "templates": {
-    "first": [Function],
-    "last": [Function],
-    "next": [Function],
-    "page": [Function],
-    "previous": [Function],
-  },
-}
-`;
-
-exports[`pagination() calls twice render(<Pagination props />, container) 2`] = `
-{
-  "createURL": [Function],
-  "cssClasses": {
-    "disabledItem": "ais-Pagination-item--disabled disabledItem",
-    "firstPageItem": "ais-Pagination-item--firstPage firstPageItem",
-    "item": "ais-Pagination-item item",
-    "lastPageItem": "ais-Pagination-item--lastPage lastPageItem",
-    "link": "ais-Pagination-link link",
-    "list": "ais-Pagination-list list",
-    "nextPageItem": "ais-Pagination-item--nextPage nextPageItem",
-    "noRefinementRoot": "ais-Pagination--noRefinement noRefinementRoot",
-    "pageItem": "ais-Pagination-item--page pageItem",
-    "previousPageItem": "ais-Pagination-item--previousPage previousPageItem",
-    "root": "ais-Pagination root customRoot",
-    "selectedItem": "ais-Pagination-item--selected selectedItem",
-  },
-  "currentPage": 0,
-  "isFirstPage": true,
-  "isLastPage": false,
-  "nbPages": 20,
-  "pages": [
-    0,
-    1,
-    2,
-    3,
-    4,
-    5,
-    6,
-  ],
-  "setCurrentPage": [Function],
-  "showFirst": true,
-  "showLast": true,
-  "showNext": true,
-  "showPrevious": true,
-  "templates": {
-    "first": [Function],
-    "last": [Function],
-    "next": [Function],
-    "page": [Function],
-    "previous": [Function],
-  },
-}
-`;
diff --git a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination-test.ts b/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination-test.ts
deleted file mode 100644
index b09da7728a..0000000000
--- a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination-test.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import {
-  createSingleSearchResponse,
-  createSearchClient,
-} from '@instantsearch/mocks';
-import { castToJestMock } from '@instantsearch/testutils/castToJestMock';
-import algoliasearchHelper, {
-  SearchResults,
-  SearchParameters,
-} from 'algoliasearch-helper';
-import { render as preactRender } from 'preact';
-
-import {
-  createInitOptions,
-  createRenderOptions,
-} from '../../../../test/createWidget';
-import { getContainerNode as utilsGetContainerNode } from '../../../lib/utils/getContainerNode';
-import pagination from '../pagination';
-
-import type {
-  PaginationCSSClasses,
-  PaginationWidgetParams,
-} from '../pagination';
-import type { AlgoliaSearchHelper } from 'algoliasearch-helper';
-
-const render = castToJestMock(preactRender);
-jest.mock('preact', () => {
-  const module = jest.requireActual('preact');
-
-  module.render = jest.fn();
-
-  return module;
-});
-
-const getContainerNode = castToJestMock(utilsGetContainerNode);
-jest.mock('../../../lib/utils/getContainerNode', () => {
-  const module = jest.requireActual('../../../lib/utils/getContainerNode');
-
-  const _getContainerNode = module.getContainerNode;
-  module.getContainerNode = jest.fn((...args) => _getContainerNode(...args));
-
-  return module;
-});
-
-describe('Usage', () => {
-  it('throws without container', () => {
-    expect(() => {
-      // @ts-expect-error
-      pagination({ container: undefined });
-    }).toThrowErrorMatchingInlineSnapshot(`
-"The \`container\` option is required.
-
-See documentation: https://www.algolia.com/doc/api-reference/widgets/pagination/js/"
-`);
-  });
-});
-
-describe('pagination()', () => {
-  let widget: ReturnType<typeof pagination>;
-  let container: HTMLElement;
-  let helper: AlgoliaSearchHelper;
-  let results: SearchResults;
-  let cssClasses: PaginationCSSClasses;
-
-  beforeEach(() => {
-    render.mockClear();
-    getContainerNode.mockClear();
-
-    container = document.createElement('div');
-    cssClasses = {
-      root: ['root', 'customRoot'],
-      noRefinementRoot: 'noRefinementRoot',
-      list: 'list',
-      item: 'item',
-      firstPageItem: 'firstPageItem',
-      lastPageItem: 'lastPageItem',
-      previousPageItem: 'previousPageItem',
-      nextPageItem: 'nextPageItem',
-      pageItem: 'pageItem',
-      selectedItem: 'selectedItem',
-      disabledItem: 'disabledItem',
-      link: 'link',
-    };
-    widget = pagination({ container, scrollTo: false, cssClasses });
-
-    helper = {
-      setPage: jest.fn(),
-      search: jest.fn(),
-      state: new SearchParameters(),
-    } as unknown as AlgoliaSearchHelper;
-    results = new SearchResults(helper.state, [
-      createSingleSearchResponse({
-        hits: [{ first: 'hit', second: 'hit', objectID: '1' }],
-        nbHits: 200,
-        hitsPerPage: 10,
-        nbPages: 20,
-      }),
-    ]);
-    widget.init!(createInitOptions({ helper }));
-  });
-
-  it('sets the page', () => {
-    widget.getWidgetRenderState(createInitOptions({ helper })).refine(42);
-    expect(helper.setPage).toHaveBeenCalledTimes(1);
-    expect(helper.search).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls twice render(<Pagination props />, container)', () => {
-    const { state } = algoliasearchHelper(createSearchClient(), '', {
-      page: 0,
-    });
-
-    widget.render!(
-      createRenderOptions({
-        results,
-        helper,
-        state,
-      })
-    );
-    widget.render!(
-      createRenderOptions({
-        results,
-        helper,
-        state,
-      })
-    );
-
-    const [firstRender, secondRender] = render.mock.calls;
-
-    expect(render).toHaveBeenCalledTimes(2);
-    // @ts-expect-error
-    expect(firstRender[0].props).toMatchSnapshot();
-    expect(firstRender[1]).toEqual(container);
-    // @ts-expect-error
-    expect(secondRender[0].props).toMatchSnapshot();
-    expect(secondRender[1]).toEqual(container);
-  });
-
-  describe('mocking getContainerNode', () => {
-    let scrollIntoView: jest.Mock;
-
-    beforeEach(() => {
-      scrollIntoView = jest.fn();
-    });
-
-    it('should not scroll', () => {
-      widget = pagination({ container, scrollTo: false });
-      widget.init!(createInitOptions({ helper }));
-      widget.getWidgetRenderState(createInitOptions({ helper })).refine(2);
-      expect(scrollIntoView).toHaveBeenCalledTimes(0);
-    });
-
-    it('should scrollto body', () => {
-      const { state } = algoliasearchHelper(createSearchClient(), '', {
-        page: 0,
-      });
-
-      // @ts-expect-error
-      getContainerNode.mockImplementation((input) =>
-        input === 'body' ? { scrollIntoView } : input
-      );
-
-      widget = pagination({ container });
-
-      widget.init!(createInitOptions({ helper }));
-      widget.render!(
-        createRenderOptions({
-          results,
-          helper,
-          state,
-        })
-      );
-
-      const [firstRender] = render.mock.calls;
-
-      // @ts-expect-error
-      firstRender[0].props.setCurrentPage(2);
-
-      expect(scrollIntoView).toHaveBeenCalledTimes(1);
-    });
-  });
-});
-
-describe('pagination MaxPage', () => {
-  let widget: ReturnType<typeof pagination>;
-  let container: HTMLElement;
-  let results: SearchResults;
-  let cssClasses: PaginationCSSClasses;
-  let paginationOptions: PaginationWidgetParams;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    cssClasses = {
-      root: 'root',
-      noRefinementRoot: 'noRefinementRoot',
-      list: 'list',
-      item: 'item',
-      firstPageItem: 'firstPageItem',
-      lastPageItem: 'lastPageItem',
-      previousPageItem: 'previousPageItem',
-      nextPageItem: 'nextPageItem',
-      pageItem: 'pageItem',
-      selectedItem: 'selectedItem',
-      disabledItem: 'disabledItem',
-      link: 'link',
-    };
-    results = new SearchResults(new SearchParameters(), [
-      createSingleSearchResponse({
-        hits: [{ objectID: 'lol' }],
-        nbHits: 300,
-        hitsPerPage: 10,
-        nbPages: 30,
-      }),
-    ]);
-    paginationOptions = { container, scrollTo: false, cssClasses };
-  });
-
-  it('does to have any default', () => {
-    widget = pagination(paginationOptions);
-
-    expect(
-      widget.getWidgetRenderState(
-        createRenderOptions({
-          results,
-        })
-      ).nbPages
-    ).toEqual(30);
-  });
-
-  it('does reduce the number of pages if lower than nbPages', () => {
-    paginationOptions.totalPages = 20;
-    widget = pagination(paginationOptions);
-
-    expect(
-      widget.getWidgetRenderState(
-        createRenderOptions({
-          results,
-        })
-      ).nbPages
-    ).toEqual(20);
-  });
-
-  it('does not reduce the number of pages if greater than nbPages', () => {
-    paginationOptions.totalPages = 40;
-    widget = pagination(paginationOptions);
-
-    expect(
-      widget.getWidgetRenderState(
-        createRenderOptions({
-          results,
-        })
-      ).nbPages
-    ).toEqual(30);
-  });
-});
diff --git a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx b/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
index 5ccc094b91..42071a52c5 100644
--- a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
+++ b/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
@@ -14,12 +14,118 @@ import configure from '../../configure/configure';
 import pagination from '../pagination';
 
 import type { SearchResponse } from '../../../../src/types';
+import { findByLabelText, findByRole } from '@testing-library/dom';
 
 beforeEach(() => {
   document.body.innerHTML = '';
 });
 
 describe('pagination', () => {
+  describe('options', () => {
+    test('throws without a `container`', () => {
+      expect(() => {
+        const searchClient = createSearchClient();
+
+        const search = instantsearch({
+          indexName: 'indexName',
+          searchClient,
+        });
+
+        search.addWidgets([
+          pagination({
+            // @ts-expect-error
+            container: undefined,
+          }),
+        ]);
+      }).toThrowErrorMatchingInlineSnapshot(`
+"The \`container\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/pagination/js/"
+`);
+    });
+
+    test('add custom CSS classes', async () => {
+      const container = document.createElement('div');
+      const searchClient = createSearchClient();
+
+      const search = instantsearch({
+        indexName: 'indexName',
+        searchClient,
+      });
+
+      search.addWidgets([
+        pagination({
+          container,
+          cssClasses: {
+            root: 'ROOT',
+            noRefinementRoot: 'NO_REFINEMENT_ROOT',
+            list: 'LIST',
+            item: 'ITEM',
+            firstPageItem: 'FIRST_PAGE_ITEM',
+            lastPageItem: 'LAST_PAGE_ITEM',
+            previousPageItem: 'PREVIOUS_PAGE_ITEM',
+            nextPageItem: 'NEXT_PAGE_ITEM',
+            pageItem: 'PAGE_ITEM',
+            selectedItem: 'SELECTED_ITEM',
+            disabledItem: 'DISABLED_ITEM',
+            link: 'LINK',
+          },
+        }),
+      ]);
+
+      search.start();
+
+      await wait(0);
+
+      const root = container.firstChild;
+
+      const [
+        list,
+        firstPageItem,
+        previousPageItem,
+        nextPageItem,
+        lastPageItem,
+        pageLink,
+      ] = await Promise.all([
+        findByRole(container, 'list'),
+        (await findByLabelText(container, 'First')).parentNode,
+        (await findByLabelText(container, 'Previous')).parentNode,
+        (await findByLabelText(container, 'Next')).parentNode,
+        (await findByLabelText(container, 'Last')).parentNode,
+        findByRole(container, 'link', { name: 'Page 1' }),
+      ]);
+
+      expect(root).toHaveClass('ROOT', 'NO_REFINEMENT_ROOT');
+      expect(list).toHaveClass('LIST');
+      expect(firstPageItem).toHaveClass(
+        'FIRST_PAGE_ITEM',
+        'ITEM',
+        'DISABLED_ITEM'
+      );
+      expect(previousPageItem).toHaveClass(
+        'PREVIOUS_PAGE_ITEM',
+        'ITEM',
+        'DISABLED_ITEM'
+      );
+      expect(nextPageItem).toHaveClass(
+        'NEXT_PAGE_ITEM',
+        'ITEM',
+        'DISABLED_ITEM'
+      );
+      expect(lastPageItem).toHaveClass(
+        'LAST_PAGE_ITEM',
+        'ITEM',
+        'DISABLED_ITEM'
+      );
+      expect(pageLink.parentNode).toHaveClass(
+        'ITEM',
+        'PAGE_ITEM',
+        'SELECTED_ITEM'
+      );
+      expect(pageLink).toHaveClass('LINK');
+    });
+  });
+
   describe('templates', () => {
     test('does not warn with default templates', async () => {
       const container = document.createElement('div');

From b58d7c9167a1d2372a2ec89da4d38b498d7d62d2 Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 14:45:01 +0200
Subject: [PATCH 10/11] seriously

---
 .../src/widgets/pagination/__tests__/pagination.test.tsx    | 2 +-
 packages/vue-instantsearch/src/components/Menu.vue          | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx b/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
index 42071a52c5..2b7743e19f 100644
--- a/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
+++ b/packages/instantsearch.js/src/widgets/pagination/__tests__/pagination.test.tsx
@@ -8,13 +8,13 @@ import {
   createSingleSearchResponse,
 } from '@instantsearch/mocks';
 import { wait } from '@instantsearch/testutils/wait';
+import { findByLabelText, findByRole } from '@testing-library/dom';
 
 import instantsearch from '../../../index.es';
 import configure from '../../configure/configure';
 import pagination from '../pagination';
 
 import type { SearchResponse } from '../../../../src/types';
-import { findByLabelText, findByRole } from '@testing-library/dom';
 
 beforeEach(() => {
   document.body.innerHTML = '';
diff --git a/packages/vue-instantsearch/src/components/Menu.vue b/packages/vue-instantsearch/src/components/Menu.vue
index dc932ab9fe..d6c03e62e9 100644
--- a/packages/vue-instantsearch/src/components/Menu.vue
+++ b/packages/vue-instantsearch/src/components/Menu.vue
@@ -39,9 +39,9 @@
         :disabled="!state.canToggleShowMore"
         @click.prevent="state.toggleShowMore()"
       >
-        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">{{
-          state.isShowingMore ? 'Show less' : 'Show more'
-        }}</slot>
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
+          {{ state.isShowingMore ? 'Show less' : 'Show more' }}
+        </slot>
       </button>
     </slot>
   </div>

From f61c43f55b53056c42406936153df0e4aabae98b Mon Sep 17 00:00:00 2001
From: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>
Date: Fri, 8 Sep 2023 15:04:10 +0200
Subject: [PATCH 11/11] chore: avoid linting Vue file

---
 packages/vue-instantsearch/src/components/Menu.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue-instantsearch/src/components/Menu.vue b/packages/vue-instantsearch/src/components/Menu.vue
index d6c03e62e9..dc932ab9fe 100644
--- a/packages/vue-instantsearch/src/components/Menu.vue
+++ b/packages/vue-instantsearch/src/components/Menu.vue
@@ -39,9 +39,9 @@
         :disabled="!state.canToggleShowMore"
         @click.prevent="state.toggleShowMore()"
       >
-        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
-          {{ state.isShowingMore ? 'Show less' : 'Show more' }}
-        </slot>
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">{{
+          state.isShowingMore ? 'Show less' : 'Show more'
+        }}</slot>
       </button>
     </slot>
   </div>