mattermostGH-7781: Migrating analytics/table_chart.jsx to PureCompone…

…nt (mattermost#320)

components/analytics/table_chart.jsx

@@ -7,54 +7,70 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 import Constants from 'utils/constants.jsx';
 
-export default function TableChart(props) {
- return (
- <div className='col-sm-6'>
- <div className='total-count recent-active-users'>
- <div className='title'>
- {props.title}
- </div>
- <div className='content'>
- <table>
- <tbody>
- {
- props.data.map((item) => {
- const tooltip = (
- <Tooltip id={'tip-table-entry-' + item.name}>
- {item.tip}
- </Tooltip>
- );
+export default class TableChart extends React.PureComponent {
+ static propTypes = {
+
+ /*
+ * Table title
+ */
+ title: PropTypes.node.isRequired,
+
+ /*
+ * Table data
+ */
+ data: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ tip: PropTypes.string.isRequired,
+ value: PropTypes.node.isRequired
+ })
+ ).isRequired
+ };
 
- return (
- <tr key={'table-entry-' + item.name}>
- <td>
- <OverlayTrigger
- trigger={['hover', 'focus']}
- delayShow={Constants.OVERLAY_TIME_DELAY}
- placement='top'
- overlay={tooltip}
- >
- <time>
- {item.name}
- </time>
- </OverlayTrigger>
- </td>
- <td>
- {item.value}
- </td>
- </tr>
- );
- })
- }
- </tbody>
- </table>
+ render() {
+ return (
+ <div className='col-sm-6'>
+ <div className='total-count recent-active-users'>
+ <div className='title'>
+ {this.props.title}
+ </div>
+ <div className='content'>
+ <table>
+ <tbody>
+ {
+ this.props.data.map((item) => {
+ const tooltip = (
+ <Tooltip id={'tip-table-entry-' + item.name}>
+ {item.tip}
+ </Tooltip>
+ );
+
+ return (
+ <tr key={'table-entry-' + item.name}>
+ <td>
+ <OverlayTrigger
+ trigger={['hover', 'focus']}
+ delayShow={Constants.OVERLAY_TIME_DELAY}
+ placement='top'
+ overlay={tooltip}
+ >
+ <time>
+ {item.name}
+ </time>
+ </OverlayTrigger>
+ </td>
+ <td>
+ {item.value}
+ </td>
+ </tr>
+ );
+ })
+ }
+ </tbody>
+ </table>
+ </div>
  </div>
  </div>
- </div>
- );
+ );
+ }
 }
-
-TableChart.propTypes = {
- title: PropTypes.node,
- data: PropTypes.array
-};

tests/components/analytics/__snapshots__/table_chart.test.jsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/analytics/table_chart.jsx should match snapshot, loaded with data 1`] = `
+<div
+ className="col-sm-6"
+>
+ <div
+ className="total-count recent-active-users"
+ >
+ <div
+ className="title"
+ >
+ Test
+ </div>
+ <div
+ className="content"
+ >
+ <table>
+ <tbody>
+ <tr
+ key="table-entry-test1"
+ >
+ <td>
+ <OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={400}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ id="tip-table-entry-test1"
+ placement="right"
+ >
+ test-tip1
+ </Tooltip>
+ }
+ placement="top"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+ >
+ <time>
+ test1
+ </time>
+ </OverlayTrigger>
+ </td>
+ <td>
+ <p>
+ test-value1
+ </p>
+ </td>
+ </tr>
+ <tr
+ key="table-entry-test2"
+ >
+ <td>
+ <OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={400}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ id="tip-table-entry-test2"
+ placement="right"
+ >
+ test-tip2
+ </Tooltip>
+ }
+ placement="top"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+ >
+ <time>
+ test2
+ </time>
+ </OverlayTrigger>
+ </td>
+ <td>
+ <p>
+ test-value2
+ </p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</div>
+`;
+
+exports[`components/analytics/table_chart.jsx should match snapshot, loaded without data 1`] = `
+<div
+ className="col-sm-6"
+>
+ <div
+ className="total-count recent-active-users"
+ >
+ <div
+ className="title"
+ >
+ Test
+ </div>
+ <div
+ className="content"
+ >
+ <table>
+ <tbody />
+ </table>
+ </div>
+ </div>
+</div>
+`;

tests/components/analytics/table_chart.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {shallow} from 'enzyme';
+
+import TableChart from 'components/analytics/table_chart.jsx';
+
+describe('components/analytics/table_chart.jsx', () => {
+ test('should match snapshot, loaded without data', () => {
+ const data = [];
+
+ const wrapper = shallow(
+ <TableChart
+ title='Test'
+ data={data}
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, loaded with data', () => {
+ const data = [
+ {name: 'test1', tip: 'test-tip1', value: <p>{'test-value1'}</p>},
+ {name: 'test2', tip: 'test-tip2', value: <p>{'test-value2'}</p>}
+ ];
+
+ const wrapper = shallow(
+ <TableChart
+ title='Test'
+ data={data}
+ />
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+});