title | author | description | ms.localizationpriority | ms.topic | ms.author | ms.date |
---|---|---|---|---|---|---|
Debug Bot with Teams App Test Tool |
v-ganr |
Learn how to build, configure, and deploy bot using Teams App Test Tool in Visual Studio, and to mock an activity using predefined and custom activity triggers. |
medium |
overview |
surbhigupta |
02/13/2024 |
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:
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/test-tool-sample-app-output-vs.png" alt-text="Screenshot shows the Teams App Test Tool Adaptive Card." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/test-tool-sample-app-output-vs.png":::
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.
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 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:
-
Open Visual Studio.
-
Select Create a new project.
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/create-new-project-vs.png" alt-text="Screenshot shows the selection to create a new project.":::
-
In the search box, enter Microsoft Teams. From the search results, select Microsoft Teams App.
-
Select Next.
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/new-project-template-vs.png" alt-text="Screenshot shows the selection of templates to create a new project.":::
-
Enter Project name and select Create.
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/project-name-vs.png" alt-text="Screenshot shows the option to enter the project name.":::
-
Select AI Chat Bot > Create.
[!NOTE]
- OpenAI or Azure OpenAI are the prerequisite to debug AI Chat Bot app.
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/project-teams-application-vs.png" alt-text="Screenshot shows the selection of Teams application to create a new project.":::
A GettingStarted window appears.
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/project-get-started-vs.png" alt-text="Screenshot shows the get started page of the application in Visual Studio." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/project-get-started-vs.png":::
-
The
appsettings.TestTool.json
file helps to configure the Test Tool by updating few parameters. To updateappsettings.TestTool.json
file, follow either OpenAI or Azure OpenAI steps:Update OpenAI
ApiKey
in theappsettings.TestTool.json
file.:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/app-seetings-test-tool.png" alt-text="Screenshot displays the updated OpenAI key.":::
-
Update Azure
OpenAIApiKey
andOpenAIEndpoint
in theappsettings.TestTool.json
file.:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/app-seetings-test-tool-azureAI.png" alt-text="Screenshot displays the updated OpenAI key and endpoint for Azure.":::
-
Replace model name with Azure OpenAI model deployment name in
Program.cs
file.:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/azure-openai-model-deployment-name.png" alt-text="Screenshot shows the AzureOpenAI model deployement name updated.":::
-
-
In the debug dropdown list, select Teams App Test Tool (browser).
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/app-test-tool.png" alt-text="Screenshot shows the option to select the Teams app test tool from the dropdown list.":::
Test Tool opens the bot in a webpage.
:::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/test-tool.png" alt-text="Screenshot shows the bot opens the test tool in web page." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/debug-test-tool-vs.png":::
You can mock an activity in Test Tool using activity triggers. There are two types of 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:
-
In Visual Studio Code, go to Solution Explorer.
-
Select the Program.cs file.
-
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.:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/add-a-user-code-vs.png" alt-text="Screenshot shows the code added to program.cs file for predefined mock activity add user.":::
-
In the Test Tool, go to Mock an Activity and select Add user.
:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/add-user-vs.png" alt-text="Screenshot shows the add user option under mock an activity.":::
A pop-up dialog appears to preview the activity handler.
-
Select Send activity.
:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/add-a-user-request-vs.png" alt-text="Screenshot shows the option to send activity for predefined mock activity add user.":::
Bot sends a response.
:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/add-a-user-response-vs.png" alt-text="Screenshot shows the response of predefined mock activity add user.":::
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
.
-
In Visual Studio Code, go to Solution Explorer.
-
Select the Program.cs file.
-
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 theReplyToId
property of the earlier conversation.:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/custom-activity-code-vs.png" alt-text="Screenshot shows the code added to program.cs file for customization on mock activity.":::
-
Go to the Test Tool webpage and select the latest response from Log Panel to copy
replyToId
.:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/custom-activity-reply-to-do.png" alt-text="Screenshot shows the selection of replyToID to copy for customization on mock activity.":::
-
Select Mock an Activity > Custom activity.
:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/mock-activity-vs.png" alt-text="Screenshot shows the list of option under mock an activity.":::
-
To customize the activity, add
messageReaction
under thetype
property. -
Replace with the latest
replyToId
.{ "type": "messageReaction", "reactionsAdded": [ { "type": "like" } ], "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47" }
-
Select Send activity.
:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/custom-activity-request-vs.png" alt-text="Screenshot shows the option to send activity after customization on mock activity.":::
Bot sends an
onReactionsAdded
handler in response.:::image type="content" source="../../assets/images/teams-toolkit-v2/debug-VS/custom-activity-response-vs.png" alt-text="Screenshot shows the response of custom mock activity.":::
-
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