Merge pull request #423 from gianantoniopini/develop

Unit testing environment set up and addition of some unit tests

src/contexts/DatabaseContext.js

@@ -128,4 +128,7 @@ export default DatabaseContext;
 
 const memoizedProvider = memo(DatabaseProvider);
 
-export { memoizedProvider as DatabaseProvider };
+export {
+  memoizedProvider as DatabaseProvider,
+  DEBOUNCE_WAIT_TIME as DebounceWaitTime,
+};

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

@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+
+import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
+
+import { SettingsProvider } from '../../../contexts/SettingsContext';
+import { ModalProvider } from '../../../contexts/ModalContext';
+import { UserProvider } from '../../../contexts/UserContext';
+import {
+  DatabaseProvider,
+  DebounceWaitTime,
+} from '../../../contexts/DatabaseContext';
+import { ResumeProvider } from '../../../contexts/ResumeContext';
+import { StorageProvider } from '../../../contexts/StorageContext';
+import Builder from '../builder';
+
+describe('Builder', () => {
+  let resumeId = null;
+  let resume = null;
+  let mockUpdateFunction = null;
+
+  beforeEach(async () => {
+    FirebaseStub.database().initializeData();
+
+    resumeId = DatabaseConstants.demoStateResume1Id;
+    resume = (
+      await FirebaseStub.database()
+        .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
+        .once('value')
+    ).val();
+    mockUpdateFunction = jest.spyOn(
+      FirebaseStub.database().ref(
+        `${DatabaseConstants.resumesPath}/${resumeId}`,
+      ),
+      'update',
+    );
+
+    render(
+      <SettingsProvider>
+        <ModalProvider>
+          <UserProvider>
+            <DatabaseProvider>
+              <ResumeProvider>
+                <StorageProvider>
+                  <Builder id={resume.id} />
+                </StorageProvider>
+              </ResumeProvider>
+            </DatabaseProvider>
+          </UserProvider>
+        </ModalProvider>
+      </SettingsProvider>,
+    );
+
+    await act(async () => {
+      await FirebaseStub.auth().signInAnonymously();
+    });
+
+    await waitFor(() => mockUpdateFunction.mock.calls[0][0], {
+      timeout: DebounceWaitTime,
+    });
+    mockUpdateFunction.mockClear();
+  });
+
+  describe('renders', () => {
+    it('first and last name', async () => {
+      expect(
+        screen.getByLabelText(new RegExp('first name', 'i')),
+      ).toHaveDisplayValue(resume.profile.firstName);
+      expect(
+        screen.getByLabelText(new RegExp('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();
+    });
+  });
+
+  describe('updates data', () => {
+    it('when input value is changed', async () => {
+      const input = screen.getByLabelText(new RegExp('address line 1', 'i'));
+      const newInputValue = 'test street 123';
+      const now = new Date().getTime();
+
+      fireEvent.change(input, { target: { value: newInputValue } });
+
+      expect(input.value).toBe(newInputValue);
+
+      await waitFor(() => mockUpdateFunction.mock.calls[0][0], {
+        timeout: DebounceWaitTime,
+      });
+      expect(mockUpdateFunction).toHaveBeenCalledTimes(1);
+      const mockUpdateFunctionCallArgument =
+        mockUpdateFunction.mock.calls[0][0];
+      expect(mockUpdateFunctionCallArgument.id).toBe(resume.id);
+      expect(mockUpdateFunctionCallArgument.profile.address.line1).toBe(
+        newInputValue,
+      );
+      expect(mockUpdateFunctionCallArgument.updatedAt).toBeGreaterThanOrEqual(
+        now,
+      );
+    });
+  });
+
+  describe('settings', () => {
+    it('allow to change the language', async () => {
+      const languageSelectElement = screen.getByLabelText('Language');
+      const newLanguage = 'it';
+      const now = new Date().getTime();
+
+      fireEvent.change(languageSelectElement, {
+        target: { value: newLanguage },
+      });
+
+      expect(languageSelectElement).toHaveValue(newLanguage);
+
+      expect(
+        screen.queryByLabelText(new RegExp('date of birth', 'i')),
+      ).toBeNull();
+      expect(
+        screen.getByLabelText(new RegExp('data di nascita', 'i')),
+      ).toBeInTheDocument();
+
+      await waitFor(() => mockUpdateFunction.mock.calls[0][0], {
+        timeout: DebounceWaitTime,
+      });
+      expect(mockUpdateFunction).toHaveBeenCalledTimes(1);
+      const mockUpdateFunctionCallArgument =
+        mockUpdateFunction.mock.calls[0][0];
+      expect(mockUpdateFunctionCallArgument.id).toBe(resume.id);
+      expect(mockUpdateFunctionCallArgument.metadata.language).toBe(
+        newLanguage,
+      );
+      expect(mockUpdateFunctionCallArgument.updatedAt).toBeGreaterThanOrEqual(
+        now,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+
+import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
+
+import '../../../i18n/index';
+import '../../../utils/dayjs';
+import { SettingsProvider } from '../../../contexts/SettingsContext';
+import { ModalProvider } from '../../../contexts/ModalContext';
+import { UserProvider } from '../../../contexts/UserContext';
+import { DatabaseProvider } from '../../../contexts/DatabaseContext';
+import { ResumeProvider } from '../../../contexts/ResumeContext';
+import { StorageProvider } from '../../../contexts/StorageContext';
+import Dashboard from '../dashboard';
+
+describe('Dashboard', () => {
+  let resumes = null;
+  const user = DatabaseConstants.user1;
+
+  beforeEach(async () => {
+    FirebaseStub.database().initializeData();
+
+    resumes = (
+      await FirebaseStub.database()
+        .ref(DatabaseConstants.resumesPath)
+        .orderByChild('user')
+        .equalTo(user.uid)
+        .once('value')
+    ).val();
+
+    render(
+      <SettingsProvider>
+        <ModalProvider>
+          <UserProvider>
+            <DatabaseProvider>
+              <ResumeProvider>
+                <StorageProvider>
+                  <Dashboard user={user} />
+                </StorageProvider>
+              </ResumeProvider>
+            </DatabaseProvider>
+          </UserProvider>
+        </ModalProvider>
+      </SettingsProvider>,
+    );
+
+    await act(async () => {
+      await FirebaseStub.auth().signInAnonymously();
+    });
+
+    await waitFor(() => screen.getByText('Create Resume'));
+  });
+
+  describe('renders', () => {
+    it('document title', async () => {
+      expect(document.title).toEqual('Dashboard | Reactive Resume');
+    });
+
+    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();
+    });
+  });
+});

src/templates/__tests__/Castform.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import FirebaseStub, { DatabaseConstants } from 'gatsby-plugin-firebase';
+
+import '../../i18n/index';
+import Castform from '../Castform';
+
+describe('Castform', () => {
+  let resume = {};
+
+  beforeEach(async () => {
+    FirebaseStub.database().initializeData();
+
+    const resumeId = DatabaseConstants.initialStateResumeId;
+    resume = (
+      await FirebaseStub.database()
+        .ref(`${DatabaseConstants.resumesPath}/${resumeId}`)
+        .once('value')
+    ).val();
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(<Castform data={resume} />);
+
+    expect(container).toBeTruthy();
+    expect(container).toBeInTheDocument();
+  });
+
+  describe('date of birth', () => {
+    const birthDateLabelMatcher = /Date of birth/i;
+
+    it('is not shown if not provided', () => {
+      render(<Castform data={resume} />);
+
+      expect(screen.queryByText(birthDateLabelMatcher)).toBeNull();
+    });
+
+    it('is shown if provided', () => {
+      const birthDate = new Date(1990, 0, 20);
+      const birthDateFormatted = '20 January 1990';
+      resume.profile.birthDate = birthDate;
+
+      render(<Castform data={resume} />);
+
+      expect(screen.getByText(birthDateLabelMatcher)).toBeTruthy();
+      expect(screen.getByText(birthDateLabelMatcher)).toBeInTheDocument();
+      expect(screen.getByText(birthDateFormatted)).toBeTruthy();
+      expect(screen.getByText(birthDateFormatted)).toBeInTheDocument();
+    });
+  });
+});