🖌️
Product Process Documentation
  • Product Process Documentation
  • Definition of Done (DoD)
    • General checkpoints
      • Specific checkpoints by team
    • Important process: QA review & PO review
      • QA Review
      • PO Review
  • Work Items
    • Product Backlog Item (PBI)
    • Bug
      • Basic rules for creating a bug
      • How to report a Bug
    • Bugs Management
  • Code Standards
  • Different Test Levels
    • Unit Test
      • Frontend Unit Testing
        • What is a Unit Test?
        • How do I know if I am developing a good unit test?
        • AAA (Arrange, Act and Assert)
        • Overloaded test suits
        • Setup & Teardown
          • JEST Mocks
          • FakeTimers
        • Istanbul Annotations
        • C8 Annotations
        • JEST Runner (Debug unit tests with Jest)
    • Component Test
      • Frontend Component Testing
        • What is Component Testing?
        • Best practices
        • Bad practices
        • Setup
          • Sandbox
          • Mocks, Services and Providers
          • Test scenario
    • Integration Test
      • Frontend Integration Testing
        • What is a Integration Test?
        • AAA (Arrange, Act and Assert)
        • Best Practices
        • Bad practices
        • Setup & Teardown
        • How to create a scenario
          • Create the migrated app
          • Add to project
        • How to debug
        • Common problems
      • Testing Driven Development Guide and recommendations
    • Functional Test
    • Security Testing
      • Security Testing Tools
      • Frontend Security Testing
    • Performance testing
    • Best Practices
    • Test Documentation
  • Run test projects
    • General steps
    • Specific steps by team
  • DevOps
    • Pipelines
    • Builds
    • Specific information by team
    • Test plan
    • Service Hooks for Azure DevOps Notifications
      • Slack Notifications
      • Microsoft Teams Notifications
  • Dashboards
    • General
    • QA Dashboards
  • Release Process
    • General Steps
    • Specific steps by team
  • Migration Cells
    • Basics of testing process
  • Release process
  • References
Powered by GitBook
On this page
  • Create the sandbox file and the configuration
  • Add component declaration to application module
  • Component module and Playground configuration

Was this helpful?

  1. Different Test Levels
  2. Component Test
  3. Frontend Component Testing
  4. Setup

Sandbox

PreviousSetupNextMocks, Services and Providers

Last updated 2 years ago

Was this helpful?

Create the sandbox file and the configuration

To start, you first have to create the sandbox for the component, this is indispensable to be able to test a component. Inside component folder create a new file with the extension .component.sandbox.ts. The image on the right is an example of the code that the file should carry, you can learn more about sandbox configuration at .

Add component declaration to application module

Remember that Angular needs to know about the existence of this component. Add it to app.module.ts as a declaration:

Component module and Playground configuration

The WebForms WebMap components some libraries to work correctly (those shown in the image on the left, in the imports section). Since playground works as a separate project, it also needs to know about these references so you have to add them in the modules section, in the configure method.

Each WebMap component has its own special module. This module can be created or taken directly from the migrated project where the component is located. Include component module in the component folder. At main.playground.ts add it in modules section at configure method.

We already have the sandbox configured for the component we want to test but we still need to configure the WebMapServices to be able to simulate the component in the playground. See the next page.

Note: In it is explained in detail how to configure the WebMap provider.

Mocks, Services and Providers
Angular Playground - Sandbox API
Component folder
Sandbox file
App module