pebble-web 2.25.2 → 2.26.1-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,65 @@
+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 getMessageTestId(id: string): 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 declare function getCalendarTestIds(id: string): {
+    leftIconId: string;
+    rightIconId: 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",
+  "version": "2.26.1-alpha.0",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -19,6 +19,7 @@
     "build:watch": "chokidar 'src/**/*.ts' 'src/**/*.tsx' -c 'yarn build'",
     "pretest": "tslint ./src/**/*.{ts,tsx} ./stories/**/*.{ts,tsx} ./{tests,typings}/**/*.{ts,tsx}",
     "test": "jest --coverage",
+    "prepublishOnly": "yarn build && yarn test",
     "test:watch": "yarn jest --watchAll"
   },
   "peerDependencies": {
@@ -43,7 +44,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.25.1"
+    "pebble-shared": "^2.26.0"
   },
   "greenkeeper": {
     "ignore": [

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/Calendar.tsx

@@ -13,6 +13,7 @@ import {
 } from "./styles/Calendar.styles";
 import Button from "./Button";
 import { isSameDay, endOfDay, startOfDay, addDays, subDays } from "date-fns";
+import { getCalendarTestIds, getTestIds } from "../utils/testIds";
 
 class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
   static defaultProps: Partial<CalendarProps> = {
@@ -136,9 +137,16 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
       onClear,
       maxDate,
       minDate,
+      testId,
       ...rest
     } = this.props;
     const { maxRangeDates } = this.state;
+    const {
+      leftIconId,
+      rightIconId,
+      clearButtonId,
+      applyButtonId
+    } = getTestIds(testId, id => getCalendarTestIds(id));
 
     return (
       <div
@@ -165,10 +173,18 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
           tileDisabled={this.getDisabledDays}
           onClickDay={this.onDayClick}
           prevLabel={
-            <i style={{ fontSize: 14 }} className="pi pi-chevron-left" />
+            <i
+              style={{ fontSize: 14 }}
+              className="pi pi-chevron-left"
+              data-testid={leftIconId}
+            />
           }
           nextLabel={
-            <i style={{ fontSize: 14 }} className="pi pi-arrow-right" />
+            <i
+              style={{ fontSize: 14 }}
+              className="pi pi-arrow-right"
+              data-testid={rightIconId}
+            />
           }
           maxDate={maxDate || (maxRangeDates && maxRangeDates.future)}
           minDate={minDate || (maxRangeDates && maxRangeDates.past)}
@@ -177,11 +193,19 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
         {(onClear || onApply) && (
           <div className={buttonsWrapper}>
             {onClear && (
-              <Button onClick={this.onClear} type="secondary">
+              <Button
+                onClick={this.onClear}
+                type="secondary"
+                testId={clearButtonId}
+              >
                 Clear
               </Button>
             )}
-            {onApply && <Button onClick={this.onApply}>Apply</Button>}
+            {onApply && (
+              <Button onClick={this.onApply} testId={applyButtonId}>
+                Apply
+              </Button>
+            )}
           </div>
         )}
       </div>

package/src/components/CheckboxGroup.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { CheckboxGroupProps } from "./typings/CheckboxGroup";
 import { CheckboxProps } from "./typings/Checkbox";
+import { getOptionTestId } from "../utils/testIds";
 import { getSelectedCheckboxes } from "./utils/getSelectedCheckboxes";
 
 export default class CheckboxGroup<OptionType> extends React.PureComponent<
@@ -15,9 +16,17 @@ export default class CheckboxGroup<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, _checkbox => {
+    const _children = React.Children.map(children, (_checkbox, i) => {
+      const index = typeof i === "number" ? i : 0;
       // `_checkbox as React.ReactElement<CheckboxProps>` 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
@@ -28,7 +37,8 @@ export default class CheckboxGroup<OptionType> extends React.PureComponent<
       return React.cloneElement(checkbox, {
         onChange: this.handleChange,
         checked: selected.indexOf(checkbox.props.value) >= 0,
-        disabled
+        disabled,
+        testId: testId ? getOptionTestId(testId, index) : undefined
       });
     });
 

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

@@ -15,6 +15,7 @@ import {
 } from "./styles/Input.styles";
 import { colors } from "pebble-shared";
 import Loader from "./Loader";
+import { getMessageTestId } from "../utils/testIds";
 
 function getColor(
   error: string | undefined,
@@ -84,7 +85,8 @@ class Input extends React.PureComponent<InputProps, InputState> {
       onClick,
       loading,
       leftElement,
-      rightElement
+      rightElement,
+      testId
     } = this.props;
     const { isFocused } = this.state;
 
@@ -152,9 +154,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 && (
@@ -187,6 +198,7 @@ class Input extends React.PureComponent<InputProps, InputState> {
         {_message && (
           <div
             className={messageStyle}
+            data-testid={testId ? getMessageTestId(testId) : undefined}
             style={{ color: getColor(errorMessage, successMessage) }}
           >
             {_message}

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/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/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

@@ -12,6 +12,7 @@ import {
   messageStyle,
   placeholderStyle
 } from "./styles/SecondaryInput.styles";
+import { getMessageTestId } from "../utils/testIds";
 import {
   SecondaryInputProps,
   SecondaryInputState
@@ -76,7 +77,8 @@ export default class SecondaryInput extends React.PureComponent<
       message,
       readOnly,
       loading,
-      className
+      className,
+      testId
     } = this.props;
     const { isFocused } = this.state;
 
@@ -119,7 +121,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 && (
@@ -134,6 +140,7 @@ export default class SecondaryInput extends React.PureComponent<
         {_message && (
           <div
             className={messageStyle}
+            data-testid={testId ? getMessageTestId(testId) : undefined}
             style={{ color: getColor(errorMessage, successMessage) }}
           >
             {_message}

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;