From 1215071ab96e0262e60816fc7a5ba5a44e06c13e Mon Sep 17 00:00:00 2001
From: gianantoniopini <63844628+gianantoniopini@users.noreply.github.com>
Date: Wed, 20 Jan 2021 14:27:27 +0100
Subject: [PATCH] Dashboard tests: added test for loading screen

---
 src/components/router/LoadingScreen.js    |  2 +-
 src/pages/app/__tests__/dashboard.test.js | 70 ++++++++++++++++-------
 2 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/components/router/LoadingScreen.js b/src/components/router/LoadingScreen.js
index 19b6ec3a..67e38731 100644
--- a/src/components/router/LoadingScreen.js
+++ b/src/components/router/LoadingScreen.js
@@ -4,7 +4,7 @@ import { getRandomTip } from '../../data/tips';
 import Logo from '../shared/Logo';
 
 const LoadingScreen = () => (
-  <Modal open hideBackdrop>
+  <Modal data-testid="loading-screen" open hideBackdrop>
     <Fade in>
       <div className="w-screen h-screen flex justify-center items-center outline-none">
         <div className="flex flex-col items-center">
diff --git a/src/pages/app/__tests__/dashboard.test.js b/src/pages/app/__tests__/dashboard.test.js
index 6ab6cf91..93d1615e 100644
--- a/src/pages/app/__tests__/dashboard.test.js
+++ b/src/pages/app/__tests__/dashboard.test.js
@@ -1,5 +1,10 @@
 import React from 'react';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
 
 import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
 
@@ -16,8 +21,9 @@ import Dashboard from '../dashboard';
 describe('Dashboard', () => {
   let resumes = null;
   const user = DatabaseConstants.user1;
+  const loadingScreenTestId = 'loading-screen';
 
-  beforeEach(async () => {
+  async function setup(waitForLoadingScreenToDisappear) {
     FirebaseStub.database().initializeData();
 
     resumes = (
@@ -48,29 +54,51 @@ describe('Dashboard', () => {
       await FirebaseStub.auth().signInAnonymously();
     });
 
-    await waitFor(() => screen.getByText('Create Resume'));
+    if (waitForLoadingScreenToDisappear) {
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId(loadingScreenTestId),
+      );
+    }
+  }
+
+  describe('after loading', () => {
+    beforeEach(async () => {
+      await setup(true);
+    });
+
+    describe('renders', () => {
+      it('document title', () => {
+        expect(document.title).toEqual('Dashboard | Reactive Resume');
+      });
+
+      it('create resume', () => {
+        expect(screen.getByText(/create resume/i)).toBeInTheDocument();
+      });
+
+      it('preview of user resumes', () => {
+        expect(Object.keys(resumes)).toHaveLength(2);
+
+        expect(Object.values(resumes)[0].user).toEqual(user.uid);
+        expect(
+          screen.getByText(Object.values(resumes)[0].name),
+        ).toBeInTheDocument();
+        expect(Object.values(resumes)[1].user).toEqual(user.uid);
+        expect(
+          screen.getByText(Object.values(resumes)[1].name),
+        ).toBeInTheDocument();
+      });
+    });
   });
 
-  describe('renders', () => {
-    it('document title', async () => {
-      expect(document.title).toEqual('Dashboard | Reactive Resume');
+  describe('while loading', () => {
+    beforeEach(async () => {
+      await setup(false);
     });
 
-    it('create resume', async () => {
-      expect(screen.getByText('Create Resume')).toBeInTheDocument();
-    });
-
-    it('preview of user resumes', async () => {
-      expect(Object.keys(resumes)).toHaveLength(2);
-
-      expect(Object.values(resumes)[0].user).toEqual(user.uid);
-      expect(
-        screen.getByText(Object.values(resumes)[0].name),
-      ).toBeInTheDocument();
-      expect(Object.values(resumes)[1].user).toEqual(user.uid);
-      expect(
-        screen.getByText(Object.values(resumes)[1].name),
-      ).toBeInTheDocument();
+    describe('renders', () => {
+      it('loading screen', () => {
+        expect(screen.getByTestId(loadingScreenTestId)).toBeInTheDocument();
+      });
     });
   });
 });