pebble-web 2.25.2-alpha.3 → 2.26.0

package/src/components/TypeAhead.tsx

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

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

@@ -81,6 +81,7 @@ exports[`Component: OptionGroup default snapshot 1`] = `
 
 <div
   className="emotion-24"
+  data-test-id="optiongroup"
   role="radiogroup"
   style={
     Object {
@@ -714,6 +715,7 @@ Array [
 <div
     aria-label="Search"
     className="emotion-36"
+    data-test-id="optiongroup"
     role="group"
     style={
       Object {
@@ -1378,6 +1380,7 @@ 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,7 +172,6 @@ exports[`Component: Select multi-select: snapshot 1`] = `
     >
       <div
         className="emotion-6"
-        data-testid="test-multi-select-input"
         onClick={[Function]}
       >
         <div
@@ -387,7 +386,6 @@ exports[`Component: Select single-select with searchbox: snapshot 1`] = `
     >
       <div
         className="emotion-6"
-        data-testid="test-single-select-input"
         onClick={[Function]}
       >
         <div
@@ -602,7 +600,6 @@ exports[`Component: Select single-select: snapshot 1`] = `
     >
       <div
         className="emotion-6"
-        data-testid="test-single-select-input"
         onClick={[Function]}
       >
         <div

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

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

@@ -22,13 +22,19 @@ 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")
@@ -68,7 +74,10 @@ 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")
@@ -98,7 +107,10 @@ 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();
 
@@ -137,9 +149,15 @@ 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,27 +1,9 @@
 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();
 
@@ -32,7 +14,10 @@ describe("CheckboxGroup", () => {
       </CheckboxGroup>
     );
 
-    checkbox.find(Checkbox).at(1).simulate("click");
+    checkbox
+      .find(Checkbox)
+      .at(1)
+      .simulate("click");
 
     expect(spy.calledWith([])).toBeTruthy();
 
@@ -40,27 +25,11 @@ 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,7 +9,6 @@ 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)
@@ -19,9 +18,6 @@ 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>> = {}
@@ -32,7 +28,6 @@ function getComponent(
       placeholder="Choose Option"
       selected={"option-2"}
       {...props}
-      testId={SINGLE_SELECT_TEST_ID}
     >
       {options}
     </Select>
@@ -49,7 +44,6 @@ function getMultiSelectComponent<T>(
       placeholder="Choose Option"
       multiSelect
       {...props}
-      testId={MULTI_SELECT_TEST_ID}
     >
       {options}
     </Select>
@@ -102,17 +96,18 @@ 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-testid='${optionGroupId}']`);
+    expect(select).toNotBeInDOM("[data-test-id='optiongroup']");
   });
 
   test("multi select: should trigger onChange with correct onChange", () => {
@@ -129,7 +124,10 @@ 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();
 
@@ -137,7 +135,10 @@ 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();
 
@@ -145,14 +146,20 @@ 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
@@ -161,15 +168,16 @@ 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-testid='${optionGroupId}']`);
+    expect(select).toNotBeInDOM("[data-test-id='optiongroup']");
   });
 
   test("single select: query change triggers onChange", () => {
@@ -214,7 +222,10 @@ 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,20 +36,30 @@ describe("TimePicker: functionality test", () => {
     const timePicker = mount(
       <TimePicker onHourChange={spyHour} onMinuteChange={spyMinute} />
     );
-    timePicker.find("[data-testid='hour-label']").simulate("click");
+    timePicker.find("[data-test-id='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-testid='minute-label']").simulate("click");
+    timePicker.find("[data-test-id='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,8 +13,7 @@ function Control<OptionType>(props: ControlProps<OptionType>) {
     children = ControlView,
     type,
     className,
-    indeterminate,
-    testId
+    indeterminate
   } = props;
   return (
     <div
@@ -31,7 +30,6 @@ 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,11 +12,6 @@ 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>,
@@ -126,13 +121,10 @@ class OptionGroup<OptionType> extends React.PureComponent<
       className,
       isSelected,
       handleChange,
-      searchBoxProps,
-      testId
+      searchBoxProps
     } = 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
@@ -150,10 +142,7 @@ class OptionGroup<OptionType> extends React.PureComponent<
         isSelected: isSelected(option.props.value),
         multiSelect,
         // @ts-ignore
-        ref,
-        testId: testIds.optionId
-          ? getOptionTestId(testIds.optionId, i)
-          : undefined
+        ref
       });
     });
 
@@ -179,7 +168,6 @@ class OptionGroup<OptionType> extends React.PureComponent<
                 onKeyDown: this.handleKeyPress,
                 autoFocus: true
               }}
-              testId={testIds.searchBoxId}
             />
           </div>
         )}
@@ -191,21 +179,15 @@ class OptionGroup<OptionType> extends React.PureComponent<
             }}
             className={cx(optionsWrapper, className)}
             role={multiSelect ? "group" : "radiogroup"}
-            data-testid={testId}
+            data-test-id="optiongroup"
             aria-label={searchBoxProps && searchBoxProps.placeholder}
           >
             {advancedOptions && advancedOptionsProps && (
               <div className={_class}>
-                <div
-                  onClick={advancedOptionsProps.selectVisible}
-                  data-testid={testIds.selectVisibleId}
-                >
+                <div onClick={advancedOptionsProps.selectVisible}>
                   Select Visible
                 </div>
-                <div
-                  onClick={advancedOptionsProps.clearVisible}
-                  data-testid={testIds.clearVisibleId}
-                >
+                <div onClick={advancedOptionsProps.clearVisible}>
                   Clear Visible
                 </div>
               </div>

package/src/components/typings/Button.ts

@@ -16,7 +16,6 @@ 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,7 +12,6 @@ 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,5 +6,4 @@ export interface CheckboxGroupProps<OptionType> {
   className?: string;
   name: string;
   disabled?: boolean;
-  testId?: string;
 }

package/src/components/typings/Control.ts

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