mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00

kirjs 737777ef72 docs: add Angular Developer Skill updates

Includes:

- Imports and setup instructions

- Validation examples (sync, async, conditional)

- FieldState vs FormField distinction

- Common pitfalls and best practices

- Full-featured example application

(cherry picked from commit ed150e52d1)

2026-03-17 17:39:44 -07:00

2.5 KiB

Raw Blame History

End-to-End (E2E) Testing

This project uses Cypress for end-to-end (E2E) testing, which simulates real user interactions in a browser. The E2E tests are located primarily within the devtools/ package.

Running E2E Tests

The primary way to run E2E tests is through the pnpm script defined in the root package.json.

Build DevTools: The E2E tests run against a built version of the devtools extension. You must build it first:
```
pnpm -F ng-devtools-mcp build:dev
```
Run Cypress: Use the cy:open or cy:run script:
- To open the interactive Cypress Test Runner:
```
pnpm -F ng-devtools-mcp cy:open
```
- To run the tests headlessly in the terminal (ideal for CI):
```
pnpm -F ng-devtools-mcp cy:run
```

Test Structure

Configuration: The main Cypress configuration is located at devtools/cypress.json.
Specs: Test files (specs) are located in devtools/cypress/integration/.
Custom Commands: Reusable custom commands and actions are defined in devtools/cypress/support/.

Example E2E Test Snippet

A typical test might look like this:

// in devtools/cypress/integration/profiler.spec.ts

describe('Profiler', () => {
  beforeEach(() => {
    cy.visit('/?e2e-app');
    cy.wait(1000);
    cy.get('ng-devtools-tabs').find('a').contains('Profiler').click();
  });

  it('should record and display profiling data', () => {
    // Find the record button and click it
    cy.get('button[aria-label="start-recording-button"]').click();

    // Interact with the test application to generate profiling data
    cy.get('body').find('#cards button').first().click();
    cy.wait(500);

    // Stop recording
    cy.get('button[aria-label="stop-recording-button"]').click();

    // Assert that the flame graph is now visible
    cy.get('ng-devtools-recording-timeline').find('canvas').should('be.visible');
  });
});

Best Practices

Use data- attributes: Whenever possible, use data-cy or similar attributes for selecting elements to make tests more resilient to CSS or structural changes.
Custom Commands: Encapsulate common sequences of actions into custom commands in the support directory to keep tests clean and readable.
Wait for Application State: Use cy.wait() for arbitrary waits sparingly. Prefer to wait for specific UI elements to appear or for network requests to complete to avoid flaky tests.

2.5 KiB Raw Blame History