Add integration and E2E testing

[janechu]

What package(s) should this feature be added to?

@microsoft/fast-tooling
@microsoft/fast-tooling-react

Summary

FAST Tooling Testing

General FAST tooling testing strategy

When it comes to testing strategy, the overall philosophy is that unit testing is the first and largest pillar. Since unit tests are the most performant tests, a high percentage of code coverage is expected to be reached for the FAST tooling repository testing in each package. For integration tests and E2E tests, these are more costly. They require a setup of an application to mock a single scenario as an integration test, or a full application to do an E2E test. These should not test edge cases, but should follow the "happy/critical path" that the user is expected to take.

Unit tests

What should be covered:

• Unit tests for each web component and react component
• Unit tests for utilities & classes

What technologies should be used:

• Mocha, Karma, Chai for web components & JS utilities
• Jest, Enzyme for react components
• Argos CI/Applitools for visual testing of react/web components

Integration tests & E2E tests (smoke test)

Setup

The integration and E2E tests should use a single web-component-editor application which includes all available components and services and a list of user interaction workflows.

What should be covered:

• Test interactions and updates between services and components to ensure they stay in sync, these include:
  • Navigation updates
  • Data updates
  • Schema updates
  • Validation updates

What technologies should be used:

• Playwrite - This should be a good compromise between ease-of-use and local environment setup, it has better focus handling than Karma etc., because it opens the actual browser.
  • File naming should mimic FAST naming, my-component.pw.spec.ts
  • Playwrite has a test suite built in (no need to use mocha/chai)
  • Use local webpack applications instead of a fixture/harness structure to run tests

Requirements

• Update this main issue with issues for adding Playwrite and related testing for E2E and integration tests
• Add an investigation issue for visual testing the react/web components, this should be committed to the backlog until such time that the visuals are updated to match new FAST component visual updates

Tasks needed for completion

• Add web component webpack apps in the examples folder #96
• Convert Monaco Adapter unit tests to be async #9
• Setup Playwrite #147
• Convert Karma tests to Playwrite #97