clean up promise testing and import structure

Test Plan: - tests pass Change-Id: Id71f6f225fbca6a3812ab8eac19dcdef4411f4b1 Reviewed-on: https://gerrit.instructure.com/183558 Tested-by: Jenkins Reviewed-by: Landon Gilbert-Bland <[email protected]> QA-Review: Steven Burnett <[email protected]> Product-Review: Steven Burnett <[email protected]>
NEWLMS · Mar 4, 2019 · 606a066 · 606a066
1 parent 66fd2f0
commit 606a066
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 29 deletions.
diff --git a/app/jsx/assignments_2/student/__tests__/StudentView.test.js b/app/jsx/assignments_2/student/__tests__/StudentView.test.js
@@ -17,12 +17,11 @@
  */
 import React from 'react'
 import ReactDOM from 'react-dom'
-import $ from 'jquery'
 import {mockAssignment} from '../test-utils'
 import {MockedProvider} from 'react-apollo/test-utils'
 import StudentView from '../StudentView'
 import {STUDENT_VIEW_QUERY} from '../assignmentData'
-import wait from 'waait'
+import {waitForElement} from 'react-testing-library'
 
 const mocks = [
   {
@@ -60,7 +59,10 @@ it('renders normally', async () => {
     </MockedProvider>,
     document.getElementById('fixtures')
   )
-  await wait(0) // wait for response
-  const element = $('[data-test-id="assignments-2-student-view"]')
-  expect(element).toHaveLength(1)
+
+  expect(
+    await waitForElement(() =>
+      document.querySelector('[data-test-id="assignments-2-student-view"]')
+    )
+  ).toBeInTheDocument()
 })
diff --git a/app/jsx/assignments_2/student/components/ContentTabs.js b/app/jsx/assignments_2/student/components/ContentTabs.js
@@ -26,13 +26,8 @@ import LoadingIndicator from './LoadingIndicator'
 import SVGWithTextPlaceholder from './SVGWithTextPlaceholder'
 import ClosedDiscussionSVG from '../SVG/ClosedDiscussions.svg'
 
-const Comments = lazy(
-  () =>
-    new Promise((resolve, reject) => {
-      import('./Comments')
-        .then(result => resolve(result.default ? result : {default: result}))
-        .catch(reject)
-    })
+const Comments = lazy(() =>
+  import('./Comments').then(result => (result.default ? result : {default: result}))
 )
 
 ContentTabs.propTypes = {

diff --git a/app/jsx/assignments_2/student/components/__tests__/Comments.test.js b/app/jsx/assignments_2/student/components/__tests__/Comments.test.js
@@ -23,6 +23,7 @@ import CommentsContainer from '../Comments/CommentsContainer'
 import {mockAssignment, mockComments, singleComment} from '../../test-utils'
 import {MockedProvider} from 'react-apollo/test-utils'
 import {SUBMISSION_COMMENT_QUERY} from '../../assignmentData'
+import {waitForElement} from 'react-testing-library'
 
 const mocks = [
   {
@@ -62,9 +63,9 @@ describe('Comments', () => {
       document.getElementById('fixtures')
     )
 
-    await new Promise(setTimeout) // wait for response
-    const container = $('[data-test-id="comments-container"]')
-    expect(container).toHaveLength(1)
+    expect(
+      await waitForElement(() => document.querySelector('[data-test-id="comments-container"]'))
+    ).toBeInTheDocument()
   })
 
   it('renders CommentTextArea', async () => {
@@ -74,9 +75,12 @@ describe('Comments', () => {
       </MockedProvider>,
       document.getElementById('fixtures')
     )
-    await new Promise(setTimeout) // wait for response
-    const container = $('[data-test-id="comments-text-area-container"]')
-    expect(container).toHaveLength(1)
+
+    expect(
+      await waitForElement(() =>
+        document.querySelector('[data-test-id="comments-text-area-container"]')
+      )
+    ).toBeInTheDocument()
   })
 
   it('renders loading indicator when loading query', async () => {
@@ -92,16 +96,17 @@ describe('Comments', () => {
 
   it('renders place holder text when no comments', async () => {
     ReactDOM.render(<CommentsContainer comments={[]} />, document.getElementById('fixtures'))
-    await new Promise(setTimeout) // wait for response
-    const container = $(
-      '#fixtures:contains("Send a comment to your instructor about this assignment.")'
-    )
-    expect(container).toHaveLength(1)
+
+    expect(
+      await waitForElement(
+        () => $('#fixtures:contains("Send a comment to your instructor about this assignment.")')[0]
+      )
+    ).toBeInTheDocument()
   })
 
   it('renders comment rows when provided', async () => {
     ReactDOM.render(
-      <CommentsContainer comments={[singleComment(), singleComment()]} />,
+      <CommentsContainer comments={[singleComment({_id: '6'}), singleComment()]} />,
       document.getElementById('fixtures')
     )
     const container = $('.comment-row-container')

diff --git a/app/jsx/assignments_2/student/components/__tests__/StudentContent.test.js b/app/jsx/assignments_2/student/components/__tests__/StudentContent.test.js
@@ -23,6 +23,7 @@ import {mockAssignment, mockComments} from '../../test-utils'
 import StudentContent from '../StudentContent'
 import {MockedProvider} from 'react-apollo/test-utils'
 import {SUBMISSION_COMMENT_QUERY} from '../../assignmentData'
+import {waitForElement} from 'react-testing-library'
 
 const mocks = [
   {
@@ -101,11 +102,10 @@ describe('Assignment Student Content View', () => {
       document.getElementById('fixtures')
     )
     $('[data-test-id="assignment-2-student-content-tabs"] div:contains("Comments")')[0].click()
-    await new Promise(setTimeout) // wait for response
-    // We just need to kick an event loop to ensure the js actually is loaded.
-    await new Promise(setTimeout)
-    const container = $('[data-test-id="comments-container"]')
-    expect(container).toHaveLength(1)
+
+    expect(
+      await waitForElement(() => document.querySelector('[data-test-id="comments-container"]'))
+    ).toBeInTheDocument()
   })
 
   it('renders spinner while lazy loading comments', () => {