Linking to story cards in project management tools from Twist reports

In this blog post, I will explain another useful example of Twist's customized HTML reports. Usually test scenarios are associated with story cards. Twist simplifies this by allowing scenarios to be tagged to stories.

This can be done by adding story number tags to the scenario. For example, if a scenario is associated to card #10, you can tag “#10” on the Twist scenario (#10 is used by convention. You can use any thing for representing an issue/story card). You can now customize Twist HTML reports and when Twist encounters tags like “#10” they can be linked to the story card or issue page in your project management tool.

In this blog post, we will use Mingle, however this approach will work for any project management tool.

Mingle cards follow a URL format like, "http://mingle.yourdomain.com/projects/projectname/cards/10". We will modify the report template on a Twist project and add the following code to "index.html".

window.twist.onScenarioDisplayed = function(scenario) {
  initLightbox();
  linkTagsToMingleCard();
}

"linkTagsToMingleCard()" will find the “tags” HTML element, loop through all the tags and link it if the tag starts with a '#' character.

function linkTagsToMingleCard() {
      // Default report renderer puts tags in a div with id "tagsHolder" and each tag is in a li
      $('#tagsHolder').find('li').each(function(index, value) {
          var tag = $(value).text();
          if (tag.length > 0 && tag[0] == '#') {
             var a = document.createElement('a');
             a.setAttribute('href', 'http://www.yourdomain.com/projects/projectname/cards/' + tag.replace('#', ''));
             a.appendChild(document.createTextNode(tag));
             
             $(value).empty();
             $(value).append(a);
          }
      });
}

In this way, you can customize HTML reports by adding relevant, additional information to them.

See what's new in Twist 13.1 on our community site or Try Twist now.