pebble-web 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -22,19 +22,13 @@ describe("Calendar", () => {
         selected={date}
       />
     );
-    calendar
-      .find(".react-calendar__tile")
-      .at(0)
-      .simulate("click");
+    calendar.find(".react-calendar__tile").at(0).simulate("click");
 
     // in case of range selector onChange should only be called once
     // both values of range have been selected.
     expect(changeSpy.calledOnce).toBeFalsy();
 
-    calendar
-      .find(".react-calendar__tile")
-      .at(10)
-      .simulate("click");
+    calendar.find(".react-calendar__tile").at(10).simulate("click");
 
     calendar
       .find(".calendar-test > div")
@@ -74,10 +68,7 @@ describe("Calendar", () => {
       />
     );
 
-    calendar
-      .find(".react-calendar__tile")
-      .at(0)
-      .simulate("click");
+    calendar.find(".react-calendar__tile").at(0).simulate("click");
 
     calendar
       .find(".calendar-test > div")
@@ -107,10 +98,7 @@ describe("Calendar", () => {
         selected={date[0]}
       />
     );
-    calendar
-      .find(".react-calendar__tile")
-      .at(0)
-      .simulate("click");
+    calendar.find(".react-calendar__tile").at(0).simulate("click");
 
     expect(changeSpy.calledOnce).toBeTruthy();
 
@@ -149,15 +137,9 @@ describe("Calendar", () => {
       />
     );
 
-    calendar
-      .find(".react-calendar__tile")
-      .at(0)
-      .simulate("click");
+    calendar.find(".react-calendar__tile").at(0).simulate("click");
 
-    calendar
-      .find(".react-calendar__tile")
-      .at(10)
-      .simulate("click");
+    calendar.find(".react-calendar__tile").at(10).simulate("click");
 
     calendar
       .find(".calendar-test > div")

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

@@ -1,9 +1,27 @@
 import * as React from "react";
 import { Checkbox, CheckboxGroup } from "../";
 import { mount } from "enzyme";
+import renderer from "react-test-renderer";
 import sinon from "sinon";
 
 describe("CheckboxGroup", () => {
+  test("snapshot", () => {
+    const spy = sinon.spy();
+    const component = renderer.create(
+      <CheckboxGroup
+        selected={["checkbox-1"]}
+        onChange={spy}
+        name="test"
+        testId="checkbox-group"
+      >
+        <Checkbox value="checkbox-0" label="I am a checkbox" />
+        <Checkbox value="checkbox-1" label="I am a checkbox" />
+      </CheckboxGroup>
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   test("should call onChange on click with correct arguments", () => {
     const spy = sinon.spy();
 
@@ -14,10 +32,7 @@ describe("CheckboxGroup", () => {
       </CheckboxGroup>
     );
 
-    checkbox
-      .find(Checkbox)
-      .at(1)
-      .simulate("click");
+    checkbox.find(Checkbox).at(1).simulate("click");
 
     expect(spy.calledWith([])).toBeTruthy();
 
@@ -25,11 +40,27 @@ describe("CheckboxGroup", () => {
       selected: []
     });
 
-    checkbox
-      .find(Checkbox)
-      .at(0)
-      .simulate("click");
+    checkbox.find(Checkbox).at(0).simulate("click");
 
     expect(spy.calledWith(["checkbox-0"])).toBeTruthy();
   });
+
+  test("should append checkbox test ids for children", () => {
+    const spy = sinon.spy();
+
+    const checkbox = mount(
+      <CheckboxGroup
+        selected={[]}
+        onChange={spy}
+        name="test"
+        testId="checkbox-group"
+      >
+        <Checkbox value="checkbox-0" label="I am a checkbox" />
+        <Checkbox value="checkbox-1" label="I am a checkbox" />
+      </CheckboxGroup>
+    );
+
+    expect(checkbox.find("[data-testid='checkbox-group-0']").length).toBe(1);
+    expect(checkbox.find("[data-testid='checkbox-group-1']").length).toBe(1);
+  });
 });

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

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { Transition, UseTransitionProps, SpringValues } from "react-spring";
+import {
+  Transition,
+  UseTransitionProps,
+  SpringValues,
+  TransitionComponentProps
+} from "react-spring";
 import {
   animationConfig,
   TransitionPhase,
@@ -17,8 +22,7 @@ interface MountTransitionProps extends UseTransitionProps<boolean> {
 
 const MountTransition: React.FunctionComponent<MountTransitionProps> = props => {
   return (
-    <Transition
-      // @ts-expect-error
+    <Transition<boolean, TransitionComponentProps<boolean>>
       items={props.visible}
       {...animationConfig}
       {...props}

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/animation.ts

@@ -1,14 +1,14 @@
-import { TransitionState } from "react-spring";
+import { TransitionState, UseTransitionProps } from "react-spring";
 
 // TransitionPhase enum is not exported by react-spring package
 // so we alias it as a type here
 export type TransitionPhase = TransitionState["phase"];
 
-export const animationConfig = {
+export const animationConfig: UseTransitionProps<boolean> = {
   from: { opacity: 0, transform: "scale(0.95)" },
   enter: { opacity: 1, transform: "scale(1)" },
   leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" },
-  config: (_show: boolean, _index: number, state: TransitionPhase) =>
+  config: (_show, _index, state) =>
     state === "leave" ? { duration: 80 } : { duration: 200 }
 };
 

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";