Teams App Test Tool for Visual Studio

Teams App Test Tool (Test Tool) makes debugging bot-based apps effortless. You can chat with your bot and see its messages and Adaptive Cards as they appear in Microsoft Teams. You don’t need a Microsoft 365 developer account, tunneling, or Teams app and bot registration to use Test Tool.

The following image shows a sample app displaying a response in Test Tool:

Screenshot shows the Teams App Test Tool Adaptive Card.

The following are the advantages of Test Tool:

  • Sandbox environment: The sandbox environment of Test Tool emulates the behavior, look, and user experience of Teams.

  • Tunneling: An external tunnel service isn't necessary as Test Tool runs on a local server that your bot can communicate with.

  • Reduce account dependencies: Microsoft 365 Developer tenant and the app uploading permissions aren't necessary to debug the bot.

  • Rapid inner-loop iterations: Optimizes the process of making changes to the app design and bot logic without having to redeploy the bot to the cloud.

  • Mock data and activities: Test Tool makes it easy to test complex scenarios such as, sending a welcome message when a new member joins the channel and using mock data and activity triggers.

  • Reliable: Test Tool is reliable as the bot's Adaptive Card utilizes the same rendering technology as in Teams.

  • Integration with existing Teams bot applications: Test Tool integrates effortlessly with existing Teams bot applications built with Bot Framework SDK.

  • Support for different scopes: Test Tool supports testing in personal, team, and group chat scopes.

Prerequisites

Ensure you install the following tools for building and deploying your bot in Test Tool:

Install For using...
Node.js Back-end JavaScript runtime environment.
Visual Studio 2022
You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the version 17.9 or later.

Test Tool experience in Visual Studio

Test Tool offers a faster debug experience for bot applications when compared to the Teams client. Test Tool provides support for all bot app features. In this scenario, we're using AI Chat Bot as an example. To debug your bot in Test Tool, follow these steps:

  1. Open Visual Studio.

  2. Select Create a new project.

    Screenshot shows the selection to create a new project.

  3. In the search box, enter Microsoft Teams. From the search results, select Microsoft Teams App.

  4. Select Next.

    Screenshot shows the selection of templates to create a new project.

  5. Enter Project name and select Create.

    Screenshot shows the option to enter the project name.

  6. Select AI Chat Bot > Create.

    Note

    Screenshot shows the selection of Teams application to create a new project.

    A GettingStarted window appears.

    Screenshot shows the get started page of the application in Visual Studio.

  7. The appsettings.TestTool.json file helps to configure the Test Tool by updating few parameters. To update appsettings.TestTool.json file, follow either OpenAI or Azure OpenAI steps:

    Update OpenAI ApiKey in the appsettings.TestTool.json file.

    Screenshot displays the updated OpenAI key.

  8. In the debug dropdown list, select Teams App Test Tool (browser).

    Screenshot shows the option to select the Teams app test tool from the dropdown list.

    Test Tool opens the bot in a webpage.

    Screenshot shows the bot opens the test tool in web page.

Activity triggers

You can mock an activity in Test Tool using activity triggers. There are two types of activity triggers:

Predefined activity triggers

Test Tool provides predefined activity triggers to test the functionalities of your bot.

Category Activity Handler
Trigger Installation Update Activity Install bot


Uninstall bot
onInstallationUpdate
onInstallationUpdateAdded

onInstallationUpdate
onInstallationUpdateRemove
Trigger Conversation Update Activity Add user

Add bot

Add channel
onMembersAdded

onTeamsMembersAddedEvent

onTeamsChannelRenamedEvent
Remove user


Remove bot


Remove channel

Remove team
onMembersRemoved
onTeamsMembersRemovedEvent

onMembersRemoved
onTeamsMembersRemovedEvent

onTeamsChannelDeletedEvent

onTeamsTeamDeletedEvent
Rename channel

Rename team
onTeamsChannelRenamedEvent

onTeamsTeamRenamedEvent

Note

All types of activities aren't available in all scopes. For example, you can't add or remove a channel in a personal chat or a group chat.

Predefined activity triggers are available in the Mock an Activity menu in Test Tool. In this scenario, we're using Add user activity trigger as an example. To mock an Add user activity, follow these steps:

  1. In Visual Studio Code, go to Solution Explorer.

  2. Select the Program.cs file.

  3. In the Program.cs file, under builder.Services.AddTransient<IBot>(sp => add the following code:

    app.OnConversationUpdate("membersAdded", async (context, state, cancellationToken) =>
    {
       await context.SendActivityAsync($"new member added", cancellationToken: cancellationToken);
    });
    

    The OnConversationUpdate handler recognizes the members who join the conversation as described by the Add user activity.

    Screenshot shows the code added to program.cs file for predefined mock activity add user.

  4. In the Test Tool, go to Mock an Activity and select Add user.

    Screenshot shows the add user option under mock an activity.

    A pop-up dialog appears to preview the activity handler.

  5. Select Send activity.

    Screenshot shows the option to send activity for predefined mock activity add user.

    Bot sends a response.

    Screenshot shows the response of predefined mock activity add user.

Custom activity triggers

You can use Custom activity to customize activity trigger reactionsAdded, to fit the requirements of your bot app. Test Tool automatically populates the required properties of the activity. You can also modify the activity type and add more properties such as, MembersAdded, membersremoved, and reactionsremoved.

  1. In Visual Studio Code, go to Solution Explorer.

  2. Select the Program.cs file.

  3. In the Program.cs file, under builder.Services.AddTransient<IBot>(sp => add the following code:

    app.OnMessageReactionsAdded(async (context, state, cancellationToken) =>
    {
       await context.SendActivityAsync($"reaction added.", cancellationToken: cancellationToken);
    });
    

    The OnMessageReactionsAdded handler identifies the reaction to append by using the ReplyToId property of the earlier conversation.

    Screenshot shows the code added to program.cs file for customization on mock activity.

  4. Go to the Test Tool webpage and select the latest response from Log Panel to copy replyToId.

    Screenshot shows the selection of replyToID to copy for customization on mock activity.

  5. Select Mock an Activity > Custom activity.

    Screenshot shows the list of option under mock an activity.

  6. To customize the activity, add messageReaction under the type property.

  7. Replace with the latest replyToId.

    {
      "type": "messageReaction",
      "reactionsAdded": [
        {
          "type": "like"
        }
      ],
      "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47"
    }
    
  8. Select Send activity.

    Screenshot shows the option to send activity after customization on mock activity.

    Bot sends an onReactionsAdded handler in response.

    Screenshot shows the response of custom mock activity.

Limitations

  • Bot features enabled through app manifest aren't available, as Test Tool doesn't process it.

  • Test Tool doesn't support all types of cards except Adaptive Cards.

  • Test Tool doesn't support the following Adaptive Card features:

  • Test Tool doesn't support the following experiences:

    • Mobile
    • Meeting

See also