HT #2

src/components/article-list.js

@@ -47,8 +47,12 @@ class ArticleList extends Component {
     return <ul className="test--article-list__container">{articleItems}</ul>
   }
 }
+
 ArticleList.propTypes = {
-  articles: PropTypes.array.isRequired
+  articles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  toggleOpenItem: PropTypes.func,
+  fetchAll: PropTypes.func,
+  openItemId: PropTypes.string
 }
 
 export default accordion(ArticleList)

src/components/article.js

@@ -1,8 +1,20 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { findDOMNode } from 'react-dom'
 import CommentList from './comment-list'
+import CommentForm from './comment-form/comment-form'
 
 class Article extends Component {
+  static propTypes = {
+    article: PropTypes.shape({
+      title: PropTypes.string,
+      text: PropTypes.string,
+      comments: PropTypes.arrayOf(PropTypes.object)
+    }).isRequired,
+    isOpen: PropTypes.bool,
+    onBtnClick: PropTypes.func
+  }
+
   /*
     componentDidCatch(error) {
         console.log('---', error)

src/components/article.test.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Article from './article'
+
+import articles from '../fixtures'
+
+const article = articles[0]
+
+Enzyme.configure({ adapter: new Adapter() })
+
+describe('Article', () => {
+  it('should hide body when isOpen=false', () => {
+    const container = mount(<Article article={article} isOpen={false} />)
+    expect(container.find('.test--article__body').length).toBe(0)
+  })
+
+  it('should show body when isOpen=true', () => {
+    const container = mount(<Article article={article} isOpen={true} />)
+    expect(container.find('.test--article__body').length).toBe(1)
+  })
+
+  it('check button label when isOpen=true', () => {
+    const container = mount(<Article article={article} isOpen={true} />)
+    expect(container.find('.test--article__btn').text()).toBe('close')
+  })
+
+  it('check button label when isOpen=false', () => {
+    const container = mount(<Article article={article} isOpen={false} />)
+    expect(container.find('.test--article__btn').text()).toBe('open')
+  })
+})

src/components/comment-form/comment-form.js

@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+
+class CommentForm extends Component {
+  state = {
+    username: '',
+    text: '',
+    usernameError: null,
+    textError: null
+  }
+
+  render() {
+    const { username, text, usernameError, textError } = this.state
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <h3>New comment</h3>
+        <div>
+          <label htmlFor="username">Username: </label>
+          <input type="text" id="username" value={username} onChange={this.handleChangeUsername} />
+          {usernameError ? <span>{usernameError}</span> : null}
+        </div>
+        <div>
+          <label htmlFor="text">Text: </label>
+          <textarea id="text" value={text} onChange={this.handleChangeText} />
+          {textError ? <span>{textError}</span> : null}
+        </div>
+        <div>
+          <button>Submit</button>
+        </div>
+      </form>
+    )
+  }
+
+  handleChangeUsername = (e) => {
+    this.setState({
+      username: e.target.value
+    })
+  }
+
+  handleChangeText = (e) => {
+    this.setState({
+      text: e.target.value
+    })
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault()
+
+    let hasError = false
+
+    if (this.state.username.trim().length === 0) {
+      this.setState({
+        usernameError: 'Invalid name'
+      })
+      hasError = true
+    } else {
+      this.setState({
+        usernameError: null
+      })
+    }
+
+    if (this.state.text.trim().length === 0) {
+      this.setState({
+        textError: 'Invalid text'
+      })
+      hasError = true
+    } else {
+      this.setState({
+        textError: null
+      })
+    }
+
+    if (hasError === false) {
+      this.setState({
+        username: '',
+        text: ''
+      })
+      alert('Submit success')
+    }
+  }
+}
+
+export default CommentForm

src/components/comment-list-hooks.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Comment from './comment'
 import useToggler from '../custom-hooks/toggle-open'
 
@@ -31,4 +32,9 @@ function getBody({ comments, isOpen }) {
   return <div>{body}</div>
 }
 
+CommentList.propTypes = {
+  comments: PropTypes.arrayOf(PropTypes.object),
+  isOpen: PropTypes.bool
+}
+
 export default CommentList

src/components/comment-list.js

@@ -2,10 +2,11 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Comment from './comment'
 import toggleOpen from '../decorators/toggle-open'
+import CommentForm from './comment-form/comment-form'
 
 class CommentList extends Component {
   static propTypes = {
-    comments: PropTypes.array,
+    comments: PropTypes.arrayOf(PropTypes.object),
     isOpen: PropTypes.bool,
     toggleOpen: PropTypes.func
   }
@@ -21,7 +22,9 @@ class CommentList extends Component {
     const text = isOpen ? 'hide comments' : 'show comments'
     return (
       <div>
-        <button onClick={toggleOpen}>{text}</button>
+        <button className="test--toggle_comments__btn" onClick={toggleOpen}>
+          {text}
+        </button>
         {this.getBody()}
       </div>
     )
@@ -31,25 +34,32 @@ class CommentList extends Component {
     const { comments, isOpen } = this.props
     if (!isOpen) return null
 
-    const body = comments.length ? (
-      <ul ref={this.setListRef}>
-        {comments.map((comment) => (
-          <li key={comment.id}>
-            <Comment comment={comment} />
-          </li>
-        ))}
-      </ul>
-    ) : (
-      <h3>No comments yet</h3>
-    )
+    const body =
+      comments && comments.length ? (
+        <ul ref={this.setListRef} className="test--comments_list">
+          {comments.map((comment) => (
+            <li key={comment.id} className="test--comments_item">
+              <Comment comment={comment} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <h3 className="test--comments_empty-label">No comments yet</h3>
+      )
 
-    return <div>{body}</div>
+    return (
+      <div>
+        {body}
+        <CommentForm />
+      </div>
+    )
   }
 
   setListRef = (ref) => {
     this.list = ref
   }
 }
+
 /*
 
 CommentList.propTypes = {

src/components/comment-list.test.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import articles from '../fixtures'
+import CommentList from './comment-list'
+
+const comments = articles[0].comments
+
+Enzyme.configure({ adapter: new Adapter() })
+
+describe('CommentList', () => {
+  it('check button label when isOpen=true', () => {
+    const container = mount(<CommentList comments={comments} isOpen={true} />)
+    expect(container.find('.test--toggle_comments__btn').text()).toBe('hide comments')
+  })
+
+  it('check button label when isOpen=false', () => {
+    const container = mount(<CommentList comments={comments} isOpen={false} />)
+    expect(container.find('.test--toggle_comments__btn').text()).toBe('show comments')
+  })
+
+  it('check no comments when comments are not pass to component', () => {
+    const container = mount(<CommentList isOpen={true} />)
+    expect(container.find('.test--comments_list').length).toBe(0)
+  })
+
+  it('check "no comments" label exists when comments are empty', () => {
+    const container = mount(<CommentList isOpen={true} />)
+    expect(container.find('.test--comments_empty-label').length).toBe(1)
+  })
+
+  it('check "no comments" label does not exist when comments are not empty', () => {
+    const container = mount(<CommentList isOpen={true} comments={comments} />)
+    expect(container.find('.test--comments_empty-label').length).toBe(0)
+  })
+
+  it('check comments list', () => {
+    const container = mount(<CommentList comments={comments} isOpen={true} />)
+    expect(container.find('.test--comments_item').length).toBe(comments.length)
+  })
+
+  it('should toggle comments on clicks on toggle button', () => {
+    const container = mount(<CommentList comments={comments} />)
+    expect(container.find('.test--comments_list').length).toBe(0)
+
+    container
+      .find('.test--toggle_comments__btn')
+      .at(0)
+      .simulate('click')
+
+    expect(container.find('.test--toggle_comments__btn').text()).toBe('hide comments')
+    expect(container.find('.test--comments_list').length).toBe(1)
+    expect(container.find('.test--comments_item').length).toBe(comments.length)
+
+    container
+      .find('.test--toggle_comments__btn')
+      .at(0)
+      .simulate('click')
+
+    expect(container.find('.test--toggle_comments__btn').text()).toBe('show comments')
+    expect(container.find('.test--comments_list').length).toBe(0)
+  })
+})

src/components/filters/index.js

@@ -1,9 +1,12 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import DateRange from './date-range'
 import SelectFilter from './select'
 
 class Filters extends Component {
-  static propTypes = {}
+  static propTypes = {
+    articles: PropTypes.array
+  }
 
   render() {
     return (

src/decorators/toggle-open.js

@@ -6,12 +6,13 @@ export default (OriginalComponent) =>
       isOpen: false
     }
 
-    toggleOpen = () =>
+    toggleOpen = () => {
       this.setState((state) => ({
         isOpen: !state.isOpen
       }))
+    }
 
     render() {
-      return <OriginalComponent {...this.props} {...this.state} toggleOpen={this.toggleOpen} />
+      return <OriginalComponent {...this.state} {...this.props} toggleOpen={this.toggleOpen} />
     }
   }