Builder page: unit tests separated in different files

src/pages/app/__tests__/builder.rendering.test.js

@@ -0,0 +1,63 @@
+import {
+  fireEvent,
+  getByText,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+import { DatabaseConstants } from 'gatsby-plugin-firebase';
+
+import { dataTestId as loadingScreenTestId } from '../../../components/router/LoadingScreen';
+
+import setup, {
+  setupAndWait,
+  waitForDatabaseUpdateToHaveCompleted,
+} from './helpers/builder';
+
+const testTimeoutInMilliseconds = 10000;
+jest.setTimeout(testTimeoutInMilliseconds);
+
+test('renders first and last name', async () => {
+  const { resume } = await setupAndWait(
+    DatabaseConstants.demoStateResume1Id,
+    true,
+    true,
+  );
+
+  expect(
+    screen.getByRole('textbox', { name: /first name/i }),
+  ).toHaveDisplayValue(resume.profile.firstName);
+  expect(
+    screen.getByRole('textbox', { name: /last name/i }),
+  ).toHaveDisplayValue(resume.profile.lastName);
+  expect(
+    screen.getAllByText(new RegExp(resume.profile.firstName, 'i')).length,
+  ).toBeTruthy();
+  expect(
+    screen.getAllByText(new RegExp(resume.profile.lastName, 'i')).length,
+  ).toBeTruthy();
+});
+
+test('renders loading screen', async () => {
+  const { mockDatabaseUpdateFunction } = await setup(
+    DatabaseConstants.demoStateResume1Id,
+  );
+
+  expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
+
+  await waitForElementToBeRemoved(() =>
+    screen.getByTestId(loadingScreenTestId),
+  );
+
+  await waitForDatabaseUpdateToHaveCompleted(mockDatabaseUpdateFunction);
+});
+
+test('if resume is in initial state, renders load demo data notification', async () => {
+  await setup(DatabaseConstants.initialStateResumeId);
+
+  const notification = await screen.findByRole('alert');
+  expect(
+    getByText(notification, /Not sure where to begin\? Try loading demo data/i),
+  ).toBeInTheDocument();
+  fireEvent.click(notification);
+});