From fa6a3689dcfab8289bc1a47e3c44796125c0f94b Mon Sep 17 00:00:00 2001
From: Abdallah <abdallah.alchami1@gmail.com>
Date: Tue, 8 Jun 2021 17:38:32 +0200
Subject: [PATCH] test: implement confirmation in item delete tests

---
 cypress/integration/item/delete/gridDeleteItem.spec.js  | 2 ++
 cypress/integration/item/delete/listDeleteItem.spec.js  | 2 ++
 cypress/integration/item/delete/listDeleteItems.spec.js | 2 ++
 src/components/main/DeleteItemDialog.js                 | 6 ++++--
 src/config/selectors.js                                 | 1 +
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/item/delete/gridDeleteItem.spec.js b/cypress/integration/item/delete/gridDeleteItem.spec.js
index 003cff2e6..3720a3ca5 100644
--- a/cypress/integration/item/delete/gridDeleteItem.spec.js
+++ b/cypress/integration/item/delete/gridDeleteItem.spec.js
@@ -2,12 +2,14 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
 import {
   buildItemCard,
+  CONFIRM_DELETE_BUTTON_ID,
   ITEM_DELETE_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const deleteItem = (id) => {
   cy.get(`#${buildItemCard(id)} .${ITEM_DELETE_BUTTON_CLASS}`).click();
+  cy.get(`#${CONFIRM_DELETE_BUTTON_ID}`).click();
 };
 
 describe('Delete Item in Grid', () => {
diff --git a/cypress/integration/item/delete/listDeleteItem.spec.js b/cypress/integration/item/delete/listDeleteItem.spec.js
index 4039440a5..67bbed2e4 100644
--- a/cypress/integration/item/delete/listDeleteItem.spec.js
+++ b/cypress/integration/item/delete/listDeleteItem.spec.js
@@ -3,12 +3,14 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
 import {
   buildItemsTableRowId,
+  CONFIRM_DELETE_BUTTON_ID,
   ITEM_DELETE_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 
 const deleteItem = (id) => {
   cy.get(`#${buildItemsTableRowId(id)} .${ITEM_DELETE_BUTTON_CLASS}`).click();
+  cy.get(`#${CONFIRM_DELETE_BUTTON_ID}`).click();
 };
 
 describe('Delete Item in List', () => {
diff --git a/cypress/integration/item/delete/listDeleteItems.spec.js b/cypress/integration/item/delete/listDeleteItems.spec.js
index d6d65578f..cb2b9bb1d 100644
--- a/cypress/integration/item/delete/listDeleteItems.spec.js
+++ b/cypress/integration/item/delete/listDeleteItems.spec.js
@@ -3,6 +3,7 @@ import { ITEM_LAYOUT_MODES } from '../../../../src/enums';
 import { buildItemPath, HOME_PATH } from '../../../../src/config/paths';
 import {
   buildItemsTableRowId,
+  CONFIRM_DELETE_BUTTON_ID,
   ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID,
   ITEMS_TABLE_ROW_CHECKBOX_CLASS,
 } from '../../../../src/config/selectors';
@@ -17,6 +18,7 @@ const deleteItems = (itemIds) => {
   });
 
   cy.get(`#${ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID}`).click();
+  cy.get(`#${CONFIRM_DELETE_BUTTON_ID}`).click();
 };
 
 describe('Delete Items in List', () => {
diff --git a/src/components/main/DeleteItemDialog.js b/src/components/main/DeleteItemDialog.js
index 864cf35f0..00b3a5f53 100644
--- a/src/components/main/DeleteItemDialog.js
+++ b/src/components/main/DeleteItemDialog.js
@@ -9,13 +9,14 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import { makeStyles } from '@material-ui/core/styles';
+import { CONFIRM_DELETE_BUTTON_ID } from '../../config/selectors';
 import {
   DELETE_ITEM_MUTATION_KEY,
   DELETE_ITEMS_MUTATION_KEY,
 } from '../../config/keys';
 
 const useStyles = makeStyles(() => ({
-  deleteButton: {
+  confirmDeleteButton: {
     color: 'red',
   },
 }));
@@ -57,7 +58,8 @@ const DeleteItemDialog = ({ itemIds, open, handleClose }) => {
           {t('Cancel')}
         </Button>
         <Button
-          className={classes.deleteButton}
+          id={CONFIRM_DELETE_BUTTON_ID}
+          className={classes.confirmDeleteButton}
           onClick={onDelete}
           color="secondary"
           autoFocus
diff --git a/src/config/selectors.js b/src/config/selectors.js
index 4b54445a5..2d633da80 100644
--- a/src/config/selectors.js
+++ b/src/config/selectors.js
@@ -1,6 +1,7 @@
 const parseStringForId = (string) => string.replaceAll('+', '');
 
 export const ITEM_DELETE_BUTTON_CLASS = 'itemDeleteButton';
+export const CONFIRM_DELETE_BUTTON_ID = 'confirmDeleteButton';
 export const buildItemCard = (id) => `itemCard-${id}`;
 export const CREATE_ITEM_BUTTON_ID = 'createItemButton';
 export const ITEM_FORM_NAME_INPUT_ID = 'newItemNameInput';