In my last project we faced the challenge to unit test Azure DevOps UI Extensions based on Azure DevOps React-based UI.
You will find quite some resources on how to leverage Azure DevOps to build your React apps and unit test them. But I found little information on how to do React unit tests for an Azure DevOps Extension.
Overall we faced 5 challenges from which 4 are related to Azure DevOps Extensions:
- Mocking return values of the Azure DevOps Extension SDK methods
- Trigger Azure DevOps Extension _WorkItemForm _events
- Mocking return values and classes of the Azure DevOps Extension API
- Mock the external Rest API calls and spy on the values transmitted (while using a _RestClientBase _class provided by the Extension API)
- Mocking and spy on logging methods (Application Insights SDK)
Let’s start with explaining the example
The example code, mocks and the unit tests are published to GitHub https://github.com/h2floh/azure-dev-ops-react-ui-unit-testing.
It contains two Work Item UI Extensions:
- Versioned Items Table — can link versioned items (files) from a distinct Azure Git repo branch to the work item. In order to do so it will save the state via a Rest API external to Azure DevOps Services.
- Multi Identity Picker — let you select multiple identities from the Azure DevOps Organization associate AAD Tenant and saves the information into a text field of the work item.
High Level Overview of the UI components and their service interactions
The main difference between both components is that one will save the state externally the other internally to Azure DevOps Services.
Both have in common that they will use the TypeScript based Azure DevOps Extension SDK and API to communicate with Azure DevOps Service and do logging towards an Azure based Application Insights.
Ok let’s have a look at the 5 challenges and how to solve them
Disclaimer: I reordered and removed some code for the screenshots in order to highlight the important parts.
Mocking return values of the Azure DevOps Extension SDK methods
Azure DevOps Extension SDK initialization code
The code: SDK has to be initialized and we retrieving configuration values from it.
Azure DevOps Extension SDK initialization mock
The mock: the **SDK.init() **function needs to return a resolved promise in order to activate the lambda function in the .then() branch of the code.
The getConfiguration() function can be easily mocked by returning a JSON object with the exact structure we expect. We added all configuration values for both UI components at once.
If you need to modify specific values within a test run you can create an additional function mock which will be accessible to overwrite the return value in you test files. In this example we do that for the _RepositoryId _with a default value of ‘gitrepo’, by introducing a mocked function mockRepositoryId().
Retrieving a field value
The code: We retrieve the Work Item Form Service with the function **getService(). **With this service we can access and modify the current work item opened in the UI. We want to retrieve the value of the field specified to hold the state of this component. This is done by the method getFieldValue().
Mocking getService, WorkItemFormService and SearchIdentities
The mock: as you can see we need two different services returned from getService() depending on the input parameters. In case the W_orkItemFormService _is requested we just return the getFieldValue() method as a mocked function mockGetFieldValue(). This allows us to inject the return value at the unit test level. In this case we do not distinguish what field is requested. If you need to because you are accessing several fields you would need to create an implementation for **mockGetFieldValue() **which will react on different input parameters.
As an example of how to react to input parameters you can have a look at the mocked searchIdentitiesAsync() method of the IdentityService. Depending on the query value we return another identity.
#azure-devops #programming #react #unit-testing #typescript #devops
