Cypress Testing with Disposable Data API

• Overview
• Relevant Infrastructure
• Walkthroughs
  • Cypress Walkthrough
  • Angular Rig Test Walkthrough
• Notes
  • SQL Server Express
  • Cypress Configuration
  • Cypress Asynchronous Tasks

Overview

Back to Top

Given a .NET 6 API using EF Core with SQL Server and a web client, create an API-accessible server that allows a client service to initialize a disposable database and initialize an app API process pointed to the disposable database connection. I refer to this end to end infrastructure as a data rig. When executing Cypress tests, the app api and database can be initialized, and an initial data state can be established before all tests are run, then disposed of after all tests are completed.

The following demonstrates testing out the Rig API and client service via an Angular testing interface:

api-rig-demo.mp4

The following demonstrates using the Rig to:

• Before All:
  • Initialize a disposable database
  • Start a disposable app API process
  • Seed initial state data into the database
• Execute Cypress Tests
• After All:
  • Kill app API Process
  • Destroy disposable database

brainstorm-cypress-demo.mp4

Relevant Infrastructure

Back to Top

• Rig Server
  • DbManager.cs - Connections are generated from connections.json
  • ProcessRunner.cs
  • ApiRig.cs - Registered as a Singleton service in Program.cs. Because it is created by the dependency injection container, it will properly execute the IDisopsable.Dispose method, cleaning up all session resources.
  • RigController.cs
• Rig Client - Written in native TypeScript to be framework agnostic
  • rig.ts
  • rig-state.ts
  • rig-socket.ts
  • rig-output.ts
• test.route.ts - Facilitates Rig API interaction testing outside of the context of Cypress.
• cypress
  • test - Defines route-specific tests and aggregates their execution under a single Test class.
    • home.ts - Defines functions for executing tests against 'http://localhost:3000', using the Rig client to generate / dispose data state.
    • index.ts - Exposes a Test class that provides methods pointing to the test method of each internal test class.
  • e2e - Cypress test root directory
    • home.cy.ts - Executes Test.home() as defined in the test directory.

Walkthroughs

Back to Top

Before executing, make sure to install dependencies and build:

cd /server/
dotnet build

cd ../app/
npm i
npm run build

Also be sure to see the SQL Server Express section.

Connection strings are defined at:

• appsettings.Development.json
• connections.json

URLs:

Asset	URL	Start
Brainstorm.Api	http://localhost:5000	/server/Brainstorm.Api > dotnet run
Brainstorm.Rig	http://localhost:5001	/server/Brainstorm.Rig > dotnet run
Angular App	http://localhost:3000	/app > npm run start

Cypress Walkthrough

Back to Top

In VS Code, open three different terminals:

Terminal 1

cd /server/Brainstorm.Rig/
dotnet run

Terminal 2

cd /app/
npm run start

Terminal 3

cd /app/
npm run e2e-open

This will launch the Cypress testing app. Click E2E Testing:

Select your browser of choice and click Start E2E Testing:

This will load a test browser with any defined Cypress tests. Click home to begin executing the home test:

Angular Rig Test Walkthrough

Back to Top

In VS Code, open two different terminals:

Terminal 1

cd /server/Brainstorm.Rig/
dotnet run

Terminal 2

cd /app/
npm run start

The available Rig API endpoints can be found at http://localhost:5001/swagger :

From a browser, navigate to http://localhost:3000/test :

Clicking the Initialize Database toggle will cause an database instance associated with the displayed connection string to be generated:

You can verify the database in SQL Server Management Studio:

Clicking the Start Process toggle will cause a disposable app API process pointed to the disposable database to be initialized:

While this process is runnning, the app API is available. From a separate tab, you can see the endpoints at http://localhost:5000/swagger :

This should also enable the Seed Topic button at the test route to be enabled. Clicking it will send the JSON Topic object to the Rig's SeedTopic endpoint and update the displayed JSON with the returned object:

Additionally, more data can be added to the database via the provided topic form:

After clicking Save Topic, you can validate the data that has been saved by navigating to http://localhost:3000 in a new tab:

In the test route tab, clicking Kill Process will dispose the app API server process and API calls will no longer be available:

You can verify this by attempting to navigate back to http://localhost:5000/swagger in a new tab:

In the test route, clicking the Destroy Database toggle will cause the database to be destroyed:

You can verify this by refreshing the Databases directory in SQL Server Management Studio:

It's also worth noting that you can initialize a new database and start a new process. Navigating back to the test route will keep track of the process and database state, but not the seeded topic. You can seed the same topic multiple times by refreshing the tab.

Additionally, stopping the Rig server process will cause the app API process to be disposed and the database destroyed:

Notes

Back to Top

SQL Server Express

Back to Top

Testing environment runs using SQL Server 2019 Express with the server name of DevSql and Windows authentication.

In SQL Server Management Studio, right-click the server in object explorer and click Properties:

• In the Security tab, cross database ownership chaining is enabled:

  

• In the Advanced tab, Enable Contained Databases is set to True:

  

Additional Links:

• SQL Server Management Studio
• SQL Server 2019 Cumulative Update

Cypress Configuration

cypress.config.ts

• baseUrl: http://localhost:3000 - Required to prevent re-calling the before and after methods when cy.visit() is executed.

• defaultCommandTimeout: 8000 - Give a larger buffer for API method execution, particularly when executing rig.startProcess().

tsconfig.json

The following settings are required to be able to use the external Rig client within tests:

{
    "compilerOptions": {
        "target": "ES5",
        "lib": ["ES5", "DOM"],
        "types": [
            "cypress",
            "node"
        ]
    }
}

Cypress Asynchronous Tasks

Back to Top

Cypress does not support using async / await in tests and internally handles asynchrony in non-standard ways. Because of this, when executing asyncronous tasks with non-Cypress infrastructure, these calls have to be wrapped in cy.then(() => ) and resolved with its own .then(() => ) call. For instance, when initializing the database before executing tests, the following structure must be used within a test:

// before all tests execute
before(() => {
    // initialize an asynchronous action with Cypress
    cy.then(() =>
        // execute an external Promise
        rig.initializeDatabase().then(() =>
            // log once the promise completes.
            cy.log('Database initialized')
        )
    );
})