test: implement confirmation in item delete tests

graasp · Jun 9, 2021 · fa6a368 · fa6a368
1 parent 0189357
commit fa6a368
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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';