Dashboard: added unit tests for Delete resume

src/components/dashboard/ResumePreview.js

@@ -9,6 +9,8 @@ import DatabaseContext from '../../contexts/DatabaseContext';
 import ModalContext from '../../contexts/ModalContext';
 import styles from './ResumePreview.module.css';
 
+const menuToggleDataTestIdPrefix = 'resume-preview-menu-toggle-';
+
 const ResumePreview = ({ resume }) => {
   const { t, i18n } = useTranslation();
   const [anchorEl, setAnchorEl] = useState(null);
@@ -54,6 +56,7 @@ const ResumePreview = ({ resume }) => {
           onClick={handleOpen}
         />
         <MdMoreHoriz
+          data-testid={`${menuToggleDataTestIdPrefix}${resume.id}`}
           color="#fff"
           size="48"
           className="cursor-pointer"
@@ -96,3 +99,5 @@ const ResumePreview = ({ resume }) => {
 };
 
 export default ResumePreview;
+
+export { menuToggleDataTestIdPrefix };

src/pages/app/__tests__/dashboard.test.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import {
+  fireEvent,
+  queryByText,
   render,
   screen,
+  waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 
@@ -10,6 +13,7 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 import '../../../i18n/index';
 import '../../../utils/dayjs';
 import { dataTestId as loadingScreenTestId } from '../../../components/router/LoadingScreen';
+import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 import { SettingsProvider } from '../../../contexts/SettingsContext';
 import { ModalProvider } from '../../../contexts/ModalContext';
 import { UserProvider } from '../../../contexts/UserContext';
@@ -85,6 +89,68 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('when resume is deleted', () => {
+    let mockDatabaseRemoveFunction = null;
+    let resumeToDelete = null;
+    let undeletedResume = null;
+    let resumeToDeleteId = null;
+
+    beforeEach(async () => {
+      await setup();
+
+      [resumeToDelete, undeletedResume] = Object.values(resumes);
+      resumeToDeleteId = resumeToDelete.id;
+
+      mockDatabaseRemoveFunction = jest.spyOn(
+        FirebaseStub.database().ref(
+          `${DatabaseConstants.resumesPath}/${resumeToDeleteId}`,
+        ),
+        'remove',
+      );
+
+      const resumeToDeleteMenuToggle = screen.getByTestId(
+        `${resumePreviewMenuToggleDataTestIdPrefix}${resumeToDeleteId}`,
+      );
+      fireEvent.click(resumeToDeleteMenuToggle);
+
+      const menuItems = screen.getAllByRole('menuitem');
+      let deleteMenuItem = null;
+      for (let index = 0; index < menuItems.length; index++) {
+        if (queryByText(menuItems[index], /delete/i)) {
+          deleteMenuItem = menuItems[index];
+          break;
+        }
+      }
+      fireEvent.click(deleteMenuItem);
+    });
+
+    it('removes it from database and preview', async () => {
+      await waitFor(() =>
+        expect(mockDatabaseRemoveFunction).toHaveBeenCalledTimes(1),
+      );
+
+      await waitFor(() =>
+        expect(screen.queryByText(resumeToDelete.name)).toBeNull(),
+      );
+      expect(screen.getByText(undeletedResume.name)).toBeInTheDocument();
+    });
+
+    /*
+    it('displays notification', async () => {
+      await waitFor(() =>
+        expect(
+          screen.getByText(`${resumeToDelete.name} was deleted successfully`),
+        ).toBeInTheDocument(),
+      );
+    });
+    */
+
+    it('closes menu', () => {
+      const menuItems = screen.queryAllByRole('menuitem');
+      expect(menuItems).toHaveLength(0);
+    });
+  });
+
   describe('while loading', () => {
     beforeEach(async () => {
       await setup(false);