Add presets tests for products list view (#3506)

cypress/e2e/products/productsList/productPresets.js

@@ -0,0 +1,37 @@
+/// <reference types="cypress"/>
+/// <reference types="../../../support"/>
+
+import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
+import { urlList } from "../../../fixtures/urlList";
+import { ensureCanvasStatic } from "../../../support/customCommands/sharedElementsOperations/canvas";
+import {
+  addPresetWithName,
+  confirmActivePresetName,
+  confirmGridRowsContainsText,
+  searchItems,
+} from "../../../support/pages/catalog/presetsAndSearch";
+
+describe("As a user I should be able to save selected filters with search queries under the given name", () => {
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    cy.visit(urlList.products);
+  });
+
+  it(
+    "should be able to add preset. TC: SALEOR_3802",
+    { tags: ["@productsList", "@allEnv", "@stable"] },
+    () => {
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => {
+        cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21);
+      });
+      const presetName = "hoodie";
+
+      searchItems(presetName);
+      addPresetWithName(presetName);
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => {
+        confirmGridRowsContainsText(presetName);
+        confirmActivePresetName(presetName);
+      });
+    },
+  );
+});

cypress/elements/shared/index.js

@@ -1,5 +1,12 @@
 import { ADDRESS_SELECTORS } from "./addressForm";
 import { BUTTON_SELECTORS } from "./button-selectors";
+import { PRESETS, SEARCH } from "./presetsAndSearch";
 import { SHARED_ELEMENTS } from "./sharedElements";
 
-export { ADDRESS_SELECTORS, BUTTON_SELECTORS, SHARED_ELEMENTS };
+export {
+  ADDRESS_SELECTORS,
+  BUTTON_SELECTORS,
+  PRESETS,
+  SEARCH,
+  SHARED_ELEMENTS,
+};

cypress/elements/shared/presetsAndSearch.js

@@ -0,0 +1,9 @@
+export const PRESETS = {
+  addPresetButton: "[data-test-id='add-preset-button']",
+  presetNameTextField: '[data-test-id="preset-name-text-field"]',
+  savePresetNameButton: '[data-test-id="save-preset-button"]',
+  activePresetName: '[data-test-id="show-saved-filters-button"]',
+};
+export const SEARCH = {
+  searchInput: "[data-test-id='search-input']",
+};

cypress/support/pages/catalog/presetsAndSearch.js

@@ -0,0 +1,30 @@
+import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
+import { PRESETS, SEARCH } from "../../../elements/shared";
+
+export function searchItems(name) {
+  return cy
+    .addAliasToGraphRequest("ProductList")
+    .get(SEARCH.searchInput)
+    .type(name)
+    .wait("@ProductList");
+}
+export function addPresetWithName(name) {
+  return cy
+    .get(PRESETS.addPresetButton)
+    .click()
+    .get(PRESETS.presetNameTextField)
+    .type(name)
+    .get(PRESETS.savePresetNameButton)
+    .click()
+    .wait("@ProductList");
+}
+export function confirmGridRowsContainsText(name) {
+  return cy
+    .get(PRODUCTS_LIST.dataGridTable)
+    .find("tbody")
+    .find("tr")
+    .should("contain.text", name);
+}
+export function confirmActivePresetName(name) {
+  return cy.get(PRESETS.activePresetName).should("contain.text", name);
+}

src/components/AppLayout/ListFilters/components/SearchInput.tsx

@@ -29,6 +29,7 @@ const SearchInput: React.FC<SearchInputProps> = props => {
               value={search}
               onChange={handleSearchChange}
               placeholder={placeholder}
+              data-test-id="search-input"
             />
           </Box>
         );

src/components/FilterPresetsSelect/FilterPresetsSelect.tsx

@@ -174,6 +174,7 @@ export const FilterPresetsSelect = ({
       {renderDropdown()}
       {showUpdateButton && (
         <Button
+          data-test-id="update-preset-button"
           className={sprinkles({
             marginLeft: 6,
           })}
@@ -188,6 +189,7 @@ export const FilterPresetsSelect = ({
         <Tooltip>
           <Tooltip.Trigger>
             <Button
+              data-test-id="add-preset-button"
               className={sprinkles({
                 marginLeft: 6,
               })}

src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx

@@ -71,16 +71,18 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
                 value={data.name}
                 onChange={change}
                 error={errors}
+                data-test-id="preset-name-text-field"
                 helperText={errors ? "This field is required" : null}
               />
             </DialogContent>
             <DialogActions>
-              <BackButton onClick={onClose}>
+              <BackButton onClick={onClose} data-test-id="cancel-preset-button">
                 <FormattedMessage {...buttonMessages.cancel} />
               </BackButton>
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
+                data-test-id="save-preset-button"
               >
                 <FormattedMessage {...buttonMessages.save} />
               </ConfirmButton>