fix filter tests

finos · May 14, 2024 · 06152e4 · 06152e4
1 parent 2cf97f0
commit 06152e4
Show file tree

Hide file tree

Showing 15 changed files with 109 additions and 59 deletions.
diff --git a/vuu-ui/cypress/support/component/commands.tsx b/vuu-ui/cypress/support/component/commands.tsx
@@ -5,7 +5,7 @@ import "cypress-axe";
 import { Options } from "cypress-axe";
 // import { PerformanceResult, PerformanceTester } from "./PerformanceTester";
 import { ReactNode } from "react";
-import { ThemeProvider } from "@finos/vuu-utils";
+import { SaltProvider } from "@salt-ds/core";
 
 const SupportedThemeModeValues = ["light", "dark"] as const;
 type SupportedThemeMode = (typeof SupportedThemeModeValues)[number];
@@ -99,9 +99,9 @@ Cypress.Commands.add(
 
 Cypress.Commands.add("mount", function (children, options) {
   return cypressMount(
-    <ThemeProvider density="high" theme="vuu">
+    <SaltProvider density="high" theme="vuu-theme">
       {children},
-    </ThemeProvider>,
+    </SaltProvider>,
     options
   );
 });

diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -68,6 +68,7 @@
     "@playwright/test": "^1.43.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "^9.0.0",

diff --git a/vuu-ui/packages/vuu-filters/src/__tests__/__component__/FilterEditor.cy.tsx b/vuu-ui/packages/vuu-filters/src/__tests__/__component__/FilterEditor.cy.tsx
@@ -4,11 +4,7 @@ import {
 } from "../../../../../showcase/src/examples/Filters/FilterEditor/FilterEditor.examples";
 import { FilterBarOneSimpleFilter } from "../../../../../showcase/src/examples/Filters/FilterBar/FilterBar.examples";
 
-import {
-  clickFilterPillTrigger,
-  clickMenuItem,
-  findFilterPill,
-} from "./filter-test-utils";
+import { clickFilterPillTrigger, clickMenuItem } from "./filter-test-utils";
 
 const assertComboboxReady = () => {
   cy.findByRole("combobox").should("be.focused");
@@ -160,10 +156,10 @@ describe("FilterEditor", () => {
         cy.realPress("Enter");
 
         selectMenuOption("AND");
-        cy.findByRole("listbox").should("be.visible");
+        cy.findByText("currency").should("be.visible");
 
         cy.realPress("ArrowDown");
-        cy.findAllByRole("option", { name: "currency" }).should(
+        cy.findByRole("option", { name: "currency" }).should(
           "have.class",
           "saltOption-active"
         );

diff --git a/vuu-ui/packages/vuu-filters/src/__tests__/__component__/Filterbar.cy.tsx b/vuu-ui/packages/vuu-filters/src/__tests__/__component__/Filterbar.cy.tsx
@@ -5,11 +5,13 @@ import {
 } from "../../../../../showcase/src/examples/Filters/FilterBar/FilterBar.examples";
 
 // Common selectors
-const FILTER_CONTAINER = ".vuuFilterBar-filters";
-const ADD_BUTTON = ".vuuFilterBar-add";
+const FILTER_CONTAINER = ".vuuCustomFilters-filters";
 const FILTER_CLAUSE = ".vuuFilterClause";
 const VISIBLE_MONTH = ".saltCalendarCarousel-slide:not([aria-hidden])";
 
+const findAddButton = () =>
+  cy.get(".vuuCustomFilters").findByRole("button", { name: "Add filter" });
+
 const findFilter = (className: string) =>
   cy.get(FILTER_CONTAINER).find(className);
 
@@ -24,11 +26,19 @@ const clickListItems = (...labels: string[]) => {
   }
 };
 
-const clickButton = (label: string) => {
-  cy.findByText(label).should("be.visible");
+const clickButton = (label: string, skipVisibilityCheck = false) => {
+  // We occasionally need to skip visibility check. e.g. cypress fails
+  // to take into account the fact that an element in a dialog might be
+  // visible even although technically outside the limits of containing
+  // box - the dialog renders over and completely outside the contaning box.
+  if (!skipVisibilityCheck) {
+    cy.findByText(label).should("be.visible");
+  }
   cy.findByText(label).realClick();
 };
 
+const clickDialogButton = (label: string) => clickButton(label, true);
+
 const waitUntilEditableLabelIsFocused = (index = 0) =>
   findFilter(".vuuFilterPill")
     .eq(index)
@@ -82,14 +92,14 @@ describe("The mouse user", () => {
   describe("WHEN user click Add button on empty Filterbar", () => {
     it("THEN FilterEditor is shown and new FilterClause is initiated", () => {
       cy.mount(<DefaultFilterBar />);
-      cy.get(ADD_BUTTON).realClick();
+      findAddButton().realClick();
       cy.get(FILTER_CONTAINER).find("> *").should("have.length", 0);
-      cy.get(".vuuPortal").find(".vuuFilterEditor").should("be.visible");
+      cy.get(".vuuFilterEditor").should("be.visible");
     });
 
     it("THEN column combobox is focused and the dropdown shown", () => {
       cy.mount(<DefaultFilterBar />);
-      cy.get(ADD_BUTTON).realClick();
+      findAddButton().realClick();
       cy.findByRole("combobox").should("be.focused");
       cy.findByRole("combobox").should("have.attr", "aria-expanded", "true");
 
@@ -114,7 +124,7 @@ describe("The mouse user", () => {
           onFilterStateChanged={onFilterStateChanged}
         />
       );
-      cy.get(ADD_BUTTON).realClick();
+      findAddButton().realClick();
       clickListItems(testFilter.column, testFilter.op, testFilter.value);
       clickButton("Save");
     });
@@ -226,13 +236,13 @@ describe("The mouse user", () => {
           onFilterStateChanged={onFilterStateChanged}
         />
       );
-      cy.get(ADD_BUTTON).realClick();
+      findAddButton().realClick();
       clickListItems(filter1.column, filter1.op, filter1.value);
       clickButton("Save");
       waitUntilEditableLabelIsFocused();
       pressEnterEditableLabel();
 
-      cy.get(ADD_BUTTON).realClick();
+      findAddButton().realClick();
       clickListItems(filter2.column, filter2.op, filter2.value);
       clickButton("Save");
       waitUntilEditableLabelIsFocused(1);
@@ -281,7 +291,7 @@ describe("The mouse user", () => {
         .find(".vuuSplitButton-trigger")
         .realClick();
       clickButton("Delete");
-      clickButton("Remove");
+      clickDialogButton("Remove");
 
       findFilter(".vuuFilterPill").should("have.length", 1);
       findFilter(".vuuFilterPill").contains(filter1.name);
@@ -301,7 +311,7 @@ describe("The mouse user", () => {
         .find(".vuuSplitButton-trigger")
         .realClick();
       clickButton("Delete");
-      clickButton("Remove");
+      clickDialogButton("Remove");
 
       findFilter(".vuuFilterPill").should("have.length", 1);
       findFilter(".vuuFilterPill").contains(filter2.name);
@@ -324,7 +334,7 @@ describe("The keyboard user", () => {
       cy.mount(<DefaultFilterBar />);
       cy.findByTestId("pre-filterbar").find("input").focus();
       cy.realPress("Tab");
-      cy.get(ADD_BUTTON).should("be.focused");
+      findAddButton().should("be.focused");
     });
 
     describe("WHEN user presses ADD then uses keyboard to select currency", () => {
@@ -333,14 +343,14 @@ describe("The keyboard user", () => {
 
         cy.findByTestId("pre-filterbar").find("input").focus();
         cy.realPress("Tab");
-        cy.get(ADD_BUTTON).should("be.focused");
+        findAddButton().should("be.focused");
         cy.realPress("Enter");
         cy.findByRole("combobox").should("be.focused");
 
         // make sure columns list has renderered
-        cy.findByText("currency").should("exist");
+        cy.findByText("currency").should("be.visible");
         cy.realPress("ArrowDown");
-        cy.get(".vuuListItem.vuuHighlighted").should("have.text", "currency");
+        cy.get(".saltOption-active").should("have.text", "currency");
         cy.realPress("Enter");
 
         assertInputValue(".vuuFilterClauseColumn", "currency");
@@ -359,18 +369,18 @@ describe("The keyboard user", () => {
 
         cy.findByTestId("pre-filterbar").find("input").focus();
         cy.realPress("Tab");
-        cy.get(ADD_BUTTON).should("be.focused");
+        findAddButton().should("be.focused");
         cy.realPress("Enter");
         cy.findByRole("combobox").should("be.focused");
 
         // make sure columns list has renderered
-        cy.findByText("currency").should("exist");
+        cy.findByText("currency").should("be.visible");
         cy.realPress("ArrowDown");
-        cy.get(".vuuListItem.vuuHighlighted").should("have.text", "currency");
+        cy.get(".saltOption-active").should("have.text", "currency");
         cy.realPress("Enter");
 
-        cy.findByText("=").should("exist");
-        cy.get(".vuuListItem.vuuHighlighted").should("have.text", "=");
+        cy.findByText("=").should("be.visible");
+        cy.get(".saltOption-active").should("have.text", "=");
         cy.realPress("Enter");
 
         assertInputValue(".vuuFilterClauseOperator", "=");
@@ -388,19 +398,20 @@ describe("The keyboard user", () => {
 
           cy.findByTestId("pre-filterbar").find("input").focus();
           cy.realPress("Tab");
-          cy.get(ADD_BUTTON).should("be.focused");
+          findAddButton().should("be.focused");
           cy.realPress("Enter");
           cy.findByRole("combobox").should("be.focused");
 
           // make sure columns list has renderered
-          cy.findByText("currency").should("exist");
+          cy.findByText("currency").should("be.visible");
           cy.realPress("ArrowDown");
+          cy.get(".saltOption-active").should("have.text", "currency");
           cy.realPress("Enter");
 
-          cy.findByText("=").should("exist");
+          cy.findByText("=").should("be.visible");
           cy.realPress("Enter");
 
-          cy.findByText("USD").should("exist");
+          cy.findByText("USD").should("be.visible");
           cy.realPress("ArrowDown");
           cy.realPress("ArrowDown");
           cy.realPress("ArrowDown");
@@ -410,7 +421,6 @@ describe("The keyboard user", () => {
           assertInputValue(".vuuFilterClauseValue", "USD");
 
           cy.get(FILTER_CLAUSE).should("have.length", 1);
-
           cy.findByRole("button", { name: "Save" }).should("be.focused");
         });
       });
@@ -501,7 +511,7 @@ describe("WHEN a user applies a date filter", () => {
       };
 
       // Add date filter
-      cy.get(ADD_BUTTON).realClick();
+      findAddButton().realClick();
       clickListItems(DATE_COLUMN, op);
       cy.get(".vuuDatePopup .vuuIconButton").realClick();
       cy.get(`${VISIBLE_MONTH} .saltCalendarDay-today`).realClick();
@@ -533,7 +543,7 @@ describe("Deleting and renaming filters", () => {
         .find(".vuuSplitButton-trigger")
         .realClick();
       clickButton("Delete");
-      clickButton("Remove");
+      clickDialogButton("Remove");
 
       cy.get("@onFilterDeleted").should("be.calledWithExactly", {
         column: "currency",

diff --git a/vuu-ui/packages/vuu-filters/src/__tests__/__component__/filter-test-utils.ts b/vuu-ui/packages/vuu-filters/src/__tests__/__component__/filter-test-utils.ts
@@ -1,4 +1,4 @@
-const FILTER_CONTAINER = ".vuuFilterBar-filters";
+const FILTER_CONTAINER = ".vuuCustomFilters-filters";
 
 export const findFilterPill = (index = 0) =>
   cy.get(FILTER_CONTAINER).find(`.vuuFilterPill[data-index="${index}"]`);

diff --git a/vuu-ui/packages/vuu-filters/src/custom-filters/CustomFilters.tsx b/vuu-ui/packages/vuu-filters/src/custom-filters/CustomFilters.tsx
@@ -1,7 +1,6 @@
 import { Prompt } from "@finos/vuu-popups";
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
 import { IconButton } from "@finos/vuu-ui-controls";
-import cx from "clsx";
 import { HTMLAttributes, ReactElement, useRef } from "react";
 import { type FilterBarProps } from "../filter-bar";
 import { FilterEditor } from "../filter-editor";
@@ -90,12 +89,11 @@ export const CustomFilters = ({
 
   return (
     <>
-      <div className="vuuCustomFilters">
+      <div className="vuuCustomFilters" ref={rootRef}>
         <div className={`${classBase}-filters`}>{getFilterPills()}</div>
         <IconButton
           {...addButtonProps}
           aria-label="Add filter"
-          className={cx("vuuIconButton")}
           data-selectable={false}
           icon="plus"
           key="filter-add"

diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
@@ -67,13 +67,15 @@ export const FilterBar = ({
           className="vuuIconToggleButton"
           value="custom-filter"
           aria-label="Custom filters"
+          tabIndex={-1}
         >
           <Icon name="grid" size={24} />
         </ToggleButton>
         <ToggleButton
           className="vuuIconToggleButton"
           value="quick-filter"
           aria-label="Quick filters"
+          tabIndex={-1}
         >
           <Icon name="tune" size={24} />
         </ToggleButton>

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClause.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClause.tsx
@@ -30,6 +30,7 @@ export interface FilterClauseProps
   onCancel?: FilterClauseCancelHandler;
   onDropdownClose?: (closeReason: CloseReason) => void;
   onDropdownOpen?: () => void;
+  onFocusSave?: () => void;
   suggestionProvider?: () => SuggestionFetcher;
   tableSchema: TableSchema;
 }
@@ -42,6 +43,7 @@ export const FilterClause = ({
   onCancel,
   onDropdownClose,
   onDropdownOpen,
+  onFocusSave,
   filterClauseModel,
   suggestionProvider,
   tableSchema,
@@ -62,6 +64,7 @@ export const FilterClause = ({
   } = useFilterClause({
     filterClauseModel,
     onCancel,
+    onFocusSave,
     columnsByName,
   });