Sem 595 update outdated components

package.json

@@ -28,7 +28,6 @@
     "moment": "2.22.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
-    "react-addons-test-utils": "15.4.2",
     "react-date-range": "^0.9.4",
     "react-dom": "^16.8.4",
     "react-portal": "^4.2.0",
@@ -62,7 +61,7 @@
     "gulp-replace": "0.5.4",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-tasks": "https://github.com/smaato/gulp-tasks.git#v0.9.0",
-    "istanbul": "gotwarlost/istanbul#source-map",
+    "istanbul": "gotwarlost/istanbul#v0.4.5",
     "jasmine-core": "2.3.4",
     "karma": "0.13.19",
     "karma-browserify": "4.2.2",

src/framework/accordion/Accordion.jsx

@@ -10,7 +10,7 @@ const Accordion = (props) => {
   };
 
   return (
-    <div className="accordion" style={wrapperStyle}>
+    <div data-testid="Accordion" className="accordion" style={wrapperStyle}>
       {props.children}
     </div>
   );

src/framework/accordionItem/AccordionItem.jsx

@@ -17,10 +17,10 @@ export default class AccordionItem extends Component {
     this.onTitleClick = this.onTitleClick.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.isActive !== nextProps.isActive) {
+  componentDidUpdate(prevProps) {
+    if (prevProps.isActive !== this.props.isActive) {
       this.setState({
-        isActive: nextProps.isActive,
+        isActive: this.props.isActive,
       });
     }
   }

src/framework/addOnControl/AddOnControl.jsx

@@ -15,7 +15,7 @@ export {
 } from './label/AddOnLabel.jsx';
 
 const AddOnControl = props => (
-  <div className="addOnControl">
+  <div data-testid="AddOnControl" className="addOnControl">
     {props.children}
   </div>
 );

src/framework/alert/Alert.jsx

@@ -19,7 +19,7 @@ const Alert = (props) => {
   );
 
   return (
-    <div className={classes}>
+    <div data-testid="Alert" className={classes}>
       {props.children}
     </div>
   );

src/framework/appHeader/AppHeader.jsx

@@ -35,7 +35,7 @@ export {
 } from './title/AppTitleContainer.jsx';
 
 const AppHeader = props => (
-  <div className="appHeader">
+  <div data-testid="AppHeader" className="appHeader">
     <div className="appHeader__liner">
       {props.left}
       {props.center}

src/framework/appHeader/account/AccountNav.jsx

@@ -20,7 +20,7 @@ const AccountNav = (props) => {
   }
 
   return (
-    <div className="accountNav">
+    <div data-testid="AccountNav" className="accountNav">
       <a
         className={accountNavUserClasses}
         onClick={props.onClick}

src/framework/appHeader/account/AccountPicture.jsx

@@ -18,7 +18,7 @@ const AccountPicture = (props) => {
   );
 
   return (
-    <span className="accountPicture">
+    <span data-testid="AccountPicture" className="accountPicture">
       {picture}
     </span>
   );

src/framework/appHeader/logo/AppLogo.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 const AppLogo = (props) => {
   const attributes = {
+    "data-testid": "AppLogo",
     className: 'appLogo',
     title: props.text,
   };

src/framework/appHeader/title/AppTitle.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 const AppTitle = props => (
   <div
+    data-testid="AppTitle"
     className="appTitle"
   >
     {props.text}

src/framework/appHeader/title/AppTitleContainer.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import AppTitle from './AppTitle.jsx';
 
 const AppTitleContainer = props => (
-  <div className="appTitleContainer">
+  <div data-testid="AppTitleContainer" className="appTitleContainer">
     <div
       className="appTitleContainer__title"
       onClick={props.onClick}

src/framework/base/dropdown/BaseDropdown.jsx

@@ -38,16 +38,11 @@ export default class BaseDropdown extends Component {
     this.onMouseOverOption = this.onMouseOverOption.bind(this);
   }
 
-  componentWillUpdate(nextProps, nextState) {
-    if (this.state.isOpen && !nextState.isOpen) {
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.isOpen && !this.state.isOpen) {
       this.enableScrolling();
-    } else if (!this.state.isOpen && nextState.isOpen) {
+    } else if (!prevState.isOpen && this.state.isOpen) {
       this.disableScrolling();
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (!prevState.isOpen && this.state.isOpen) {
       this.chooseOpeningDirection();
     }
   }
@@ -222,6 +217,7 @@ export default class BaseDropdown extends Component {
     if (this.props.isReadonly) {
       return (
         <div
+          data-testid="Dropdown"
           data-id={this.props.dataId}
           className={this.props.classes}
         >
@@ -266,6 +262,7 @@ export default class BaseDropdown extends Component {
 
     return (
       <div
+        data-testid="Dropdown"
         data-id={this.props.dataId}
         className={this.props.classes}
       >

src/framework/body/Body.jsx

@@ -21,7 +21,7 @@ const Body = (props) => {
   });
 
   return (
-    <div className={classes}>
+    <div data-testid="Body" className={classes}>
       {props.children}
     </div>
   );

src/framework/body/BodyPanel.jsx

@@ -13,6 +13,7 @@ const BodyPanel = (props) => {
 
   return (
     <Box
+      data-testid="BodyPanel"
       classes={classes}
       roundedCorners={props.roundedCorners}
     >

src/framework/box/Box.jsx

@@ -10,6 +10,7 @@ const Box = (props) => {
 
   return (
     <div
+      data-testid={props["data-testid"] ? props["data-testid"] : "Box"}
       className={classes}
       data-id={props.dataId}
     >
@@ -21,6 +22,7 @@ const Box = (props) => {
 Box.propTypes = {
   children: PropTypes.any,
   classes: PropTypes.string,
+  "data-testid": PropTypes.string,
   dataId: PropTypes.string,
   roundedCorners: PropTypes.bool,
 };

src/framework/button/Button.jsx

@@ -61,6 +61,7 @@ const Button = (props) => {
   return React.createElement(
     linkType,
     {
+      "data-testid": "Button",
       'data-id': props.dataId,
       className: classes,
       href: props.href,

src/framework/buttonGroup/ButtonGroup.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const ButtonGroup = props => (
-  <div className="buttonGroup">
+  <div data-testid="ButtonGroup" className="buttonGroup">
     {props.children}
   </div>
 );

src/framework/card/Card.jsx

@@ -23,7 +23,7 @@ export default class Card extends Component {
 
   render() {
     return (
-      <Box classes="card" roundedCorners>
+      <Box data-testid="Card" classes="card" roundedCorners>
         <div
           className="card__wrapper"
           onClick={this.props.onClick}

src/framework/cardHolder/CardHolder.jsx

@@ -21,7 +21,7 @@ const CardHolder = (props) => {
   }
 
   return (
-    <div className="cardHolder" style={holderStyle}>
+    <div data-testid="CardHolder" className="cardHolder" style={holderStyle}>
       {content}
     </div>
   );

src/framework/chart/Chart.jsx

@@ -25,27 +25,33 @@ export default class Chart extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      data: []
+    };
+
     this.COLORS = ['#2799C4', '#35D0A0'];
     this.HEIGHT = 520;
+  }
 
+  componentDidMount() {
     this.setData(this.props.data);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)) {
-      this.setData(nextProps.data);
+  componentDidUpdate(prevProps) {
+    if (JSON.stringify(prevProps.data) !== JSON.stringify(this.props.data)) {
+      this.setData(this.props.data);
     }
   }
 
   setData(data) {
-    this.data = [];
+    let newData = [];
     this.minDate = undefined;
     this.maxDate = undefined;
     this.minY = undefined;
     this.maxY = undefined;
 
     data.forEach((dataSet, index) => {
-      this.data.push({
+      newData.push({
         color: this.COLORS[index],
         id: index,
         name: this.props.legendLabelProvider(dataSet),
@@ -56,7 +62,7 @@ export default class Chart extends Component {
         const date = dataPoint.date;
         const yValue = dataPoint.value;
 
-        this.data[index].values.push({
+        newData[index].values.push({
           date,
           yValue,
         });
@@ -66,10 +72,14 @@ export default class Chart extends Component {
         this.maxY = Math.max(yValue, this.maxY) || yValue;
       });
     });
+
+    this.setState({
+      data: newData
+    });
   }
 
   renderLegend() {
-    const legendItems = this.data.map(item => (
+    const legendItems = this.state.data.map(item => (
       <span key={item.id}><ChartDot color={item.color} /> {item.name}</span>
     ));
 
@@ -91,7 +101,7 @@ export default class Chart extends Component {
     return (
       <div className={lineChartClasses}>
         <LineChart
-          data={this.data}
+          data={this.state.data}
           dateFormat={d3.time.days}
           dateRange={[this.minDate, this.maxDate]}
           height={this.HEIGHT}
@@ -117,7 +127,7 @@ export default class Chart extends Component {
     }
 
     return (
-      <Box classes="chart" roundedCorners>
+      <Box data-testid="Chart" classes="chart" roundedCorners>
         <Heading size={Heading.SIZE.SMALL}>
           {this.props.title}{this.renderLegend()}
         </Heading>

src/framework/chart/Chart.spec.jsx

@@ -32,7 +32,7 @@ describe('Chart', () => {
       const testCase = TestCaseFactory.create(Chart, props);
 
       it('is used to compute this.data', () => {
-        const data = testCase.element.data;
+        const data = testCase.element.state.data;
 
         expect(data.length).toBe(2);
 
@@ -114,7 +114,7 @@ describe('Chart', () => {
         });
 
         const testCase = TestCaseFactory.create(Chart, props);
-        const data = testCase.element.data;
+        const data = testCase.element.state.data;
 
         expect(props.legendLabelProvider).toHaveBeenCalledWith(props.data[0]);
         expect(data[0].name).toBe('label');

src/framework/chart/LineChart.jsx

@@ -280,6 +280,7 @@ export default class LineChart extends Component {
     // Render will only be called once, after the component mounts.
     return (
       <div
+        data-testid="LineChart"
         className="lineChart"
         ref="lineChart"
       >

src/framework/checkBox/CheckBox.jsx

@@ -78,6 +78,7 @@ export default class CheckBox extends Component {
 
     return (
       <span
+        data-testid="CheckBox"
         className={wrapperClasses}
         onClick={this.onClick}
       >

src/framework/columnLayout/ColumnLayout.jsx

@@ -7,7 +7,7 @@ export {
 } from './Column.jsx';
 
 const ColumnLayout = props => (
-  <div>
+  <div data-testid="ColumnLayout">
     {props.children}
   </div>
 );

src/framework/dropdown/DropdownGroup.jsx

@@ -33,6 +33,7 @@ const DropdownGroup = (props) => {
 
   return (
     <Dropdown
+      data-testid="DropdownGroup"
       {...extendedProps}
     />
   );

src/framework/filterControl/FilterControl.jsx

@@ -172,7 +172,7 @@ export default class FilterControl extends Component {
     }
 
     return (
-      <div className="filterControl">
+      <div data-testid="FilterControl" className="filterControl">
         {this.renderFilterItems()}
         {addButton}
       </div>

src/framework/grid/Grid.jsx

@@ -60,6 +60,7 @@ const Grid = (props) => {
 
   return (
     <div
+      data-testid="Grid"
       data-id={props.dataId}
       className={containerClass}
     >

src/framework/grid/stickyGrid/StickyGrid.jsx

@@ -26,6 +26,7 @@ const StickyGrid = (props) => {
 
   return (
     <div
+      data-testid="StickyGrid"
       id={props.id}
       className="stickyGrid"
     >

src/framework/imageUpload/ImageUpload.jsx

@@ -19,7 +19,7 @@ class ImageUpload extends React.Component {
     this.onRemoveImage = this.onRemoveImage.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     if (this.props.children) {
       this.setState({
         isLoaded: true,

src/framework/kpi/Kpi.jsx

@@ -8,6 +8,7 @@ const Kpi = (props) => {
 
   return (
     <span
+      data-testid="Kpi"
       className={className}
       title={props.title}
     >

src/framework/menu/Menu.jsx

@@ -7,7 +7,7 @@ export {
 } from './MenuItem.jsx';
 
 const Menu = props => (
-  <div data-id={props.dataId}>
+  <div data-testid="Menu" data-id={props.dataId}>
     {props.children}
   </div>
 );