[Canvas] Converting time filter (and children) component to typescript and adding to storybook

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -5,10 +5,16 @@
  */
 
 import path from 'path';
+import moment from 'moment';
+import 'moment-timezone';
+
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
 import { addSerializer } from 'jest-specific-snapshot';
 
+// Set our default timezone to UTC for tests so we can generate predictable snapshots
+moment.tz.setDefault('UTC');
+
 // Mock EUI generated ids to be consistently predictable for snapshots.
 jest.mock(`@elastic/eui/lib/components/form/form_row/make_id`, () => () => `generated-id`);
 
@@ -25,6 +31,24 @@ jest.mock('../canvas_plugin_src/renderers/shape/shapes', () => ({
   },
 }));
 
+// Mock datetime parsing so we can get stable results for tests (even while using the `now` format)
+jest.mock('@elastic/datemath', () => {
+  return {
+    parse: (d, opts) => {
+      const dateMath = jest.requireActual('@elastic/datemath'); 
+      return dateMath.parse(d, {...opts, forceNow: new Date(Date.UTC(2019, 5, 1))}); // June 1 2019
+    }
+  }
+});
+
+// Mock react-datepicker dep used by eui to avoid rendering the entire large component
+jest.mock('@elastic/eui/packages/react-datepicker', () => {
+  return {
+    __esModule: true,
+    default: 'ReactDatePicker',
+  }
+});
+
 addSerializer(styleSheetSerializer);
 
 // Initialize Storyshots and build the Jest Snapshots