ensure all tests pass

elastic · Mar 9, 2020 · 8588b3b · 8588b3b
1 parent 16ebde8
commit 8588b3b
Show file tree

Hide file tree

Showing 18 changed files with 85 additions and 54 deletions.
diff --git a/...er/__snapshots__/date_picker.test.js.snap → ...r/__snapshots__/date_picker.test.tsx.snap b/...er/__snapshots__/date_picker.test.js.snap → ...r/__snapshots__/date_picker.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`EuiDatePicker is rendered 1`] = `
     className="euiDatePicker euiDatePicker--shadow"
   >
     <EuiFormControlLayout
-      clear={null}
       fullWidth={false}
       icon="calendar"
       isLoading={false}

diff --git a/...napshots__/date_picker_range.test.js.snap → ...apshots__/date_picker_range.test.tsx.snap b/...napshots__/date_picker_range.test.js.snap → ...apshots__/date_picker_range.test.tsx.snap
diff --git a/src/components/date_picker/date_picker.test.tsx b/src/components/date_picker/date_picker.test.tsx
@@ -1,21 +1,23 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { requiredProps, takeMountedSnapshot } from '../../test';
-import Moment from 'moment';
+import moment from 'moment';
 
 import { EuiDatePicker } from './date_picker';
 import { EuiContext } from '../context';
 
 describe('EuiDatePicker', () => {
   test('is rendered', () => {
-    const component = shallow(<EuiDatePicker {...requiredProps} />);
+    const component = shallow<EuiDatePicker>(
+      <EuiDatePicker {...requiredProps} />
+    );
 
     expect(component).toMatchSnapshot(); // snapshot of wrapping dom
     expect(component.find('ContextConsumer').shallow()).toMatchSnapshot(); // snapshot of DatePicker usage
   });
 
   describe('localization', () => {
-    const selectedDate = new Moment('2019-07-01T00:00:00-0700').locale('fr');
+    const selectedDate = moment('2019-07-01T00:00:00-0700').locale('fr');
 
     test('accepts the locale prop', () => {
       const component = mount(

diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
@@ -1,19 +1,19 @@
-import React, { Component, MouseEventHandler, Ref } from 'react';
+import React, { Component, MouseEventHandler, RefCallback } from 'react';
 import classNames from 'classnames';
 
 import { Moment } from 'moment'; // eslint-disable-line import/named
-// @ts-ignore the type is provided by
-import { ReactDatePicker as _ReactDatePicker } from '../../../packages';
 
 import { EuiFormControlLayout, EuiValidatableControl } from '../form';
+import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons';
 
 import { EuiErrorBoundary } from '../error_boundary';
 
 import { EuiI18nConsumer } from '../context';
 import { CommonProps } from '../common';
 
+// @ts-ignore the type is provided by react-datepicker.d.ts
+import { ReactDatePicker as _ReactDatePicker } from '../../../packages';
 import ReactDatePicker, { ReactDatePickerProps } from './react-datepicker'; // eslint-disable-line import/no-unresolved
-import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons';
 
 export const euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
 export const euiDatePickerDefaultTimeFormat = 'hh:mm A';
@@ -34,7 +34,7 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
   /**
    * Applies ref to the input
    */
-  inputRef: Ref<typeof ReactDatePicker>;
+  inputRef: RefCallback<Component<ReactDatePickerProps, any, any>>;
 
   /**
    * Provides styling to the input when invalid
@@ -75,7 +75,7 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
 export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
 
 export class EuiDatePicker extends Component<EuiDatePickerProps> {
-  defaultProps = {
+  static defaultProps = {
     adjustDateOnChange: true,
     dateFormat: euiDatePickerDefaultDateFormat,
     fullWidth: false,
@@ -228,7 +228,6 @@ export class EuiDatePicker extends Component<EuiDatePickerProps> {
                       openToDate={openToDate}
                       placeholderText={placeholder}
                       popperClassName={popperClassName}
-                      // @ts-ignore this is due to `react-datepicker` (i.e. `ReactDatePicker`, this component) being a `React.ClassicComponentClass` rather than a `React.Component`.
                       ref={inputRef}
                       selected={selected}
                       shouldCloseOnSelect={shouldCloseOnSelect}
@@ -239,7 +238,7 @@ export class EuiDatePicker extends Component<EuiDatePickerProps> {
                       timeFormat={timeFormat}
                       utcOffset={utcOffset}
                       yearDropdownItemNumber={7}
-                      accessibleMode={true}
+                      accessibleMode
                       {...rest}
                     />
                   );

diff --git a/src/components/date_picker/react-datepicker.d.ts b/src/components/date_picker/react-datepicker.d.ts
@@ -19,6 +19,7 @@ export interface ReactDatePickerProps {
    * Whether changes to Year and Month (via dropdowns) should trigger `onChange`
    */
   adjustDateOnChange?: boolean;
+  accessibleMode?: boolean;
   allowSameDay?: boolean;
   autoComplete?: string;
   autoFocus?: boolean;

diff --git a/...napshots__/super_date_picker.test.js.snap → ...apshots__/super_date_picker.test.tsx.snap b/...napshots__/super_date_picker.test.js.snap → ...apshots__/super_date_picker.test.tsx.snap
@@ -12,7 +12,6 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
       isDisabled={false}
       prepend={
         <EuiQuickSelectPopover
-          applyRefreshInterval={null}
           applyTime={[Function]}
           commonlyUsedRanges={
             Array [

diff --git a/...pshots__/super_update_button.test.js.snap → ...shots__/super_update_button.test.tsx.snap b/...pshots__/super_update_button.test.js.snap → ...shots__/super_update_button.test.tsx.snap
diff --git a/src/components/date_picker/super_date_picker/async_interval.test.ts b/src/components/date_picker/super_date_picker/async_interval.test.ts
@@ -20,8 +20,10 @@ describe('AsyncInterval', () => {
   ) {
     const iterations = times(Math.floor(milliseconds / 100));
     const remainder = milliseconds % 100;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    // @ts-ignore
     for (const item of iterations) {
+      /* eslint-enable @typescript-eslint/no-unused-vars */
       await instance.__pendingFn;
       jest.advanceTimersByTime(100);
       await instance.__pendingFn;
@@ -32,7 +34,7 @@ describe('AsyncInterval', () => {
 
   describe('when creating a 1000ms interval', async () => {
     let instance: AsyncInterval;
-    let spy;
+    let spy: jest.Mock;
     beforeEach(() => {
       spy = jest.fn();
       instance = new AsyncInterval(spy, 1000);
@@ -69,7 +71,7 @@ describe('AsyncInterval', () => {
 
   describe('when creating a 1000ms interval that calls a fn that takes 2000ms to complete', async () => {
     let instance: AsyncInterval;
-    let spy;
+    let spy: jest.Mock;
     beforeEach(() => {
       spy = jest.fn(async () => await sleep(2000));
       instance = new AsyncInterval(spy, 1000);

diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx
@@ -54,11 +54,15 @@ export class EuiAbsoluteTab extends Component<
   }
 
   handleChange: ReactDatePickerProps['onChange'] = (date, event) => {
+    const { onChange } = this.props;
     if (date === null) {
       return;
     }
+    if (!onChange) {
+      return;
+    }
     const dateMoment = moment(date);
-    this.props.onChange(date, event);
+    onChange(date, event);
     this.setState({
       valueAsMoment: dateMoment,
       textInputValue: dateMoment.format(this.props.dateFormat),
@@ -67,14 +71,15 @@ export class EuiAbsoluteTab extends Component<
   };
 
   handleTextChange: ChangeEventHandler<HTMLInputElement> = event => {
+    const { onChange } = this.props;
     const valueAsMoment = moment(
       event.target.value,
       this.props.dateFormat,
       true
     );
     const dateIsValid = valueAsMoment.isValid();
-    if (dateIsValid) {
-      this.props.onChange(valueAsMoment, event);
+    if (dateIsValid && onChange) {
+      onChange(valueAsMoment, event);
     }
     this.setState({
       textInputValue: event.target.value as string,

diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx
@@ -14,7 +14,7 @@ import {
   toRelativeString,
 } from '../date_modes';
 import { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
-import { ReactDatePickerProps } from '../../react-datepicker';
+import { ReactDatePickerProps } from '../../react-datepicker'; // eslint-disable-line import/no-unresolved
 
 export interface EuiDatePopoverContentProps {
   value: string;
@@ -38,6 +38,10 @@ export const EuiDatePopoverContent: FunctionComponent<
   position,
 }) => {
   const onTabClick: EuiTabbedContentProps['onTabClick'] = selectedTab => {
+    if (!onChange) {
+      return;
+    }
+
     switch (selectedTab.id) {
       case DATE_MODES.ABSOLUTE:
         onChange(toAbsoluteString(value, roundUp));
@@ -99,7 +103,11 @@ export const EuiDatePopoverContent: FunctionComponent<
             </p>
             <EuiButton
               data-test-subj="superDatePickerNowButton"
-              onClick={() => onChange('now')}
+              onClick={() => {
+                if (onChange) {
+                  onChange('now');
+                }
+              }}
               fullWidth
               size="s"
               fill>
@@ -119,10 +127,8 @@ export const EuiDatePopoverContent: FunctionComponent<
       tabs={renderTabs()}
       autoFocus="selected"
       initialSelectedTab={{
-        // NOTE_TO_SELF(dimitri): behavior change?
         content: <span />,
         id: getDateMode(value),
-        // NOTE_TO_SELF(dimitri): behavior change?
         name: '',
       }}
       onTabClick={onTabClick}

diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx b/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx
@@ -83,16 +83,20 @@ export class EuiRelativeTab extends Component<
 
   handleChange = () => {
     const { count, round, roundUnit, unit } = this.state;
+    const { onChange } = this.props;
     if (count === null || count < 0) {
       return;
     }
+    if (!onChange) {
+      return;
+    }
     const date = toRelativeStringFromParts({
       count,
       round,
       roundUnit,
       unit,
     });
-    this.props.onChange(date);
+    onChange(date);
   };
 
   render() {
@@ -184,7 +188,7 @@ export class EuiRelativeTab extends Component<
             </EuiFormLabel>
           }
         />
-        <EuiScreenReaderOnly id={relativeDateInputNumberDescriptionId}>
+        <EuiScreenReaderOnly>
           <p>
             <EuiI18n
               token="euiRelativeTab.fullDescription"

diff --git a/...r/__snapshots__/quick_select.test.js.snap → .../__snapshots__/quick_select.test.tsx.snap b/...r/__snapshots__/quick_select.test.js.snap → .../__snapshots__/quick_select.test.tsx.snap
@@ -106,9 +106,7 @@ exports[`EuiQuickSelect is rendered 1`] = `
   <EuiHorizontalRule
     margin="s"
   />
-  <EuiScreenReaderOnly
-    id="htmlId"
-  >
+  <EuiScreenReaderOnly>
     <p>
       <EuiI18n
         default="Currently set to {timeTense} {timeValue} {timeUnit}."
@@ -232,9 +230,7 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
   <EuiHorizontalRule
     margin="s"
   />
-  <EuiScreenReaderOnly
-    id="htmlId"
-  >
+  <EuiScreenReaderOnly>
     <p>
       <EuiI18n
         default="Currently set to {timeTense} {timeValue} {timeUnit}."

diff --git a/...shots__/quick_select_popover.test.js.snap → ...hots__/quick_select_popover.test.tsx.snap b/...shots__/quick_select_popover.test.js.snap → ...hots__/quick_select_popover.test.tsx.snap
@@ -40,7 +40,13 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
     <EuiQuickSelect
       applyTime={[Function]}
       end="now"
-      prevQuickSelect={Object {}}
+      prevQuickSelect={
+        Object {
+          "timeTense": "last",
+          "timeUnits": "m",
+          "timeValue": 15,
+        }
+      }
       start="now-15m"
     />
     <EuiCommonlyUsedTimeRanges

diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
@@ -25,36 +25,42 @@ const timeUnitsOptions = keysOf(timeUnits).map(key => {
   return { value: key, text: `${timeUnits[key]}s` };
 });
 
+const defaultQuickSelect: QuickSelect = {
+  timeTense: LAST,
+  timeValue: 15,
+  timeUnits: 'm',
+};
+
 type EuiQuickSelectState = QuickSelect;
 
 export interface EuiQuickSelectProps {
   applyTime: ApplyTime;
   start: string;
   end: string;
-  prevQuickSelect?: EuiQuickSelectState;
+  prevQuickSelect: EuiQuickSelectState;
 }
 
 export class EuiQuickSelect extends Component<
   EuiQuickSelectProps,
   EuiQuickSelectState
 > {
-  defaultProps = {
-    prevQuickSelect: {},
+  static defaultProps = {
+    prevQuickSelect: defaultQuickSelect,
   };
 
   state: EuiQuickSelectState = {
     timeTense:
       this.props.prevQuickSelect && this.props.prevQuickSelect.timeTense
         ? this.props.prevQuickSelect.timeTense
-        : LAST,
+        : defaultQuickSelect.timeTense,
     timeValue:
       this.props.prevQuickSelect && this.props.prevQuickSelect.timeValue
         ? this.props.prevQuickSelect.timeValue
-        : 15,
+        : defaultQuickSelect.timeValue,
     timeUnits:
       this.props.prevQuickSelect && this.props.prevQuickSelect.timeUnits
         ? this.props.prevQuickSelect.timeUnits
-        : 'm',
+        : defaultQuickSelect.timeUnits,
   };
 
   generateId = htmlIdGenerator();
@@ -267,7 +273,7 @@ export class EuiQuickSelect extends Component<
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule margin="s" />
-        <EuiScreenReaderOnly id={timeSelectionId}>
+        <EuiScreenReaderOnly>
           <p>
             <EuiI18n
               token="euiQuickSelect.fullDescription"

diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.tsx
@@ -190,7 +190,7 @@ export class EuiRefreshInterval extends Component<
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiScreenReaderOnly id={refreshSelectionId}>
+        <EuiScreenReaderOnly>
           <p>
             <EuiI18n
               token="euiRefreshInterval.fullDescription"

diff --git a/src/components/date_picker/super_date_picker/relative_options.ts b/src/components/date_picker/super_date_picker/relative_options.ts
@@ -20,14 +20,14 @@ export const relativeOptions: RelativeOption[] = [
 
 const timeUnitIds = relativeOptions
   .map(({ value }) => value)
-  .filter(value => value.includes('+')) as TimeUnitId[];
+  .filter(value => !value.includes('+')) as TimeUnitId[];
 
 export const isTimeUnitId = (value: string): value is TimeUnitId =>
   timeUnitIds.includes(value as TimeUnitId);
 
 const timeUnitFromNowIds = relativeOptions
   .map(({ value }) => value)
-  .filter(value => !value.includes('+')) as TimeUnitFromNowId[];
+  .filter(value => value.includes('+')) as TimeUnitFromNowId[];
 
 export const isTimeUnitFromNowId = (
   value: string