Skip to content

Second jasmine test to lock issue 3101 #3195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 1, 2018
Merged

Second jasmine test to lock issue 3101 #3195

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 60 additions & 22 deletions test/jasmine/tests/parcoords_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,23 @@ function purgeGraphDiv(done) {
return delay(50)().then(done);
}

function getAvgPixelByChannel(id) {
var canvas = d3.select(id).node();

var imgData = readPixel(canvas, 0, 0, canvas.width, canvas.height);
var n = imgData.length * 0.25;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A minor change here:
instead of dividing by 4, we use multiply by 0.25 so that we return rgb fractions and avoid possibility of rounding small values to 0.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't cause problems but... is there actually a difference between these in js? anyway n should always be an integer, right?

plotly.js/test/jasmine/assets/read_pixel.js

Line 11 in 458f593

var pixels = new Uint8Array(4 * w * h);

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm curious. Can you share an example of this happening in JS?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(am I missing something? why didn't that link get turned into a code snippet?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are totally right and I tested this on IE, FF and Chrome too.
In JS there is actually no difference in JS between multiplying by 0.25.
Thanks for the note.

Copy link
Contributor

@etpinard etpinard Nov 1, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(am I missing something? why didn't that link get turned into a code snippet?)

image

it's rendering fine now. I'll blame that hiccup on Microsoft.

Thanks for the note.

Thank you for double checking!

var r = 0;
var g = 0;
var b = 0;

for(var i = 0; i < imgData.length; i++) {
r += imgData[i++];
g += imgData[i++];
b += imgData[i++];
}
return [r / n, g / n, b / n];
}

describe('parcoords initialization tests', function() {

'use strict';
Expand Down Expand Up @@ -799,22 +816,39 @@ describe('parcoords Lifecycle methods', function() {
});
});

it('@gl line.color `Plotly.restyle` should work', function(done) {
function getAvgPixelByChannel() {
var canvas = d3.select('.gl-canvas-focus').node();
var imgData = readPixel(canvas, 0, 0, canvas.width, canvas.height);
var n = imgData.length / 4;
var r = 0;
var g = 0;
var b = 0;

for(var i = 0; i < imgData.length; i++) {
r += imgData[i++];
g += imgData[i++];
b += imgData[i++];
}
return [r / n, g / n, b / n];
}
it('@gl line.color `Plotly.restyle` should change focus layer', function(done) {
var testLayer = '.gl-canvas-focus';
Plotly.plot(gd, [{
type: 'parcoords',
dimensions: [{
values: [1, 2]
}, {
values: [2, 4]
}],
line: {color: 'blue'}
}], {
width: 300,
height: 200
})
.then(function() {
var rgb = getAvgPixelByChannel(testLayer);
expect(rgb[0]).toBe(0, 'no red');
expect(rgb[2]).not.toBe(0, 'all blue');

return Plotly.restyle(gd, 'line.color', 'red');
})
.then(function() {
var rgb = getAvgPixelByChannel(testLayer);
expect(rgb[0]).not.toBe(0, 'all red');
expect(rgb[2]).toBe(0, 'no blue');
})
.catch(failTest)
.then(done);
});

it('@gl line.color `Plotly.restyle` should not change context layer', function(done) {
var testLayer = '.gl-canvas-context';
var old_rgb, new_rgb;

Plotly.plot(gd, [{
type: 'parcoords',
Expand All @@ -829,16 +863,20 @@ describe('parcoords Lifecycle methods', function() {
height: 200
})
.then(function() {
var rbg = getAvgPixelByChannel();
expect(rbg[0]).toBe(0, 'no red');
expect(rbg[2]).not.toBe(0, 'all blue');
var rgb = getAvgPixelByChannel(testLayer);
old_rgb = rgb[0] + rgb[1] + rgb[2] / 3.0;
expect(old_rgb).toBeGreaterThan(0, 'not all black');
expect(old_rgb).toBeLessThan(255, 'not all white');

return Plotly.restyle(gd, 'line.color', 'red');
})
.then(function() {
var rbg = getAvgPixelByChannel();
expect(rbg[0]).not.toBe(0, 'all red');
expect(rbg[2]).toBe(0, 'no blue');
var rgb = getAvgPixelByChannel(testLayer);
new_rgb = rgb[0] + rgb[1] + rgb[2] / 3.0;
expect(new_rgb).toBeGreaterThan(0, 'not all black');
expect(new_rgb).toBeLessThan(255, 'not all white');

expect(new_rgb).toBe(old_rgb, 'no change to context');
})
.catch(failTest)
.then(done);
Expand Down