Hm2 by kazmin

src/components/article-list.js

@@ -1,8 +1,15 @@
 import React, { Component } from 'react'
 import Article from './article'
 import accordion from '../decorators/accordion'
+import PropTypes from 'prop-types'
 
 export class ArticleList extends Component {
+  static propTypes = {
+    articles: PropTypes.array,
+    // from accordion decorator
+    toggleOpenItem: PropTypes.func
+  }
+
   componentWillMount() {
     this.props.fetchData && this.props.fetchData()
   }

src/components/article-list.test.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { shallow, render, mount } from 'enzyme'
 import DecoratedArticleList, { ArticleList } from './article-list'
 import articles from '../fixtures'
+import { sleep } from '../setupTests'
 
 describe('ArticleList', () => {
   it('should render ArticleList', () => {
@@ -31,6 +32,30 @@ describe('ArticleList', () => {
     expect(wrapper.find('.test__article_body').length).toEqual(1)
   })
 
+  it('article should closed', (done) => {
+    const wrapper = mount(<DecoratedArticleList articles={articles} />)
+
+    wrapper
+      .find('.test__article_btn')
+      .first()
+      .simulate('click')
+
+    expect(wrapper.find('.test__article_body').length).toEqual(1)
+
+    wrapper
+      .find('.test__article_btn')
+      .first()
+      .simulate('click')
+
+    setTimeout(() => {
+      wrapper.simulate('transitionEnd')
+
+      expect(wrapper.find('.test__article_body').length).toEqual(0)
+
+      done()
+    }, 1000)
+  })
+
   it('should request data fetching', (done) => {
     render(
       <ArticleList

src/components/comment-list/comment-list.css

@@ -0,0 +1,17 @@
+.comment-list-enter {
+    opacity: 0.01;
+}
+
+.comment-list-enter.comment-list-enter-active {
+    opacity: 1;
+    transition: opacity 500ms ease-in;
+}
+
+.comment-list-leave {
+    opacity: 1;
+}
+
+.comment-list-leave.comment-list-leave-active {
+    opacity: 0.01;
+    transition: opacity 500ms ease-out;
+}

src/components/comment-list/comment-list.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Comment from '../comment'
+import toggleOpen from '../../decorators/toggleOpen'
+import CSSTransition from 'react-addons-css-transition-group'
+import './comment-list.css'
+
+class CommentList extends Component {
+  static propTypes = {
+    comments: PropTypes.array,
+    //from toggleOpen decorator
+    isOpen: PropTypes.bool,
+    toggleOpen: PropTypes.func.isRequired
+  }
+
+  render() {
+    const { isOpen, toggleOpen } = this.props
+    const text = isOpen ? 'hide comments' : 'show comments'
+    return (
+      <div>
+        <button onClick={toggleOpen} className="toggle-comment-button">
+          {text}
+        </button>
+        <CSSTransition
+          transitionName="comment-list"
+          transitionEnterTimeout={500}
+          transitionLeaveTimeout={500}
+        >
+          {this.getBody()}
+        </CSSTransition>
+      </div>
+    )
+  }
+
+  getBody() {
+    const { comments, isOpen } = this.props
+    if (!isOpen) return null
+
+    const body =
+      comments && comments.length ? (
+        <ul className="comment-list">
+          {comments.map((comment) => (
+            <li key={comment.id} className="comment-list_item">
+              <Comment comment={comment} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <h3 className="no-comments-title">No comments yet</h3>
+      )
+
+    return <div>{body}</div>
+  }
+}
+
+export default toggleOpen(CommentList)

src/components/comment-list/comment-list.test.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { render, mount } from 'enzyme'
+import CommentList from './comment-list'
+import articles from '../../fixtures'
+
+const comments = articles[0].comments
+
+describe('CommentList', () => {
+  it('open button should contain correct text if isOpen is false', () => {
+    const wrapper = render(<CommentList />)
+
+    expect(wrapper.find('.toggle-comment-button').text()).toEqual(
+      'show comments'
+    )
+  })
+
+  it('should show correct button text if isOpen true', () => {
+    const wrapper = mount(<CommentList comments={comments} />)
+
+    wrapper.find('.toggle-comment-button').simulate('click')
+
+    expect(wrapper.find('.toggle-comment-button').text()).toEqual(
+      'hide comments'
+    )
+  })
+
+  it('should show correct text if comments is empty and was open', () => {
+    const wrapper = mount(<CommentList />)
+
+    wrapper.find('.toggle-comment-button').simulate('click')
+
+    expect(wrapper.find('.no-comments-title').text()).toEqual('No comments yet')
+  })
+
+  it('should have no comment list', () => {
+    const wrapper = mount(<CommentList />)
+
+    wrapper.find('.toggle-comment-button').simulate('click')
+
+    expect(wrapper.find('.comment-list')).toHaveLength(0)
+  })
+
+  it('should have no comment list', () => {
+    const wrapper = mount(<CommentList comments={comments} />)
+
+    wrapper.find('.toggle-comment-button').simulate('click')
+
+    expect(wrapper.find('.comment-list_item')).toHaveLength(comments.length)
+  })
+})

src/components/comment-list/index.js

@@ -0,0 +1,3 @@
+import CommentList from './comment-list'
+
+export default CommentList

src/components/comment.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 function Comment({ comment }) {
   return (
@@ -8,4 +9,11 @@ function Comment({ comment }) {
   )
 }
 
+Comment.propTypes = {
+  comment: PropTypes.shape({
+    text: PropTypes.string,
+    user: PropTypes.string
+  })
+}
+
 export default Comment

src/components/filters/index.js

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

src/components/filters/select.js

@@ -1,7 +1,12 @@
 import React, { Component } from 'react'
 import Select from 'react-select'
+import PropTypes from 'prop-types'
 
 class SelectFilter extends Component {
+  static propTypes = {
+    articles: PropTypes.array
+  }
+
   state = {
     selected: null
   }