Completed 4 unit tests

final/client/src/components/__tests__/loading.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
-
-import { render, cleanup } from '../../test-utils';
+import { mount } from '../../enzyme';
+import { cleanup } from '../../test-utils';
 import Loading from '../loading';
 
 describe('Loading', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
-  it('renders without error', () => {
-    render(<Loading />);
+  describe('renders without error', () => {
+    const wrapper = mount(<Loading />);
+    it('should have logo element', () => {
+      expect(wrapper.find('svg')).not.toBeNull();
+      expect(wrapper.html()).toContain('logo.svg');
+    });
   });
 });

final/client/src/components/__tests__/login-form.tsx

@@ -1,13 +1,25 @@
 import React from 'react';
-
-import { render, cleanup } from '../../test-utils';
+import { mount } from '../../enzyme';
+import { cleanup } from '../../test-utils';
 import LoginForm from '../login-form';
 
 describe('Login Form', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
-  it('renders without error', () => {
-    render(<LoginForm login={() => {}}/>);
+  describe('renders without error', () => {
+    const wrapper = mount(<LoginForm login={() => {}}/>);
+    it('should have heading element', () => {
+      expect(wrapper.find('h1')).not.toBeNull();
+      expect(wrapper.html()).toContain('Space Explorer');
+    });
+    it('should have email input', () => {
+      expect(wrapper.find('input')).not.toBeNull();
+      expect(wrapper.html()).toContain('Email');
+    });
+    it('should have login button', () => {
+      expect(wrapper.find('button')).not.toBeNull();
+      expect(wrapper.html()).toContain('Log in');
+    });
   });
 });

final/client/src/pages/__tests__/login.tsx

@@ -6,48 +6,71 @@ import {
   fireEvent,
   waitForElement,
 } from '../../test-utils';
+import { mount } from '../../enzyme';
 import Login, {LOGIN_USER} from '../login';
 import { cache, isLoggedInVar } from '../../cache';
+import { MockedProvider, MockedResponse } from '@apollo/client/testing';
+import { nextTick } from 'process';
+import { act } from 'react-dom/test-utils';
+
+// setup mocks here for unit tests
+const mocks = [
+  {
+    request: {query: LOGIN_USER, variables: {email: 'a@a.a'}},
+    result: {
+      data: {
+        login: {
+          id: 'abc123',
+          token: 'def456',
+        },
+      },
+    },
+  },
+];
+
+const updateWrapper = async (wrapper, time = 0) => {
+  await act(async () => {
+    await new Promise((res) => setTimeout(res, time));
+    await wrapper.update();
+  });
+};
 
 describe('Login Page', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
   it('renders login page', async () => {
-    renderApollo(<Login />);
+    mount(
+    <MockedProvider mocks={mocks}>
+    <Login />
+    </MockedProvider>
+    );
   });
 
-  it('fires login mutation and updates cache after done', async () => {
+  it('triggers login event and updates cache after done', async () => {
+    // First check that we are not logged in
     expect(isLoggedInVar()).toBeFalsy();
 
-    const mocks = [
-      {
-        request: {query: LOGIN_USER, variables: {email: 'a@a.a'}},
-        result: {
-          data: {
-            login: {
-              id: 'abc123',
-              token: 'def456',
-            },
-          },
-        },
-      },
-    ];
-
-    const {getByText, getByTestId} = await renderApollo(<Login />, {
-      mocks,
-      cache,
-    });
-
-    fireEvent.change(getByTestId('login-input'), {
-      target: {value: 'a@a.a'},
-    });
-
-    fireEvent.click(getByText(/log in/i));
-
-    // login is done if loader is gone
-    await waitForElement(() => getByText(/log in/i));
+    // Do full DOM render with mount using Enzyme
+    const wrapper = mount(
+      <MockedProvider 
+        mocks={mocks}
+        cache={cache}>  
+          <Login />
+        </MockedProvider>);
+    await updateWrapper(wrapper);
 
+    // Find email input and put mocked email
+    const emailInput = wrapper.find('input');
+    emailInput.simulate('change', { target: {value: 'a@a.a'}});
+
+    // Find and click login button
+    const loginButton = wrapper.find('button');
+    expect(loginButton.text().includes('Log in')).toBeTruthy();
+    wrapper.find('form').simulate('submit');
+    await updateWrapper(wrapper);
+
+    // Check that we are logged in 
     expect(isLoggedInVar()).toBeTruthy();
   });
 });

final/client/src/pages/__tests__/profile.tsx

@@ -6,6 +6,7 @@ import {
   waitForElement,
 } from '../../test-utils';
 import Profile, { GET_MY_TRIPS } from '../profile';
+import { mount, render } from '../../enzyme';
 
 const mockLaunch = {
   __typename: 'Launch',
@@ -43,7 +44,7 @@ describe('Profile Page', () => {
       },
     ];
 
-    const { getByText } = renderApollo(<Profile />, { mocks });
+    const { getByText } = render(<Profile />, { mocks });
 
     // if the profile renders, it will have the list of missions booked
     await waitForElement(() => getByText(/test mission/i));