test - user should be able to delete saved preset (#3989)

cypress/e2e/products/productsList/productPresets.js

@@ -7,11 +7,13 @@ import { LOCAL_STORAGE_KEYS, urlList } from "../../../fixtures/";
 import { ensureCanvasStatic } from "../../../support/customCommands/sharedElementsOperations/canvas";
 import {
   addPresetWithName,
+  clickDeletePresetButton,
   clickSavedPresetContain,
   clickShowSavedPresetsButton,
   clickUpdatePresetButton,
   confirmActivePresetName,
   confirmGridRowsContainsText,
+  hoverSavedPresetContain,
   searchItems,
 } from "../../../support/pages/catalog/presetsAndSearch";
 
@@ -64,4 +66,32 @@ describe("As a user I should be able to save selected filters with search querie
       });
     },
   );
+  it(
+    "should be able to delete preset. TC: SALEOR_2714",
+    { tags: ["@productsList", "@allEnv", "@stable"] },
+    () => {
+      const firstPreset = "bean";
+      const secondPreset = "hoodie";
+      window.localStorage.setItem(
+        LOCAL_STORAGE_KEYS.keys.productPresets,
+        `[{"data":"query=${firstPreset}","name":"${firstPreset}"},{"data":"query=${secondPreset}","name":"${secondPreset}"}]`,
+      );
+      cy.visit(urlList.products);
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable);
+      clickShowSavedPresetsButton();
+      hoverSavedPresetContain(secondPreset);
+      clickDeletePresetButton();
+      cy.clickSubmitButton();
+      ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => {
+        expect(
+          localStorage.getItem(LOCAL_STORAGE_KEYS.keys.productPresets),
+        ).to.contains(`query=${firstPreset}`);
+        expect(
+          localStorage.getItem(LOCAL_STORAGE_KEYS.keys.productPresets),
+        ).to.not.contains(`query=${secondPreset}`);
+        clickShowSavedPresetsButton();
+        cy.contains(firstPreset).should("be.visible");
+      });
+    },
+  );
 });

cypress/elements/shared/presetsAndSearch.js

@@ -3,6 +3,7 @@ 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"]',
+  presetDeleteButton: '[data-test-id="preset-delete-button"]',
   savedPreset: '[data-test-id="preset"]',
   updatePresetButton: '[data-test-id="update-preset-button"]',
 };

cypress/support/pages/catalog/presetsAndSearch.js

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

src/components/FilterPresetsSelect/FilterPresetItem.tsx

@@ -48,6 +48,7 @@ export const FilterPresetItem = ({
             alignItems="center"
           >
             <RemoveIcon
+              data-test-id="preset-delete-button"
               color={{
                 default: "iconNeutralSubdued",
                 hover: "iconNeutralPlain",