Update pagination tests

playwright-report/index.html

@@ -65,4 +65,4 @@
  </body>
 </html>
 <script>
-window.playwrightReportBase64 = "data:application/zip;base64,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";</script>
+window.playwrightReportBase64 = "data:application/zip;base64,UEsDBBQAAAgIAA5bg1j5AptX3AIAAIMLAAAZAAAAYTA4ODA2NGRlOWZlMzUxZWVmNWYuanNvbrVWUW+bMBD+KxYvaaXUA2NswltbVWqlbpq6TpM29cGQI6EFnBmzNory32dTpiyILBR1EhKW7fu+++y7822cNMvhZu5EjnDD0GV0DrMU/MADSIPUmTbrn0QBZkcFQiVLXK0gwboyaxoq849+bJrRQZQz8FPueTSNYy4ogZDwGKx5pnOLq6Ccg6rQN6mekIKqznWFnjO9RIlUChKNCtBiLrQwRislH81U61KyVLLI6sIs5DIROpOlE20ap/sczrPSzFPGp04i87owm/3t1JnXqjUNGCdTR5Sl1M2MVfdgPBWLdiRrnciGGl4MrIa59UnopVl2vjR8aCUWYFwvVrKEUjvGqhXVHFWXrNJC6fuswSQuoWeu+fx7j0WERsTH3A2/OxZCq7UTudYAVu2ptwd4AalUgK6lfLIqjyPOLOLOET8I+2DjBvZKGElLAz0E2XO7yLwPOc1edK0gQrGSzxWoQdC0A92L3ALer1eAE1mW5ooGgQcdcLYDf7DBUpuLjLzt3+Npjx5DqeFlEGXg7VNS0k/ZR2MjbAjHzN/ncI9SWGS8kFqefHjNntMxPITTPabhuenTXWp6bLt/9G+A8Xcw4fb4BTbIUuEF6Iv1rYghP5l8ruM8S9CzqUoVkmW+npzixMwcTwSKXRZ2ToSFI0+EWss/WuiemEMC7mQOJxNj/jSZog0qTa2M0OT8UeRngD5KkefiJ7opzFVP0Ha4KN/n+6JC7o0WNduJYodEvZZYrOW1+AVf726P+hhg0q1tXsjYWCe5u3OS0ANOjsgYjl3eKTgkHB0f9hHpT5n/FuAc+6yb8swdLcB/nwC/FPO4Vmt0tVhU6FKYjuKtMc4xI52LmRE+Wlew08W994rxEAcB6eRhMN5HNiDEz1MNamB7McO02wTM/tkCDHrLLKr31rfsza9yDws/3geYMSglVbvHUOi6agpDVTXtodDa9FCF6QWbLdbAdFORVjVsH7a/AVBLAwQUAAAICAAOW4NY45aaElgBAACyAgAACwAAAHJlcG9ydC5qc29urVFLT4RADP4rpGfcLG+Wf+DFiyYejIfuUBZkYMhMiZoN/90Oi64mejNz6WP6PdozDMRYIyNUZ0DFM+pHY3uyDqpoCcExWn7oBpK0iOIoj9I8yZIyhHq2yJ0ZocrKQ7wr91EITadJBp/Oa3RbQwW4L8t9ntZ0aCjJIqIma+Dy8w49LDhCq9qdm0jt2EmPyfEFxUd/otxQ0hRRlDbHY4FpTGVcHMmPd6w9rqWxFh+B9xNYcrNmF7x23AbKWEuKgy/vIUzWvEhpk6Raa4ZuHqShjdpsXkz9Jlh3o9TTvAhBGT0P8jlZfmwoL+IQcBwNrxXv7lmU4mmLzMzKrNT0JrBMtdeE3Eob7le+YMITifRhMiONDH6qh4rtTCFs9talITOqdpA/K/gib72jT2WlIkHLMcMrk0/m8Zru5Twa+/c1cn03TVv1k2/xiN825nmuO/t3Nhm21tiLmw9QSwECPwMUAAAICAAOW4NY+QKbV9wCAACDCwAAGQAAAAAAAAAAAAAAtIEAAAAAYTA4ODA2NGRlOWZlMzUxZWVmNWYuanNvblBLAQI/AxQAAAgIAA5bg1jjlpoSWAEAALICAAALAAAAAAAAAAAAAAC0gRMDAAByZXBvcnQuanNvblBLBQYAAAAAAgACAIAAAACUBAAAAAA=";</script>

tests/search.spec.ts

@@ -9,8 +9,10 @@ const getPaginationResults = (count: number) =>
  count > DEFAULT_PAGINATION_SIZE ? DEFAULT_PAGINATION_SIZE : count;
 
 async function verifyGridItemCount(page: Page, count = 0) {
- const paginationResults = getPaginationResults(count);
- await expect(page.getByTestId(`grid-item`)).toHaveCount(paginationResults);
+ const paginationResultsCount = getPaginationResults(count);
+ await expect(page.getByTestId(`grid-item`)).toHaveCount(
+ paginationResultsCount
+ );
 }
 
 async function verifyTopResultsCount(page: Page, count: number) {
@@ -76,10 +78,12 @@ test.describe("Search page component", () => {
  await verifyTopResultsCount(page, s.expectedResultCount);
  await expect(searchInput).toHaveValue(s.term);
 
- const paginationResults = getPaginationResults(s.expectedResultCount);
+ const paginationResultsCount = getPaginationResults(
+ s.expectedResultCount
+ );
  await verifyGridItemCount(page, s.expectedResultCount);
  await expect(page.getByTestId("results")).toHaveText(
- `Showing 1 to ${paginationResults} of ${paginationResults} results`
+ `Showing 1 to ${paginationResultsCount} of ${paginationResultsCount} results`
  );
  }
 
@@ -401,5 +405,74 @@ test.describe("Search page component", () => {
  await expect(resultsCount).toHaveText(`${TOTAL_RESULTS} results`);
  });
 
- test("renders correct pagination", async ({ page }) => {});
+ test("renders correct pagination", async ({ page }) => {
+ function buildResultsString({ page }: { page: number }) {
+ const start = paginationResultsCount * (page - 1) + 1;
+ const end = start + paginationResultsCount - 1;
+ const refinedEnd = end > TOTAL_RESULTS ? TOTAL_RESULTS : end;
+ return `Showing ${start} to ${refinedEnd} of ${TOTAL_RESULTS} results`;
+ }
+
+ const nextBtn = page.getByRole("button", { name: "Next" });
+ const prevBtn = page.getByRole("button", { name: "Previous" });
+ const startBtn = page.getByRole("button", { name: "Start" });
+ const paginationResultsCount = getPaginationResults(TOTAL_RESULTS);
+
+ await verifyGridItemCount(page, TOTAL_RESULTS);
+ await verifyTopResultsCount(page, TOTAL_RESULTS);
+
+ await expect(prevBtn).not.toBeVisible();
+ await expect(startBtn).not.toBeVisible();
+
+ // Click to page 2
+ await nextBtn.click();
+ await verifyGridItemCount(page, TOTAL_RESULTS - DEFAULT_PAGINATION_SIZE);
+ await expect(page.getByTestId("results")).toHaveText(
+ buildResultsString({ page: 2 })
+ );
+ await expect(prevBtn).toBeVisible();
+ await expect(startBtn).not.toBeVisible();
+
+ // URL updates
+ await expect(page).toHaveURL(new RegExp(`/search\\?page=2`));
+
+ // Click to page 3
+ await nextBtn.click();
+ await verifyGridItemCount(page, 0);
+ await expect(page.getByTestId("results")).toHaveText(
+ buildResultsString({ page: 3 })
+ );
+ expect(prevBtn).toBeVisible();
+ expect(startBtn).toBeVisible();
+
+ await expect(page).toHaveURL(new RegExp(`/search\\?page=3`));
+
+ // Click previous going back to page 2
+ await prevBtn.click();
+ await verifyGridItemCount(page, TOTAL_RESULTS);
+ await expect(page.getByTestId("results")).toHaveText(
+ buildResultsString({ page: 2 })
+ );
+ await expect(page).toHaveURL(new RegExp(`/search\\?page=2`));
+
+ // Go to end of results
+ await page.goto("/search?page=6");
+ await verifyGridItemCount(page, 5);
+ await expect(page.getByTestId("results")).toHaveText(
+ buildResultsString({ page: 6 })
+ );
+ await expect(nextBtn).not.toBeVisible();
+ });
+
+ test("renders Work results which link to the Work page", async ({ page }) => {
+ await page.getByLabel("Public works only").click();
+ await page.getByRole("link", { name: "Ajal-e Moallaq Image" }).click();
+ await expect(page).toHaveURL("items/5a2dcade-0071-48c3-b29b-755293e862c4");
+
+ await page.goto("/search");
+ await page.getByLabel("Public works only").click();
+
+ await page.getByRole("link", { name: "Cadbury Eggs Cars Image" }).click();
+ await expect(page).toHaveURL("items/944cc66c-dcf9-4ac5-8d0d-ec48a699a0fe");
+ });
 });