pebble-web 2.25.2-alpha.0 → 2.25.2-alpha.2

package/dist/utils/testIds.d.ts

@@ -40,6 +40,7 @@ export declare function getPhoneNumberInputTestIds(id: 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);
@@ -50,4 +51,10 @@ export declare function getTypeaheadTestIds(id: string): {
     clearVisibleId: string;
     optionGroupId: string;
 };
+export declare function getCalendarTestIds(id: string): {
+    leftIconId: string;
+    rightIconId: string;
+    applyButtonId: string;
+    clearButtonId: string;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.25.2-alpha.0",
+  "version": "2.25.2-alpha.2",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",

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/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,
@@ -197,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/SecondaryInput.tsx

@@ -12,6 +12,7 @@ import {
   messageStyle,
   placeholderStyle
 } from "./styles/SecondaryInput.styles";
+import { getMessageTestId } from "../utils/testIds";
 import {
   SecondaryInputProps,
   SecondaryInputState
@@ -139,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/__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__/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/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/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/testIds.ts

@@ -54,6 +54,10 @@ export function getPhoneNumberInputTestIds(id: string) {
   };
 }
 
+export function getMessageTestId(id: string) {
+  return `${id}-message`;
+}
+
 export function getSelectInputTestIds(
   id: string,
   multiSelect: true
@@ -96,3 +100,12 @@ export function getTypeaheadTestIds(id: string) {
     ...getOptionGroupRadioTestIds(optionGroupId)
   };
 }
+
+export function getCalendarTestIds(id: string){
+  return {
+    leftIconId: `${id}-left-icon`,
+    rightIconId: `${id}-right-icon`,
+    applyButtonId: `${id}-apply-btn`,
+    clearButtonId: `${id}-clear-btn`
+  };
+}