Add enzyme testing to Canvas

closes CNVS-33623

Test Plan:
  - Automated tests pass

Change-Id: I0e76082e8dfc2f695717c94819de3999dd23000a
Reviewed-on: https://gerrit.instructure.com/96510
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Product-Review: Clay Diffrient <cdiffrient@instructure.com>
QA-Review: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins

.eslintignore

@@ -0,0 +1,2 @@
+public/javascripts/vendor/**/*
+public/javascripts/enzyme_requireJS.js

frontend_build/baseWebpackConfig.js

@@ -182,7 +182,6 @@ module.exports = {
       },
       {
         test: /\.json$/,
-        include: path.resolve(__dirname, '../public/javascripts'),
         exclude: /public\/javascripts\/vendor/,
         loader: 'json-loader'
       },
@@ -236,7 +235,7 @@ module.exports = {
     // in test mode, we do include all possible timezones in vendor/timezone/* into
     // the main bundle (see timezone_core.js). There are a few files in that dir
     // that are not js files, tell webpack to ignore them.
-    new webpack.IgnorePlugin(/(CHANGELOG|LICENSE|README|\.md|package.json)$/)
+    new webpack.IgnorePlugin(/(CHANGELOG|LICENSE|README|\.md|package.json)$/, /vendor\/timezone/)
 
   ] : [
 

lib/canvas/require_js.rb

@@ -42,6 +42,7 @@ module Canvas
           'react-addons-pure-render-mixin' => 'react-addons-pure-render-mixin_requireJS',
           'react-addons-test-utils' => 'react-addons-test-utils_requireJS',
           'react-addons-update' => 'react-addons-update_requireJS',
+          'enzyme' => 'enzyme_requireJS',
           :instructureicons => 'instructure-icons/',
           'parse-decimal-number' => 'parse-decimal-number_requireJS'
         }.update(cache_busting ? cache_busting_paths : {}).

package.json

@@ -31,6 +31,7 @@
     "compute-cluster": "0.0.9",
     "core-js-builder": "^2.4.1",
     "ember-template-compiler": "^1.8.0",
+    "enzyme": "2.7.0",
     "eslint": "^3.12.2",
     "eslint-config-airbnb": "^13.0.0",
     "eslint-config-airbnb-base": "^11.0.0",

public/javascripts/.xssignore

@@ -16,6 +16,8 @@ vendor
 
 # vendor package in analytics
 /plugins/analytics/react-bootstrap-table.js
+# vendor package for enzyme
+enzyme_requireJS.js
 
 # need better hinting, skipping this atm due to false positives in vendor code
 /client_apps

spec/javascripts/jsx/calendar/scheduler/components/FindAppointmentSpec.jsx

@@ -1,48 +1,75 @@
 define([
   'react',
   'react-addons-test-utils',
+  'enzyme',
   'jsx/calendar/scheduler/components/FindAppointment'
-], (React, TestUtils, FindAppointmentApp) => {
-
+], (React, TestUtils, Enzyme, FindAppointmentApp) => {
   module('FindAppointmentApp')
 
   test('renders the FindAppoint component', () => {
-    let courses = [
-      {name: "testCourse1", asset_string: "thing1"},
-      {name: "testCourse2", asset_string: "thing2"},
+    const courses = [
+      { name: 'testCourse1', asset_string: 'thing1' },
+      { name: 'testCourse2', asset_string: 'thing2' },
     ]
 
     const store = {
       getState () {
-         return {
-            inFindAppointmentMode: false
-         }
+        return {
+          inFindAppointmentMode: false
+        }
       }
     }
 
 
-    let component = TestUtils.renderIntoDocument(<FindAppointmentApp courses={courses} store={store}/>)
-    let findAppointmentAppButton = TestUtils.findRenderedDOMComponentWithClass(component, 'Button')
-    equal(findAppointmentAppButton.textContent, "Find Appointment")
+    const component = TestUtils.renderIntoDocument(<FindAppointmentApp courses={courses} store={store} />)
+    const findAppointmentAppButton = TestUtils.findRenderedDOMComponentWithClass(component, 'Button')
+    equal(findAppointmentAppButton.textContent, 'Find Appointment')
   })
 
   test('correct button renders', () => {
-    let courses = [
-      {name: "testCourse1", asset_string: "thing1"},
-      {name: "testCourse2", asset_string: "thing2"},
+    const courses = [
+      { name: 'testCourse1', asset_string: 'thing1' },
+      { name: 'testCourse2', asset_string: 'thing2' },
     ]
 
     const store = {
       getState () {
-         return {
-            inFindAppointmentMode: true
-         }
+        return {
+          inFindAppointmentMode: true
+        }
       }
     }
 
 
-    let component = TestUtils.renderIntoDocument(<FindAppointmentApp store={store} courses={courses} />)
-    let findAppointmentAppButton = TestUtils.findRenderedDOMComponentWithClass(component, 'Button')
-    equal(findAppointmentAppButton.textContent, "Close")
+    const component = TestUtils.renderIntoDocument(<FindAppointmentApp store={store} courses={courses} />)
+    const findAppointmentAppButton = TestUtils.findRenderedDOMComponentWithClass(component, 'Button')
+    equal(findAppointmentAppButton.textContent, 'Close')
+  })
+
+  test('selectCourse sets the proper selected course', () => {
+    const { mount } = Enzyme
+    const courses = [
+      { id: 1, name: 'testCourse1', asset_string: 'thing1' },
+      { id: 2, name: 'testCourse2', asset_string: 'thing2' },
+    ]
+
+    const store = {
+      getState () {
+        return {
+          inFindAppointmentMode: false
+        }
+      }
+    }
+
+    const fakeEvent = {
+      target: {
+        value: 2
+      }
+    }
+
+    const wrapper = mount(<FindAppointmentApp courses={courses} store={store} />);
+    const instance = wrapper.component.getInstance()
+    instance.selectCourse(fakeEvent);
+    deepEqual(wrapper.state('selectedCourse'), courses[1])
   })
 })

webpack.test.config.js

@@ -20,6 +20,13 @@ testWebpackConfig.plugins = testWebpackConfig.plugins.concat([
   new webpack.DefinePlugin(jspecEnv)
 ]);
 
+// These externals are necessary for Enzyme
+// See http://airbnb.io/enzyme/docs/guides/webpack.html
+testWebpackConfig.externals = testWebpackConfig.externals || {};
+testWebpackConfig.externals['react-dom/server'] = 'window';
+testWebpackConfig.externals['react/lib/ReactContext'] = 'true';
+testWebpackConfig.externals['react/lib/ExecutionEnvironment'] = 'true';
+
 testWebpackConfig.resolve.alias.qunit = 'qunitjs';
 testWebpackConfig.resolve.modules.push(path.resolve(__dirname, 'spec/coffeescripts'))
 testWebpackConfig.resolve.modules.push(path.resolve(__dirname, 'spec/javascripts/support'))