chore: decouple resin tags from data testids

box · Jun 13, 2019 · 3a7669f · 3a7669f
1 parent f76fa4c
commit 3a7669f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js
@@ -36,6 +36,7 @@ const SidebarToggleButton = ({
     const classes = classNames(className, 'bdl-SidebarToggleButton', {
         'bdl-is-collapsed': isCollapsed,
     });
+    const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
 
     const renderButton = () => {
         if (direction === DIRECTION_LEFT) {
@@ -45,7 +46,7 @@ const SidebarToggleButton = ({
     };
 
     return (
-        <Tooltip position="middle-left" text={intlText}>
+        <Tooltip position={tooltipPosition} text={intlText}>
             <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
                 {renderButton()}
             </PlainButton>

diff --git a/...components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap b/...components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap
@@ -114,12 +114,12 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
       constrainToScrollParent={false}
       constrainToWindow={true}
       isDisabled={false}
-      position="middle-left"
+      position="middle-right"
       text="Show Sidebar"
       theme="default"
     >
       <TetherComponent
-        attachment="middle right"
+        attachment="middle left"
         bodyElement={<body />}
         classPrefix="tooltip"
         constraints={
@@ -133,7 +133,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
         enabled={false}
         renderElementTag="div"
         renderElementTo={null}
-        targetAttachment="middle left"
+        targetAttachment="middle right"
       >
         <PlainButton
           aria-label="Show Sidebar"
@@ -211,12 +211,12 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
       constrainToScrollParent={false}
       constrainToWindow={true}
       isDisabled={false}
-      position="middle-left"
+      position="middle-right"
       text="Hide Sidebar"
       theme="default"
     >
       <TetherComponent
-        attachment="middle right"
+        attachment="middle left"
         bodyElement={<body />}
         classPrefix="tooltip"
         constraints={
@@ -230,7 +230,7 @@ exports[`components/sidebar-toggle-button/SidebarToggleButton should render corr
         enabled={false}
         renderElementTag="div"
         renderElementTo={null}
-        targetAttachment="middle left"
+        targetAttachment="middle right"
       >
         <PlainButton
           aria-label="Hide Sidebar"

diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js
@@ -51,7 +51,8 @@ const SidebarNav = ({
         <div className="bcs-SidebarNav-tabs">
             {hasActivity && (
                 <SidebarNavButton
-                    interactionTarget={SIDEBAR_NAV_TARGETS.ACTIVITY}
+                    data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}
+                    data-testid="sidebaractivity"
                     isOpen={isOpen}
                     sidebarView={SIDEBAR_VIEW_ACTIVITY}
                     onNavigate={onNavigate}
@@ -62,7 +63,8 @@ const SidebarNav = ({
             )}
             {hasDetails && (
                 <SidebarNavButton
-                    interactionTarget={SIDEBAR_NAV_TARGETS.DETAILS}
+                    data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}
+                    data-testid="sidebardetails"
                     isOpen={isOpen}
                     sidebarView={SIDEBAR_VIEW_DETAILS}
                     onNavigate={onNavigate}
@@ -73,7 +75,8 @@ const SidebarNav = ({
             )}
             {hasSkills && (
                 <SidebarNavButton
-                    interactionTarget={SIDEBAR_NAV_TARGETS.SKILLS}
+                    data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}
+                    data-testid="sidebarskills"
                     isOpen={isOpen}
                     sidebarView={SIDEBAR_VIEW_SKILLS}
                     onNavigate={onNavigate}
@@ -84,7 +87,8 @@ const SidebarNav = ({
             )}
             {hasMetadata && (
                 <SidebarNavButton
-                    interactionTarget={SIDEBAR_NAV_TARGETS.METADATA}
+                    data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}
+                    data-testid="sidebarmetadata"
                     isOpen={isOpen}
                     sidebarView={SIDEBAR_VIEW_METADATA}
                     onNavigate={onNavigate}
@@ -98,7 +102,7 @@ const SidebarNav = ({
         <div className="bcs-SidebarNav-footer">
             <SidebarToggleButton
                 data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
-                data-testid={SIDEBAR_NAV_TARGETS.TOGGLE}
+                data-testid="sidebartoggle"
                 isOpen={isOpen}
                 onClick={event => {
                     if (onNavigate) {

diff --git a/src/elements/content-sidebar/SidebarNavButton.js b/src/elements/content-sidebar/SidebarNavButton.js
@@ -11,15 +11,24 @@ import Tooltip from '../../components/tooltip/Tooltip';
 import './SidebarNavButton.scss';
 
 type Props = {
+    'data-resin-target'?: string,
+    'data-testid'?: string,
     children: React.Node,
-    interactionTarget: string,
     isOpen?: boolean,
     onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
     sidebarView: string,
     tooltip: React.Node,
 };
 
-const SidebarNavButton = ({ children, interactionTarget, isOpen, onNavigate, sidebarView, tooltip }: Props) => {
+const SidebarNavButton = ({
+    children,
+    'data-resin-target': dataResinTarget,
+    'data-testid': dataTestId,
+    isOpen,
+    onNavigate,
+    sidebarView,
+    tooltip,
+}: Props) => {
     const sidebarPath = `/${sidebarView}`;
 
     return (
@@ -35,8 +44,8 @@ const SidebarNavButton = ({ children, interactionTarget, isOpen, onNavigate, sid
                             aria-selected={isActive()}
                             activeClassName="bcs-is-selected"
                             className="bcs-NavButton"
-                            data-resin-target={interactionTarget}
-                            data-testid={interactionTarget}
+                            data-resin-target={dataResinTarget}
+                            data-testid={dataTestId}
                             isActive={isActive}
                             onClick={event => {
                                 if (onNavigate) {