Upgrade tests

Author: compulim

…html/hooks.useActiveTyping.variable.html …tml2/hooks/useActiveTyping.variable.html__tests__/html/hooks.useActiveTyping.variable.html renamed to __tests__/html2/hooks/useActiveTyping.variable.html __tests__/html/hooks.useActiveTyping.variable.html renamed to __tests__/html2/hooks/useActiveTyping.variable.html

@@ -13,17 +13,16 @@
     <main id="webchat"></main>
     <script type="text/babel" data-presets="env,stage-3,react">
       const {
+        testHelpers: { createDirectLineEmulator },
         WebChat: {
           Components: { BasicWebChat, Composer },
           hooks: { useActiveTyping }
         }
       } = window;
 
       run(async function () {
-        const clock = lolex.createClock();
-
-        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
-        const store = testHelpers.createStoreWithOptions({ ponyfill: clock });
+        const ponyfill = lolex.createClock();
+        const { directLine, store } = createDirectLineEmulator({ ponyfill });
 
         const RunFunction = ({ fn }) => {
           fn();
@@ -34,7 +33,7 @@
         const renderWithFunction = fn =>
           new Promise(resolve =>
             ReactDOM.render(
-              <Composer directLine={directLine} ponyfill={clock} sendTypingIndicator={true} store={store}>
+              <Composer directLine={directLine} ponyfill={ponyfill} sendTypingIndicator={true} store={store}>
                 <BasicWebChat />
                 <RunFunction fn={() => resolve(fn && fn())} key={Date.now() + ''} />
               </Composer>,
@@ -46,7 +45,7 @@
 
         await pageConditions.webChatRendered();
 
-        clock.tick(600);
+        ponyfill.tick(600);
 
         // WHEN: At initial.
         await pageConditions.uiConnected();
@@ -55,7 +54,7 @@
         await expect(renderWithFunction(() => useActiveTyping())).resolves.toEqual([{}]);
 
         // WHEN: Type "a" without send.
-        await pageObjects.typeInSendBox('a');
+        await directLine.actPostActivity(() => pageObjects.typeInSendBox('a'));
 
         // THEN: `useActiveTyping` should return current user.
         await expect(renderWithFunction(() => Object.values(useActiveTyping()[0]))).resolves.toEqual([
@@ -69,7 +68,7 @@
         ]);
 
         // WHEN: Type "b" at t=10.
-        clock.tick(10);
+        ponyfill.tick(10);
         await pageObjects.typeInSendBox('b');
 
         // We need to wait for 6000 ms because:
@@ -78,10 +77,7 @@
         // 3. t=10: Typed letter "b"
         // 4. t=10: Scheduled another typing indicator at t=3000
         // 5. t=3000: Send typing activity
-        clock.tick(3000);
-
-        // TODO: Understand why we need to yield after clock.tick and see if we could eliminate it.
-        await 0;
+        await directLine.actPostActivity(() => ponyfill.tick(3000));
 
         // THEN: `useActiveTyping` should return current user.
         await expect(renderWithFunction(() => Object.values(useActiveTyping()[0]))).resolves.toEqual([
@@ -95,7 +91,7 @@
         ]);
 
         // WHEN: After 8 seconds.
-        clock.tick(8000);
+        ponyfill.tick(8000);
 
         // THEN: `useActiveTyping` should return nothing.
         await expect(renderWithFunction(() => useActiveTyping())).resolves.toEqual([{}]);