rename files, fix index and editor tests

Author: khanniie

client/index.integration.test.jsx

@@ -1,21 +1,34 @@
 import { setupServer } from 'msw/node';
 import { rest } from 'msw';
+import React from 'react';
+import { Router, browserHistory } from 'react-router';
+
 import {
+  reduxRender,
   act,
+  waitFor,
   fireEvent,
-  prettyDOM,
   screen,
   within
-} from '@testing-library/react';
-import userResponse from './testData/testServerResponses';
+} from './test-utils';
+import configureStore from './store';
+import routes from './routes';
+import * as Actions from './modules/User/actions';
+import { userResponse } from './testData/testServerResponses';
+
+// setup for the app
+const history = browserHistory;
+const initialState = window.__INITIAL_STATE__;
+const store = configureStore(initialState);
 
 // need to mock this file or it'll throw ERRCONNECTED
 jest.mock('./i18n');
 
 // setup for the msw fake server
 const server = setupServer(
   rest.get('/session', (req, res, ctx) =>
-    res(ctx.json(userResponse.userResponse))
+    // console.log("called server get session");
+    res(ctx.json(userResponse))
   )
 );
 
@@ -27,6 +40,7 @@ beforeAll(() =>
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
+// below are fixes for jsdom-specific errors
 // https://stackoverflow.com/questions/57311971/error-not-implemented-window-scrollto-how-do-we-remove-this-error-from-jest-t
 const noop = () => {};
 Object.defineProperty(window, 'focus', { value: noop, writable: true });
@@ -46,17 +60,29 @@ document.createRange = () => {
   return range;
 };
 
+// start testing
 describe('index.jsx integration', () => {
-  let container = null;
-
-  // we only run the setup once because require only works once
-  beforeAll(() => {
-    // setup a DOM element as a render target
-    container = document.createElement('div');
-    container.id = 'root';
-    document.body.appendChild(container);
-    // eslint-disable-next-line global-require
-    require('./index');
+  // the subject under test
+  const subject = () =>
+    reduxRender(<Router history={history} routes={routes(store)} />, { store });
+
+  // spy on this function and wait for it to be called before making assertions
+  const spy = jest.spyOn(Actions, 'getUser');
+
+  beforeEach(async () => {
+    // console.log("TRYING TO SPY ON GETUSER");
+
+    act(() => {
+      subject();
+    });
+
+    // console.log("WAITING....");
+    await waitFor(() => expect(spy).toHaveBeenCalledTimes(1));
+    // console.log("SPY DONE");
+  });
+
+  afterEach(() => {
+    spy.mockClear();
   });
 
   it('navbar items and the dropdowns in the navbar exist', () => {
@@ -158,7 +184,7 @@ describe('index.jsx integration', () => {
 
     // expect(screen.getByText("createCanvas")).toBeInTheDocument();
     const codeeditor = screen.getByRole('article');
-    console.log(prettyDOM(codeeditor));
+    // console.log(prettyDOM(codeeditor));
     expect(indexHTMLButton).toBeInTheDocument();
 
     const startingeditorcode = codeeditor.textContent;

client/modules/App/App.test.jsx

@@ -1,8 +1,8 @@
 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 { setupServer } from 'msw/node';
+import { rest } from 'msw';
+
 import * as ProjectActions from '../projects';
 import * as ActionTypes from '../../../../constants';
 import {
@@ -12,6 +12,16 @@ import {
 
 const mockStore = configureStore([thunk]);
 
+const server = setupServer(
+  rest.get(`/${initialTestState.user.username}/projects`, (req, res, ctx) =>
+    res(ctx.json(mockProjects))
+  )
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
 describe('projects action creator tests', () => {
   let store;
 
@@ -22,11 +32,6 @@ describe('projects action creator tests', () => {
   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 },

…s/IDE/actions/__tests__/projects.test.js …/actions/__tests__/projects.unit.test.jsclient/modules/IDE/actions/__tests__/projects.test.js renamed to client/modules/IDE/actions/__tests__/projects.unit.test.js client/modules/IDE/actions/__tests__/projects.test.js renamed to client/modules/IDE/actions/__tests__/projects.unit.test.js

@@ -298,6 +298,7 @@ class Editor extends React.Component {
 
   getContent() {
     const content = this._cm.getValue();
+    console.log(content);
     const updatedFile = Object.assign({}, this.props.file, { content });
     return updatedFile;
   }

client/modules/IDE/components/Editor.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import axios from 'axios';
 import { act } from 'react-dom/test-utils';
 import Editor from './Editor';
 import {
@@ -15,6 +14,19 @@ import { initialTestState } from '../../../testData/testReduxStore';
 
 jest.mock('../../../i18n');
 
+// const server = setupServer(
+//   rest.get(`/${initialTestState.user.username}/projects`, (req, res, ctx) =>
+//     // it just needs to return something so it doesn't throw an error
+//     // Sketchlist tries to grab projects on creation but for the unit test
+//     // we just feed those in as part of the initial state
+//     res(ctx.json({ data: 'foo' }))
+//   )
+// );
+
+// beforeAll(() => server.listen());
+// afterEach(() => server.resetHandlers());
+// afterAll(() => server.close());
+
 describe('<Editor />', () => {
   const mockStore = configureStore([thunk]);
   const store = mockStore(initialTestState);
@@ -23,10 +35,6 @@ describe('<Editor />', () => {
 
   const subject = () => reduxRender(<Editor {...subjectProps} />, { store });
 
-  beforeEach(() => {
-    axios.get.mockImplementationOnce((x) => Promise.resolve({ data: 'foo' }));
-  });
-
   afterEach(() => {
     store.clearActions();
   });

client/modules/IDE/components/Editor.unit.test.jsx

@@ -19,6 +19,7 @@ import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n-test';
 import rootReducer from './reducers';
+import ThemeProvider from './modules/App/components/ThemeProvider';
 
 // re-export everything
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -44,7 +45,9 @@ function reduxRender(
   function Wrapper({ children }) {
     return (
       <I18nextProvider i18n={i18n}>
-        <Provider store={store}>{children}</Provider>
+        <Provider store={store}>
+          <ThemeProvider>{children}</ThemeProvider>
+        </Provider>
       </I18nextProvider>
     );
   }

…dules/IDE/components/SketchList.test.jsx …/IDE/components/SketchList.unit.test.jsxclient/modules/IDE/components/SketchList.test.jsx renamed to client/modules/IDE/components/SketchList.unit.test.jsx client/modules/IDE/components/SketchList.test.jsx renamed to client/modules/IDE/components/SketchList.unit.test.jsx

@@ -1,6 +1,8 @@
 // test data to use with msw
 
-const userResponse = {
+export const sketchResponse = {};
+
+export const userResponse = {
   email: 'happydog@example.com',
   username: 'happydog',
   preferences: {
@@ -26,5 +28,3 @@ const userResponse = {
   github: 'githubusername',
   google: 'googleusername'
 };
-
-export default { userResponse };

client/test-utils.js

@@ -112,7 +112,7 @@ See the [redux section](#Testing-Redux) below :)
 You might still want to write tests for non-component or non-redux files, such as modules with utility functions. What gets tested in this case depends a lot on the module itself, but generally, you would import the module and test the functions within it.
 
 ### Querying for elements
-Read about the recommended order of priority for queries in [the testing library docs](https://testing-library.com/docs/guide-which-query/#priority). We recommend using roles and text, or labels. You can use this [handy extension](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related) to do this.
+Read about the recommended order of priority for queries in [the testing library docs](https://testing-library.com/docs/guide-which-query/#priority). We recommend using roles and text, or labels. You can use this [handy extension called Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related) to do this.
 
 ### File structure
 Each test should have a top-level ``describe`` block to group related blocks together, with the name of the component under test.
@@ -439,7 +439,7 @@ Some things to consider testing:
 
 ## How to handle API calls in tests
 
-Some tests throw errors if a part of the client-side code tries to make an API call or AJAX request. Our solution to this is to use the [Mock Service Worker library](https://mswjs.io/) to mock the API requests by intercepting requests on the network level [[2]](#References). It can handle API calls and return appropriate data (you can see what shape of data gets returned by looking through the server files). There is some test data available in the ``client/testData/testServerResponse.js`` file, but you may need to edit the file to add a new json response if an appropriate one doesn't exist already. The example code below sets up a server to respond to a GET request at ``/exampleendpoint`` by returning ``{data: foo}`` You can see it in the context of a test [in the SketchList.test.jsx file](../client/modules/IDE/components/SketchList.test.jsx).
+Some tests throw errors if a part of the client-side code tries to make an API call. Our solution to this is to use the [Mock Service Worker library](https://mswjs.io/) to mock the API requests by intercepting requests on the network level [[2]](#References). It can handle API calls and return appropriate data (you can see what shape of data gets returned by looking through the server files). There is some test data available in the ``client/testData/testServerResponse.js`` file, but you may need to edit the file to add a new json response if an appropriate one doesn't exist already. The example code below sets up a server to respond to a GET request at ``/exampleendpoint`` by returning ``{data: foo}`` You can see it in the context of a test [in the SketchList.test.jsx file](../client/modules/IDE/components/SketchList.test.jsx).
 
 There's a longer explaination of the benefits of ``msw`` in [this article by Kent C Dodds](https://kentcdodds.com/blog/stop-mocking-fetch).