test for updating presets (#3977)

cypress/e2e/products/productsList/productPresets.js

@@ -2,10 +2,14 @@
 /// <reference types="../../../support"/>
 
 import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
-import { urlList } from "../../../fixtures/urlList";
+import { SEARCH } from "../../../elements/shared";
+import { LOCAL_STORAGE_KEYS, urlList } from "../../../fixtures/";
 import { ensureCanvasStatic } from "../../../support/customCommands/sharedElementsOperations/canvas";
 import {
   addPresetWithName,
+  clickSavedPresetContain,
+  clickShowSavedPresetsButton,
+  clickUpdatePresetButton,
   confirmActivePresetName,
   confirmGridRowsContainsText,
   searchItems,
@@ -14,13 +18,14 @@ import {
 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"] },
     () => {
+      cy.visit(urlList.products);
+
       ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => {
         cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21);
       });
@@ -34,4 +39,29 @@ describe("As a user I should be able to save selected filters with search querie
       });
     },
   );
+  it(
+    "should be able to update preset. TC: SALEOR_2713",
+    { tags: ["@productsList", "@allEnv", "@stable"] },
+    () => {
+      const searchQuery = "bean";
+      // space is needed since we add second part of query into input
+      const updatedSearchQuery = " juice";
+      window.localStorage.setItem(
+        LOCAL_STORAGE_KEYS.keys.productPresets,
+        `[{"data":"query=${searchQuery}","name":"${searchQuery}"}]`,
+      );
+      cy.visit(urlList.products);
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable);
+      clickShowSavedPresetsButton();
+      clickSavedPresetContain(searchQuery);
+      cy.get(SEARCH.searchInput).click().type(updatedSearchQuery);
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable);
+      clickUpdatePresetButton();
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => {
+        expect(
+          localStorage.getItem(LOCAL_STORAGE_KEYS.keys.productPresets),
+        ).to.contains(`query=${searchQuery}%20${updatedSearchQuery.trim()}`);
+      });
+    },
+  );
 });

cypress/elements/shared/presetsAndSearch.js

@@ -3,6 +3,8 @@ export const PRESETS = {
   presetNameTextField: '[data-test-id="preset-name-text-field"]',
   savePresetNameButton: '[data-test-id="save-preset-button"]',
   activePresetName: '[data-test-id="show-saved-filters-button"]',
+  savedPreset: '[data-test-id="preset"]',
+  updatePresetButton: '[data-test-id="update-preset-button"]',
 };
 export const SEARCH = {
   searchInput: "[data-test-id='search-input']",

cypress/fixtures/index.js

@@ -4,3 +4,4 @@ export { urlList } from "./urlList";
 export { ONE_PERMISSION_USERS, TEST_ADMIN_USER } from "./users";
 export { MESSAGES } from "./messages";
 export * as LOCAL_STORAGE_FOR_COLUMN_PICKER from "./localStorage/columnPickerMocks";
+export * as LOCAL_STORAGE_KEYS from "./localStorage/keys";

cypress/fixtures/localStorage/keys.js

@@ -0,0 +1,3 @@
+export const keys = {
+  productPresets: "productPresets",
+};

cypress/support/pages/catalog/presetsAndSearch.js

@@ -28,3 +28,12 @@ export function confirmGridRowsContainsText(name) {
 export function confirmActivePresetName(name) {
   return cy.get(PRESETS.activePresetName).should("contain.text", name);
 }
+export function clickShowSavedPresetsButton() {
+  cy.get(PRESETS.activePresetName).click();
+}
+export function clickSavedPresetContain(presetName) {
+  cy.get(PRESETS.savedPreset).contains(presetName).click();
+}
+export function clickUpdatePresetButton() {
+  cy.get(PRESETS.updatePresetButton).click();
+}

src/components/FilterPresetsSelect/FilterPresetItem.tsx

@@ -1,6 +1,7 @@
-import { Box, Dropdown, List, RemoveIcon, Text } from "@saleor/macaw-ui/next";
 import React, { MouseEvent } from "react";
 
+import { Box, Dropdown, List, RemoveIcon, Text } from "@saleor/macaw-ui/next";
+
 interface FilterPresetItemProps {
   onSelect: (e: MouseEvent<HTMLLIElement>) => void;
   onRemove: () => void;
@@ -30,6 +31,7 @@ export const FilterPresetItem = ({
         onClick={onSelect}
         onMouseOver={() => setHasHover(true)}
         onMouseLeave={() => setHasHover(false)}
+        data-test-id="preset"
       >
         <Text ellipsis variant={isActive ? "bodyStrong" : "body"}>
           {children}