pebble-web 2.25.1 → 2.25.2-alpha.1

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

@@ -70,7 +70,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -109,7 +109,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -201,7 +201,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -240,7 +240,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -332,7 +332,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -371,7 +371,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -463,7 +463,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -502,7 +502,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -594,7 +594,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -633,7 +633,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -725,7 +725,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -764,7 +764,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -856,7 +856,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -895,7 +895,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -987,7 +987,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -1026,7 +1026,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -1117,7 +1117,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: undefined } 1`] =
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -1156,7 +1156,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: undefined } 1`] =
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span

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

@@ -9,6 +9,7 @@ import Button from "../Button";
 import Input from "../Input";
 import Search from "../Search";
 import "../../../tests/__setup__/matchers";
+import { getSelectInputTestIds } from "../../utils/testIds";
 
 const options = new Array(5)
   .fill(1)
@@ -18,6 +19,9 @@ const options = new Array(5)
 
 const noop = () => {};
 
+const SINGLE_SELECT_TEST_ID = "test-single-select";
+const MULTI_SELECT_TEST_ID = "test-multi-select";
+
 function getComponent(
   spy = noop,
   props: Partial<SingleSelectProps<string>> = {}
@@ -28,6 +32,7 @@ function getComponent(
       placeholder="Choose Option"
       selected={"option-2"}
       {...props}
+      testId={SINGLE_SELECT_TEST_ID}
     >
       {options}
     </Select>
@@ -44,6 +49,7 @@ function getMultiSelectComponent<T>(
       placeholder="Choose Option"
       multiSelect
       {...props}
+      testId={MULTI_SELECT_TEST_ID}
     >
       {options}
     </Select>
@@ -96,18 +102,17 @@ describe("Component: Select", () => {
     const spy = sinon.spy();
     const select = mount(getComponent(spy));
     select.find(Input).simulate("click");
-    select
-      .find(Option)
-      .at(2)
-      .simulate("click");
+    select.find(Option).at(2).simulate("click");
 
     expect(spy.calledWith("option-3")).toBeTruthy();
 
     // wait for the dropdown animation to get over.
     clock.tick(1000);
 
+    const { optionGroupId } = getSelectInputTestIds(SINGLE_SELECT_TEST_ID);
+
     // This means that Option is no more rendered in DOM.
-    expect(select).toNotBeInDOM("[data-test-id='optiongroup']");
+    expect(select).toNotBeInDOM(`[data-testid='${optionGroupId}']`);
   });
 
   test("multi select: should trigger onChange with correct onChange", () => {
@@ -124,10 +129,7 @@ describe("Component: Select", () => {
       })
     );
     select.find(Input).simulate("click");
-    select
-      .find(Option)
-      .at(2)
-      .simulate("click");
+    select.find(Option).at(2).simulate("click");
 
     expect(spy.calledWith(["option-3"])).toBeTruthy();
 
@@ -135,10 +137,7 @@ describe("Component: Select", () => {
       selected: ["option-3"]
     });
 
-    select
-      .find(Option)
-      .at(3)
-      .simulate("click");
+    select.find(Option).at(3).simulate("click");
 
     expect(spy.calledWith(["option-3", "option-4"])).toBeTruthy();
 
@@ -146,20 +145,14 @@ describe("Component: Select", () => {
       selected: ["option-3", "option-4"]
     });
 
-    select
-      .find(Option)
-      .at(2)
-      .simulate("click");
+    select.find(Option).at(2).simulate("click");
 
     expect(spy.calledWith(["option-4"])).toBeTruthy();
 
     expect(select.find(Button)).toHaveLength(2);
 
     // test onClear
-    select
-      .find(Button)
-      .at(0)
-      .simulate("click");
+    select.find(Button).at(0).simulate("click");
     expect(clearSpy.calledOnce).toBeTruthy();
 
     // Reopen dropdown and test onApply
@@ -168,16 +161,15 @@ describe("Component: Select", () => {
       selected: ["option-3"]
     });
 
-    select
-      .find(Button)
-      .at(1)
-      .simulate("click");
+    select.find(Button).at(1).simulate("click");
     expect(applySpy.calledWith(["option-3"])).toBeTruthy();
 
     clock.tick(1000);
 
+    const { optionGroupId } = getSelectInputTestIds(MULTI_SELECT_TEST_ID, true);
+
     // ensure the dropdown is closed
-    expect(select).toNotBeInDOM("[data-test-id='optiongroup']");
+    expect(select).toNotBeInDOM(`[data-testid='${optionGroupId}']`);
   });
 
   test("single select: query change triggers onChange", () => {
@@ -222,10 +214,7 @@ describe("Component: Select", () => {
     );
     select.find(Input).simulate("click");
 
-    select
-      .find(Search)
-      .find(".pi-close")
-      .simulate("click");
+    select.find(Search).find(".pi-close").simulate("click");
     expect(clearQuerySpy.calledWith("")).toBeTruthy();
   });
 

package/src/components/__tests__/timepicker.test.tsx

@@ -36,30 +36,20 @@ describe("TimePicker: functionality test", () => {
     const timePicker = mount(
       <TimePicker onHourChange={spyHour} onMinuteChange={spyMinute} />
     );
-    timePicker.find("[data-test-id='hour-label']").simulate("click");
+    timePicker.find("[data-testid='hour-label']").simulate("click");
 
     clock.tick(10000);
 
-    timePicker
-      .find(DropDown)
-      .at(0)
-      .find(Option)
-      .at(0)
-      .simulate("click");
+    timePicker.find(DropDown).at(0).find(Option).at(0).simulate("click");
 
     expect(spyHour.calledOnce).toBeTruthy();
     expect(spyHour.calledWith(1)).toBeTruthy();
 
-    timePicker.find("[data-test-id='minute-label']").simulate("click");
+    timePicker.find("[data-testid='minute-label']").simulate("click");
 
     clock.tick(10000);
 
-    timePicker
-      .find(DropDown)
-      .at(1)
-      .find(Option)
-      .at(0)
-      .simulate("click");
+    timePicker.find(DropDown).at(1).find(Option).at(0).simulate("click");
 
     expect(spyMinute.calledOnce).toBeTruthy();
     expect(spyMinute.calledWith(0)).toBeTruthy();

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/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/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,98 @@
+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 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)
+  };
+}