);
diff --git a/app/javascript/articles/components/TagList.jsx b/app/javascript/articles/components/TagList.jsx
index d07b3af2e..f390b9041 100644
--- a/app/javascript/articles/components/TagList.jsx
+++ b/app/javascript/articles/components/TagList.jsx
@@ -1,24 +1,19 @@
import { h } from 'preact';
-import PropTypes from 'prop-types';
import { tagPropTypes } from '../../src/components/common-prop-types';
-export const TagList = ({ tags = [], className }) => (
-
+export const TagList = ({ tags = [] }) => (
+
);
-TagList.defaultProps = {
- className: null,
-};
-
TagList.propTypes = {
tags: tagPropTypes.isRequired,
- className: PropTypes.string,
};
TagList.displayName = 'TagList';
diff --git a/app/javascript/articles/components/Video.jsx b/app/javascript/articles/components/Video.jsx
new file mode 100644
index 000000000..80098dddd
--- /dev/null
+++ b/app/javascript/articles/components/Video.jsx
@@ -0,0 +1,22 @@
+import { h } from 'preact';
+import { articlePropTypes } from '../../src/components/common-prop-types';
+
+export const Video = ({article}) => {
+ return (
+
+
+ {article.video_duration_in_minutes}
+
+
+ );
+};
+
+Video.propTypes = {
+ article: articlePropTypes.isRequired,
+};
+
+Video.displayName = 'Video';
diff --git a/app/javascript/articles/components/__tests__/CommentsList.test.jsx b/app/javascript/articles/components/__tests__/CommentsList.test.jsx
new file mode 100644
index 000000000..3a3d03fb7
--- /dev/null
+++ b/app/javascript/articles/components/__tests__/CommentsList.test.jsx
@@ -0,0 +1,74 @@
+import { h } from 'preact';
+import render from 'preact-render-to-json';
+import { CommentsList } from '../CommentsList';
+import { singleComment, threeCommentList } from './utilities/commentUtilities';
+// import '../../../../assets/javascripts/utilities/timeAgo';
+
+// Show buttons
+
+// When 1 top comment and 1 total comment: hide button
+
+// When 2 top comments and 2 total comments: hide button
+
+// When more than 3 total comments: show button
+
+describe('
', () => {
+ it('should not render without comments', () => {
+ const tree = render(
);
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should not render with empty comments array', () => {
+ const tree = render(
+
,
+ );
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should render comments', () => {
+ global.timeAgo = jest.fn(() => '4 days ago');
+ const tree = render(
+
,
+ );
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should not render "See all comments" button when there is a single comment and it is the top comment', () => {
+ const tree = render(
+
,
+ );
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should not render "See all comments" button when there are two comments and are both top comments', () => {
+ const tree = render(
+
,
+ );
+
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should render "See all comments" button when there are two top comments and more than two total', () => {
+ const tree = render(
+
,
+ );
+
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap b/app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap
new file mode 100644
index 000000000..1ef63bd14
--- /dev/null
+++ b/app/javascript/articles/components/__tests__/__snapshots__/CommentsList.test.jsx.snap
@@ -0,0 +1,354 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`
should not render "See all comments" button when there are two comments and are both top comments 1`] = `
+