From bf1b1c3dd732f9cc534b3f2986f94e6904a4d750 Mon Sep 17 00:00:00 2001 From: Ioan-Alexandru Stef Date: Fri, 1 Jul 2022 13:45:30 +0300 Subject: [PATCH 1/3] SEM-588: add data-testid for certain components that cannot be queried with the React Testing Library query utilities. No longer rely on class names for testing. --- src/framework/accordion/Accordion.jsx | 2 +- src/framework/addOnControl/AddOnControl.jsx | 2 +- src/framework/alert/Alert.jsx | 2 +- src/framework/appHeader/AppHeader.jsx | 2 +- src/framework/appHeader/account/AccountNav.jsx | 2 +- src/framework/appHeader/account/AccountPicture.jsx | 2 +- src/framework/appHeader/logo/AppLogo.jsx | 1 + src/framework/appHeader/title/AppTitle.jsx | 1 + src/framework/appHeader/title/AppTitleContainer.jsx | 2 +- src/framework/base/dropdown/BaseDropdown.jsx | 2 ++ src/framework/body/Body.jsx | 2 +- src/framework/body/BodyPanel.jsx | 1 + src/framework/box/Box.jsx | 2 ++ src/framework/button/Button.jsx | 1 + src/framework/buttonGroup/ButtonGroup.jsx | 2 +- src/framework/card/Card.jsx | 2 +- src/framework/cardHolder/CardHolder.jsx | 2 +- src/framework/chart/Chart.jsx | 2 +- src/framework/chart/LineChart.jsx | 1 + src/framework/checkBox/CheckBox.jsx | 1 + src/framework/columnLayout/ColumnLayout.jsx | 2 +- src/framework/dropdown/DropdownGroup.jsx | 1 + src/framework/filterControl/FilterControl.jsx | 2 +- src/framework/grid/Grid.jsx | 1 + src/framework/grid/stickyGrid/StickyGrid.jsx | 1 + src/framework/kpi/Kpi.jsx | 1 + src/framework/menu/Menu.jsx | 2 +- src/framework/modal/Modal.jsx | 1 + src/framework/modal/overlay/ModalOverlay.jsx | 2 +- src/framework/organizationSwitcher/OrganizationSwitcher.jsx | 2 +- src/framework/pagination/Pagination.jsx | 2 +- src/framework/panel/Panel.jsx | 2 +- src/framework/panel/PanelLayout.jsx | 2 +- src/framework/pickedList/PickedList.jsx | 2 +- src/framework/pickedSummary/PickedSummary.jsx | 2 +- src/framework/progress/Progress.jsx | 2 +- src/framework/progress/ProgressModal.jsx | 2 +- src/framework/progress/ProgressSuccess.jsx | 2 +- src/framework/radioButtons/RadioButtons.jsx | 1 + src/framework/ribbon/Ribbon.jsx | 1 + src/framework/searchBox/SearchBox.jsx | 2 +- src/framework/services/grid/GridStencil.js | 2 +- src/framework/summaryControl/SummaryControl.jsx | 1 + src/framework/titleBar/TitleBar.jsx | 2 +- src/framework/toggle/Toggle.jsx | 1 + src/framework/tooltip/Tooltip.jsx | 1 + src/framework/verticalLayout/VerticalLayout.jsx | 2 +- src/framework/viewHeader/ViewHeader.jsx | 2 +- src/framework/viewHeader/dateRange/DateRange.jsx | 2 +- 49 files changed, 51 insertions(+), 31 deletions(-) diff --git a/src/framework/accordion/Accordion.jsx b/src/framework/accordion/Accordion.jsx index 6471d301..85d0a97b 100644 --- a/src/framework/accordion/Accordion.jsx +++ b/src/framework/accordion/Accordion.jsx @@ -10,7 +10,7 @@ const Accordion = (props) => { }; return ( -
+
{props.children}
); diff --git a/src/framework/addOnControl/AddOnControl.jsx b/src/framework/addOnControl/AddOnControl.jsx index 8a513528..c75cb8c0 100644 --- a/src/framework/addOnControl/AddOnControl.jsx +++ b/src/framework/addOnControl/AddOnControl.jsx @@ -15,7 +15,7 @@ export { } from './label/AddOnLabel.jsx'; const AddOnControl = props => ( -
+
{props.children}
); diff --git a/src/framework/alert/Alert.jsx b/src/framework/alert/Alert.jsx index 3d301bb8..938f53b7 100644 --- a/src/framework/alert/Alert.jsx +++ b/src/framework/alert/Alert.jsx @@ -19,7 +19,7 @@ const Alert = (props) => { ); return ( -
+
{props.children}
); diff --git a/src/framework/appHeader/AppHeader.jsx b/src/framework/appHeader/AppHeader.jsx index e5e9959f..2b33d911 100644 --- a/src/framework/appHeader/AppHeader.jsx +++ b/src/framework/appHeader/AppHeader.jsx @@ -35,7 +35,7 @@ export { } from './title/AppTitleContainer.jsx'; const AppHeader = props => ( -
+
{props.left} {props.center} diff --git a/src/framework/appHeader/account/AccountNav.jsx b/src/framework/appHeader/account/AccountNav.jsx index ca4bc7db..227b62fd 100644 --- a/src/framework/appHeader/account/AccountNav.jsx +++ b/src/framework/appHeader/account/AccountNav.jsx @@ -20,7 +20,7 @@ const AccountNav = (props) => { } return ( -
+
{ ); return ( - + {picture} ); diff --git a/src/framework/appHeader/logo/AppLogo.jsx b/src/framework/appHeader/logo/AppLogo.jsx index 2bdef948..a2e18d63 100644 --- a/src/framework/appHeader/logo/AppLogo.jsx +++ b/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, }; diff --git a/src/framework/appHeader/title/AppTitle.jsx b/src/framework/appHeader/title/AppTitle.jsx index a991ffb5..b8eb114f 100644 --- a/src/framework/appHeader/title/AppTitle.jsx +++ b/src/framework/appHeader/title/AppTitle.jsx @@ -4,6 +4,7 @@ import React from 'react'; const AppTitle = props => (
{props.text} diff --git a/src/framework/appHeader/title/AppTitleContainer.jsx b/src/framework/appHeader/title/AppTitleContainer.jsx index 05a57546..2ad517be 100644 --- a/src/framework/appHeader/title/AppTitleContainer.jsx +++ b/src/framework/appHeader/title/AppTitleContainer.jsx @@ -5,7 +5,7 @@ import React from 'react'; import AppTitle from './AppTitle.jsx'; const AppTitleContainer = props => ( -
+
@@ -266,6 +267,7 @@ export default class BaseDropdown extends Component { return (
diff --git a/src/framework/body/Body.jsx b/src/framework/body/Body.jsx index bb0acebf..2578e52a 100644 --- a/src/framework/body/Body.jsx +++ b/src/framework/body/Body.jsx @@ -21,7 +21,7 @@ const Body = (props) => { }); return ( -
+
{props.children}
); diff --git a/src/framework/body/BodyPanel.jsx b/src/framework/body/BodyPanel.jsx index ab00ff72..cda2866b 100644 --- a/src/framework/body/BodyPanel.jsx +++ b/src/framework/body/BodyPanel.jsx @@ -13,6 +13,7 @@ const BodyPanel = (props) => { return ( diff --git a/src/framework/box/Box.jsx b/src/framework/box/Box.jsx index 6763a90c..0f83e725 100644 --- a/src/framework/box/Box.jsx +++ b/src/framework/box/Box.jsx @@ -10,6 +10,7 @@ const Box = (props) => { return (
@@ -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, }; diff --git a/src/framework/button/Button.jsx b/src/framework/button/Button.jsx index bdac4796..de8c6fd0 100644 --- a/src/framework/button/Button.jsx +++ b/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, diff --git a/src/framework/buttonGroup/ButtonGroup.jsx b/src/framework/buttonGroup/ButtonGroup.jsx index 29169e25..b9b7e993 100644 --- a/src/framework/buttonGroup/ButtonGroup.jsx +++ b/src/framework/buttonGroup/ButtonGroup.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; const ButtonGroup = props => ( -
+
{props.children}
); diff --git a/src/framework/card/Card.jsx b/src/framework/card/Card.jsx index 3576b71a..47029c3a 100644 --- a/src/framework/card/Card.jsx +++ b/src/framework/card/Card.jsx @@ -23,7 +23,7 @@ export default class Card extends Component { render() { return ( - +
{ } return ( -
+
{content}
); diff --git a/src/framework/chart/Chart.jsx b/src/framework/chart/Chart.jsx index ffe6ad1c..c57f4243 100644 --- a/src/framework/chart/Chart.jsx +++ b/src/framework/chart/Chart.jsx @@ -117,7 +117,7 @@ export default class Chart extends Component { } return ( - + {this.props.title}{this.renderLegend()} diff --git a/src/framework/chart/LineChart.jsx b/src/framework/chart/LineChart.jsx index b08a2c38..16f806f6 100644 --- a/src/framework/chart/LineChart.jsx +++ b/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 (
diff --git a/src/framework/checkBox/CheckBox.jsx b/src/framework/checkBox/CheckBox.jsx index 94b69e94..8c7de97f 100644 --- a/src/framework/checkBox/CheckBox.jsx +++ b/src/framework/checkBox/CheckBox.jsx @@ -78,6 +78,7 @@ export default class CheckBox extends Component { return ( diff --git a/src/framework/columnLayout/ColumnLayout.jsx b/src/framework/columnLayout/ColumnLayout.jsx index be16ebc4..3e4a9d60 100644 --- a/src/framework/columnLayout/ColumnLayout.jsx +++ b/src/framework/columnLayout/ColumnLayout.jsx @@ -7,7 +7,7 @@ export { } from './Column.jsx'; const ColumnLayout = props => ( -
+
{props.children}
); diff --git a/src/framework/dropdown/DropdownGroup.jsx b/src/framework/dropdown/DropdownGroup.jsx index 03f4b759..f5ebbbdd 100644 --- a/src/framework/dropdown/DropdownGroup.jsx +++ b/src/framework/dropdown/DropdownGroup.jsx @@ -33,6 +33,7 @@ const DropdownGroup = (props) => { return ( ); diff --git a/src/framework/filterControl/FilterControl.jsx b/src/framework/filterControl/FilterControl.jsx index 05adb36f..f6eb2faf 100644 --- a/src/framework/filterControl/FilterControl.jsx +++ b/src/framework/filterControl/FilterControl.jsx @@ -172,7 +172,7 @@ export default class FilterControl extends Component { } return ( -
+
{this.renderFilterItems()} {addButton}
diff --git a/src/framework/grid/Grid.jsx b/src/framework/grid/Grid.jsx index 7edc3e69..47af84a0 100644 --- a/src/framework/grid/Grid.jsx +++ b/src/framework/grid/Grid.jsx @@ -60,6 +60,7 @@ const Grid = (props) => { return (
diff --git a/src/framework/grid/stickyGrid/StickyGrid.jsx b/src/framework/grid/stickyGrid/StickyGrid.jsx index aaf5c0aa..de1efeba 100644 --- a/src/framework/grid/stickyGrid/StickyGrid.jsx +++ b/src/framework/grid/stickyGrid/StickyGrid.jsx @@ -26,6 +26,7 @@ const StickyGrid = (props) => { return (
diff --git a/src/framework/kpi/Kpi.jsx b/src/framework/kpi/Kpi.jsx index cf179a84..d0a80c8e 100644 --- a/src/framework/kpi/Kpi.jsx +++ b/src/framework/kpi/Kpi.jsx @@ -8,6 +8,7 @@ const Kpi = (props) => { return ( diff --git a/src/framework/menu/Menu.jsx b/src/framework/menu/Menu.jsx index 930b61f6..4b350cf2 100644 --- a/src/framework/menu/Menu.jsx +++ b/src/framework/menu/Menu.jsx @@ -7,7 +7,7 @@ export { } from './MenuItem.jsx'; const Menu = props => ( -
+
{props.children}
); diff --git a/src/framework/modal/Modal.jsx b/src/framework/modal/Modal.jsx index 1c293b42..290e641f 100644 --- a/src/framework/modal/Modal.jsx +++ b/src/framework/modal/Modal.jsx @@ -101,6 +101,7 @@ export default class Modal extends Component { return (
{this.props.children}
), + (
{this.props.children}
), document.getElementById('portal-div') ) : null; } diff --git a/src/framework/organizationSwitcher/OrganizationSwitcher.jsx b/src/framework/organizationSwitcher/OrganizationSwitcher.jsx index d3ed30a0..d4a28007 100644 --- a/src/framework/organizationSwitcher/OrganizationSwitcher.jsx +++ b/src/framework/organizationSwitcher/OrganizationSwitcher.jsx @@ -39,7 +39,7 @@ class OrganizationSwitcher extends Component { } return ( -
+
{this.props.title}
+