From 129596e9c1fa0ef2f2613810331140f97113239c Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Fri, 14 Jun 2019 11:47:21 +0200 Subject: [PATCH] fix(voiceSearch): fix incorrect status on stop (#2535) --- .../src/components/VoiceSearch.tsx | 3 +-- .../lib/voiceSearchHelper/__tests__/index.ts | 17 +++++++++++- .../src/lib/voiceSearchHelper/index.ts | 27 +++++++------------ 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/react-instantsearch-dom/src/components/VoiceSearch.tsx b/packages/react-instantsearch-dom/src/components/VoiceSearch.tsx index 1bcf82ee3c..cd982f92e2 100644 --- a/packages/react-instantsearch-dom/src/components/VoiceSearch.tsx +++ b/packages/react-instantsearch-dom/src/components/VoiceSearch.tsx @@ -5,13 +5,12 @@ import createVoiceSearchHelper, { VoiceSearchHelper, VoiceListeningState, Status, - ErrorCode, } from '../lib/voiceSearchHelper'; const cx = createClassNames('VoiceSearch'); type InnerComponentProps = { status: Status; - errorCode?: ErrorCode; + errorCode?: SpeechRecognitionErrorCode; isListening: boolean; transcript: string; isSpeechFinal: boolean; diff --git a/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/__tests__/index.ts b/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/__tests__/index.ts index a41cbd873a..4afd34a734 100644 --- a/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/__tests__/index.ts +++ b/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/__tests__/index.ts @@ -1,4 +1,4 @@ -// copied from https://github.com/algolia/instantsearch.js/blob/0e988cc85487f61aa3b61131c22bed135ddfd76d/src/lib/voiceSearchHelper/__tests__/index-test.ts +// copied from https://github.com/algolia/instantsearch.js/blob/688e36a67bb4c63d008d8abc02257a7b7c04e513/src/lib/voiceSearchHelper/__tests__/index-test.ts import createVoiceSearchHelper from '..'; @@ -193,4 +193,19 @@ describe('VoiceSearchHelper', () => { voiceSearchHelper.dispose(); expect(stop).toHaveBeenCalledTimes(1); }); + + it('stops and the status becomes `finished`', () => { + window.SpeechRecognition = createFakeSpeechRecognition(); + const onQueryChange = (): void => {}; + const onStateChange = (): void => {}; + const voiceSearchHelper = createVoiceSearchHelper({ + searchAsYouSpeak: true, + onQueryChange, + onStateChange, + }); + + voiceSearchHelper.toggleListening(); + voiceSearchHelper.toggleListening(); + expect(voiceSearchHelper.getState().status).toBe('finished'); + }); }); diff --git a/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/index.ts b/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/index.ts index 4a89155ca6..b3d483c513 100644 --- a/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/index.ts +++ b/packages/react-instantsearch-dom/src/lib/voiceSearchHelper/index.ts @@ -1,4 +1,4 @@ -// copied from https://github.com/algolia/instantsearch.js/blob/0e988cc85487f61aa3b61131c22bed135ddfd76d/src/lib/voiceSearchHelper/index.ts +// copied from https://github.com/algolia/instantsearch.js/blob/688e36a67bb4c63d008d8abc02257a7b7c04e513/src/lib/voiceSearchHelper/index.ts export type VoiceSearchHelperParams = { searchAsYouSpeak: boolean; @@ -14,21 +14,11 @@ export type Status = | 'finished' | 'error'; -export type ErrorCode = - | 'no-speech' - | 'aborted' - | 'audio-capture' - | 'network' - | 'not-allowed' - | 'service-not-allowed' - | 'bad-grammar' - | 'language-not-supported'; - export type VoiceListeningState = { status: Status; transcript: string; isSpeechFinal: boolean; - errorCode?: ErrorCode; + errorCode?: SpeechRecognitionErrorCode; }; export type VoiceSearchHelper = { @@ -110,11 +100,6 @@ export default function createVoiceSearchHelper({ } }; - const stop = (): void => { - dispose(); - resetState(); - }; - const start = (): void => { recognition = new SpeechRecognitionAPI(); if (!recognition) { @@ -141,6 +126,14 @@ export default function createVoiceSearchHelper({ recognition = undefined; }; + const stop = (): void => { + dispose(); + // Because `dispose` removes event listeners, `end` listener is not called. + // So we're setting the `status` as `finished` here. + // If we don't do it, it will be still `waiting` or `recognizing`. + resetState('finished'); + }; + const toggleListening = (): void => { if (!isBrowserSupported()) { return;