spec: Remove enzyme.mount from coffeescript specs

fixes LF-1424
flag=none

test plan:
- tests pass

Change-Id: Ia36af050a456bcd09fb779e371da62a767df2012
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/344389
Reviewed-by: Jacob DeWar <jacob.dewar@instructure.com>
QA-Review: Jacob DeWar <jacob.dewar@instructure.com>
Product-Review: Eric Saupe <eric.saupe@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>

spec/coffeescripts/jsx/discussion_topics/DiscussionTopicKeyboardShortcutModalSpec.jsx

@@ -18,7 +18,7 @@
 
 import DiscussionTopicKeyboardShortcutModal from 'ui/features/discussion_topic/react/DiscussionTopicKeyboardShortcutModal'
 import React from 'react'
-import {mount} from 'enzyme'
+import {render} from '@testing-library/react'
 
 const SHORTCUTS = [
   {
@@ -50,7 +50,7 @@ const SHORTCUTS = [
 QUnit.module('DiscussionTopicKeyboardShortcutModal#render')
 
 test('renders shortcuts', async function () {
-  const wrapper = mount(<DiscussionTopicKeyboardShortcutModal />)
+  const wrapper = render(<DiscussionTopicKeyboardShortcutModal />)
 
   // open the modal by pressing "ALT + f8"
   const e = new Event('keydown')

spec/coffeescripts/jsx/due_dates/DueDateCalendarPickerSpec.jsx

@@ -17,7 +17,7 @@
  */
 
 import React from 'react'
-import {mount} from 'enzyme'
+import {render} from '@testing-library/react'
 import chicago from 'timezone/America/Chicago'
 import DueDateCalendarPicker from '@canvas/due-dates/react/DueDateCalendarPicker'
 import * as tz from '@canvas/datetime'
@@ -55,11 +55,11 @@ QUnit.module('DueDateCalendarPicker', suiteHooks => {
   })
 
   function mountComponent() {
-    wrapper = mount(<DueDateCalendarPicker {...props} />)
+    wrapper = render(<DueDateCalendarPicker {...props} />)
   }
 
   function simulateChange(value) {
-    const $dateField = wrapper.find('.date_field').getDOMNode()
+    const $dateField = wrapper.container.querySelector('.date_field')
     $dateField.value = value
     $dateField.dispatchEvent(new Event('change'))
   }
@@ -114,14 +114,14 @@ QUnit.module('DueDateCalendarPicker', suiteHooks => {
   test('sets the input as readonly when disabled is true', () => {
     props.disabled = true
     mountComponent()
-    const $input = wrapper.find('input').getDOMNode()
+    const $input = wrapper.container.querySelector('input')
     strictEqual($input.readOnly, true)
   })
 
   test('disables the calendar picker button when disabled is true', () => {
     props.disabled = true
     mountComponent()
-    const $button = wrapper.getDOMNode().querySelector('button')
+    const $button = wrapper.container.querySelector('button')
     equal($button.getAttribute('aria-disabled'), 'true')
   })
 
@@ -130,8 +130,8 @@ QUnit.module('DueDateCalendarPicker', suiteHooks => {
     mountComponent()
     ok(
       wrapper
-        .find('label')
-        .prop('className')
+        .container.querySelector('label')
+        .className
         .match(/special-label/)
     )
   })
@@ -141,8 +141,8 @@ QUnit.module('DueDateCalendarPicker', suiteHooks => {
     mountComponent()
     ok(
       wrapper
-        .find('input')
-        .prop('name')
+        .container.querySelector('input')
+        .name
         .match(/special-name/)
     )
   })
@@ -150,12 +150,12 @@ QUnit.module('DueDateCalendarPicker', suiteHooks => {
   test('label and input reference each other', () => {
     mountComponent()
 
-    const htmlFor = wrapper.find('label').prop('htmlFor')
-    const inputId = wrapper.find('input').prop('id')
+    const htmlFor = wrapper.container.querySelector('label').htmlFor
+    const inputId = wrapper.container.querySelector('input').id
     equal(htmlFor, inputId)
 
-    const labelId = wrapper.find('label').prop('id')
-    const labelledby = wrapper.find('input').prop('aria-labelledby')
+    const labelId = wrapper.container.querySelector('label').id
+    const labelledby = wrapper.container.querySelector('input').getAttribute('aria-labelledby')
     equal(labelId, labelledby)
   })
 

spec/coffeescripts/jsx/epub_exports/CourseListSpec.jsx

@@ -17,7 +17,7 @@
  */
 
 import React from 'react'
-import {mount} from 'enzyme'
+import {render} from '@testing-library/react'
 import CourseList from 'ui/features/epub_exports/react/CourseList'
 
 QUnit.module('CourseListSpec', {
@@ -36,13 +36,13 @@ QUnit.module('CourseListSpec', {
 })
 
 test('render', function () {
-  let component = mount(<CourseList courses={{}} />)
-  equal(component.find('li').length, 0, 'should not render list items')
+  let component = render(<CourseList courses={{}} />)
+  equal(component.container.querySelectorAll('li').length, 0, 'should not render list items')
   component.unmount()
 
-  component = mount(<CourseList courses={this.props} />)
+  component = render(<CourseList courses={this.props} />)
   equal(
-    component.find('li').length,
+    component.container.querySelectorAll('li').length,
     Object.keys(this.props).length,
     'should have an li element per course in @props'
   )

spec/coffeescripts/jsx/epub_exports/GenerateLinkSpec.jsx

@@ -16,10 +16,10 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import $ from 'jquery'
 import 'jquery-migrate'
 import React from 'react'
-import {mount} from 'enzyme'
+import {render} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import ReactDOM from 'react-dom'
 import TestUtils from 'react-dom/test-utils'
 import GenerateLink from 'ui/features/epub_exports/react/GenerateLink'
@@ -40,16 +40,17 @@ QUnit.module('GenerateLink', {
 })
 
 test('showGenerateLink', function () {
-  let wrapper = mount(<GenerateLink {...this.props} />)
-  ok(wrapper.instance().showGenerateLink(), 'should be true without epub_export object')
+  const ref = React.createRef()
+  render(<GenerateLink {...this.props} ref={ref} />)
+  ok(ref.current.showGenerateLink(), 'should be true without epub_export object')
 
   this.props.course.epub_export = {permissions: {regenerate: false}}
-  wrapper = mount(<GenerateLink {...this.props} />)
-  notOk(wrapper.instance().showGenerateLink(), 'should be false without permissions to rengenerate')
+  render(<GenerateLink {...this.props} ref={ref} />)
+  notOk(ref.current.showGenerateLink(), 'should be false without permissions to regenerate')
 
   this.props.course.epub_export = {permissions: {regenerate: true}}
-  wrapper = mount(<GenerateLink {...this.props} />)
-  ok(wrapper.instance().showGenerateLink(), 'should be true with permissions to rengenerate')
+  render(<GenerateLink {...this.props} ref={ref} />)
+  ok(ref.current.showGenerateLink(), 'should be true with permissions to regenerate')
 })
 
 test('state triggered', function () {
@@ -67,23 +68,27 @@ test('state triggered', function () {
   ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(component).parentNode)
 })
 
-test('render', function () {
+test('render', async function () {
+  const user = userEvent.setup({ delay: null })
   const clock = sinon.useFakeTimers()
   sinon.stub(CourseEpubExportStore, 'create')
 
-  let wrapper = mount(<GenerateLink {...this.props} />)
-  equal(wrapper.children().type(), 'button', 'tag should be a button')
-  ok(wrapper.text().match(I18n.t('Generate ePub')), 'should show generate text')
+  const ref = React.createRef()
+  let wrapper = render(<GenerateLink {...this.props} ref={ref} />)
+  const button = wrapper.container.querySelector('button')
+  equal(button.type, 'button', 'tag should be a button')
+  ok(wrapper.getAllByText(I18n.t('Generate ePub')), 'should show generate text')
 
-  wrapper.simulate('click')
-  equal(wrapper.children().type(), 'span', 'tag should be span')
-  ok(wrapper.text().match(I18n.t('Generating...')), 'should show generating text')
+  await user.click(button)
+  const text = wrapper.getByText(I18n.t('Generating...'))
+  ok(text, 'should show generating text')
+  equal(text.tagName, 'SPAN', 'tag should be span')
 
   this.props.course.epub_export = {permissions: {regenerate: true}}
-  wrapper = mount(<GenerateLink {...this.props} />)
+  wrapper = render(<GenerateLink {...this.props} />)
   clock.tick(2000)
-  equal(wrapper.children().type(), 'button', 'tag should be a button')
-  ok(wrapper.text().match(I18n.t('Regenerate ePub')), 'should show regenerate text')
+  equal(wrapper.container.querySelector('button').type, 'button', 'tag should be a button')
+  ok(wrapper.getAllByText(I18n.t('Regenerate ePub')), 'should show regenerate text')
 
   clock.restore()
   CourseEpubExportStore.create.restore()

spec/coffeescripts/react_files/components/DragFeedbackSpec.jsx

@@ -16,10 +16,9 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import $ from 'jquery'
 import 'jquery-migrate'
 import React from 'react'
-import {mount} from 'enzyme'
+import {render} from '@testing-library/react'
 import File from '@canvas/files/backbone/models/File'
 import DragFeedback from 'ui/features/files/react/components/DragFeedback'
 
@@ -31,7 +30,7 @@ test('DF: shows a badge with number of items being dragged', () => {
   file.url = () => 'some_url'
   file2.url = () => 'some_url'
 
-  const dragFeedback = mount(<DragFeedback pageX={1} pageY={1} itemsToDrag={[file, file2]} />)
+  const dragFeedback = render(<DragFeedback pageX={1} pageY={1} itemsToDrag={[file, file2]} />)
 
-  equal(dragFeedback.find('.badge').instance().innerHTML, '2', 'has two items')
+  equal(dragFeedback.container.querySelector('.badge').innerHTML, '2', 'has two items')
 })

spec/coffeescripts/react_files/components/UsageRightsSelectBoxSpec.jsx

@@ -19,7 +19,8 @@
 import $ from 'jquery'
 import 'jquery-migrate'
 import React from 'react'
-import {shallow, mount} from 'enzyme'
+import {render} from '@testing-library/react'
+import {shallow} from 'enzyme'
 import UsageRightsSelectBox from '@canvas/files/react/components/UsageRightsSelectBox'
 
 QUnit.module('UsageRightsSelectBox', {
@@ -43,7 +44,8 @@ test('shows alert message if nothing is chosen and component is setup for a mess
 
 test('fetches license options when component mounts', () => {
   const server = sinon.fakeServer.create()
-  const wrapper = mount(<UsageRightsSelectBox showMessage={false} />)
+  const ref = React.createRef()
+  render(<UsageRightsSelectBox showMessage={false} ref={ref} />)
   server.respond('GET', '', [
     200,
     {'Content-Type': 'application/json'},
@@ -54,7 +56,7 @@ test('fetches license options when component mounts', () => {
       },
     ]),
   ])
-  equal(wrapper.instance().state.licenseOptions[0].id, 'cc_some_option', 'sets data just fine')
+  equal(ref.current.state.licenseOptions[0].id, 'cc_some_option', 'sets data just fine')
   server.restore()
 })
 
@@ -71,7 +73,8 @@ test('shows creative commons options when set up', () => {
     use_justification: 'creative_commons',
     cc_value: 'helloooo_nurse',
   }
-  const wrapper = mount(<UsageRightsSelectBox {...props} />)
+  const ref = React.createRef()
+  render(<UsageRightsSelectBox {...props} ref={ref} />)
   server.respond('GET', '', [
     200,
     {'Content-Type': 'application/json'},
@@ -83,6 +86,6 @@ test('shows creative commons options when set up', () => {
     ]),
   ])
 
-  equal(wrapper.instance().creativeCommons.value, 'cc_some_option', 'shows creative commons option')
+  equal(ref.current.creativeCommons.value, 'cc_some_option', 'shows creative commons option')
   server.restore()
 })