pebble-web 2.25.2-alpha.2 → 2.25.2-alpha.3

package/dist/utils/testIds.d.ts

@@ -57,4 +57,9 @@ export declare function getCalendarTestIds(id: string): {
     applyButtonId: string;
     clearButtonId: string;
 };
+export declare function getPopUpTestIds(id: string): {
+    closeButtonId: string;
+    approveButtonId: string;
+    rejectButtonId: string;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.25.2-alpha.2",
+  "version": "2.25.2-alpha.3",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",

package/src/components/PopUp.tsx

@@ -9,6 +9,7 @@ import {
   flexCenter
 } from "./styles/PopUp.styles";
 import { PopUpProps } from "./typings/PopUp";
+import { getPopUpTestIds, getTestIds } from "../utils/testIds";
 
 const PopUp: React.FunctionComponent<PopUpProps> = props => {
   const {
@@ -20,8 +21,10 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
     rejectButtonText = "No",
     children,
     approveButtonProps,
-    rejectButtonProps
+    rejectButtonProps,
+    testId
   } = props;
+  const {closeButtonId, approveButtonId, rejectButtonId} = getTestIds(testId, id => getPopUpTestIds(id));
   return (
     <Modal visible={visible} modalClassName={flexCenter}>
       <div className={modalContainer}>
@@ -29,6 +32,7 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
           <i
             className={cx("pi", "pi-close", iconCloseClassName)}
             onClick={onClose}
+            data-testid={closeButtonId}
           />
         )}
         {children}
@@ -40,6 +44,7 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
                 type="secondary"
                 onClick={onReject}
                 {...rejectButtonProps}
+                testId={rejectButtonId}
               >
                 {rejectButtonText}
               </Button>
@@ -50,6 +55,7 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
                 type="primary"
                 onClick={onApprove}
                 {...approveButtonProps}
+                testId={approveButtonId}
               >
                 {approveButtonText}
               </Button>

package/src/components/typings/PopUp.ts

@@ -9,4 +9,5 @@ export interface PopUpProps {
   rejectButtonText?: string | Element;
   approveButtonProps?: Omit<ButtonProps, "children" | "onClick">;
   rejectButtonProps?: Omit<ButtonProps, "children" | "onClick">;
+  testId?: string;
 }

package/src/utils/testIds.ts

@@ -109,3 +109,11 @@ export function getCalendarTestIds(id: string){
     clearButtonId: `${id}-clear-btn`
   };
 }
+
+export function getPopUpTestIds(id: string){
+  return {
+    closeButtonId: `${id}-close-btn`,
+    approveButtonId: `${id}-approve-btn`,
+    rejectButtonId: `${id}-reject-btn`
+  };
+}