Bug Fixes to Frontend Tests #44

frontend/app/components/LangMenu/LangMenu.js

@@ -9,7 +9,7 @@ import MultiSelect from '@khanacademy/react-multi-select';
 
 function createOptions(list) {
   const output = [];
-  list.forEach(function(element) {
+  list.forEach(function options(element) {
     output.push({ label: element, value: element });
   });
   return output;

frontend/app/components/LangMenu/tests/__snapshots__/index.test.js.snap

@@ -1,13 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReactMediumEditor Component 1`] = `
-<div
-  dangerouslySetInnerHTML={
+exports[`LangMenu Component 1`] = `
+<Context.Provider
+  value={
     Object {
-      "__html": "<p>Test</p>",
+      "store": Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Subscription {
+        "handleChangeWrapper": [Function],
+        "listeners": Object {
+          "notify": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": null,
+      },
     }
   }
-  onLanguagesChange={[Function]}
-  selectedLanguages={[Array]}
-/>
+>
+  <Memo(ConnectFunction)
+    onLanguagesChange={[Function]}
+    selectedLanguagegs={
+      Array [
+        "python",
+        "javascript",
+        "c++",
+      ]
+    }
+  />
+</Context.Provider>
 `;

frontend/app/components/LangMenu/tests/index.test.js

@@ -1,13 +1,22 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import ShallowRenderer from 'react-test-renderer/shallow';
+import configureMockStore from 'redux-mock-store';
 import LangMenu from '../LangMenu';
 
+const mockStore = configureMockStore();
+const store = mockStore({});
+
+const renderer = new ShallowRenderer();
+
 test('LangMenu Component', () => {
-  const component = renderer.create(
-    <LangMenu
-      onLanguagesChange={value => value}
-      selectedLanguagegs={['python', 'javascript', 'c++']}
-    />,
+  const page = renderer.render(
+    <Provider store={store}>
+      <LangMenu
+        onLanguagesChange={value => value}
+        selectedLanguagegs={['python', 'javascript', 'c++']}
+      />
+    </Provider>,
   );
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(page).toMatchSnapshot();
 });

frontend/app/components/ProfileCard/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfileCard Component 1`] = `
+<Context.Provider
+  value={
+    Object {
+      "store": Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Subscription {
+        "handleChangeWrapper": [Function],
+        "listeners": Object {
+          "notify": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": null,
+      },
+    }
+  }
+>
+  <ForwardRef(WithStyles)
+    email="[email protected]"
+    languages={
+      Array [
+        "python",
+        "javascript",
+        "c++",
+      ]
+    }
+    name="Name"
+    onLanguagesChange={[Function]}
+  />
+</Context.Provider>
+`;

frontend/app/components/ProfileCard/tests/index.test.js

@@ -1,14 +1,24 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
+import ShallowRenderer from 'react-test-renderer/shallow';
+import configureMockStore from 'redux-mock-store';
 import ProfileCard from '../ProfileCard';
 
-test('Group Dashboard Component', () => {
-  const component = renderer.create(
-    <ProfileCard
-      name="Name"
-      email="[email protected]"
-      languages={['python', 'javascript', 'c++']}
-    />,
+const mockStore = configureMockStore();
+const store = mockStore({});
+
+const renderer = new ShallowRenderer();
+
+test('ProfileCard Component', () => {
+  const page = renderer.render(
+    <Provider store={store}>
+      <ProfileCard
+        name="Name"
+        email="[email protected]"
+        languages={['python', 'javascript', 'c++']}
+        onLanguagesChange={value => value}
+      />
+    </Provider>,
   );
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(page).toMatchSnapshot();
 });

frontend/app/containers/NotFoundPage/tests/__snapshots__/index.test.js.snap

@@ -1,9 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NotFoundPage /> should render and match the snapshot 1`] = `
-<h1>
-  <span>
-    This is the NotFoundPage container!
-  </span>
-</h1>
+<span>
+  <div
+    class="background"
+  >
+    <div
+      class="centerbox"
+    >
+      <h1>
+        Django Mango
+      </h1>
+      <h2>
+        404 Error.
+      </h2>
+      <h2
+        href="/"
+      >
+        The requested URL was not found on this server.
+      </h2>
+      <a
+        class="link"
+        href="/"
+      >
+        Return to Login.
+      </a>
+    </div>
+  </div>
+</span>
 `;