diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c41c452f1..b66e3fd345 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - Fix [#1827](https://github.com/Microsoft/BotFramework-WebChat/issues/1827). Remove renderer for unknown activities, by [@corinagum](https://github.com/corinagum) in PR [#1873](https://github.com/Microsoft/BotFramework-WebChat/pull/1873) - Fix [#1586](https://github.com/Microsoft/BotFramework-WebChat/issues/1586). Fix theming of suggested actions buttons, by [@corinagum](https://github.com/corinagum) in PR [#1883](https://github.com/Microsoft/BotFramework-WebChat/pull/1883) - Fix [#1837](https://github.com/Microsoft/BotFramework-WebChat/issues/1837), [#1643](https://github.com/Microsoft/BotFramework-WebChat/issues/1643). Fix style conflicts with bootstrap and bump `memoize-one`, by [@corinagum](https://github.com/corinagum) in PR [#1884](https://github.com/Microsoft/BotFramework-WebChat/pull/1884) +- Fix [#1789](https://github.com/Microsoft/BotFramework-WebChat/issues/1789). Return focus Send Box after Send Button is pushed, by [@corinagum](https://github.com/corinagum) in PR [#1915](https://github.com/Microsoft/BotFramework-WebChat/pull/1915) ### Changed - `component`: Bumps to [`react-film@1.2.1-master.86ba8c1`](https://npmjs.com/package/react-film/), by [@corinagum](https://github.com/corinagum) and [@compulim](https://github.com/compulim), in PR [#1900](https://github.com/Microsoft/BotFramework-WebChat/pull/1900) diff --git a/__tests__/__image_snapshots__/chrome-docker/basic-js-sendbox-ux-should-have-a-yellow-background-when-focused-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/basic-js-sendbox-ux-should-have-a-yellow-background-when-focused-1-snap.png new file mode 100644 index 0000000000..715166cb70 Binary files /dev/null and b/__tests__/__image_snapshots__/chrome-docker/basic-js-sendbox-ux-should-have-a-yellow-background-when-focused-1-snap.png differ diff --git a/__tests__/basic.js b/__tests__/basic.js index b9914c2ffc..a157a6356b 100644 --- a/__tests__/basic.js +++ b/__tests__/basic.js @@ -7,76 +7,92 @@ import uiConnected from './setup/conditions/uiConnected'; // selenium-webdriver API doc: // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html -jest.setTimeout( timeouts.test ); +jest.setTimeout(timeouts.test); -test( 'setup', async () => { +test('setup', async () => { const { driver, pageObjects } = await setupWebDriver(); - await driver.wait( uiConnected(), timeouts.directLine ); - await pageObjects.sendMessageViaSendBox( 'layout carousel' ); + await driver.wait(uiConnected(), timeouts.directLine); + await pageObjects.sendMessageViaSendBox('layout carousel'); - await driver.wait( minNumActivitiesShown( 2 ), 2000 ); - await driver.wait( allImagesLoaded(), 2000 ); + await driver.wait(minNumActivitiesShown(2), 2000); + await driver.wait(allImagesLoaded(), 2000); const base64PNG = await driver.takeScreenshot(); - expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions ); -} ); + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); +}); -test( 'long URLs with break-word', async () => { +test('long URLs with break-word', async () => { const { driver, pageObjects } = await setupWebDriver(); - await driver.wait( uiConnected(), timeouts.directLine ); - await pageObjects.sendMessageViaSendBox( 'https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/' ) + await driver.wait(uiConnected(), timeouts.directLine); + await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/') - await driver.wait( minNumActivitiesShown( 2 ), 2000 ); - await driver.wait( allImagesLoaded(), 2000 ); + await driver.wait(minNumActivitiesShown(2), 2000); + await driver.wait(allImagesLoaded(), 2000); const base64PNG = await driver.takeScreenshot(); - expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions ); -} ); + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); +}); -test( 'long URLs with break-all', async () => { +test('long URLs with break-all', async () => { const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'break-all' } }; - const { driver, pageObjects } = await setupWebDriver( { props: WEB_CHAT_PROPS } ); + const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS }); - await driver.wait( uiConnected(), timeouts.directLine ); - await pageObjects.sendMessageViaSendBox( 'https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/' ) + await driver.wait(uiConnected(), timeouts.directLine); + await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/') - await driver.wait( minNumActivitiesShown( 2 ), 2000 ); - await driver.wait( allImagesLoaded(), 2000 ); + await driver.wait(minNumActivitiesShown(2), 2000); + await driver.wait(allImagesLoaded(), 2000); const base64PNG = await driver.takeScreenshot(); - expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions ); -} ); + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); +}); -test( 'long URLs with keep-all', async () => { +test('long URLs with keep-all', async () => { const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'keep-all' } }; - const { driver, pageObjects } = await setupWebDriver( { props: WEB_CHAT_PROPS } ); + const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS }); - await pageObjects.sendMessageViaSendBox( '箸より重いものを持ったことがない箸より重いものを持ったことがない' ); + await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない'); - await driver.wait( minNumActivitiesShown( 2 ), 2000 ); - await driver.wait( allImagesLoaded(), 2000 ); + await driver.wait(minNumActivitiesShown(2), 2000); + await driver.wait(allImagesLoaded(), 2000); const base64PNG = await driver.takeScreenshot(); - expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions ); -} ); + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); +}); -test( 'unknown activities do not render anything in the transcript', async () => { +test('unknown activities do not render anything in the transcript', async () => { const { driver, pageObjects } = await setupWebDriver(); - await driver.wait( uiConnected(), timeouts.directLine ); - await pageObjects.sendMessageViaSendBox( 'unknown activity' ); + await driver.wait(uiConnected(), timeouts.directLine); + await pageObjects.sendMessageViaSendBox('unknown activity'); - await driver.wait( minNumActivitiesShown( 1 ), 2000 ); + await driver.wait(minNumActivitiesShown(1), 2000); const base64PNG = await driver.takeScreenshot(); - expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions ); -} ); + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); +}); + +describe('Sendbox UX', async () => { + test('should have a yellow background when focused', async () => { + + const { driver, pageObjects } = await setupWebDriver({ styleInputBackground: true }); + + await driver.wait( uiConnected(), timeouts.directLine ); + await pageObjects.sendMessageViaSendBox('them vanilllllla wafers'); + + await driver.wait(minNumActivitiesShown(1), 2000); + + const base64PNG = await driver.takeScreenshot(); + + expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions); + }); +}) diff --git a/__tests__/setup/web/index.html b/__tests__/setup/web/index.html index 9f35bbf8f4..8842d200a1 100644 --- a/__tests__/setup/web/index.html +++ b/__tests__/setup/web/index.html @@ -90,10 +90,17 @@ } async function main(options) { - let { createDirectLine, props, setup } = unmarshal(options); + let { createDirectLine, props, setup, styleInputBackground = false } = unmarshal(options); props = unmarshal(props); + if(styleInputBackground) { + const style = document.createElement('style'); + style.type = 'text/css'; + style.appendChild(document.createTextNode('input:focus { background-color: yellow }')); + document.head.appendChild(style); + } + if (setup) { await setup(); } await loadScript('/webchat-instrumented.js'); diff --git a/packages/component/src/SendBox/SendButton.js b/packages/component/src/SendBox/SendButton.js index f15cbc9f71..9fb3cd4405 100644 --- a/packages/component/src/SendBox/SendButton.js +++ b/packages/component/src/SendBox/SendButton.js @@ -7,6 +7,7 @@ import SendIcon from './Assets/SendIcon'; const connectSendButton = (...selectors) => connectToWebChat( ({ + focusSendBox, language, sendBoxValue, setSendBox, @@ -15,6 +16,7 @@ const connectSendButton = (...selectors) => connectToWebChat( click: () => { setSendBox(sendBoxValue.trim()); submitSendBox(); + focusSendBox(); }, language }),