Solution strategy

Taxonomy strategy

Some steps from a mapping study were used to combine with systematic review

Framework strategy

Approaches

Every element it's in the same position, with the same length and if it's working according to the behavior expected in the code.

Detect if ...

Something was change related to essential concepts in visual analytics, like channel and marks linked to an interaction, e.g:

If when the user is hovering over some element and this one is red instead of blue (supposing blue was the style defined at the beginning).

Also, detecting if a filter is failing using the same data, maybe due to a new change, ignoring some datum. This is the strategy with more sense in the project case.

Strategy

Taxonomy 

SEI Taxonomy

7 categories

200 testing types

Study selection

Result

Result

BackViz design

Tools choice

• Open source

• Cover entire flow  of VRT

Percy

Tools choice

Cucumber understands the language Gherkin. It is a Business Readable, Domain Specific Language that lets you describe software's behavior.

Gherkin serves two purposes — documentation and automated tests.

Obtained results

Feature: Barchart

  Scenario: Hover a bar
    Given I have my app "http://localhost:7000/"
    And I have ".bar" class
    And I have some devices
    |   label  | width | height |
    |   phone  | 320   |    480 |
    |   tablet | 1024  |    768 |
    When I "hover"
    Then I check "color"


  Scenario: Check all data
    Given I have my app "http://localhost:7000/"
    And I have some devices
    |   label  | width | height |
    |   phone  | 320   |    480 |
    |   tablet | 1024  |    768 |
    Then I check "all"

1. Color hover
2. Data

Result

Result

Obtained results

Feature: Scatterplot

  Scenario: Click a dot
    Given I have my app "http://localhost:8000/"
    And I have ".dot" class
    And I have some devices
    |   label  | width | height |
    |   phone  | 320   |    480 |
    |   tablet | 1024  |    768 |
    When I "hover"
    Then I check "embeded" 

  Scenario: Check all data
    Given I have my app "http://localhost:8000/"
    And I have some devices
    |   label  | width | height |
    |   phone  | 320   |    480 |
    |   tablet | 1024  |    768 |
    Then I check "all"

1. Color
2. Shape
3. Data

Obtained results

Without changes

Obtained results

Color changes

// setup fill color
var cValue = function(d) { return d.Manufacturer;},
    color = d3.scale.category20();

Shape changes

      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true

Less data

Obtained results

Feature: Tree

  Scenario: Drag a node
    Given I have my app "http://localhost:8000/"
    And I have ".nodeCircle" class
    And I have some devices
    |   label  | width | height |
    |   phone  | 320   |    480 |
    |   tablet | 1024  |    768 |
    When I "drag"
    Then I check "position" 

  Scenario: Click a node
    Given I have my app "http://localhost:8000/"
    And I have ".nodeCircle" class
    And I have some devices
    |   label  | width | height |
    |   phone  | 320   |    480 |
    |   tablet | 1024  |    768 |
    When I "click"
    Then I check "expand"

1. Click
2. Drag

Click

Obtained results

Drag and drop

Some issues

Chromy

• Cookies
• Zombie chrome-headless instances

Some issues

Drag and drop implementation

//Llamamos a la libreria de casper
var casper = require("casper").create({
    viewportSize: {
        width: 1024,
        height: 768
    }
});
 
casper.start('http://localhost:9000', function() {    
    this.wait(2000);
    this.capture('before.png');    
    this.mouse.down(400, 550);

       this.mouse.move(850, 650);
}).then(function() {
    this.mouse.up(910, 700);
}).then(function() {
    this.capture('after.png');
    });
 
casper.run();

Slimer

casperjs dragndrop.js

before

after

BackViz!

Bibliography

Bibliography