Filter out unactionable console messages

Also, fix some


Test plan:
* run `yarn jest`
* you should see less of those react 16.9.x lifestyle deprecations
  In the console output

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

app/coffeescripts/external_tools/__tests__/deepLinking.test.js

@@ -63,24 +63,22 @@ describe('handleDeepLinkingError', () => {
     }
   }
   const reloadTool = jest.fn()
-  const flashError = $.flashError
 
   beforeEach(() => {
     reloadTool.mockReset()
-    $.flashError = jest.fn()
-
+    jest.spyOn($, 'flashError').mockImplementation()
+    jest.spyOn(console, 'error').mockImplementation()
     handleDeepLinkingError(error, contentView, reloadTool)
   })
 
-  afterEach(() => {
-    $.flashError = flashError
-  })
 
   it('displays an error to the user', () => {
+    expect(console.error).toHaveBeenCalled()
     expect($.flashError).toHaveBeenCalledWith('Error retrieving content')
   })
 
   it('reloads the tool', () => {
+    expect(console.error).toHaveBeenCalled()
     expect(reloadTool).toHaveBeenCalledWith(contentView.model.id)
   })
-})
+})

app/coffeescripts/external_tools/deepLinking.js

@@ -18,6 +18,7 @@
 
 import I18n from 'i18n!external_toolsdeepLinking'
 import $ from 'jquery'
+import '../jquery.rails_flash_notifications'
 
 export function handleContentItem(result, contentView, callback) {
   contentView.trigger('ready', {contentItems: [legacyContentItem(result)]})

app/jsx/assignments_2/teacher/components/StudentsTab/StudentsSearcher.js

@@ -198,10 +198,12 @@ export default class StudentsSearcher extends React.Component {
         <Flex as="div" margin="0 0 medium 0" wrapItems>
           <FlexItem grow size="60%" margin="small 0 0 0">
             <TextInput
-              label={<ScreenReaderContent>{I18n.t('Search by student name')}</ScreenReaderContent>}
+              renderLabel={
+                <ScreenReaderContent>{I18n.t('Search by student name')}</ScreenReaderContent>
+              }
               placeholder={I18n.t('Search')}
               type="search"
-              inline
+              display="inline-block"
               width="70%"
               messages={searchMessages}
               onChange={this.handleNameFilterChange}

jest/jest-setup.js

@@ -19,18 +19,40 @@
 import Enzyme from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
-const errorsToIgnore = ["Warning: [Focusable] Exactly one tabbable child is required (0 found)."];
+const consoleMessagesToIgnore = {
+  error: [
+    // /Failed prop type/, // uncomment if you want to focus on stuff besides propType warnings
+
+    'Warning: [Focusable] Exactly one tabbable child is required (0 found).',
+
+    // This is from @instructure/ui-menu, nothing we can do about it ourselves
+    /Function components cannot be given refs\. Attempts to access this ref will fail[\s\S]*in (CanvasInstUIModal|PopoverTrigger)/,
+
+  ],
+  warn: [
+    // /Please update the following components/, // Uncomment this if all the react 16.9 deprecations are cluttering up the console and you want to focus on something else
+
+    // '@instructure/ui-select' itself generates this warning, we assume they will figure it out themselves
+    /\[Options\] is experimental and its API could change significantly in a future release[\s\S]*\(created by Selectable\)/,
+
+    // React 16.9+ generates these deprecation warnings but it doesn't do any good to hear about the ones for instUI. We can't do anything about them in this repo
+    // Put any others we can't control here.
+    /Please update the following components:[ (BaseTransition|Button|Checkbox|CloseButton|Dialog|Expandable|Flex|FlexItem|FormFieldGroup|FormFieldLabel|FormFieldLayout|FormFieldMessages|Grid|GridCol|GridRow|Heading|InlineSVG|Mask|ModalBody|ModalFooter|ModalHeader|NumberInput|Portal|Query|Responsive|SVGIcon|ScreenReaderContent|SelectOptionsList|SelectField|SelectMultiple|SelectOptionsList|SelectSingle|Tab|TabList|TabPanel|Text|TextArea|TextInput|TinyMCE|ToggleDetails|ToggleFacade|Transition|TruncateText|View),?]+$/
+  ]
+}
+
+Object.keys(consoleMessagesToIgnore).forEach(key => {
+  const original = console[key]
+  console[key] = function() {
+    const combinedMsg = Array.prototype.join.call(arguments)
+    const shouldIgnore = pattern => combinedMsg[typeof pattern === 'string' ? 'includes' : 'match'](pattern)
+    if (consoleMessagesToIgnore[key].some(shouldIgnore)) return
+    return original.apply(this, arguments)
+  }
+})
 
 global.fetch = require('jest-fetch-mock')
 
-/* eslint-disable-next-line */
-const _consoleDotError = console.error
-/* eslint-disable-next-line */
-console.error = function (message) {
-      if(errorsToIgnore.includes(message)) return
-      _consoleDotError.apply(this, arguments)
-    }
-
 window.scroll = () => {}
 window.ENV = {}