feat(voiceSearch): add connector and widget

.storybook/decorators.ts

@@ -13,7 +13,7 @@ export const withHits = (
     instantsearch: any;
     search: any;
   }) => void,
-  searchOptions: any
+  searchOptions?: any
 ) => () => {
   const {
     appId = 'latency',

src/components/VoiceSearch/VoiceSearch.tsx

@@ -0,0 +1,80 @@
+import React from 'preact-compat';
+import Template from '../Template/Template';
+
+import {
+  VoiceSearchCSSClasses,
+  VoiceSearchTemplates,
+} from '../../widgets/voice-search/voice-search';
+
+import {
+  VoiceListeningState,
+  ToggleListening,
+} from '../../lib/voiceSearchHelper';
+
+export type VoiceSearchProps = {
+  cssClasses: VoiceSearchCSSClasses;
+  isBrowserSupported: boolean;
+  isListening: boolean;
+  toggleListening: ToggleListening;
+  voiceListeningState: VoiceListeningState;
+  templates: VoiceSearchTemplates;
+};
+
+const VoiceSearch = ({
+  cssClasses,
+  isBrowserSupported,
+  isListening,
+  toggleListening,
+  voiceListeningState,
+  templates,
+}: VoiceSearchProps): React.ReactNode => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
+    event.currentTarget.blur();
+    toggleListening();
+  };
+
+  const { status, transcript, isSpeechFinal, errorCode } = voiceListeningState;
+  return (
+    <div className={cssClasses.root}>
+      <Template
+        templateKey="buttonText"
+        rootTagName="button"
+        rootProps={{
+          className: cssClasses.button,
+          type: 'button',
+          title: `Search by voice${
+            isBrowserSupported ? '' : ' (not supported on this browser)'
+          }`,
+          onClick: handleClick,
+          disabled: !isBrowserSupported,
+        }}
+        data={{
+          status,
+          errorCode,
+          isListening,
+          transcript,
+          isSpeechFinal,
+          isBrowserSupported,
+        }}
+        templates={templates}
+      />
+      <Template
+        templateKey="status"
+        rootProps={{
+          className: cssClasses.status,
+        }}
+        data={{
+          status,
+          errorCode,
+          isListening,
+          transcript,
+          isSpeechFinal,
+          isBrowserSupported,
+        }}
+        templates={templates}
+      />
+    </div>
+  );
+};
+
+export default VoiceSearch;

src/components/VoiceSearch/__tests__/VoiceSearch-test.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import VoiceSearch, { VoiceSearchProps } from '../VoiceSearch';
+
+const defaultProps: VoiceSearchProps = {
+  cssClasses: {
+    root: 'root',
+    button: 'button',
+    status: 'status',
+  },
+  isBrowserSupported: true,
+  isListening: false,
+  toggleListening: () => {},
+  voiceListeningState: {
+    status: 'initial',
+  },
+  templates: {
+    buttonText: 'button',
+    status: 'status',
+  },
+};
+
+describe('VoiceSearch', () => {
+  describe('button', () => {
+    it('call toggleListening when button is clicked', () => {
+      const props = {
+        ...defaultProps,
+        toggleListening: jest.fn(),
+      };
+      const wrapper = mount(<VoiceSearch {...props} />);
+      wrapper.find('button').simulate('click');
+      expect(props.toggleListening).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Rendering', () => {
+    it('with default props', () => {
+      expect(mount(<VoiceSearch {...defaultProps} />)).toMatchSnapshot();
+    });
+
+    it('button disabled in unsupported browser', () => {
+      const props = {
+        ...defaultProps,
+        isBrowserSupported: false,
+      };
+      const wrapper = mount(<VoiceSearch {...props} />);
+      expect(wrapper.find('button').props().disabled).toBe(true);
+    });
+
+    it('with custom template for buttonText (1)', () => {
+      const props = {
+        ...defaultProps,
+        isListening: true,
+        templates: {
+          buttonText: ({ isListening }) => (isListening ? 'Stop' : 'Start'),
+          status: ``,
+        },
+      };
+      const wrapper = mount(<VoiceSearch {...props} />);
+      expect(wrapper.find('button').text()).toBe('Stop');
+    });
+
+    it('with custom template for buttonText (2)', () => {
+      const props = {
+        ...defaultProps,
+        isListening: false,
+        templates: {
+          buttonText: ({ isListening }) => (isListening ? 'Stop' : 'Start'),
+          status: ``,
+        },
+      };
+      const wrapper = mount(<VoiceSearch {...props} />);
+      expect(wrapper.find('button').text()).toBe('Start');
+    });
+
+    it('with custom template for status', () => {
+      const props = {
+        ...defaultProps,
+        isListening: true,
+        voiceListeningState: {
+          status: 'recognizing',
+          transcript: 'Hello',
+          isSpeechFinal: false,
+          errorCode: undefined,
+        },
+        templates: {
+          buttonText: ``,
+          status: `
+            <p>status: {{status}}</p>
+            <p>errorCode: {{errorCode}}</p>
+            <p>isListening: {{isListening}}</p>
+            <p>transcript: {{transcript}}</p>
+            <p>isSpeechFinal: {{isSpeechFinal}}</p>
+            <p>isBrowserSupported: {{isBrowserSupported}}</p>
+          `,
+        },
+      };
+      const wrapper = mount(<VoiceSearch {...props} />);
+      expect(wrapper.find('.status')).toMatchSnapshot();
+    });
+  });
+});

src/components/VoiceSearch/__tests__/__snapshots__/VoiceSearch-test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VoiceSearch Rendering with custom template for status 1`] = `
+<div
+  className="status"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<p>status: recognizing</p> <p>errorCode: </p> <p>isListening: true</p> <p>transcript: Hello</p> <p>isSpeechFinal: false</p> <p>isBrowserSupported: true</p>",
+    }
+  }
+/>
+`;
+
+exports[`VoiceSearch Rendering with default props 1`] = `
+<div
+  className="root"
+>
+  <button
+    className="button"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "button",
+      }
+    }
+    disabled={false}
+    onClick={[Function]}
+    title="Search by voice"
+    type="button"
+  />
+  <div
+    className="status"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "status",
+      }
+    }
+  />
+</div>
+`;

src/connectors/index.ts

@@ -44,3 +44,6 @@ export {
   default as connectAutocomplete,
 } from './autocomplete/connectAutocomplete';
 export { default as connectQueryRules } from './query-rules/connectQueryRules';
+export {
+  default as connectVoiceSearch,
+} from './voice-search/connectVoiceSearch';