X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=auto_tests%2Ftests%2Fcss.js;h=b1c96de33f6d30c31f93dc2204c200bbba39b857;hb=refs%2Ftags%2Fv2.0.0;hp=9348f494295e6b844b2608cd99a7aba1da5b3da7;hpb=319d0361d2e512ed8049dfedffd79254e491201c;p=dygraphs.git
diff --git a/auto_tests/tests/css.js b/auto_tests/tests/css.js
index 9348f49..b1c96de 100644
--- a/auto_tests/tests/css.js
+++ b/auto_tests/tests/css.js
@@ -4,36 +4,41 @@
* @fileoverview Regression test based on some strange customBars data.
* @author danvk@google.com (Dan Vanderkam)
*/
-var CssTestCase = TestCase("css");
+
+import Dygraph from '../../src/dygraph';
+
+describe("css", function() {
+
+cleanupAfterEach();
var data = "X,Y,Z\n1,2,3\n4,5,6\n";
var styleSheet;
-CssTestCase.prototype.setUp = function() {
- document.body.innerHTML = "";
+beforeEach(function() {
styleSheet = document.createElement("style");
styleSheet.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheet);
-};
+});
-CssTestCase.prototype.tearDown = function() {
-};
+afterEach(function() {
+ styleSheet.innerHTML = '';
+});
// Verifies that an unstyled, unsized dygraph gets a default size.
-CssTestCase.prototype.testDefaultSize = function() {
+it('testDefaultSize', function() {
var opts = {
};
var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);
- assertEquals(480, graph.offsetWidth);
- assertEquals(320, graph.offsetHeight);
- assertEquals({width: 480, height: 320}, g.size());
-};
+ assert.equal(480, graph.offsetWidth);
+ assert.equal(320, graph.offsetHeight);
+ assert.deepEqual({width: 480, height: 320}, g.size());
+});
// Verifies that the width/height parameters work.
-CssTestCase.prototype.testExplicitParamSize = function() {
+it('testExplicitParamSize', function() {
var opts = {
width: 640,
height: 480
@@ -41,13 +46,13 @@ CssTestCase.prototype.testExplicitParamSize = function() {
var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);
- assertEquals(640, graph.offsetWidth);
- assertEquals(480, graph.offsetHeight);
- assertEquals({width: 640, height: 480}, g.size());
-};
+ assert.equal(640, graph.offsetWidth);
+ assert.equal(480, graph.offsetHeight);
+ assert.deepEqual({width: 640, height: 480}, g.size());
+});
// Verifies that setting a style on the div works.
-CssTestCase.prototype.testExplicitStyleSize = function() {
+it('testExplicitStyleSize', function() {
var opts = {
};
var graph = document.getElementById("graph");
@@ -55,13 +60,13 @@ CssTestCase.prototype.testExplicitStyleSize = function() {
graph.style.height = '400px';
var g = new Dygraph(graph, data, opts);
- assertEquals(600, graph.offsetWidth);
- assertEquals(400, graph.offsetHeight);
- assertEquals({width: 600, height: 400}, g.size());
-};
+ assert.equal(600, graph.offsetWidth);
+ assert.equal(400, graph.offsetHeight);
+ assert.deepEqual({width: 600, height: 400}, g.size());
+});
// Verifies that CSS pixel styles on the div trump explicit parameters.
-CssTestCase.prototype.testPixelStyleWins = function() {
+it('testPixelStyleWins', function() {
var opts = {
width: 987,
height: 654
@@ -71,30 +76,31 @@ CssTestCase.prototype.testPixelStyleWins = function() {
graph.style.height = '400px';
var g = new Dygraph(graph, data, opts);
- assertEquals(600, graph.offsetWidth);
- assertEquals(400, graph.offsetHeight);
- assertEquals({width: 600, height: 400}, g.size());
-};
+ assert.equal(600, graph.offsetWidth);
+ assert.equal(400, graph.offsetHeight);
+ assert.deepEqual({width: 600, height: 400}, g.size());
+});
// Verifies that a CSS percentage size works.
-CssTestCase.prototype.testPercentageSize = function() {
- document.body.innerHTML =
+it('testPercentageSize', function() {
+ var testdiv = document.getElementById("graph");
+ testdiv.innerHTML =
'';
+ '';
var opts = {
};
- var graph = document.getElementById("graph");
+ var graph = document.getElementById("inner-graph");
graph.style.width = '50%';
graph.style.height = '50%';
var g = new Dygraph(graph, data, opts);
- assertEquals(300, graph.offsetWidth);
- assertEquals(200, graph.offsetHeight);
- assertEquals({width: 300, height: 200}, g.size());
-};
+ assert.equal(300, graph.offsetWidth);
+ assert.equal(200, graph.offsetHeight);
+ assert.deepEqual({width: 300, height: 200}, g.size());
+});
// Verifies that a CSS class size works.
-CssTestCase.prototype.testClassPixelSize = function() {
+it('testClassPixelSize', function() {
styleSheet.innerHTML = '.chart { width: 456px; height: 345px; }';
var opts = {
@@ -102,47 +108,46 @@ CssTestCase.prototype.testClassPixelSize = function() {
var graph = document.getElementById("graph");
graph.className = "chart";
var g = new Dygraph(graph, data, opts);
- assertEquals(456, graph.offsetWidth);
- assertEquals(345, graph.offsetHeight);
- assertEquals({width: 456, height: 345}, g.size());
-};
+ assert.equal(456, graph.offsetWidth);
+ assert.equal(345, graph.offsetHeight);
+ assert.deepEqual({width: 456, height: 345}, g.size());
+});
// An invisible chart div shouldn't produce an error.
-CssTestCase.prototype.testInvisibleChart = function() {
- document.body.innerHTML =
+it('testInvisibleChart', function() {
+ graph.innerHTML =
'';
- var graph = document.getElementById("graph");
- g = new Dygraph(graph, data, {});
-};
+ new Dygraph('inner-graph', data, {});
+});
// An invisible chart div shouldn't produce an error.
-CssTestCase.prototype.testInvisibleChartDate = function() {
- document.body.innerHTML =
+it('testInvisibleChartDate', function() {
+ graph.innerHTML =
'';
- var graph = document.getElementById("graph");
- g = new Dygraph(graph,
+ new Dygraph('inner-graph',
"Date,Y\n" +
"2010/01/01,100\n" +
"2010/02/01,200\n" +
"2010/03/01,300\n" +
"2010/04/01,400\n" +
"2010/05/01,300\n" +
- "2010/06/01,100\n"
- , {});
-};
+ "2010/06/01,100\n",
+ {});
+});
// An invisible chart div that becomes visible.
-CssTestCase.prototype.testInvisibleThenVisibleChart = function() {
- document.body.innerHTML =
+it('testInvisibleThenVisibleChart', function() {
+ var testdiv = document.getElementById("graph");
+ testdiv.innerHTML =
'';
- var graph = document.getElementById("graph");
- g = new Dygraph(graph,
+ var graph = document.getElementById("inner-graph");
+ var g = new Dygraph(graph,
"Date,Y\n" +
"2010/01/01,100\n" +
"2010/02/01,200\n" +
@@ -160,15 +165,15 @@ CssTestCase.prototype.testInvisibleThenVisibleChart = function() {
// or visibility so we need to let it know ourselves.
g.resize();
- assertEquals(640, graph.offsetWidth);
- assertEquals(480, graph.offsetHeight);
- assertEquals({width: 640, height: 480}, g.size());
-};
+ assert.equal(640, graph.offsetWidth);
+ assert.equal(480, graph.offsetHeight);
+ assert.deepEqual({width: 640, height: 480}, g.size());
+});
// Verifies that a div resize gets picked up.
/*
this one isn't quite ready yet.
-CssTestCase.prototype.testDivResize = function() {
+it('testDivResize', function() {
var opts = {
};
var graph = document.getElementById("graph");
@@ -176,14 +181,16 @@ CssTestCase.prototype.testDivResize = function() {
graph.style.height = '480px';
var g = new Dygraph(graph, data, opts);
- assertEquals(640, graph.offsetWidth);
- assertEquals(480, graph.offsetHeight);
- assertEquals({width: 640, height: 480}, g.size());
+ assert.equal(640, graph.offsetWidth);
+ assert.equal(480, graph.offsetHeight);
+ assert.deepEqual({width: 640, height: 480}, g.size());
graph.style.width = '650px';
graph.style.height = '490px';
- assertEquals(650, graph.offsetWidth);
- assertEquals(490, graph.offsetHeight);
- assertEquals({width: 650, height: 490}, g.size());
-};
+ assert.equal(650, graph.offsetWidth);
+ assert.equal(490, graph.offsetHeight);
+ assert.deepEqual({width: 650, height: 490}, g.size());
+});
*/
+
+});