ghostfolio/.agents/skills/angular-developer/references/e2e-testing.md

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.

1. 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
   

2. 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.