Filter + Export CSV tests

stellar · Feb 4, 2025 · 9373207 · 9373207
1 parent e69f487
commit 9373207
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 3 deletions.
diff --git a/src/components/DataTable/index.tsx b/src/components/DataTable/index.tsx
@@ -13,7 +13,6 @@ import { Dropdown } from "@/components/Dropdown";
 
 import { processContractStorageData } from "@/helpers/processContractStorageData";
 import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
-import { isEmptyObject } from "@/helpers/isEmptyObject";
 import { exportJsonToCsvFile } from "@/helpers/exportJsonToCsvFile";
 
 import { getPublicKeyError } from "@/validate/methods/getPublicKeyError";
@@ -215,6 +214,7 @@ export const DataTable = <T extends AnyObject>({
           isDropdownVisible={visibleFilters === headerId}
           onClose={closeFilterDropdown}
           triggerDataAttribute="filter"
+          testId={`data-table-filters-${headerId}`}
         >
           <div className="DataTable__filterDropdown__container">
             <div className="DataTable__filterDropdown__title">Filter by</div>
@@ -317,6 +317,7 @@ export const DataTable = <T extends AnyObject>({
             <div
               key={`badge-${id}-${afIdx}-${f}-${fIdx}`}
               className="DataTable__badge Badge Badge--secondary Badge--sm"
+              data-testid="data-table-filter-badge"
             >
               {renderFilterBadgeLabel(f)}
 
@@ -345,7 +346,7 @@ export const DataTable = <T extends AnyObject>({
 
   const renderFilteredResultCount = () => {
     // No filters applied
-    if (isEmptyObject(appliedFilters)) {
+    if (appliedFilters.key.length === 0 && appliedFilters.value.length === 0) {
       return null;
     }
 
@@ -356,7 +357,10 @@ export const DataTable = <T extends AnyObject>({
     }
 
     return (
-      <div className="DataTable__filteredResultCount">{`${resultCount} filtered ${resultCount === 1 ? "results" : "results"}`}</div>
+      <div
+        className="DataTable__filteredResultCount"
+        data-testid="data-table-filter-results-text"
+      >{`${resultCount} filtered ${resultCount === 1 ? "result" : "results"}`}</div>
     );
   };
 

diff --git a/tests/smartContractsStorage.test.ts b/tests/smartContractsStorage.test.ts
@@ -109,6 +109,64 @@ test.describe("Smart Contracts: Contract Storage", () => {
       "ledger_key_contract_instance",
     );
   });
+
+  test("Filters", async ({ page }) => {
+    const keyFilterCol = page.locator("[data-filter]").nth(0);
+    const keyFiltersDropdown = page.getByTestId("data-table-filters-key");
+    const filterBadges = page.getByTestId("data-table-filter-badge");
+
+    const table = page.getByTestId("contract-storage-table");
+    const firstRow = table.locator("tr").nth(1);
+    const resultsText = page.getByTestId("data-table-filter-results-text");
+
+    // Initial state
+    await expect(keyFiltersDropdown).toBeHidden();
+    await keyFilterCol.click();
+    await expect(keyFiltersDropdown).toBeVisible();
+    await expect(firstRow.locator("td").nth(0)).toContainText(
+      "[BalanceGA2Q…D5Y4]",
+    );
+    await expect(resultsText).toBeHidden();
+
+    // Filter buttons
+    const keyFilterClearBtn = keyFiltersDropdown.getByRole("button", {
+      name: "Clear filter",
+      exact: true,
+    });
+    const keyFilterApplyBtn = keyFiltersDropdown.getByRole("button", {
+      name: "Apply",
+      exact: true,
+    });
+
+    await expect(keyFilterClearBtn).toBeDisabled();
+    await expect(keyFilterApplyBtn).toBeDisabled();
+
+    // Select filter and apply
+    await keyFiltersDropdown.getByText("Contracts", { exact: true }).click();
+    await expect(keyFilterApplyBtn).toBeEnabled();
+    await keyFilterApplyBtn.click();
+    await expect(keyFiltersDropdown).toBeHidden();
+
+    // Badge
+    await expect(filterBadges.nth(0)).toHaveText("Contracts");
+
+    // Table data
+    await expect(firstRow.locator("td").nth(0)).toContainText(
+      "[ContractsCDJ6…632B]",
+    );
+    await expect(resultsText).toHaveText("1 filtered result");
+
+    // Clear filters
+    await keyFilterCol.click();
+    await expect(keyFilterClearBtn).toBeEnabled();
+    await keyFilterClearBtn.click();
+    await expect(resultsText).toBeHidden();
+    await expect(filterBadges.nth(0)).toBeHidden();
+  });
+
+  test("Export CSV button", async ({ page }) => {
+    await expect(page.getByText("Export to CSV")).toBeVisible();
+  });
 });
 
 // =============================================================================