display text submissions in a2

when users submit text submissions in a2 we need to display
the submission

Test Plan:
* as a teacher, create a text entry assignment
* as a student, navigate to the assignment in a2
* click "Start Entry" to open the RCE
* create a draft with:
** text
** media (video / pictures)
** html elements (tables, font, etc)
* click "Save" to create the draft
* click "Submit" to submit the draft
* confirm that the submission that is displayed looks correct

fixes COMMS-2288

Change-Id: Ib9c5fcff451c15202c49297474c90a4f1c9f1259
Reviewed-on: https://gerrit.instructure.com/207177
Tested-by: Jenkins
Reviewed-by: Steven Burnett <sburnett@instructure.com>
QA-Review: Ben Nelson <bnelson@instructure.com>
Product-Review: Ryan Norton <rnorton@instructure.com>

app/jsx/assignments_2/student/components/AttemptType/TextEntry.js

@@ -210,6 +210,14 @@ export default class TextEntry extends React.Component {
     )
   }
 
+  renderSubmission() {
+    return (
+      <View as="div" borderWidth="small" padding="xx-small" data-testid="text-submission">
+        <div dangerouslySetInnerHTML={{__html: this.props.submission.body}} />
+      </View>
+    )
+  }
+
   renderSavedDraft() {
     return (
       <Billboard
@@ -256,7 +264,9 @@ export default class TextEntry extends React.Component {
   }
 
   render() {
-    if (this.getDraftBody() === null) {
+    if (['submitted', 'graded'].includes(this.props.submission.state)) {
+      return this.renderSubmission()
+    } else if (this.getDraftBody() === null) {
       return this.renderInitialBox()
     } else {
       return this.props.editingDraft ? this.renderEditor() : this.renderSavedDraft()

app/jsx/assignments_2/student/components/AttemptType/__tests__/TextEntry.test.js

@@ -91,7 +91,8 @@ describe('TextEntry', () => {
       })
     })
 
-    describe.skip('with the RCE view enabled', () => { // TODO: get this to work with latest @testing-library
+    describe.skip('with the RCE view enabled', () => {
+      // TODO: get this to work with latest @testing-library
       it('renders the RCE when the draft body is not null', async () => {
         const props = await makeProps({editingDraft: true})
         const {getByTestId} = render(<TextEntry {...props} />)
@@ -131,7 +132,8 @@ describe('TextEntry', () => {
         })
       })
 
-      it.skip('stops displaying the RCE when the Cancel button is clicked', async () => { // TODO: get this to work with latest @testing-library
+      it.skip('stops displaying the RCE when the Cancel button is clicked', async () => {
+        // TODO: get this to work with latest @testing-library
         const props = await makeProps({editingDraft: true})
         const {getByTestId} = render(<TextEntry {...props} />)
 
@@ -142,4 +144,32 @@ describe('TextEntry', () => {
       })
     })
   })
+
+  it('displays the submitted text body when the text has been submitted', async () => {
+    const mockedSubmission = await mockSubmission({
+      Submission: () => ({
+        body: '<p>thundercougarfalconbird</p>',
+        state: 'submitted'
+      })
+    })
+    const props = await makeProps({submission: mockedSubmission})
+    const {getByTestId, getByText} = render(<TextEntry {...props} />)
+
+    expect(getByTestId('text-submission')).toBeInTheDocument()
+    expect(getByText('thundercougarfalconbird')).toBeInTheDocument()
+  })
+
+  it('displays the submitted text body when the submission has been graded', async () => {
+    const mockedSubmission = await mockSubmission({
+      Submission: () => ({
+        body: '<p>thundercougarfalconbird</p>',
+        state: 'graded'
+      })
+    })
+    const props = await makeProps({submission: mockedSubmission})
+    const {getByTestId, getByText} = render(<TextEntry {...props} />)
+
+    expect(getByTestId('text-submission')).toBeInTheDocument()
+    expect(getByText('thundercougarfalconbird')).toBeInTheDocument()
+  })
 })

app/jsx/assignments_2/student/graphqlData/SubmissionInterface.js

@@ -27,6 +27,7 @@ export const SubmissionInterface = {
         ...SubmissionFile
       }
       attempt
+      body
       deductedPoints
       enteredGrade
       grade
@@ -48,6 +49,7 @@ export const SubmissionInterface = {
   shape: shape({
     attachments: arrayOf(SubmissionFile.shape),
     attempt: number.isRequired,
+    body: string,
     deductedPoints: number,
     enteredGrade: string,
     grade: string,
@@ -66,6 +68,7 @@ export const SubmissionInterfaceDefaultMocks = {
   SubmissionInterface: () => ({
     attachments: () => [],
     attempt: 0,
+    body: null,
     deductedPoints: null,
     enteredGrade: null,
     grade: null,