Merge pull request #4 from helpdotcom/CE/HELP-6485

Bumped to Material 4.x
Added failing test.
quality of life improvements.

Author: armoredsky

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -14,7 +14,7 @@ The 3 priorities that we provide you are:
 
 1. Messages should be rendered in a table-like structure. The newest messages should appear at the top of their respective columns.
 
-Note: The example design below.
+1a. Use the mockup below. It contains some inconsistencies. Please ensure that your app represents a good faith effort at matching the mockup within reason. We welcome follow up questions if you have them.
 
 ![Example Design](https://github.com/helpdotcom/react-coding-challenge/raw/master/grid.png)
 
@@ -31,6 +31,6 @@ Note: The example design below.
 6. A user should be able to start and stop incoming messages. By default the messages should be running and displaying on the grid. The start/stop button should update depending on the state of the feed.
 7. A user should see a count of specific messages in each column
 8. Use material-ui components and JSS styles.
-9. Test your application to the degree that you feel comfortable with. No specific testing frameworks are required.
+9. Test your application to the degree that you feel comfortable with. No specific testing frameworks are required. We have left a failing test for a breadcrumb.
 
 *** Applicants are provided this challenge with no expectation on deadline. Please take the time you need to complete the challenge to the best of your ability. ***

package-lock.json

@@ -11,15 +11,19 @@
   "author": "Help.com",
   "license": "No license",
   "dependencies": {
-    "@material-ui/core": "^3.8.2",
-    "chance": "^0.8.0",
-    "lodash": "^4.17.2",
-    "prop-types": "^15.5.8",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "^3.0.1"
+    "@material-ui/core": "^4.9.3",
+    "@material-ui/lab": "^4.0.0-alpha.43",
+    "chance": "^1.1.4",
+    "lodash.random": "^3.2.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "^3.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^9.4.0"
   },
-  "devDependencies": {},
   "browserslist": {
     "production": [
       ">0.2%",

package.json

@@ -1,6 +1,9 @@
 import Chance from 'chance'
-import lodash from 'lodash'
+import random from 'lodash.random'
 
+/** 
+* Do not edit this file.
+*/
 class MessageGenerator {
   constructor(options) {
     this.messageCallback = options.messageCallback
@@ -28,12 +31,14 @@ class MessageGenerator {
     if (this.stopGeneration) {
       return
     }
-    const message = this.chance.string()
-    const priority = lodash.random(1, 3)
-    const nextInMS = lodash.random(500, 3000)
+    const message = this.chance.sentence({ words: 3 })
+    const id = this.chance.guid()
+    const priority = random(1, 3)
+    const nextInMS = random(500, 3000)
     this.messageCallback({
       message,
       priority,
+      id
     })
     setTimeout(() => {
       this.generate()

src/api.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import MessageList from '../message-list'
+
+describe('message-list', () => {
+  it('is a blank slate to write tests in', () => {
+    const { container } = render(<MessageList />)
+    expect(container).not.toBeVisible()
+  })
+})

src/components/__tests__/message-list.test.js

@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Button from '@material-ui/core/Button'
 import Api from '../api'
 
-class MessageList extends Component {
+class MessageList extends React.PureComponent {
   constructor(...args) {
     super(...args)
     this.state = {
@@ -33,29 +33,26 @@ class MessageList extends Component {
     })
   }
 
-  renderButton() {
+  handleClick = () => {
     const isApiStarted = this.api.isStarted()
-    return (
-      <Button
-        variant="contained"
-        onClick={() => {
-          if (isApiStarted) {
-            this.api.stop()
-          } else {
-            this.api.start()
-          }
-          this.forceUpdate()
-        }}
-      >
-        {isApiStarted ? 'Stop Messages' : 'Start Messages'}
-      </Button>
-    )
+    if (isApiStarted) {
+      this.api.stop()
+    } else {
+      this.api.start()
+    }
+    this.forceUpdate()
   }
 
   render() {
+    const isApiStarted = this.api.isStarted()
     return (
       <div>
-        {this.renderButton()}
+        <Button
+          variant="contained"
+          onClick={this.handleClick}
+        >
+          {isApiStarted ? 'Stop Messages' : 'Start Messages'}
+        </Button>
       </div>
     )
   }

src/components/message-list.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'