Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New test harness for HTML-based tests #3012

Merged
merged 17 commits into from
Apr 2, 2020
Merged

New test harness for HTML-based tests #3012

merged 17 commits into from
Apr 2, 2020

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Mar 13, 2020 •
edited
Loading

Changelog Entry

Description

HTML-based test is easier to write and debug than WebDriver tests.

We are not removing WebDriver from the test harness because we still need some help for grabbing image snapshots.

To-do

  • Add code coverage

Sample HTML-based tests

/**
 * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
 */

describe('offline UI', () => {
  test('should show "unable to connect" UI when credentials are incorrect', () =>
    runHTMLTest('offlineUI.invalidCredentials.html'));
});
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script
      crossorigin="anonymous"
      src="https://unpkg.com/react-dom@16.8.6/umd/react-dom-test-utils.development.js"
    ></script>
    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="webchat"></div>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <script type="text/babel" data-presets="es2015,stage-3">
      const { conditions, createStore, host, pageObjects, timeouts } = window.WebChatTest;

      (async function() {
        window.WebChat.renderWebChat(
          {
            directLine: window.WebChat.createDirectLine({ token: 'INVALID-TOKEN' }),
            store: createStore(),
            styleOptions: { spinnerAnimationBackgroundImage: 'url(/assets/staticspinner.png)' }
          },
          document.getElementById('webchat')
        );

        await pageObjects.wait(conditions.webChatRendered(), timeouts.ui);
        await pageObjects.wait(conditions.actionDispatched('DIRECT_LINE/CONNECT_REJECTED'), timeouts.directLine);

        await host.snapshot();
        await host.done();
      })().catch(async err => {
        console.error(err);

        await host.error(err);
      });
    </script>
  </body>
</html>

Specific Changes

  • Testing Added

@compulim compulim changed the title [DRAFT] New test harness for HTML-based tests New test harness for HTML-based tests Mar 14, 2020
@compulim compulim marked this pull request as ready for review March 14, 2020 08:53
@corinagum corinagum self-assigned this Mar 31, 2020
corinagum
corinagum reviewed Apr 2, 2020
View reviewed changes
jest.config.js Outdated Show resolved Hide resolved
corinagum
corinagum approved these changes Apr 2, 2020
View reviewed changes
Copy link
Contributor

@corinagum corinagum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See nitpicks

@compulim compulim merged commit 99e0267 into microsoft:master Apr 2, 2020
@compulim compulim deleted the feat-html-test branch April 2, 2020 14:09
This was referenced May 11, 2020
Merged
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@corinagum corinagum corinagum approved these changes

@a-b-r-o-w-n a-b-r-o-w-n Awaiting requested review from a-b-r-o-w-n a-b-r-o-w-n is a code owner

@cwhitten cwhitten Awaiting requested review from cwhitten cwhitten is a code owner

@srinaath srinaath Awaiting requested review from srinaath srinaath is a code owner

@tdurnford tdurnford Awaiting requested review from tdurnford tdurnford is a code owner

@tonyanziano tonyanziano Awaiting requested review from tonyanziano

Assignees

@corinagum corinagum

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@compulim @corinagum