🖌️
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
  • Add the generated Angular component
  • Mock Requests and APIs

Was this helpful?

  1. Different Test Levels
  2. Integration Test
  3. Frontend Integration Testing
  4. How to create a scenario

Add to project

PreviousCreate the migrated appNextHow to debug

Last updated 2 years ago

Was this helpful?

Add the generated Angular component

The application migrated by WebMap generates the Angular components for the forms, to create and include the demo in the sample repository, you need to copy these files

Add a folder (use a meaningful name) with the files in the repository folder "src/app".

Next, you need to add the Angular Component, for this, import the .ts file into "app.module" and include it in the "entryComponents" and "declarations".

Mock Requests and APIs

In the "CoreServices" folder we have three files:

  1. SampleServices: Extends the WebMapService class of the Angular Client and provides access to the WebMap application and handles the API requests.

  2. SampleApp: Extends the AngularApp class of the Angular Client and implements the Angular version of the WebMap Core Application.

  3. mock-http: Implements the IService interface of WebMap Core and handles the POST requests.

You probably need to add some response for the request or API calls, so you need to mock this responses.

It is not necessary to create them from scratch, you must take advantage of the ones generated by the same backend in the application you migrated, to do this you must open DevTools and go to the network panel, you can copy everything you need and store it in json files in the assets/api folder.

Once you have the application, you only have to intercept the requests. To do this you must do the following:

In the "APIs.ts" file you will have to add the URL of the request and the path to the file with the response, in addition to the "getResponse" method, you can be guided by those of the other examples.

In case you have to respond to an API call you can do it from the SampleServices.ts file, the process is very similar and you can be guided by those of other examples, you only need the URL of the request and the path to the file with the response.