Fix `e2e/unit` tests

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

cypress/e2e/endpoints/endpoints-list.cy.ts

@@ -39,46 +39,56 @@ describe("Endpoints list", () => {
 
     cy.fixture("endpoints/endpoints").then((endpointsFixture: any) => {
       const endpoints = endpointsFixture.endpoints;
+      const ITEMS_PER_PAGE = 10;
 
       cy.get("div[class^='MainListFilter__FilterItem']")
         .contains("Azure")
         .click();
+      const azureEndpoints = endpoints.filter(r => r.type === "azure");
       cy.get("div[class^='EndpointListItem__Wrapper']").should(
         "have.length",
-        endpoints.filter(r => r.type === "azure").length,
+        Math.min(azureEndpoints.length, ITEMS_PER_PAGE),
       );
 
       cy.get("div[class^='MainListFilter__FilterItem']")
         .contains("VMware")
         .click();
+      const vmwareEndpoints = endpoints.filter(
+        r => r.type === "vmware_vsphere",
+      );
       cy.get("div[class^='EndpointListItem__Wrapper']").should(
         "have.length",
-        endpoints.filter(r => r.type === "vmware_vsphere").length,
+        Math.min(vmwareEndpoints.length, ITEMS_PER_PAGE),
       );
 
       cy.get("div[class^='SearchButton__Wrapper']").click();
       cy.get("input[class*='SearchInput']").type("cor");
+      const vmwareCorEndpoints = endpoints.filter(
+        e => e.type === "vmware_vsphere" && e.name.includes("cor"),
+      );
       cy.get("div[class^='EndpointListItem__Wrapper']").should(
         "have.length",
-        endpoints.filter(
-          e => e.type === "vmware_vsphere" && e.name.includes("cor"),
-        ).length,
+        Math.min(vmwareCorEndpoints.length, ITEMS_PER_PAGE),
       );
+
       cy.get("div[class^='TextInput__Close']").click();
+      cy.get("input[class*='SearchInput']").should("have.value", "");
 
       cy.get("div[class^='MainListFilter__FilterItem']")
         .contains("All")
         .click();
       cy.get("div[class^='EndpointListItem__Wrapper']").should(
         "have.length",
-        endpoints.length,
+        Math.min(endpoints.length, ITEMS_PER_PAGE),
       );
 
       cy.get("div[class^='SearchButton__Wrapper']").click();
       cy.get("input[class*='SearchInput']").type("cor");
+      cy.get("input[class*='SearchInput']").should("have.value", "cor");
+      const corEndpoints = endpoints.filter(e => e.name.includes("cor"));
       cy.get("div[class^='EndpointListItem__Wrapper']").should(
         "have.length",
-        endpoints.filter(e => e.name.includes("cor")).length,
+        Math.min(corEndpoints.length, ITEMS_PER_PAGE),
       );
     });
   });

src/components/ui/Lists/FilterList/FilterList.spec.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { act } from "react";
 import styled from "styled-components";
-import { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import FilterList from "@src/components/ui/Lists/FilterList";
 import TestUtils from "@tests/TestUtils";
 import userEvent from "@testing-library/user-event";
@@ -71,6 +71,7 @@ const ItemComponent = (props: ItemComponentProps) => (
 const FilterListWrap = (options?: {
   onItemClick?: () => void;
   onSelectedItemsChange?: (items: any[]) => void;
+  initialItemsPerPage?: number;
 }) => (
   <FilterList
     items={ITEMS}
@@ -82,6 +83,7 @@ const FilterListWrap = (options?: {
     selectionLabel="test item"
     renderItemComponent={ItemComponent}
     onSelectedItemsChange={options?.onSelectedItemsChange || (() => {})}
+    initialItemsPerPage={options?.initialItemsPerPage || 2}
   />
 );
 
@@ -98,9 +100,9 @@ describe("FilterList", () => {
     const listItems = TestUtils.selectAll("FilterListspec__MainListItem-");
     expect(listItems).toHaveLength(2);
     expect(listItems[1].textContent).toBe(ITEMS[1].label);
-    expect(TestUtils.select("Pagination__PageNumber")?.textContent).toBe(
-      "1 of 2",
-    );
+    expect(
+      TestUtils.select("NumberedPagination__PageNumber")?.textContent,
+    ).toBe("Page 1 of 2");
   });
 
   it("filters items", async () => {
@@ -135,13 +137,16 @@ describe("FilterList", () => {
 
   it("goes to next page", async () => {
     render(FilterListWrap());
-    await act(async () => {
-      TestUtils.select("Pagination__PageNext")?.click();
-    });
 
-    expect(TestUtils.select("Pagination__PageNumber")?.textContent).toBe(
-      "2 of 2",
+    const nextButton = Array.from(document.querySelectorAll("button")).find(
+      btn => btn.textContent === "Next",
     );
+
+    fireEvent.click(nextButton!);
+
+    expect(
+      TestUtils.select("NumberedPagination__PageNumber")?.textContent,
+    ).toBe("Page 2 of 2");
     expect(
       TestUtils.selectAll("FilterListspec__MainListItem-")[1].textContent,
     ).toBe(ITEMS[3].label);
@@ -166,7 +171,7 @@ describe("FilterList", () => {
     });
     expect(checkbox.checked).toBe(true);
     expect(TestUtils.select("MainListFilter__SelectionText")?.textContent).toBe(
-      "1 of 4\u00a0test item(s) selected",
+      "1 of 2\u00a0test item(s) selected",
     );
     expect(onSelectedItemsChange).toHaveBeenCalledWith([ITEMS[1]]);
   });