pebble-web 2.25.1 → 2.25.2-alpha.0

package/dist/utils/index.d.ts

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

package/dist/utils/testIds.d.ts

@@ -0,0 +1,53 @@
+declare type TestIdMap = Record<string, string | object>;
+declare type BaseSelectIds = {
+    inputId: string;
+    optionGroupId: string;
+};
+declare type OptionGroupCheckBoxIds = ReturnType<typeof getOptionGroupCheckBoxTestIds>;
+declare type OptionGroupRadioIds = ReturnType<typeof getOptionGroupRadioTestIds>;
+export declare function getTestIds<T extends TestIdMap>(id: string | undefined, builder: (_id: string) => Partial<T>): Partial<T>;
+export declare function getOptionTestId(id: string, index: number): string;
+export declare function getRadioGroupTestIds(id: string): {
+    optionId: string;
+};
+export declare function getOptionGroupTestIds(id: string): {
+    searchBoxId: string;
+    optionId: string;
+    selectVisibleId: string;
+    clearVisibleId: string;
+};
+export declare const getOptionGroupRadioTestIds: (id: string) => {
+    searchBoxId: string;
+    optionId: string;
+    selectVisibleId: string;
+    clearVisibleId: string;
+};
+export declare function getOptionGroupCheckBoxTestIds(id: string): {
+    searchBoxId: string;
+    optionId: string;
+    selectVisibleId: string;
+    clearVisibleId: string;
+    applyButtonId: string;
+    clearButtonId: string;
+};
+export declare function getPhoneNumberInputTestIds(id: string): {
+    phoneId: string;
+    countryId: string;
+    countryInputIds: BaseSelectIds & {
+        searchBoxId: string;
+        optionId: string;
+        selectVisibleId: string;
+        clearVisibleId: string;
+    };
+};
+export declare function getSelectInputTestIds(id: string, multiSelect: true): BaseSelectIds & OptionGroupCheckBoxIds;
+export declare function getSelectInputTestIds(id: string, multiSelect?: false): BaseSelectIds & OptionGroupRadioIds;
+export declare function getSelectInputTestIds(id: string, multiSelect?: boolean): (BaseSelectIds & OptionGroupCheckBoxIds) | (BaseSelectIds & OptionGroupRadioIds);
+export declare function getTypeaheadTestIds(id: string): {
+    searchBoxId: string;
+    optionId: string;
+    selectVisibleId: string;
+    clearVisibleId: string;
+    optionGroupId: string;
+};
+export {};

package/package.json

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

package/src/components/Button.tsx

@@ -23,7 +23,8 @@ const Button: React.FunctionComponent<ButtonProps> = ({
   loading,
   outline,
   size = "small",
-  buttonProps
+  buttonProps,
+  testId
 }: ButtonProps) => {
   const disableAction = disabled || loading;
 
@@ -40,6 +41,7 @@ const Button: React.FunctionComponent<ButtonProps> = ({
       onClick={!disableAction ? onClick : undefined}
       style={{ width }}
       disabled={disabled}
+      data-testid={testId}
       {...buttonProps}
     >
       {loading ? <Loader color={colors.white.base} scale={0.4} /> : children}

package/src/components/DateInput.tsx

@@ -94,7 +94,8 @@ export default class DateInput extends React.PureComponent<
       initiallyOpen,
       onOutsideClick,
       controlled,
-      isOpen
+      isOpen,
+      testId
     } = this.props;
 
     const _wrapperClassName = cx(wrapperStyle, wrapperClassName);
@@ -131,6 +132,7 @@ export default class DateInput extends React.PureComponent<
                 }}
                 className={cx(inputStyle, inputProps && inputProps.className)}
                 disabled={disabled}
+                testId={testId}
               />
             )}
           </Rifm>

package/src/components/DropDown.tsx

@@ -48,7 +48,8 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
       disabled,
       labelClassName,
       controlled,
-      onOutsideClick
+      onOutsideClick,
+      testId
     } = this.props;
 
     const _isDropDownOpen = controlled
@@ -82,6 +83,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                     onClick={this.toggleDropdown}
                     disabled={disabled}
                     className={labelClassName}
+                    testId={testId}
                   >
                     {buttonLabel}
                   </DropDownButton>

package/src/components/Input.tsx

@@ -84,7 +84,8 @@ class Input extends React.PureComponent<InputProps, InputState> {
       onClick,
       loading,
       leftElement,
-      rightElement
+      rightElement,
+      testId
     } = this.props;
     const { isFocused } = this.state;
 
@@ -152,9 +153,18 @@ class Input extends React.PureComponent<InputProps, InputState> {
           {leftElement?.()}
 
           {this.props.textArea ? (
-            <textarea {..._inputProps} {...this.props.inputProps} />
+            <textarea
+              {..._inputProps}
+              {...this.props.inputProps}
+              data-testid={testId}
+            />
           ) : (
-            <input type={type} {..._inputProps} {...this.props.inputProps} />
+            <input
+              type={type}
+              {..._inputProps}
+              {...this.props.inputProps}
+              data-testid={testId}
+            />
           )}
 
           {loading && (

package/src/components/Loader.tsx

@@ -7,7 +7,8 @@ import { cx } from "emotion";
 const Loader: React.FunctionComponent<LoaderProps> = ({
   color = colors.gray.darker,
   scale = 1,
-  className
+  className,
+  testId
 }) => {
   const style = {
     backgroundColor: color
@@ -16,6 +17,7 @@ const Loader: React.FunctionComponent<LoaderProps> = ({
     <div
       className={cx(spinnerStyle, className)}
       style={{ transform: `scale(${scale})` }}
+      data-testid={testId}
     >
       <div style={style} />
       <div style={style} />

package/src/components/Message.tsx

@@ -7,7 +7,8 @@ import { AlertProps } from "./typings/Message";
 const Message: React.FunctionComponent<AlertProps> = ({
   intent,
   className,
-  text
+  text,
+  testId
 }) => {
   const bColor = _colors[intent];
 
@@ -22,6 +23,7 @@ const Message: React.FunctionComponent<AlertProps> = ({
       style={{
         backgroundColor: bColor
       }}
+      data-testid={testId}
     >
       <i className={iconClass} />
       {text}

package/src/components/NativeDateInput.tsx

@@ -12,7 +12,7 @@ export default class NativeDateInput extends React.PureComponent<
   };
 
   render() {
-    const { inputProps, placeholder, value, disabled } = this.props;
+    const { inputProps, placeholder, value, disabled, testId } = this.props;
 
     return (
       <Input
@@ -26,6 +26,7 @@ export default class NativeDateInput extends React.PureComponent<
         fixLabelAtTop
         {...inputProps}
         disabled={disabled}
+        testId={testId}
       />
     );
   }

package/src/components/OptionGroupCheckBox.tsx

@@ -6,6 +6,7 @@ import OptionGroup from "./shared/OptionGroup";
 import { OptionGroupCheckBoxProps } from "./typings/OptionGroupCheckBox";
 import * as styles from "../components/styles/OptionGroupCheckBox.styles";
 import { OptionProps } from "./typings/Option";
+import { getOptionGroupCheckBoxTestIds, getTestIds } from "../utils/testIds";
 
 export default class OptionGroupCheckBox<
   OptionType
@@ -52,6 +53,7 @@ export default class OptionGroupCheckBox<
       onClear,
       isSelected,
       onChange,
+      testId,
       ...rest
     } = this.props;
     const advancedOptionsProps = {
@@ -59,6 +61,7 @@ export default class OptionGroupCheckBox<
       clearVisible: this.clearVisible,
       ...this.props.advancedOptionsProps
     };
+    const testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
     return (
       <div className={cx(styles.optionGroupCheckBoxWrap, wrapClassName)}>
         <OptionGroup<OptionType>
@@ -67,16 +70,25 @@ export default class OptionGroupCheckBox<
           isSelected={isSelected || this.isSelected}
           handleChange={this.handleChange}
           multiSelect
+          testId={testId}
         />
 
         {(onApply || onClear) && (
           <div className={styles.optionGroupCheckBoxButtonWrap}>
             {onClear && (
-              <Button type="secondary" onClick={onClear}>
+              <Button
+                type="secondary"
+                onClick={onClear}
+                testId={testIds.clearButtonId}
+              >
                 Clear
               </Button>
             )}
-            {onApply && <Button onClick={this.onApply}>Apply</Button>}
+            {onApply && (
+              <Button onClick={this.onApply} testId={testIds.applyButtonId}>
+                Apply
+              </Button>
+            )}
           </div>
         )}
       </div>

package/src/components/PhoneNumberInput.tsx

@@ -10,6 +10,7 @@ import {
 } from "./styles/PhoneNumberInput.styles";
 import { labelStyle } from "./styles/Input.styles";
 import { colors } from "pebble-shared";
+import { getPhoneNumberInputTestIds, getTestIds } from "../utils/testIds";
 
 export default class PhoneNumberInput<
   OptionType = string
@@ -40,8 +41,11 @@ export default class PhoneNumberInput<
       selectProps,
       inputProps,
       required,
-      placeholder
+      placeholder,
+      testId
     } = this.props;
+
+    const testIds = getTestIds(testId, getPhoneNumberInputTestIds);
     return (
       <div className={cx(wrapper, className)}>
         <label
@@ -61,6 +65,7 @@ export default class PhoneNumberInput<
           selected={countryCode}
           {...selectProps}
           className={cx(selectStyle, selectProps && selectProps.className)}
+          testId={testIds.countryId}
         >
           {this.props.children}
         </Select>
@@ -69,6 +74,7 @@ export default class PhoneNumberInput<
           placeholder=""
           value={phone}
           {...inputProps}
+          testId={testIds.phoneId}
         />
       </div>
     );

package/src/components/RadioGroup.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { RadioProps } from "./typings/Radio";
 import { RadioGroupProps } from "./typings/RadioGroup";
+import {
+  getOptionTestId,
+  getRadioGroupTestIds,
+  getTestIds
+} from "../utils/testIds";
 
 export default class RadioGroup<OptionType> extends React.PureComponent<
   RadioGroupProps<OptionType>
@@ -15,9 +20,18 @@ export default class RadioGroup<OptionType> extends React.PureComponent<
   };
 
   render() {
-    const { children, selected, className, name, disabled } = this.props;
+    const {
+      children,
+      selected,
+      className,
+      name,
+      disabled,
+      testId
+    } = this.props;
 
-    const _children = React.Children.map(children, _radio => {
+    const testIds = getTestIds(testId, getRadioGroupTestIds);
+
+    const _children = React.Children.map(children, (_radio, i) => {
       // `_radio as React.ReactElement<RadioProps>` is a hack
       // Because React does not allow us to specify what sort of elements
       // you can allow as children and leaves it on you to figure out
@@ -26,7 +40,10 @@ export default class RadioGroup<OptionType> extends React.PureComponent<
       return React.cloneElement(radio, {
         onChange: this.handleChange,
         checked: selected === radio.props.value,
-        disabled
+        disabled,
+        testId: testIds.optionId
+          ? getOptionTestId(testIds.optionId, i)
+          : undefined
       });
     });
 

package/src/components/Search.tsx

@@ -27,7 +27,8 @@ class Search extends React.PureComponent<SearchProps> {
       className,
       clearable,
       value,
-      loading
+      loading,
+      testId
     } = this.props;
 
     const wrapperClassName = cx(searchWrapperStyle, {
@@ -50,6 +51,7 @@ class Search extends React.PureComponent<SearchProps> {
           ref={this.searchInputRef}
           value={value}
           {...inputProps}
+          data-testid={testId}
         />
         {loading && <Loader scale={0.4} color={colors.violet.base} />}
         {clearable && (

package/src/components/SecondaryInput.tsx

@@ -76,7 +76,8 @@ export default class SecondaryInput extends React.PureComponent<
       message,
       readOnly,
       loading,
-      className
+      className,
+      testId
     } = this.props;
     const { isFocused } = this.state;
 
@@ -119,7 +120,11 @@ export default class SecondaryInput extends React.PureComponent<
           onFocus={this.addFocus}
           onBlur={this.removeFocus}
         >
-          <input {..._inputProps} {...this.props.inputProps} />
+          <input
+            {..._inputProps}
+            {...this.props.inputProps}
+            data-testid={testId}
+          />
           <label className={placeholderClassName}>
             {placeholder}
             {required && (

package/src/components/Select.tsx

@@ -16,6 +16,7 @@ import DropDown from "./DropDown";
 import Input from "./Input";
 import OptionGroupCheckBox from "./OptionGroupCheckBox";
 import OptionGroupRadio from "./OptionGroupRadio";
+import { getSelectInputTestIds, getTestIds } from "../utils/testIds";
 
 function noop() {}
 
@@ -34,9 +35,17 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
     disabled,
     isSelected,
     placement,
-    modifiers
+    modifiers,
+    testId
   } = props;
 
+  const singleSelectTestIds = getTestIds(testId, id =>
+    getSelectInputTestIds(id, false)
+  );
+  const multiSelectTestIds = getTestIds(testId, id =>
+    getSelectInputTestIds(id, true)
+  );
+
   return (
     <div
       className={cx(selectWrapper, className, {
@@ -68,6 +77,7 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                       onDropdownToggle(isOpen);
                     }
               }
+              data-testid={singleSelectTestIds.inputId}
             >
               <Input
                 className={selectInputWrapper}
@@ -153,6 +163,7 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                   })
                 }
                 {...commonProps}
+                testId={multiSelectTestIds.optionGroupId}
               >
                 {children}
               </OptionGroupCheckBox>
@@ -167,6 +178,7 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                   toggle();
                 }}
                 {...commonProps}
+                testId={singleSelectTestIds.optionGroupId}
               >
                 {children}
               </OptionGroupRadio>

package/src/components/Tabs.tsx

@@ -37,7 +37,7 @@ export class Tabs extends React.PureComponent<TabsProps, TabsState> {
             return (
               <span
                 key={`${tab}-${i}`}
-                data-test-id={`${tab
+                data-testid={`${tab
                   .replace(/\d/g, "")
                   .replace("(", "")
                   .replace(")", "")

package/src/components/Text.tsx

@@ -7,14 +7,19 @@ const Text: React.FunctionComponent<TextProps> = ({
   typography,
   color = colors.gray.darker,
   children,
-  className
+  className,
+  testId
 }) => {
   const _className = css({
     ...typography,
     color
   });
 
-  return <span className={cx(_className, className)}>{children}</span>;
+  return (
+    <span className={cx(_className, className)} data-testid={testId}>
+      {children}
+    </span>
+  );
 };
 
 export default Text;

package/src/components/TimePicker.tsx

@@ -78,7 +78,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = props => {
               toggleDropdown();
             }}
             className={buttonStyle}
-            data-test-id="hour-label"
+            data-testid="hour-label"
           >
             <span className={css({ marginRight: "15px" })}>
               {selectedHour !== undefined
@@ -128,7 +128,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = props => {
               toggleDropdown();
             }}
             className={buttonStyle}
-            data-test-id="minute-label"
+            data-testid="minute-label"
           >
             <span className={css({ marginRight: "15px" })}>
               {selectedMinute !== undefined

package/src/components/Toast.tsx

@@ -124,12 +124,12 @@ class Toast extends React.PureComponent<ToastProps, ToastState> {
   };
 
   componentDidMount() {
-    emitter.on<EventType>("showToast", this.show);
+    emitter.on<EventType>("showToast", e => e && this.show(e));
     emitter.on<EventType>("hideToast", this.hide);
   }
 
   componentWillUnmount() {
-    emitter.off<EventType>("showToast", this.show);
+    emitter.off<EventType>("showToast", e => e && this.show(e));
     emitter.off("hideToast", this.hide);
   }
 

package/src/components/TypeAhead.tsx

@@ -12,6 +12,7 @@ import OutsideClick from "./OutsideClick";
 import OptionGroupRadio from "./OptionGroupRadio";
 import { animated } from "react-spring/renderprops.cjs";
 import MountTransition from "./shared/MountTransition";
+import { getTestIds, getTypeaheadTestIds } from "../utils/testIds";
 
 function defaultSearchBox<OptionType>(
   { registerChange, onFocus, value }: SearchBoxArgs,
@@ -44,6 +45,7 @@ function defaultSearchBox<OptionType>(
       loading={props.loading}
       required={props.required}
       disabled={props.disabled}
+      testId={props.testId}
     />
   );
 }
@@ -97,9 +99,12 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
       className,
       searchBox = defaultSearchBox,
       dropdownClassName,
-      children
+      children,
+      testId
     } = this.props;
 
+    const testIds = getTestIds(testId, getTypeaheadTestIds);
+
     const { showSuggestions, value } = this.state;
 
     return (
@@ -118,7 +123,10 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
             onFocus: this.onFocus,
             value
           },
-          this.props
+          {
+            ...this.props,
+            testId: testIds.searchBoxId
+          }
         )}
 
         <MountTransition visible={showSuggestions} native>
@@ -127,7 +135,10 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
               style={transitionStyles}
               className={cx(optionsWrapper, dropdownClassName)}
             >
-              <OptionGroupRadio onChange={this.onSelect}>
+              <OptionGroupRadio
+                onChange={this.onSelect}
+                testId={testIds.optionGroupId}
+              >
                 {children}
               </OptionGroupRadio>
             </animated.div>

package/src/components/__tests__/__snapshots__/optionGroup.test.tsx.snap

@@ -81,7 +81,6 @@ exports[`Component: OptionGroup default snapshot 1`] = `
 
 <div
   className="emotion-24"
-  data-test-id="optiongroup"
   role="radiogroup"
   style={
     Object {
@@ -715,7 +714,6 @@ Array [
 <div
     aria-label="Search"
     className="emotion-36"
-    data-test-id="optiongroup"
     role="group"
     style={
       Object {
@@ -1380,7 +1378,6 @@ Array [
 <div
     aria-label="Search"
     className="emotion-24"
-    data-test-id="optiongroup"
     role="radiogroup"
     style={
       Object {

package/src/components/__tests__/__snapshots__/select.test.tsx.snap

@@ -172,6 +172,7 @@ exports[`Component: Select multi-select: snapshot 1`] = `
     >
       <div
         className="emotion-6"
+        data-testid="test-multi-select-input"
         onClick={[Function]}
       >
         <div
@@ -386,6 +387,7 @@ exports[`Component: Select single-select with searchbox: snapshot 1`] = `
     >
       <div
         className="emotion-6"
+        data-testid="test-single-select-input"
         onClick={[Function]}
       >
         <div
@@ -600,6 +602,7 @@ exports[`Component: Select single-select: snapshot 1`] = `
     >
       <div
         className="emotion-6"
+        data-testid="test-single-select-input"
         onClick={[Function]}
       >
         <div