Dashboard page: added first unit test for create resume interaction

src/components/dashboard/CreateResume.js

@@ -5,6 +5,8 @@ import ModalContext from '../../contexts/ModalContext';
 import { handleKeyUp } from '../../utils';
 import styles from './CreateResume.module.css';
 
+const createResumeButtonDataTestId = 'create-resume-button';
+
 const CreateResume = () => {
   const { t } = useTranslation();
   const { emitter, events } = useContext(ModalContext);
@@ -17,6 +19,7 @@ const CreateResume = () => {
         <MdAdd size="48" />
       </div>
       <div
+        data-testid={createResumeButtonDataTestId}
         tabIndex="0"
         role="button"
         className={styles.page}
@@ -33,3 +36,5 @@ const CreateResume = () => {
 };
 
 export default memo(CreateResume);
+
+export { createResumeButtonDataTestId };

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

@@ -14,6 +14,7 @@ import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 import '../../../i18n/index';
 import '../../../utils/dayjs';
 import { dataTestId as loadingScreenTestId } from '../../../components/router/LoadingScreen';
+import { createResumeButtonDataTestId } from '../../../components/dashboard/CreateResume';
 import { menuToggleDataTestIdPrefix as resumePreviewMenuToggleDataTestIdPrefix } from '../../../components/dashboard/ResumePreview';
 import { SettingsProvider } from '../../../contexts/SettingsContext';
 import { ModalProvider } from '../../../contexts/ModalContext';
@@ -101,6 +102,46 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('when resume is created', () => {
+    beforeEach(async () => {
+      await setup();
+
+      const dashboardCreateResumeButton = await screen.findByTestId(
+        createResumeButtonDataTestId,
+      );
+      fireEvent.click(dashboardCreateResumeButton);
+    });
+
+    describe('with name shorter than 5 characters', () => {
+      it('displays validation error and notification', async () => {
+        const nameTextBox = screen.getByRole('textbox', { name: /name/i });
+        fireEvent.change(nameTextBox, { target: { value: 'CV 1' } });
+
+        fireEvent.focusOut(nameTextBox);
+
+        await waitFor(() =>
+          expect(
+            screen.getByText(/Please enter at least 5 characters/i),
+          ).toBeInTheDocument(),
+        );
+
+        const modalCreateResumeButton = screen.getByRole('button', {
+          name: /create resume/i,
+        });
+        fireEvent.click(modalCreateResumeButton);
+
+        const notification = await screen.findByRole('alert');
+        expect(
+          getByText(
+            notification,
+            /You might need to fill up all the required fields/i,
+          ),
+        ).toBeInTheDocument();
+        fireEvent.click(notification);
+      });
+    });
+  });
+
   describe('when resume is deleted', () => {
     let mockDatabaseRemoveFunction = null;
     let resumeToDelete = null;