Join 34,000+ subscribers and receive articles from our blog about software quality, testing, QA and security.
 

[UI Script] Colorize Test Step number box with result status


#1

Based on this request: http://forum.gurock.com/topic/2004/feature-request-colorize-test-step-number-box-with-result-status/

name: Colorize Test Step number box with result status
description: Copies colors from the last test result (if present) to the test description. Also updates colors whenever new result is added
author: Paul Danyliuk
version: 1.0
includes: ^tests/view
excludes:

js:
$(document).ready(function() {

  var updateStepsColors = function() {

    // Get number labels from the last (topmost) steps in the history
    var lastSteps = $(".change:first-of-type .steps .step-index-inner");

    // If no last steps found, do nothing
    if (lastSteps.length == 0) {
      return;
    }

    // Get number labels for the steps that need to be colorized
    var mainSteps = $(".field-content .steps .step-index-inner");

    // And copy the style (colors) over from the last steps to the main ones
    for (var i = 0; i < lastSteps.length; i++) {
      $(mainSteps[i]).attr('style', $(lastSteps[i]).attr('style'));
    }
  };

  // Call this as soon as the page loads
  updateStepsColors();

  // And call this whenever result is added
  $.subscribe('tests.changed', 'recolorize', function (data) {
    updateStepsColors();
  });

});

The colors are updated when you add a new result.
Here’s how it will look:

With best regards,
~Actine


#2

Thanks again for taking the time to implement this, this looks really useful!

Regards,
Tobias