pebble-web 2.25.2 → 2.26.1-alpha.0

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__/checkboxGroup.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxGroup snapshot 1`] = `
+.emotion-0 {
+  margin-right: 10px;
+  font-size: 16px;
+  padding-top: 2px;
+  height: 18px;
+}
+
+.emotion-1 {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  outline: none;
+  padding: 10px 0;
+  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 400;
+  color: #101721;
+  font-size: 14px;
+}
+
+.emotion-1[data-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.emotion-1[data-disabled='true'] .i {
+  color: #E0E0E0;
+}
+
+<div
+  aria-label="test"
+  role="checkboxgroup"
+>
+  <div
+    aria-checked={false}
+    className="emotion-1"
+    data-testid="checkbox-group-0"
+    onClick={[Function]}
+    role="checkbox"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0"
+    >
+      <i
+        className="pi pi-checkbox-unselected"
+        style={
+          Object {
+            "color": "#E0E0E0",
+          }
+        }
+      />
+    </div>
+     
+    I am a checkbox
+  </div>
+  <div
+    aria-checked={true}
+    className="emotion-1"
+    data-testid="checkbox-group-1"
+    onClick={[Function]}
+    role="checkbox"
+    tabIndex={0}
+  >
+    <div
+      className="emotion-0"
+    >
+      <i
+        className="pi pi-checkbox-selected"
+        style={
+          Object {
+            "color": "#6161FF",
+          }
+        }
+      />
+    </div>
+     
+    I am a checkbox
+  </div>
+</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

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__/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();