Tests

Shopify · Nov 18, 2024 · 4c243f4 · 4c243f4
1 parent 2237c6e
commit 4c243f4
Showing 1 changed file with 178 additions and 0 deletions.
diff --git a/packages/hydrogen/src/pagination/pagination.test.ts b/packages/hydrogen/src/pagination/pagination.test.ts
@@ -348,6 +348,184 @@ describe('<Pagination>', () => {
       </DocumentFragment>
     `);
   });
+
+  it('allows multiple Pagination components with unique namespaces', () => {
+    const {asFragment} = render(
+      createElement(
+        Fragment,
+        null,
+        createElement(Pagination, {
+          connection: {
+            nodes: [1, 2, 3],
+            pageInfo: {
+              endCursor: 'abc',
+              startCursor: 'cde',
+              hasNextPage: true,
+              hasPreviousPage: false,
+            },
+          },
+          namespace: 'products',
+          children: ({nodes}) =>
+            createElement(
+              Fragment,
+              null,
+              nodes.map((node) =>
+                createElement(
+                  'div',
+                  {key: node as string},
+                  `Product: ${node as string}`,
+                ),
+              ),
+            ),
+        }),
+        createElement(Pagination, {
+          connection: {
+            nodes: [4, 5, 6],
+            pageInfo: {
+              endCursor: 'def',
+              startCursor: 'ghi',
+              hasNextPage: false,
+              hasPreviousPage: true,
+            },
+          },
+          namespace: 'orders',
+          children: ({nodes}) =>
+            createElement(
+              Fragment,
+              null,
+              nodes.map((node) =>
+                createElement(
+                  'div',
+                  {key: node as string},
+                  `Order: ${node as string}`,
+                ),
+              ),
+            ),
+        }),
+      ),
+    );
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          Product: 1
+        </div>
+        <div>
+          Product: 2
+        </div>
+        <div>
+          Product: 3
+        </div>
+        <div>
+          Order: 4
+        </div>
+        <div>
+          Order: 5
+        </div>
+        <div>
+          Order: 6
+        </div>
+      </DocumentFragment>
+    `);
+  });
+
+  it('renders multiple Pagination components with unique namespaces correctly', () => {
+    const {asFragment} = render(
+      createElement(
+        Fragment,
+        null,
+        createElement(Pagination, {
+          connection: {
+            nodes: [1, 2, 3],
+            pageInfo: {
+              endCursor: 'abc',
+              startCursor: 'cde',
+              hasNextPage: true,
+              hasPreviousPage: false,
+            },
+          },
+          namespace: 'products',
+          children: ({NextLink, PreviousLink, nodes}) =>
+            createElement(
+              'div',
+              null,
+              nodes.map((node) =>
+                createElement(
+                  'div',
+                  {key: node as string},
+                  `Order: ${node as string}`,
+                ),
+              ),
+              createElement(NextLink, null, 'Next'),
+              createElement(PreviousLink, null, 'Previous'),
+            ),
+        }),
+        createElement(Pagination, {
+          connection: {
+            nodes: [4, 5, 6],
+            pageInfo: {
+              endCursor: 'def',
+              startCursor: 'ghi',
+              hasNextPage: false,
+              hasPreviousPage: true,
+            },
+          },
+          namespace: 'orders',
+          children: ({NextLink, PreviousLink, nodes}) =>
+            createElement(
+              'div',
+              null,
+              nodes.map((node) =>
+                createElement(
+                  'div',
+                  {key: node as string},
+                  `Order: ${node as string}`,
+                ),
+              ),
+              createElement(NextLink, null, 'Next'),
+              createElement(PreviousLink, null, 'Previous'),
+            ),
+        }),
+      ),
+    );
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          <div>
+            Order: 1
+          </div>
+          <div>
+            Order: 2
+          </div>
+          <div>
+            Order: 3
+          </div>
+          <a
+            data-preventscrollreset="true"
+            href="?products_direction=next&products_cursor=abc"
+            state="{"pageInfo":{"endCursor":"abc","hasPreviousPage":false,"hasNextPage":true,"startCursor":"cde"},"nodes":[1,2,3]}"
+          />
+        </div>
+        <div>
+          <div>
+            Order: 4
+          </div>
+          <div>
+            Order: 5
+          </div>
+          <div>
+            Order: 6
+          </div>
+          <a
+            data-preventscrollreset="true"
+            href="?orders_direction=previous&orders_cursor=ghi"
+            state="{"pageInfo":{"endCursor":"def","hasPreviousPage":true,"hasNextPage":false,"startCursor":"ghi"},"nodes":[4,5,6]}"
+          />
+        </div>
+      </DocumentFragment>
+    `);
+  });
 });
 
 function fillLocation(partial: Partial<Location> = {}) {