integration test

Author: khanniie

client/__mocks__/axios.js

@@ -1,26 +1,33 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { setupServer } from 'msw/node';
 import { rest } from 'msw';
+import { act, render } from '@testing-library/react';
+import { userResponse } from './redux_test_stores/test_server_responses';
 
 jest.mock('./i18n');
 
 const server = setupServer(
-  rest.get('/session', (req, res, ctx) =>
-    res(ctx.json({ greeting: 'hello there' }))
-  )
+  rest.get('/session', (req, res, ctx) => {
+    console.log('called');
+    return res(ctx.json(userResponse));
+  })
 );
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 describe('Application root', () => {
+  // eslint-disable-next-line global-require
+  const subject = () => require('./index');
+
   it('should render without crashing', () => {
     const div = document.createElement('div');
     div.id = 'root';
     document.body.appendChild(div);
-    // require("./index.jsx");
+    act(() => {
+      subject();
+    });
+
     // expect(ReactDOM.render).toHaveBeenCalledWith(<App />, div);
   });
 });

client/index.integration.test.jsx

@@ -1,20 +1,28 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import axios from 'axios';
+import { setupServer } from 'msw/node';
+import { rest } from 'msw';
 import { act } from 'react-dom/test-utils';
 import SketchList from './SketchList';
-import {
-  reduxRender,
-  fireEvent,
-  screen,
-  within,
-  prettyDOM
-} from '../../../test-utils';
+import { reduxRender, fireEvent, screen, within } from '../../../test-utils';
 import { initialTestState } from '../../../redux_test_stores/test_store';
 
 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('<Sketchlist />', () => {
   const mockStore = configureStore([thunk]);
   const store = mockStore(initialTestState);
@@ -24,10 +32,6 @@ describe('<Sketchlist />', () => {
   const subject = () =>
     reduxRender(<SketchList {...subjectProps} />, { store });
 
-  beforeEach(() => {
-    axios.get.mockImplementationOnce((x) => Promise.resolve({ data: 'foo' }));
-  });
-
   afterEach(() => {
     store.clearActions();
   });

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

@@ -0,0 +1,30 @@
+// test data to use with msw
+
+const userResponse = {
+  email: '[email protected]',
+  username: 'happydog',
+  preferences: {
+    fontSize: 18,
+    lineNumbers: true,
+    indentationAmount: 2,
+    isTabIndent: false,
+    autosave: true,
+    linewrap: true,
+    lintWarning: false,
+    textOutput: false,
+    gridOutput: false,
+    soundOutput: false,
+    theme: 'light',
+    autorefresh: false,
+    language: 'en-US',
+    autocloseBracketsQuotes: true
+  },
+  apiKeys: [],
+  verified: 'verified',
+  id: 'testid',
+  totalSize: 0,
+  github: 'githubusername',
+  google: 'googleusername'
+};
+
+export default { userResponse };