Unit Test Case for Typescript Webresources

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.

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);
                });
            });
        }
    }

  1. 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}");
        });
    });
});
  1. Build Solution (You have to build project/solution before Run Tests).
  2. Open the Test Explorer (Test –> Test Explorer).
  3. 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.
  4. Here is the result from Test Explorer.
  1. You can also debug selected tests by selecting Debug Selected Tests.
  2. Final folder structure looks like below

Hope it helps…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s