In our project, we got a requirement to write unit test cases for typescript webresources. In this blog, I am going to explain step by step process to write unit test case for one scenario.

Scenario: Set the Country field on Account Form. The data should be copied from logged in user profile.

I used the following frameworks to write unit test case.

• Mocha test framework
• Sinon test framework
• xrm-mock fake implementation of the Dynamics 365 Client API
  • xrm-mock is a package to generate a fake implementation of the Xrm object.

Process: Follow the below steps

1. Create a “Blank Node.js Web Application” project.
2. Install the following node packages.
   • mocha@7.2.0
   • sinon@9.0.2
   • xrm-mock@3.4.18
   • @types/xrm@9.0.18
3. Add “src” and “test” folders in the project.
4. Add “Account.ts” file under “src” folder and “AccountTest.ts” file under “test” folder.
5. Add the below code in Account.ts

export default class Account {
    
    public static setCountryField(): Promise<void> {
        let loggedInUserId = Xrm.Page.context.getUserId().replace("{", "").replace("}", "");
        if (loggedInUserId != null) {
            return new Promise((resolve, reject) => {
                Xrm.WebApi.retrieveRecord("systemuser", loggedInUserId, "?$select=_new_countryid_value").then((result) => {
                    resolve(
                        Xrm.Page.getAttribute("new_defaultcountryid").setValue([{
                            entityType: result["_new_countryid_value@Microsoft.Dynamics.CRM.lookuplogicalname"],
                            id: result["_new_countryid_value"],
                            name: result["_new_countryid_value@OData.Community.Display.V1.FormattedValue"]
                        }]));
                }).catch((error) => {
                    reject(error);
                });
            });
        }
    }

6. Add the below code in AccountTest.ts

import { beforeEach, describe, it } from "mocha";
import Account from "../src/Account";
import assert = require('assert');
import { XrmMockGenerator } from "xrm-mock";
import * as sinon from "sinon"

describe("SetCountryTest", () => {
    beforeEach(() => {
        XrmMockGenerator.initialise();
        XrmMockGenerator.Attribute.createLookup("new_defaultcountryid", null);
    });

    it("Get logged in user country and set it on Account Form", () => {
        sinon.stub(Xrm.WebApi, "retrieveRecord").resolves({
            "_new_countryid_value@Microsoft.Dynamics.CRM.lookuplogicalname": "new_country",
            "_new_countryid_value": "{00000000-0000-0000-0000-000000000002}",
            "_new_countryid_value@OData.Community.Display.V1.FormattedValue": "Germany"
        });
        return Account.setCountryField().then(() => {
            let countryId = Xrm.Page.getAttribute("new_defaultcountryid").getValue();
            assert.equal(countryId[0].id, "{00000000-0000-0000-0000-000000000002}");
        });
    });
});

7. Build Solution (You have to build project/solution before Run Tests).
8. Open the Test Explorer (Test –> Test Explorer).
9. Run the tests by clicking the Run All link in Test Explorer. Or, you can run tests by selecting one or more tests or groups, right-clicking, and selecting Run Selected Tests from the shortcut menu.
10. Here is the result from Test Explorer.

10. You can also debug selected tests by selecting Debug Selected Tests.
11. Final folder structure looks like below

Hope it helps…