pebble-web 2.25.2 → 2.26.1-alpha.0

package/src/components/shared/Control.tsx

@@ -13,7 +13,8 @@ function Control<OptionType>(props: ControlProps<OptionType>) {
     children = ControlView,
     type,
     className,
-    indeterminate
+    indeterminate,
+    testId
   } = props;
   return (
     <div
@@ -30,6 +31,7 @@ function Control<OptionType>(props: ControlProps<OptionType>) {
               onChange && onChange({ value, checked: !checked }, e)
           : undefined
       }
+      data-testid={testId}
     >
       {children(props)}
     </div>

package/src/components/shared/OptionGroup.tsx

@@ -12,6 +12,11 @@ import {
   searchBoxHeight
 } from "../styles/OptionGroup.styles";
 import { rowWrapper, advancedActionsWrapper } from "../styles/Options.styles";
+import {
+  getOptionGroupTestIds,
+  getOptionTestId,
+  getTestIds
+} from "../../utils/testIds";
 
 class OptionGroup<OptionType> extends React.PureComponent<
   OptionGroupProps<OptionType>,
@@ -121,10 +126,13 @@ class OptionGroup<OptionType> extends React.PureComponent<
       className,
       isSelected,
       handleChange,
-      searchBoxProps
+      searchBoxProps,
+      testId
     } = this.props;
     const { isScrolled, highlighted } = this.state;
 
+    const testIds = getTestIds(testId, getOptionGroupTestIds);
+
     const _children = React.Children.map(children, (_option, i) => {
       // `_option as React.ReactElement<OptionProps>` is a hack
       // Because React does not allow us to specify what sort of elements
@@ -142,7 +150,10 @@ class OptionGroup<OptionType> extends React.PureComponent<
         isSelected: isSelected(option.props.value),
         multiSelect,
         // @ts-ignore
-        ref
+        ref,
+        testId: testIds.optionId
+          ? getOptionTestId(testIds.optionId, i)
+          : undefined
       });
     });
 
@@ -168,6 +179,7 @@ class OptionGroup<OptionType> extends React.PureComponent<
                 onKeyDown: this.handleKeyPress,
                 autoFocus: true
               }}
+              testId={testIds.searchBoxId}
             />
           </div>
         )}
@@ -179,15 +191,21 @@ class OptionGroup<OptionType> extends React.PureComponent<
             }}
             className={cx(optionsWrapper, className)}
             role={multiSelect ? "group" : "radiogroup"}
-            data-test-id="optiongroup"
+            data-testid={testId}
             aria-label={searchBoxProps && searchBoxProps.placeholder}
           >
             {advancedOptions && advancedOptionsProps && (
               <div className={_class}>
-                <div onClick={advancedOptionsProps.selectVisible}>
+                <div
+                  onClick={advancedOptionsProps.selectVisible}
+                  data-testid={testIds.selectVisibleId}
+                >
                   Select Visible
                 </div>
-                <div onClick={advancedOptionsProps.clearVisible}>
+                <div
+                  onClick={advancedOptionsProps.clearVisible}
+                  data-testid={testIds.clearVisibleId}
+                >
                   Clear Visible
                 </div>
               </div>

package/src/components/typings/Button.ts

@@ -16,6 +16,7 @@ export interface ButtonProps {
   loading?: boolean;
   outline?: boolean;
   buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+  testId?: string;
 }
 
 export interface DropDownButtonProps extends ButtonProps {

package/src/components/typings/Calendar.ts

@@ -12,6 +12,7 @@ interface CommonCalendarProps extends Omit<CP, "onChange"> {
   onClear?: () => void;
   tileDots: TileDot[];
   disabledDays?: Array<number | Date>;
+  testId?: string;
 }
 
 export interface DateSingle extends CommonCalendarProps {

package/src/components/typings/CheckboxGroup.ts

@@ -6,4 +6,5 @@ export interface CheckboxGroupProps<OptionType> {
   className?: string;
   name: string;
   disabled?: boolean;
+  testId?: string;
 }

package/src/components/typings/Control.ts

@@ -14,4 +14,5 @@ export interface ControlProps<OptionType> {
   className?: string;
   iconClassName?: string;
   indeterminate?: boolean;
+  testId?: string;
 }

package/src/components/typings/DateInput.ts

@@ -18,6 +18,7 @@ export interface DateInputProps {
   onOutsideClick?: (isOpen: boolean) => void;
   controlled?: boolean;
   isOpen?: boolean;
+  testId?: string;
 }
 
 export interface DateInputState {

package/src/components/typings/Dropdown.ts

@@ -25,6 +25,7 @@ export interface DropdownProps {
   modifiers?: Modifiers;
   controlled?: boolean;
   isOpen?: boolean;
+  testId?: string;
 }
 
 export interface DropdownState {

package/src/components/typings/Input.ts

@@ -20,6 +20,7 @@ export interface CommonInputProps {
   successMessage?: string;
   leftElement?: () => React.ReactNode;
   rightElement?: () => React.ReactNode;
+  testId?: string;
 }
 
 export type InputType =

package/src/components/typings/Loader.ts

@@ -2,4 +2,5 @@ export interface LoaderProps {
   color?: string;
   className?: string;
   scale?: number;
+  testId?: string;
 }

package/src/components/typings/Message.ts

@@ -4,4 +4,5 @@ export interface AlertProps {
   intent: "error" | "success";
   className?: string;
   text: React.ReactChild;
+  testId?: string;
 }

package/src/components/typings/OptionGroup.ts

@@ -13,6 +13,7 @@ export interface CommonProps {
     selectVisible?: () => void;
     clearVisible?: () => void;
   };
+  testId?: string;
 }
 
 export interface OptionGroupProps<OptionType> extends CommonProps {

package/src/components/typings/OptionGroupCheckBox.ts

@@ -13,4 +13,5 @@ export interface OptionGroupCheckBoxProps<OptionType> extends CommonProps {
     props: OptionGroupCheckBoxProps<OptionType>
   ) => void;
   onClear?: () => void;
+  testId?: string;
 }

package/src/components/typings/OptionGroupRadio.ts

@@ -7,4 +7,5 @@ export interface OptionGroupRadio<OptionType> extends CommonProps {
    */
   selected?: OptionType;
   isSelected?: (value: OptionType) => boolean;
+  testId?: string;
 }

package/src/components/typings/PhoneNumberInput.ts

@@ -19,4 +19,5 @@ export interface PhoneNumberInputProps<OptionType = string> {
   inputProps?: Omit<SimpleInputProps, "value" | "onChange" | "placeholder">;
   placeholder?: string;
   required?: boolean;
+  testId?: string;
 }

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/components/typings/RadioGroup.ts

@@ -7,4 +7,5 @@ export interface RadioGroupProps<OptionType> {
   className?: string;
   name: string;
   disabled?: boolean;
+  testId?: string;
 }

package/src/components/typings/Search.ts

@@ -10,4 +10,5 @@ export interface SearchProps {
   clearable?: boolean;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
   loading?: boolean;
+  testId?: string;
 }

package/src/components/typings/SecondaryInput.ts

@@ -14,6 +14,7 @@ export interface SecondaryInputProps {
   message?: string;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement> &
     React.RefAttributes<HTMLInputElement>;
+  testId?: string;
 }
 
 export interface SecondaryInputState {

package/src/components/typings/Select.ts

@@ -23,6 +23,7 @@ export interface CommonSelectProps<OptionType> {
   isSelected?: (value: OptionType) => boolean;
   placement?: Placement;
   modifiers?: Modifiers;
+  testId?: string;
 }
 
 export interface SingleSelectProps<OptionType>

package/src/components/typings/Text.ts

@@ -4,4 +4,5 @@ export interface TextProps {
   color?: string;
   className?: string;
   typography?: TypographyStyle;
+  testId?: string;
 }

package/src/components/typings/Typeahead.ts

@@ -34,6 +34,7 @@ export interface TypeaheadProps<OptionType> {
   valueExtractor: (value: OptionType) => string;
   onClear?: () => void;
   inputProps?: Omit<SimpleInputProps, "onChange" | "value" | "placeholder">;
+  testId?: string;
 }
 
 export interface TypeaheadState {

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./theme";
 export * from "./components";
 export * from "./utils/useragent";
+export * from "./utils/testIds";
 
 import * as utils from "./utils";
 import { colors } from "pebble-shared";

package/src/utils/index.ts

@@ -2,3 +2,4 @@ export * from "./strings/capitalize";
 export * from "./numbers/format";
 export * from "./analytics/ga";
 export * from "./dimensions";
+export * from "./testIds";

package/src/utils/testIds.ts

@@ -0,0 +1,119 @@
+type TestIdMap = Record<string, string | object>;
+
+type BaseSelectIds = {
+  inputId: string;
+  optionGroupId: string;
+};
+
+type OptionGroupCheckBoxIds = ReturnType<typeof getOptionGroupCheckBoxTestIds>;
+
+type OptionGroupRadioIds = ReturnType<typeof getOptionGroupRadioTestIds>;
+
+export function getTestIds<T extends TestIdMap>(
+  id: string | undefined,
+  builder: (_id: string) => Partial<T>
+): Partial<T> {
+  return id ? builder(id) : {};
+}
+
+export function getOptionTestId(id: string, index: number) {
+  return `${id}-${index}`;
+}
+
+export function getRadioGroupTestIds(id: string) {
+  return {
+    optionId: `${id}-option`
+  };
+}
+
+export function getOptionGroupTestIds(id: string) {
+  return {
+    searchBoxId: `${id}-search`,
+    optionId: `${id}-option`,
+    selectVisibleId: `${id}-select-visible`,
+    clearVisibleId: `${id}-clear-visible`
+  };
+}
+
+export const getOptionGroupRadioTestIds = (id: string) =>
+  getOptionGroupTestIds(id);
+
+export function getOptionGroupCheckBoxTestIds(id: string) {
+  return {
+    applyButtonId: `${id}-apply-btn`,
+    clearButtonId: `${id}-clear-btn`,
+    ...getOptionGroupTestIds(id)
+  };
+}
+
+export function getPhoneNumberInputTestIds(id: string) {
+  return {
+    phoneId: `${id}-phone`,
+    countryId: `${id}-country`,
+    countryInputIds: getSelectInputTestIds(`${id}-country`)
+  };
+}
+
+export function getMessageTestId(id: string) {
+  return `${id}-message`;
+}
+
+export function getSelectInputTestIds(
+  id: string,
+  multiSelect: true
+): BaseSelectIds & OptionGroupCheckBoxIds;
+
+export function getSelectInputTestIds(
+  id: string,
+  multiSelect?: false
+): BaseSelectIds & OptionGroupRadioIds;
+
+export function getSelectInputTestIds(
+  id: string,
+  multiSelect?: boolean
+):
+  | (BaseSelectIds & OptionGroupCheckBoxIds)
+  | (BaseSelectIds & OptionGroupRadioIds);
+
+export function getSelectInputTestIds(
+  id: string,
+  multiSelect: boolean = false
+) {
+  const optionGroupId = `${id}-option-group`;
+
+  const baseIds = {
+    inputId: `${id}-input`,
+    optionGroupId
+  };
+  return {
+    ...(multiSelect
+      ? getOptionGroupCheckBoxTestIds(optionGroupId)
+      : getOptionGroupRadioTestIds(optionGroupId)),
+    ...baseIds
+  };
+}
+
+export function getTypeaheadTestIds(id: string) {
+  const optionGroupId = `${id}-option-group`;
+  return {
+    optionGroupId,
+    ...getOptionGroupRadioTestIds(optionGroupId)
+  };
+}
+
+export function getCalendarTestIds(id: string){
+  return {
+    leftIconId: `${id}-left-icon`,
+    rightIconId: `${id}-right-icon`,
+    applyButtonId: `${id}-apply-btn`,
+    clearButtonId: `${id}-clear-btn`
+  };
+}
+
+export function getPopUpTestIds(id: string){
+  return {
+    closeButtonId: `${id}-close-btn`,
+    approveButtonId: `${id}-approve-btn`,
+    rejectButtonId: `${id}-reject-btn`
+  };
+}