Update all start tests to match new final tests

Author: hwillson

start/client/src/components/__tests__/launch-detail.tsx

@@ -10,9 +10,9 @@ describe('Launch Detail View', () => {
   it('renders without error', () => {
     render(
       <LaunchDetail
-        id={1}
+        id={'1'}
         site={'earth'}
-        rocket={{ name: 'that one', type: 'big' }}
+        rocket={{ name: 'that one', type: 'big', __typename: 'Rocket', id: '1' }}
       />,
     );
   });

start/client/src/components/__tests__/launch-tile.tsx

@@ -11,9 +11,11 @@ describe('Launch Tile', () => {
     render(
       <LaunchTile
         launch={{
-          id: 1,
-          mission: { name: 'the first one' },
-          rocket: { name: 'harambe' },
+          __typename: 'Launch',
+          isBooked: false,
+          id: '1',
+          mission: { name: 'the first one', __typename: 'Mission', missionPatch: null },
+          rocket: { name: 'harambe', __typename: 'Rocket', id: '1' },
         }}
       />,
     );

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

@@ -8,6 +8,6 @@ describe('Login Form', () => {
   afterEach(cleanup);
 
   it('renders without error', () => {
-    render(<LoginForm />);
+    render(<LoginForm login={() => {}}/>);
   });
 });

start/client/src/containers/__tests__/book-trips.tsx

@@ -3,13 +3,11 @@ import React from 'react';
 import {
   renderApollo,
   cleanup,
-  getByTestId,
   fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
-import BookTrips, { BOOK_TRIPS, GET_LAUNCH } from '../book-trips';
-import { GET_CART_ITEMS } from '../../pages/cart';
+import BookTrips, { BOOK_TRIPS } from '../book-trips';
+import { GET_LAUNCH } from '../cart-item';
 
 const mockLaunch = {
   __typename: 'Launch',
@@ -37,7 +35,7 @@ describe('book trips', () => {
   it('completes mutation and shows message', async () => {
     let mocks = [
       {
-        request: { query: BOOK_TRIPS, variables: { launchIds: [1] } },
+        request: { query: BOOK_TRIPS, variables: { launchIds: ['1'] } },
         result: {
           data: {
             bookTrips: [{ success: true, message: 'success!', launches: [] }],
@@ -46,12 +44,12 @@ describe('book trips', () => {
       },
       {
         // we need this query for refetchQueries
-        request: { query: GET_LAUNCH, variables: { launchId: 1 } },
+        request: { query: GET_LAUNCH, variables: { launchId: '1' } },
         result: { data: { launch: mockLaunch } },
       },
     ];
-    const { getByText, container, getByTestId } = renderApollo(
-      <BookTrips cartItems={[1]} />,
+    const { getByTestId } = renderApollo(
+      <BookTrips cartItems={['1']} />,
       { mocks, addTypename: false },
     );
 
@@ -61,7 +59,7 @@ describe('book trips', () => {
     // the component re-renders.
     // getByTestId throws an error if it cannot find an element with the given ID
     // and waitForElement will wait until the callback doesn't throw an error
-    const successText = await waitForElement(() => getByTestId('message'));
+    await waitForElement(() => getByTestId('message'));
   });
 
   // >>>> TODO

start/client/src/containers/__tests__/cart-item.tsx

@@ -3,10 +3,7 @@ import React from 'react';
 import {
   renderApollo,
   cleanup,
-  getByTestId,
-  fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
 import CartItem, { GET_LAUNCH } from '../cart-item';
 
@@ -24,21 +21,21 @@ const mockLaunch = {
   },
 };
 
-xdescribe('cart item', () => {
+describe('cart item', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
   it('queries item and renders without error', () => {
     let mocks = [
       {
-        request: { query: GET_LAUNCH, variables: { launchId: 1 } },
+        request: { query: GET_LAUNCH, variables: { launchId: '1' } },
         result: { data: { launch: mockLaunch } },
       },
     ];
 
     // since we know the name of the mission, and know that name
     // will be rendered at some point, we can use getByText
-    const { getByText, debug } = renderApollo(<CartItem launchId={1} />, {
+    const { getByText } = renderApollo(<CartItem launchId={'1'} />, {
       mocks,
       addTypename: false,
     });
@@ -59,11 +56,11 @@ xdescribe('cart item', () => {
 
     // since we know the error message, we can use getByText
     // to recognize the error
-    const { getByText, debug } = renderApollo(<CartItem launchId={1} />, {
+    const { getByText } = renderApollo(<CartItem launchId={'1'} />, {
       mocks,
       addTypename: false,
     });
 
     waitForElement(() => getByText(/error: aw shucks/i));
   });
-});
+});

start/client/src/containers/__tests__/logout-button.tsx

@@ -1,2 +1,25 @@
-// TODO
-it('', () => {});
+import React from 'react';
+import LogoutButton from '../logout-button';
+
+import { renderApollo, cleanup, fireEvent } from '../../test-utils';
+import { cache, isLoggedInVar } from '../../cache';
+
+describe('logout button', () => {
+  // automatically unmount and cleanup DOM after the test is finished.
+  afterEach(cleanup);
+
+  it('renders logout button', async () => {
+    renderApollo(<LogoutButton />);
+  });
+
+  it('complete logout', async () => {
+    isLoggedInVar(true);
+    localStorage.setItem('token', 'testTokenValue');
+    localStorage.setItem('userId', 'abc123');
+    const { getByTestId } = renderApollo(<LogoutButton />, { cache });
+    fireEvent.click(getByTestId('logout-button'));
+    expect(isLoggedInVar()).toBeFalsy();
+    expect(localStorage.getItem('token')).toBeNull();
+    expect(localStorage.getItem('userId')).toBeNull();
+  });
+});

start/client/src/pages/__tests__/cart.tsx

@@ -1,53 +1,47 @@
 import React from 'react';
-import { InMemoryCache } from '@apollo/client';
 
 import {
   renderApollo,
   cleanup,
-  getByTestId,
-  fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
-import Cart, { GET_CART_ITEMS } from '../cart';
+import Cart from '../cart';
+import { GET_LAUNCH } from '../../containers/cart-item';
+import { cache, cartItemsVar } from '../../cache';
 
-xdescribe('Cart Page', () => {
+const mockLaunch = {
+  __typename: 'Launch',
+  id: 1,
+  isBooked: true,
+  rocket: {
+    id: 1,
+    name: 'tester',
+  },
+  mission: {
+    name: 'test mission',
+    missionPatch: '/',
+  },
+};
+
+describe('Cart Page', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
   it('renders with message for empty carts', () => {
-    // TODO: why is this necessary
-    const cache = new InMemoryCache();
-    cache.writeQuery({
-      query: GET_CART_ITEMS,
-      data: { cartItems: [] },
-    });
-
-    let mocks = [
-      {
-        request: { query: GET_CART_ITEMS },
-        result: { data: { cartItems: [] } },
-      },
-    ];
-    const { getByTestId } = renderApollo(<Cart />, { mocks, cache });
+    const { getByTestId } = renderApollo(<Cart />, { cache });
     return waitForElement(() => getByTestId('empty-message'));
   });
 
   it('renders cart', () => {
-    // TODO: why is this necessary
-    const cache = new InMemoryCache();
-    cache.writeQuery({
-      query: GET_CART_ITEMS,
-      data: { cartItems: [1] },
-    });
-
     let mocks = [
       {
-        request: { query: GET_CART_ITEMS },
-        result: { data: { cartItems: [1] } },
+        request: { query: GET_LAUNCH, variables: { launchId: '1' } },
+        result: { data: { launch: mockLaunch } },
       },
     ];
-    const { getByTestId } = renderApollo(<Cart />, { mocks, cache: undefined });
-    return waitForElement(() => getByTestId('empty-message'));
+
+    const { getByTestId } = renderApollo(<Cart />, { cache, mocks });
+    cartItemsVar(['1']);
+    return waitForElement(() => getByTestId('book-button'));
   });
 });

start/client/src/pages/__tests__/launch.tsx

@@ -1,13 +1,9 @@
 import React from 'react';
-import { print } from 'graphql';
 
 import {
   renderApollo,
   cleanup,
-  getByTestId,
-  fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
 import Launch, { GET_LAUNCH_DETAILS } from '../launch';
 
@@ -31,8 +27,7 @@ const mockLaunch = {
   isInCart: false,
 };
 
-// TODO: un-skip after local state fixes
-xdescribe('Launch Page', () => {
+describe('Launch Page', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 

start/client/src/pages/__tests__/launches.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import { print } from 'graphql';
+import { InMemoryCache } from '@apollo/client';
 
 import {
   renderApollo,
   cleanup,
-  getByTestId,
-  fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
 import Launches, { GET_LAUNCHES } from '../launches';
 
@@ -31,25 +28,29 @@ const mockLaunch = {
   isInCart: false,
 };
 
-// TODO: un-skip after local state fixes
-xdescribe('Launches Page', () => {
+describe('Launches Page', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
   it('renders launches', async () => {
+    const cache = new InMemoryCache({ addTypename: false });
     const mocks = [
       {
         request: { query: GET_LAUNCHES },
         result: {
           data: {
-            isLoggedIn: true,
-            launches: { cursor: '123', hasMore: true, launches: [mockLaunch] },
+            launches: {
+              cursor: '123',
+              hasMore: true,
+              launches: [mockLaunch],
+            },
           },
         },
       },
     ];
     const { getByText } = await renderApollo(<Launches />, {
       mocks,
+      cache,
     });
     await waitForElement(() => getByText(/test mission/i));
   });

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

@@ -1,14 +1,9 @@
 import React from 'react';
-import { print } from 'graphql';
-import { gql, InMemoryCache } from '@apollo/client';
 
 import {
   renderApollo,
   cleanup,
-  getByTestId,
-  fireEvent,
   waitForElement,
-  render,
 } from '../../test-utils';
 import Profile, { GET_MY_TRIPS } from '../profile';
 
@@ -36,7 +31,7 @@ const mockMe = {
   trips: [mockLaunch],
 };
 
-xdescribe('Profile Page', () => {
+describe('Profile Page', () => {
   // automatically unmount and cleanup DOM after the test is finished.
   afterEach(cleanup);
 
@@ -48,7 +43,7 @@ xdescribe('Profile Page', () => {
       },
     ];
 
-    const { getByText } = renderApollo(<Profile />, { mocks, resolvers: {} });
+    const { getByText } = renderApollo(<Profile />, { mocks });
 
     // if the profile renders, it will have the list of missions booked
     await waitForElement(() => getByText(/test mission/i));