Clean up console errors on tests (#354)

* Fail tests on console errors

We want our code to run with out errors
Too many errors in the test output obfusticates real errors

* Add global to jsdom for testing

Allows tests that use global.location to pass without errors

* Clean up CouponDetails errors

* Add match to SupportPage

* Add necessary props to AddUsersModal test

* Avoid warning about attaching to document.body

* Add missing props

* Comment out throwing errors for console errors

We can add this back once all tests are fixed

* Use copies of objects instead the originals

Keeps tests from failing when originals are changed

jsdom-with-global.js

@@ -0,0 +1,13 @@
+const JSDOMEnvironment = require('jest-environment-jsdom');
+
+module.exports = class CustomizedJSDomEnvironment extends JSDOMEnvironment {
+  constructor(config) {
+    super(config);
+    this.global.jsdom = this.dom;
+  }
+
+  teardown() {
+    this.global.jsdom = null;
+    return super.teardown();
+  }
+};

package.json

@@ -38,6 +38,7 @@
     "file-saver": "^1.3.8",
     "font-awesome": "^4.7.0",
     "history": "^4.10.1",
+    "jest-environment-jsdom": "^26.6.1",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.15",
     "moment": "^2.25.3",
@@ -128,6 +129,7 @@
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!(@edx/paragon)/).*/"
-    ]
+    ],
+    "testEnvironment": "./jsdom-with-global.js"
   }
 }

src/components/CodeReminderModal/index.jsx

@@ -184,6 +184,7 @@ class CodeReminderModal extends React.Component {
               name="email-template-subject"
               component={RenderField}
               label="Customize Email Subject"
+              type="text"
             />
             <Field
               id="email-template-greeting"

src/components/CodeRevokeModal/index.jsx

@@ -171,6 +171,7 @@ class CodeRevokeModal extends React.Component {
               id="email-template-subject"
               name="email-template-subject"
               component={RenderField}
+              type="text"
               label="Customize Email Subject"
             />
             <Field

src/components/CodeSearchResults/CodeSearchResults.test.jsx

@@ -15,6 +15,20 @@ jest.mock('../../data/services/EcommerceApiService');
 const enterpriseId = 'test-enterprise';
 const mockStore = configureMockStore([thunk]);
 const getMockStore = store => mockStore(store);
+
+const sampleEmailTemplate = {
+  'email-template-subject': 'Sample email subject.. ',
+  'email-template-greeting': 'Sample email greeting.. ',
+  'email-template-body': 'Sample email body template.. ',
+  'email-template-closing': 'Sample email closing template.. ',
+};
+
+const emailDefaults = {
+  'template-id': 0,
+  'template-name-select': '',
+  ...sampleEmailTemplate,
+};
+
 const initialStore = {
   portalConfiguration: {
     enterpriseId,
@@ -26,49 +40,13 @@ const initialStore = {
     allTemplates: [],
     emailTemplateSource: 'new_email',
     default: {
-      assign: {
-        'email-template-subject': 'Sample email subject.. ',
-        'email-template-greeting': 'Sample email greeting.. ',
-        'email-template-body': 'Sample email body template.. ',
-        'email-template-closing': 'Sample email closing template.. ',
-      },
-      remind: {
-        'email-template-subject': 'Sample email subject.. ',
-        'email-template-greeting': 'Sample email greeting.. ',
-        'email-template-body': 'Sample email body template.. ',
-        'email-template-closing': 'Sample email closing template.. ',
-      },
-      revoke: {
-        'email-template-subject': 'Sample email subject.. ',
-        'email-template-greeting': 'Sample email greeting.. ',
-        'email-template-body': 'Sample email body template.. ',
-        'email-template-closing': 'Sample email closing template.. ',
-      },
-    },
-    assign: {
-      'template-id': 0,
-      'template-name-select': '',
-      'email-template-subject': 'Sample email subject.. ',
-      'email-template-greeting': 'Sample email greeting.. ',
-      'email-template-body': 'Sample email body template.. ',
-      'email-template-closing': 'Sample email closing template.. ',
-    },
-    remind: {
-      'template-id': 0,
-      'template-name-select': '',
-      'email-template-subject': 'Sample email subject.. ',
-      'email-template-greeting': 'Sample email greeting.. ',
-      'email-template-body': 'Sample email body template.. ',
-      'email-template-closing': 'Sample email closing template.. ',
-    },
-    revoke: {
-      'template-id': 0,
-      'template-name-select': '',
-      'email-template-subject': 'Sample email subject.. ',
-      'email-template-greeting': 'Sample email greeting.. ',
-      'email-template-body': 'Sample email body template.. ',
-      'email-template-closing': 'Sample email closing template.. ',
+      assign: { ...sampleEmailTemplate },
+      remind: { ...sampleEmailTemplate },
+      revoke: { ...sampleEmailTemplate },
     },
+    assign: { ...emailDefaults },
+    remind: { ...emailDefaults },
+    revoke: { ...emailDefaults },
   },
 };
 

src/components/SupportPage/SupportPage.test.jsx

@@ -7,7 +7,7 @@ describe('<SupportPage />', () => {
   it('renders correctly', () => {
     const tree = renderer
       .create((
-        <SupportPage />
+        <SupportPage match={{ url: 'example.com' }} />
       ))
       .toJSON();
     expect(tree).toMatchSnapshot();

src/containers/AddUsersModal/AddUsersModal.test.jsx

@@ -41,6 +41,7 @@ const UserSubscriptionModalWrapper = props => (
         availableSubscriptionCount={10}
         onClose={() => {}}
         onSuccess={() => {}}
+        subscriptionUUID="foo"
         {...props}
       />
     </Provider>

src/containers/AdminRegisterPage/AdminRegisterPage.test.jsx

@@ -45,14 +45,12 @@ AdminRegisterPageWrapper.propTypes = {
 
 describe('<AdminRegisterPage />', () => {
   it('renders loading message when not authenticated (redirect to enterprise proxy login)', () => {
-    // Note: this test does not assert that the redirect to the proxy login works since
-    // JSdom does not implement global.location. Due to this, JSdom outputs a "Not
-    // implemented: navigation" warning for this test that can safely be ignored.
     const wrapper = mount(<AdminRegisterPageWrapper />);
 
     // verify that the loading message appears during redirect
     const LoadingComponent = <LoadingMessage className="admin-register" />;
     expect(wrapper.contains(LoadingComponent)).toBeTruthy();
+    expect(global.location.href).toBeTruthy();
   });
 
   it('displays error alert when user is authenticated but no has JWT roles', () => {

src/containers/CouponDetails/CouponDetails.test.jsx

@@ -13,6 +13,7 @@ import EcommerceaApiService from '../../data/services/EcommerceApiService';
 
 import CouponDetailsComponent from '../../components/CouponDetails';
 import CouponDetails from './index';
+import { EMAIL_TEMPLATE_SOURCE_NEW_EMAIL } from '../../data/constants/emailTemplate';
 
 const enterpriseId = 'test-enterprise';
 const mockStore = configureMockStore([thunk]);
@@ -23,6 +24,15 @@ const sampleEmailTemplate = {
   'email-template-closing': 'Sample email closing template.. ',
 };
 
+const emailDefaults = {
+  'template-id': 0,
+  'template-name-select': '',
+  'email-template-subject': 'Sample email subject.. ',
+  'email-template-greeting': 'Sample email greeting.. ',
+  'email-template-body': 'Sample email body template.. ',
+  'email-template-closing': 'Sample email closing template.. ',
+};
+
 const initialState = {
   portalConfiguration: {
     enterpriseId,
@@ -42,11 +52,15 @@ const initialState = {
   emailTemplate: {
     loading: false,
     error: null,
+    emailTemplateSource: EMAIL_TEMPLATE_SOURCE_NEW_EMAIL,
     default: {
       assign: sampleEmailTemplate,
       remind: sampleEmailTemplate,
       revoke: sampleEmailTemplate,
     },
+    assign: emailDefaults,
+    remind: emailDefaults,
+    revoke: emailDefaults,
   },
 };
 

src/containers/EnterpriseApp/EnterpriseApp.test.jsx

@@ -105,36 +105,49 @@ describe('EnterpriseApp', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-
-  it('handles location change properly', () => {
-    // There is some logic where we collapse the sidebar on menu click on mobile
-    // so we test that here as well. Note that we need to set the window width
-    // to mobile first.
-    const initialWidth = global.innerWidth;
-    global.innerWidth = breakpoints.small.minWidth;
-
-    const store = mockStore({
-      ...initialState,
-      sidebar: {
-        ...initialState.sidebar,
-        isExpandedByToggle: true,
-      },
+  describe('location changes', () => {
+    beforeEach(() => {
+      // Avoid `attachTo: document.body` Warning
+      const div = document.createElement('div');
+      div.setAttribute('id', 'container');
+      document.body.appendChild(div);
     });
-
-    const wrapper = mount(
-      <EnterpriseAppWrapper store={store} />,
-      { attachTo: document.body },
-    );
-
-    wrapper.setProps({
-      location: {
-        pathname: '/test-enterprise-slug/admin/codes',
-      },
+    afterEach(() => {
+      const div = document.getElementById('container');
+      if (div) {
+        document.body.removeChild(div);
+      }
+    });
+    it('handles location change properly', () => {
+      // There is some logic where we collapse the sidebar on menu click on mobile
+      // so we test that here as well. Note that we need to set the window width
+      // to mobile first.
+      const initialWidth = global.innerWidth;
+      global.innerWidth = breakpoints.small.minWidth;
+
+      const store = mockStore({
+        ...initialState,
+        sidebar: {
+          ...initialState.sidebar,
+          isExpandedByToggle: true,
+        },
+      });
+
+      const wrapper = mount(
+        <EnterpriseAppWrapper store={store} />,
+        { attachTo: document.getElementById('container') },
+      );
+
+      wrapper.setProps({
+        location: {
+          pathname: '/test-enterprise-slug/admin/codes',
+        },
+      });
+
+      // ensure focus is set on content wrapper
+      expect(document.activeElement.className).toEqual('content-wrapper');
+      global.innerWidth = initialWidth;
     });
-
-    // ensure focus is set on content wrapper
-    expect(document.activeElement.className).toEqual('content-wrapper');
-    global.innerWidth = initialWidth;
   });
 
   it('toggles sidebar toggle on componentWillUnmount', () => {

src/containers/LicenseRemindModal/LicenseRemindModal.test.jsx

@@ -22,6 +22,9 @@ const LicenseRemindModalWrapper = props => (
         user={user}
         onClose={() => {}}
         onSuccess={() => {}}
+        subscriptionUUID="bears4education"
+        fetchSubscriptionUsers={() => {}}
+        fetchSubscriptionDetails={() => {}}
         {...props}
       />
     </Provider>

src/setupTest.js

@@ -1,10 +1,19 @@
 /* eslint-disable import/no-extraneous-dependencies */
-
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
 
+
+// TODO: Once there are no more console errors in tests, uncomment the code below
+// const { error } = global.console;
+
+// global.console.error = (...args) => {
+//   error(...args);
+//   throw new Error(args.join(' '));
+// };
+
+
 // These configuration values are usually set in webpack's EnvironmentPlugin however
 // Jest does not use webpack so we need to set these so for testing
 process.env.LMS_BASE_URL = 'http://localhost:18000';