fix: add dts to tree picker

Adslot · Sep 28, 2023 · 39bbdb0 · 39bbdb0
1 parent 17c8910
commit 39bbdb0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/components/TreePicker/TreePickerHeader.jsx b/src/components/TreePicker/TreePickerHeader.jsx
@@ -19,6 +19,7 @@ const HeaderAddAll = () => {
     <Button
       variant="link"
       className="aui--tree-picker-header-add-all"
+      dts="add-all-button"
       onClick={() => {
         const addable = getTreeState().addable;
 
@@ -37,13 +38,13 @@ const getCurrentNodeHeader = (state) => {
   return currentNode?.header;
 };
 
-const TreePickerHeader = ({ children, className, label }) => {
+const TreePickerHeader = ({ children, className, label, dts }) => {
   const header = useTreePickerSlice(getCurrentNodeHeader);
 
   const finalLabel = !_.isUndefined(header) ? header : label;
 
   return !finalLabel ? null : (
-    <div className={cc('aui--tree-picker-row', 'aui--tree-picker-header', className)}>
+    <div className={cc('aui--tree-picker-row', 'aui--tree-picker-header', className)} dts={dts}>
       <div className="aui--tree-picker-row-content">{finalLabel}</div>
       {children ?? <HeaderAddAll />}
     </div>
@@ -54,6 +55,7 @@ TreePickerHeader.propTypes = {
   label: PropTypes.node,
   children: PropTypes.node,
   className: PropTypes.string,
+  dts: PropTypes.string,
 };
 
 export default TreePickerHeader;
diff --git a/src/components/TreePicker/TreePickerNode.jsx b/src/components/TreePicker/TreePickerNode.jsx
@@ -23,7 +23,7 @@ const TreePickerNodeContext = React.createContext({ level: 0 });
 
 export const useTreePickerNode = () => React.useContext(TreePickerNodeContext);
 
-const TreePickerNode = ({ className, children, node }) => {
+const TreePickerNode = ({ className, children, node, dts }) => {
   const { goTo } = useInternalActions();
   const [state, setState] = React.useState(() => ({ expanded: false, subNodes: [] }));
 
@@ -61,7 +61,9 @@ const TreePickerNode = ({ className, children, node }) => {
 
   return (
     <TreePickerNodeContext.Provider value={value}>
-      <div className={cx('aui--tree-picker-row', className)}>{children}</div>
+      <div className={cx('aui--tree-picker-row', className)} data-test-selector={dts}>
+        {children}
+      </div>
       {state.subNodes.length === 0 ? null : <TreePickerNodeBranch nodes={state.subNodes} />}
     </TreePickerNodeContext.Provider>
   );
@@ -73,6 +75,7 @@ TreePickerNode.propTypes = {
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     label: PropTypes.string.isRequired,
   }).isRequired,
+  dts: PropTypes.string,
 };
 
 const TreePickerNodeBranch = ({ nodes }) => {

diff --git a/src/components/TreePicker/TreePickerTree.jsx b/src/components/TreePicker/TreePickerTree.jsx
@@ -71,6 +71,7 @@ const TreePickerTree = ({
   className,
   resolveRootNodes,
   hiddenNodeIds,
+  dts,
   placeholder = defaultPlaceholder,
   emptyState = defaultEmptyState,
 }) => {
@@ -114,7 +115,7 @@ const TreePickerTree = ({
 
   return (
     <HiddenByIdCtx.Provider value={byId}>
-      <div className={cx('aui--tree-picker-tree', className)}>
+      <div className={cx('aui--tree-picker-tree', className)} data-test-selector={dts}>
         {isResolvingRoot ? placeholder : visibleNodes.length === 0 ? emptyState : visibleNodes.map(renderNode)}
       </div>
     </HiddenByIdCtx.Provider>
@@ -127,6 +128,7 @@ TreePickerTree.propTypes = {
   resolveRootNodes: PropTypes.func.isRequired,
   placeholder: PropTypes.node,
   emptyState: PropTypes.node,
+  dts: PropTypes.string,
 };
 
 TreePickerTree.Placeholder = TreePickerTreePlaceholder;

diff --git a/src/components/TreePicker/index.d.ts b/src/components/TreePicker/index.d.ts
@@ -40,6 +40,7 @@ export interface TreePickerNodeProps {
   node: TreePickerNodeNode;
   children: React.ReactNode;
   className?: string;
+  dts?: string;
 }
 
 declare const TreePickerNode: React.FC<TreePickerNodeProps> & {
@@ -61,6 +62,7 @@ export interface TreePickerHeaderProps {
   label?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
+  dts?: string;
 }
 
 declare const TreePickerHeader: React.FC<TreePickerHeaderProps>;
@@ -79,6 +81,7 @@ export interface TreePickerTreeProps {
   hiddenNodeIds?: string[];
   placeholder?: React.ReactNode;
   emptyState?: React.ReactNode;
+  dts?: string;
 }
 
 declare const TreePickerTree: React.FC<TreePickerTreeProps>;