Fix bug where queue message wasn't visible to students (#214)

* Fix bug where queue message wasn't visible to students

* Add Changelog entry

* Add basic tests for QueueMessageViewer

* Fix linter error

CHANGELOG.md

@@ -7,6 +7,8 @@ with the current date and the next changes should go under a **[Next]** header.
 
 ## [Next]
 
+* Fix queue message not being visible to students. ([@nwalters512](https://github.com/nwalters512) in [#214](https://github.com/illinois/queue/pull/214))
+
 ## 18 February 2019
 
 * Update all dependencies. ([@nwalters512](https://github.com/nwalters512) in [#206](https://github.com/illinois/queue/pull/206))

src/components/QueueMessageViewer.js

@@ -72,6 +72,8 @@ const QueueMessageViewer = props => {
     }
   }
 
+  const messageVisible = !collapsible || expanded
+
   return (
     <Card className={`${className} bg-primary-light`}>
       <CardHeader onClick={onClickHeader} className={headerClassNames}>
@@ -96,7 +98,7 @@ const QueueMessageViewer = props => {
           )}
         </div>
       </CardHeader>
-      <Collapse isOpen={collapsible && expanded}>
+      <Collapse isOpen={messageVisible}>
         <CardBody className={className}>
           <ParrotMarkdown source={message} />
         </CardBody>

src/components/QueueMessageViewer.test.js

@@ -0,0 +1,39 @@
+/* eslint-env jest */
+import React from 'react'
+import { shallow } from 'enzyme'
+import { Collapse } from 'reactstrap'
+import QueueMessageViewer from './QueueMessageViewer'
+
+const makeProps = (props = {}) => {
+  const noop = () => {}
+  return {
+    collapsible: props.collapsible || false,
+    onEdit: props.onEdit || noop,
+    queueId: 1,
+    message: props.message || '',
+    editable: props.editable || false,
+  }
+}
+
+const makeWrapper = props =>
+  shallow(<QueueMessageViewer {...makeProps(props)} />)
+
+describe('<QueueMessageViewer />', () => {
+  it('shows the expanded message if not collapsible', () => {
+    const wrapper = makeWrapper({ collapsible: false })
+    const collapse = wrapper.find(Collapse)
+    expect(collapse.prop('isOpen')).toBeTruthy()
+  })
+
+  it('shows edit button if editable', () => {
+    const wrapper = makeWrapper({ editable: true })
+    const button = wrapper.find('[aria-label="Edit message"]')
+    expect(button).toHaveLength(1)
+  })
+
+  it('hides edit button if not editable', () => {
+    const wrapper = makeWrapper({ editable: false })
+    const button = wrapper.find('[aria-label="Edit message"]')
+    expect(button).toHaveLength(0)
+  })
+})