|
| 1 | +var Plotly = require('@lib/index'); |
| 2 | +var d3 = require('d3'); |
| 3 | + |
| 4 | +var createGraphDiv = require('../assets/create_graph_div'); |
| 5 | +var destroyGraphDiv = require('../assets/destroy_graph_div'); |
| 6 | +var failTest = require('../assets/fail_test'); |
| 7 | + |
| 8 | +describe('Test MathJax:', function() { |
| 9 | + var mathJaxScriptTag; |
| 10 | + |
| 11 | + // N.B. we have to load MathJax "dynamically" as Karam |
| 12 | + // does not undefined the MathJax's `?config=` parameter. |
| 13 | + // |
| 14 | + // Eventually, it might be nice to move these tests in the "regular" test |
| 15 | + // suites, but to do that we'll need to find a way to remove MathJax from |
| 16 | + // page without breaking things downstream. |
| 17 | + beforeAll(function(done) { |
| 18 | + mathJaxScriptTag = document.createElement('script'); |
| 19 | + mathJaxScriptTag.type = 'text/javascript'; |
| 20 | + mathJaxScriptTag.onload = function() { |
| 21 | + require('@src/fonts/mathjax_config')(); |
| 22 | + done(); |
| 23 | + }; |
| 24 | + mathJaxScriptTag.onerror = function() { |
| 25 | + fail('MathJax failed to load'); |
| 26 | + }; |
| 27 | + mathJaxScriptTag.src = '/base/dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG'; |
| 28 | + document.body.appendChild(mathJaxScriptTag); |
| 29 | + }); |
| 30 | + |
| 31 | + describe('Test axis title scoot:', function() { |
| 32 | + var gd; |
| 33 | + |
| 34 | + beforeEach(function() { |
| 35 | + gd = createGraphDiv(); |
| 36 | + }); |
| 37 | + |
| 38 | + afterEach(destroyGraphDiv); |
| 39 | + |
| 40 | + function assertNoIntersect(msg) { |
| 41 | + var gd3 = d3.select(gd); |
| 42 | + var xTitle = gd3.select('.g-xtitle'); |
| 43 | + var xTicks = gd3.selectAll('.xtick > text'); |
| 44 | + |
| 45 | + expect(xTitle.size()).toBe(1, '1 x-axis title'); |
| 46 | + expect(xTicks.size()).toBeGreaterThan(1, 'x-axis ticks'); |
| 47 | + |
| 48 | + var titleTop = xTitle.node().getBoundingClientRect().top; |
| 49 | + |
| 50 | + xTicks.each(function(_, i) { |
| 51 | + var tickBottom = this.getBoundingClientRect().bottom; |
| 52 | + expect(tickBottom).toBeLessThan(titleTop, 'xtick #' + i + ' - ' + msg); |
| 53 | + }); |
| 54 | + } |
| 55 | + |
| 56 | + function testTitleScoot(fig, opts) { |
| 57 | + var xCategories = opts.xCategories; |
| 58 | + |
| 59 | + return Plotly.plot(gd, fig) |
| 60 | + .then(function() { assertNoIntersect('base'); }) |
| 61 | + .then(function() { return Plotly.relayout(gd, 'xaxis.titlefont.size', 40); }) |
| 62 | + .then(function() { assertNoIntersect('large title font size'); }) |
| 63 | + .then(function() { return Plotly.relayout(gd, 'xaxis.titlefont.size', null); }) |
| 64 | + .then(function() { assertNoIntersect('back to base'); }) |
| 65 | + .then(function() { return Plotly.relayout(gd, 'xaxis.tickfont.size', 40); }) |
| 66 | + .then(function() { assertNoIntersect('large title font size'); }) |
| 67 | + .then(function() { return Plotly.relayout(gd, 'xaxis.tickfont.size', null); }) |
| 68 | + .then(function() { assertNoIntersect('back to base 2'); }) |
| 69 | + .then(function() { return Plotly.update(gd, {x: [xCategories]}, {'xaxis.tickangle': 90}); }) |
| 70 | + .then(function() { assertNoIntersect('long tick labels'); }) |
| 71 | + .then(function() { return Plotly.update(gd, {x: [null]}, {'xaxis.tickangle': null}); }) |
| 72 | + .then(function() { assertNoIntersect('back to base 3'); }); |
| 73 | + } |
| 74 | + |
| 75 | + var longCats = ['aaaaaaaaa', 'bbbbbbbbb', 'cccccccc']; |
| 76 | + var texTitle = '$f(x) = \\int_0^\\infty \\psi(t) dt$'; |
| 77 | + var texCats = ['$\\phi$', '$\\nabla \\cdot \\vec{F}$', '$\\frac{\\partial x}{\\partial y}$']; |
| 78 | + var longTexCats = [ |
| 79 | + '$\\int_0^\\infty \\psi(t) dt$', |
| 80 | + '$\\alpha \\int_0^\\infty \\eta(t) dt$', |
| 81 | + '$\\int_0^\\infty \\zeta(t) dt$' |
| 82 | + ]; |
| 83 | + |
| 84 | + it('should scoot x-axis title below x-axis ticks', function(done) { |
| 85 | + testTitleScoot({ |
| 86 | + data: [{ |
| 87 | + y: [1, 2, 1] |
| 88 | + }], |
| 89 | + layout: { |
| 90 | + xaxis: {title: 'TITLE'}, |
| 91 | + width: 500, |
| 92 | + height: 500, |
| 93 | + margin: {t: 100, b: 100, l: 100, r: 100} |
| 94 | + } |
| 95 | + }, { |
| 96 | + xCategories: longCats |
| 97 | + }) |
| 98 | + .catch(failTest) |
| 99 | + .then(done); |
| 100 | + }); |
| 101 | + |
| 102 | + it('should scoot x-axis title (with MathJax) below x-axis ticks', function(done) { |
| 103 | + expect(window.MathJax).toBeDefined(); |
| 104 | + |
| 105 | + testTitleScoot({ |
| 106 | + data: [{ |
| 107 | + y: [1, 2, 1] |
| 108 | + }], |
| 109 | + layout: { |
| 110 | + xaxis: {title: texTitle}, |
| 111 | + width: 500, |
| 112 | + height: 500, |
| 113 | + margin: {t: 100, b: 100, l: 100, r: 100} |
| 114 | + } |
| 115 | + }, { |
| 116 | + xCategories: longCats |
| 117 | + }) |
| 118 | + .catch(failTest) |
| 119 | + .then(done); |
| 120 | + }); |
| 121 | + |
| 122 | + it('should scoot x-axis title below x-axis ticks (with MathJax)', function(done) { |
| 123 | + expect(window.MathJax).toBeDefined(); |
| 124 | + |
| 125 | + testTitleScoot({ |
| 126 | + data: [{ |
| 127 | + x: texCats, |
| 128 | + y: [1, 2, 1] |
| 129 | + }], |
| 130 | + layout: { |
| 131 | + xaxis: {title: 'TITLE'}, |
| 132 | + width: 500, |
| 133 | + height: 500, |
| 134 | + margin: {t: 100, b: 100, l: 100, r: 100} |
| 135 | + } |
| 136 | + }, { |
| 137 | + xCategories: longTexCats |
| 138 | + }) |
| 139 | + .catch(failTest) |
| 140 | + .then(done); |
| 141 | + }); |
| 142 | + |
| 143 | + it('should scoot x-axis title (with MathJax) below x-axis ticks (with MathJax)', function(done) { |
| 144 | + expect(window.MathJax).toBeDefined(); |
| 145 | + |
| 146 | + testTitleScoot({ |
| 147 | + data: [{ |
| 148 | + x: texCats, |
| 149 | + y: [1, 2, 1] |
| 150 | + }], |
| 151 | + layout: { |
| 152 | + xaxis: {title: texTitle}, |
| 153 | + width: 500, |
| 154 | + height: 500, |
| 155 | + margin: {t: 100, b: 100, l: 100, r: 100} |
| 156 | + } |
| 157 | + }, { |
| 158 | + xCategories: longTexCats |
| 159 | + }) |
| 160 | + .catch(failTest) |
| 161 | + .then(done); |
| 162 | + }); |
| 163 | + }); |
| 164 | +}); |
0 commit comments