Clean up test from #1915 (#1933)

* Clean up test

* Update entry

CHANGELOG.md

@@ -33,7 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - 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 [#1877](https://github.com/Microsoft/BotFramework-WebChat/issues/1877). Add viewport meta tag and fix a few sample links, by [@corinagum](https://github.com/corinagum) in PR [#1919](https://github.com/Microsoft/BotFramework-WebChat/pull/1919)
-- 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)
+- Fix [#1789](https://github.com/Microsoft/BotFramework-WebChat/issues/1789). Focus send box after message is being sent, by [@corinagum](https://github.com/corinagum) in PR [#1915](https://github.com/Microsoft/BotFramework-WebChat/pull/1915)
 - Fix [#1920](https://github.com/Microsoft/BotFramework-WebChat/issues/1920). Added disabled property to send button, by [@tdurnford](https://github.com/tdurnford) in PR [#1922](https://github.com/Microsoft/BotFramework-WebChat/pull/1922)
 
 ### Changed

__tests__/basic.js

@@ -80,19 +80,3 @@ test('unknown activities do not render anything in the transcript', async () =>
 
   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);
-  });
-})

__tests__/sendBox.js

@@ -0,0 +1,41 @@
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
+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);
+
+test('should focus send box when message is being sent', async () => {
+  const { driver, pageObjects } = await setupWebDriver({
+    createStyleSet: styleOptions => {
+      const styleSet = window.WebChat.createStyleSet(styleOptions);
+
+      return Object.assign(
+        {},
+        styleSet,
+        {
+          sendBox: Object.assign(
+            {},
+            styleSet.sendBox,
+            {
+              '& > .main > form > input:focus': {
+                backgroundColor: 'Yellow'
+              }
+            }
+          )
+        }
+      );
+    }
+  });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('Hello, World!');
+  await driver.wait(minNumActivitiesShown(1), 2000);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

__tests__/setup/web/index.html

@@ -90,17 +90,10 @@
       }
 
       async function main(options) {
-        let { createDirectLine, props, setup, styleInputBackground = false } = unmarshal(options);
+        let { createDirectLine, createStyleSet, props, setup } = 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');
@@ -129,6 +122,7 @@
         window.WebChat.renderWebChat({
           directLine: createDirectLine({ token }),
           store,
+          styleSet: createStyleSet && createStyleSet(props.styleOptions),
           username: 'Happy Web Chat user',
           ...props
         }, document.getElementById('webchat'));