Creates Index.integration.test.jsx and Sketchlist.unit.test.jsx

client/__mocks__/axios.js

@@ -0,0 +1,6 @@
+const mockAxios = jest.genMockFromModule('axios');
+
+// this is the key to fix the axios.create() undefined error!
+mockAxios.create = jest.fn(() => mockAxios);
+
+export default mockAxios;

client/__mocks__/i18n.js

@@ -0,0 +1,28 @@
+import { enUS, es, ja, hi } from 'date-fns/locale';
+import i18n from '../i18n-test';
+
+export function languageKeyToLabel(lang) {
+  const languageMap = {
+    'en-US': 'English',
+    'es-419': 'Español',
+    ja: '日本語',
+    hi: 'हिन्दी'
+  };
+  return languageMap[lang];
+}
+
+export function languageKeyToDateLocale(lang) {
+  const languageMap = {
+    'en-US': enUS,
+    'es-419': es,
+    ja,
+    hi
+  };
+  return languageMap[lang];
+}
+
+export function currentDateLocale() {
+  return languageKeyToDateLocale(i18n.language);
+}
+
+export default i18n;

client/components/__test__/Nav.test.jsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 
 import { NavComponent } from '../Nav';
 
+jest.mock('../../i18n');
+
 describe('Nav', () => {
   const props = {
     newProject: jest.fn(),

client/modules/IDE/actions/__mocks__/projects.js

@@ -0,0 +1,16 @@
+import * as ActionTypes from '../../../../constants';
+import { startLoader, stopLoader } from '../loader';
+import { mockProjects } from '../../../../redux_test_stores/test_store';
+
+// eslint-disable-next-line
+export function getProjects(username) {
+  console.log(`mocked getProjects call with ${username}`);
+  return (dispatch) => {
+    dispatch(startLoader());
+    dispatch({
+      type: ActionTypes.SET_PROJECTS,
+      projects: mockProjects
+    });
+    dispatch(stopLoader());
+  };
+}

client/modules/IDE/actions/__tests__/projects.test.js

@@ -0,0 +1,40 @@
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import axios from 'axios';
+import { unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import * as ProjectActions from '../projects';
+import * as ActionTypes from '../../../../constants';
+import {
+  initialTestState,
+  mockProjects
+} from '../../../../redux_test_stores/test_store';
+
+const mockStore = configureStore([thunk]);
+
+describe('projects action creator tests', () => {
+  let store;
+
+  afterEach(() => {
+    store.clearActions();
+  });
+
+  it('creates GET_PROJECTS after successfuly fetching projects', () => {
+    store = mockStore(initialTestState);
+
+    axios.get.mockImplementationOnce((x) => {
+      console.log('get was called with ', x);
+      return Promise.resolve({ data: mockProjects });
+    });
+
+    const expectedActions = [
+      { type: ActionTypes.START_LOADING },
+      { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
+      { type: ActionTypes.STOP_LOADING }
+    ];
+
+    return store
+      .dispatch(ProjectActions.getProjects('happydog'))
+      .then(() => expect(store.getActions()).toEqual(expectedActions));
+  });
+});

client/modules/IDE/actions/projects.js

@@ -12,7 +12,7 @@ export function getProjects(username) {
     } else {
       url = '/projects';
     }
-    apiClient
+    return apiClient
       .get(url)
       .then((response) => {
         dispatch({

client/modules/IDE/components/SketchList.jsx

@@ -179,7 +179,6 @@ class SketchListRowBase extends React.Component {
   renderDropdown = () => {
     const { optionsOpen } = this.state;
     const userIsOwner = this.props.user.username === this.props.username;
-
     return (
       <td className="sketch-list__dropdown-column">
         <button
@@ -188,6 +187,7 @@ class SketchListRowBase extends React.Component {
           onBlur={this.onBlurComponent}
           onFocus={this.onFocusComponent}
           aria-label={this.props.t('SketchList.ToggleLabelARIA')}
+          data-testid="sketch-list-toggle-options-arrow"
         >
           <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
         </button>
@@ -449,6 +449,7 @@ class SketchList extends React.Component {
           className="sketch-list__sort-button"
           onClick={() => this.props.toggleDirectionForField(fieldName)}
           aria-label={buttonLabel}
+          data-testid={`toggle-direction-${fieldName}`}
         >
           <span className={headerClass}>{displayName}</span>
           {field === fieldName &&

client/modules/IDE/components/SketchList.test.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import axios from 'axios';
+import { unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import SketchList from './SketchList';
+import { reduxRender, fireEvent, screen } from '../../../test-utils';
+import {
+  initialTestState,
+  mockProjects
+} from '../../../redux_test_stores/test_store';
+
+jest.mock('../../../i18n');
+
+/*
+ * there seem to be polarizing opinions about whether or not
+ * we should test the unconnected component or the
+ * connected one. For the sake of not editing the original SketchList file
+ * with an unneccessary export statement, I'm testing
+ * the connected component with redux-mock-store.
+ * this approach is outlined here -
+ * https://www.robinwieruch.de/react-connected-component-test
+ */
+
+describe('<Sketchlist />', () => {
+  let container;
+  const mockStore = configureStore([thunk]);
+  const store = mockStore(initialTestState);
+
+  beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    axios.get.mockImplementationOnce((x) => Promise.resolve({ data: 'foo' }));
+  });
+
+  afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+    store.clearActions();
+  });
+
+  it('has sample projects', () => {
+    let component;
+    act(() => {
+      component = reduxRender(<SketchList username="happydog1" />, {
+        store,
+        container
+      });
+    });
+    expect(screen.getByText('testsketch1')).toBeInTheDocument();
+    expect(screen.getByText('testsketch2')).toBeInTheDocument();
+  });
+
+  it('clicking on date created row header dispatches a reordering action', () => {
+    let component;
+    act(() => {
+      component = reduxRender(<SketchList username="happydog2" />, {
+        store,
+        container
+      });
+    });
+    act(() => {
+      fireEvent.click(screen.getByTestId('toggle-direction-createdAt'));
+    });
+    const expectedAction = [{ type: 'TOGGLE_DIRECTION', field: 'createdAt' }];
+    expect(store.getActions()).toEqual(expect.arrayContaining(expectedAction));
+  });
+
+  it('clicking on dropdown arrow opens sketch options', () => {
+    let component;
+    act(() => {
+      component = reduxRender(<SketchList username="happydog2" />, {
+        store,
+        container
+      });
+    });
+    const dropdown = screen.queryAllByTestId(
+      'sketch-list-toggle-options-arrow'
+    );
+
+    if (dropdown.length > 0) {
+      act(() => {
+        fireEvent.click(dropdown[0]);
+      });
+
+      expect(screen.queryByText('Rename')).not.toBeInTheDocument();
+      expect(screen.queryByText('Duplicate')).toBeInTheDocument();
+      expect(screen.queryByText('Download')).toBeInTheDocument();
+      expect(screen.queryByText('Add to collection')).toBeInTheDocument();
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    }
+  });
+
+  it('clicking on dropdown arrow opens sketch options - sketches belong to user', () => {
+    let component;
+    act(() => {
+      component = reduxRender(<SketchList username="happydog" />, {
+        store,
+        container
+      });
+    });
+    const dropdown = screen.queryAllByTestId(
+      'sketch-list-toggle-options-arrow'
+    );
+
+    if (dropdown.length > 0) {
+      act(() => {
+        fireEvent.click(dropdown[0]);
+      });
+
+      expect(screen.queryByText('Rename')).toBeInTheDocument();
+      expect(screen.queryByText('Duplicate')).toBeInTheDocument();
+      expect(screen.queryByText('Download')).toBeInTheDocument();
+      expect(screen.queryByText('Add to collection')).toBeInTheDocument();
+      expect(screen.queryByText('Delete')).toBeInTheDocument();
+    }
+  });
+
+  it('snapshot testing', () => {
+    const { asFragment } = reduxRender(<SketchList username="happydog2" />, {
+      store,
+      container
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+});