You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/05/08 14:28:50 UTC

[echarts] branch enhance-visual-regression-test updated (2aaed11 -> 2e7feb5)

This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a change to branch enhance-visual-regression-test
in repository https://gitbox.apache.org/repos/asf/echarts.git.


    from 2aaed11  test(visual): fix no action will freeze the cli
     new f0e96fe  test(visual): fix cases that using async loading
     new 2e7feb5  test(visual): optimize case reload

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 test/bar-race.html                     | 196 ++++++++++++++++-----------------
 test/force2.html                       | 106 +++++++++---------
 test/line.html                         |   2 +-
 test/lines-remove.html                 |   6 +-
 test/runTest/blacklist.js              |   5 +-
 test/runTest/runtime/ActionPlayback.js |   3 +
 test/runTest/runtime/main.js           |   5 +-
 test/scatter-stream-not-large.html     |   9 +-
 8 files changed, 162 insertions(+), 170 deletions(-)

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 01/02: test(visual): fix cases that using async loading

Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch enhance-visual-regression-test
in repository https://gitbox.apache.org/repos/asf/echarts.git

commit f0e96fe42f9dffeddbd71316bde8c48d791db6be
Author: pissang <bm...@gmail.com>
AuthorDate: Sat May 8 22:12:00 2021 +0800

    test(visual): fix cases that using async loading
---
 test/bar-race.html                 | 196 ++++++++++++++++++-------------------
 test/force2.html                   | 106 ++++++++++----------
 test/line.html                     |   2 +-
 test/lines-remove.html             |   6 +-
 test/runTest/blacklist.js          |   5 +-
 test/scatter-stream-not-large.html |   9 +-
 6 files changed, 156 insertions(+), 168 deletions(-)

diff --git a/test/bar-race.html b/test/bar-race.html
index 22b7ab2..12cb520 100644
--- a/test/bar-race.html
+++ b/test/bar-race.html
@@ -59,125 +59,117 @@ under the License.
 
         <script>
 
-        require(['echarts'],
-            function (echarts) {
-
-                function loadLifeData(cb) {
-                    $.getJSON('data/life-expectancy-table.json', function (data) {
-                        cb(data);
-                    })
+        require([
+            'echarts',
+            'data/life-expectancy-table.json'
+        ], function (echarts, data) {
+            var chart = echarts.init(document.getElementById('main1'), null, {
+                // renderer: 'svg'
+            });
+
+            var updateFrequency = 5000;
+            var dimension = 1;
+
+            var years = [];
+            for (var i = 0; i < data.length; ++i) {
+                if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
+                    years.push(data[i][4]);
                 }
+            }
 
-                var chart = echarts.init(document.getElementById('main1'), null, {
-                    // renderer: 'svg'
-                });
-
-                var updateFrequency = 5000;
-                var dimension = 1;
-
-                loadLifeData(function (data) {
-                    var years = [];
-                    for (var i = 0; i < data.length; ++i) {
-                        if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
-                            years.push(data[i][4]);
+            var option = {
+                grid: {
+                    left: 150,
+                    right: 150
+                },
+                xAxis: {
+                    max: 'dataMax',
+                    label: {
+                        formatter: function (n) {
+                            return Math.round(n);
                         }
                     }
-
-                    var option = {
-                        grid: {
-                            left: 150,
-                            right: 150
-                        },
-                        xAxis: {
-                            max: 'dataMax',
-                            label: {
-                                formatter: function (n) {
-                                    return Math.round(n);
-                                }
-                            }
-                        },
-                        dataset: {
-                            source: data.slice(1).filter(d => {
-                                return d[4] === 1800;
-                            })
+                },
+                dataset: {
+                    source: data.slice(1).filter(d => {
+                        return d[4] === 1800;
+                    })
+                },
+                yAxis: {
+                    type: 'category',
+                    inverse: true,
+                    max: 10,
+                    axisLabel: {
+                        show: true
+                    },
+                    animationDuration: 300,
+                    animationDurationUpdate: 300
+                },
+                series: [{
+                    realtimeSort: true,
+                    seriesLayoutBy: 'column',
+                    type: 'bar',
+                    encode: {
+                        x: dimension,
+                        y: 3
+                    },
+                    label: {
+                        show: true,
+                        position: 'right',
+                        formatter: function (param) {
+                            return param.value[dimension];
                         },
-                        yAxis: {
-                            type: 'category',
-                            inverse: true,
-                            max: 10,
-                            axisLabel: {
-                                show: true
-                            },
-                            animationDuration: 300,
-                            animationDurationUpdate: 300
+                        valueAnimation: true,
+                        fontFamily: 'monospace'
+                    }
+                }],
+                animationDurationUpdate: updateFrequency,
+                animationEasing: 'linear',
+                animationEasingUpdate: 'linear',
+                graphic: {
+                    elements: [{
+                        type: 'text',
+                        right: 160,
+                        bottom: 60,
+                        style: {
+                            text: '1960',
+                            font: 'bolder 80px monospace',
+                            fill: 'rgba(100, 100, 100, 0.25)'
                         },
-                        series: [{
-                            realtimeSort: true,
-                            seriesLayoutBy: 'column',
-                            type: 'bar',
-                            encode: {
-                                x: dimension,
-                                y: 3
-                            },
-                            label: {
-                                show: true,
-                                position: 'right',
-                                formatter: function (param) {
-                                    return param.value[dimension];
-                                },
-                                valueAnimation: true,
-                                fontFamily: 'monospace'
-                            }
-                        }],
-                        animationDurationUpdate: updateFrequency,
-                        animationEasing: 'linear',
-                        animationEasingUpdate: 'linear',
-                        graphic: {
-                            elements: [{
-                                type: 'text',
-                                right: 160,
-                                bottom: 60,
-                                style: {
-                                    text: '1960',
-                                    font: 'bolder 80px monospace',
-                                    fill: 'rgba(100, 100, 100, 0.25)'
-                                },
-                                z: 100
-                            }]
-                        }
-                    };
+                        z: 100
+                    }]
+                }
+            };
 
-                    // console.log(option);
-                    chart.setOption(option);
+            // console.log(option);
+            chart.setOption(option);
 
-                    for (var i = 1; i < years.length; ++i) {
-                        (function (i) {
-                            setTimeout(function () {
-                                updateYear(years[i + 1]);
-                            }, (i - 1) * updateFrequency);
-                        })(i);
-                    }
+            for (var i = 1; i < years.length; ++i) {
+                (function (i) {
+                    setTimeout(function () {
+                        updateYear(years[i + 1]);
+                    }, (i - 1) * updateFrequency);
+                })(i);
+            }
 
-                    function updateYear(year) {
-                        var source = data.slice(1).filter(d => {
-                            return d[4] === year;
-                        });
-                        option.series[0].data = source;
-                        option.graphic.elements[0].style.text = year;
-                        chart.setOption(option);
-                    }
+            function updateYear(year) {
+                var source = data.slice(1).filter(d => {
+                    return d[4] === year;
                 });
-
+                option.series[0].data = source;
+                option.graphic.elements[0].style.text = year;
+                chart.setOption(option);
             }
-
-        );
+        });
         </script>
 
 
 
         <script>
 
-        require(['echarts'],
+        require([
+            'echarts'
+        ],
             function (echarts) {
                 var chart = echarts.init(document.getElementById('main2'), null, {
                 });
diff --git a/test/force2.html b/test/force2.html
index 7b969ab..0620bc6 100644
--- a/test/force2.html
+++ b/test/force2.html
@@ -39,67 +39,65 @@ under the License.
 
             require([
                 'echarts',
-
-                'extension/dataTool'
-            ], function (echarts, dataTool) {
+                'extension/dataTool',
+                './data/les-miserables.gexf'
+            ], function (echarts, dataTool, xml) {
 
                 var gexf = dataTool.gexf;
 
                 var chart = echarts.init(document.getElementById('main'));
 
-                $.get('./data/les-miserables.gexf', function (xml) {
-                    var graph = gexf.parse(xml);
-                    var categories = [];
-                    for (var i = 0; i < 9; i++) {
-                        categories[i] = {
-                            name: '类目' + i
-                        };
-                    }
-                    graph.nodes.forEach(function (node) {
-                        node.itemStyle = null;
-                        node.symbolSize = 10;
-                        node.value = node.symbolSize;
-                        node.label = {
-                            normal: {
-                                show: node.symbolSize > 30
-                            }
-                        };
-                        node.category = node.attributes['modularity_class'];
-                        node.x = node.y = null;
-                    });
-                    chart.setOption({
-                        legend: [{
-                            // selectedMode: 'single',
-                            data: categories.map(function (a) {
-                                return a.name;
-                            })
-                        }],
-                        animationDurationUpdate: 1500,
-                        animationEasingUpdate: 'quinticInOut',
-                        series : [
-                            {
-                                name: 'Les Miserables',
-                                type: 'graph',
-                                layout: 'force',
-                                data: graph.nodes,
-                                links: graph.links,
-                                categories: categories,
-                                animation: false,
-                                roam: true,
-                                draggable: true,
-                                edgeSymbol: ['none', 'arrow'],
-                                edgeSymbolSize: 5,
-                                force: {
-                                    repulsion: [0, 100]
-                                },
-                                label: {
-                                    normal: {
-                                        position: 'right'
-                                    }
+                var graph = gexf.parse(xml);
+                var categories = [];
+                for (var i = 0; i < 9; i++) {
+                    categories[i] = {
+                        name: '类目' + i
+                    };
+                }
+                graph.nodes.forEach(function (node) {
+                    node.itemStyle = null;
+                    node.symbolSize = 10;
+                    node.value = node.symbolSize;
+                    node.label = {
+                        normal: {
+                            show: node.symbolSize > 30
+                        }
+                    };
+                    node.category = node.attributes['modularity_class'];
+                    node.x = node.y = null;
+                });
+                chart.setOption({
+                    legend: [{
+                        // selectedMode: 'single',
+                        data: categories.map(function (a) {
+                            return a.name;
+                        })
+                    }],
+                    animationDurationUpdate: 1500,
+                    animationEasingUpdate: 'quinticInOut',
+                    series : [
+                        {
+                            name: 'Les Miserables',
+                            type: 'graph',
+                            layout: 'force',
+                            data: graph.nodes,
+                            links: graph.links,
+                            categories: categories,
+                            animation: false,
+                            roam: true,
+                            draggable: true,
+                            edgeSymbol: ['none', 'arrow'],
+                            edgeSymbolSize: 5,
+                            force: {
+                                repulsion: [0, 100]
+                            },
+                            label: {
+                                normal: {
+                                    position: 'right'
                                 }
                             }
-                        ]
-                    });
+                        }
+                    ]
                 });
             });
         </script>
diff --git a/test/line.html b/test/line.html
index 5c23b7b..5312225 100644
--- a/test/line.html
+++ b/test/line.html
@@ -217,7 +217,7 @@ under the License.
                         name: 'line4',
                         type: 'line',
                         stack: 'all',
-                        symbol: 'image://https://echarts.apache.org/zh/images/logo.png',
+                        symbol: 'image://asset/echarts-logo.png',
                         symbolKeepAspect: true,
                         symbolSize: 40,
                         data: data1,
diff --git a/test/lines-remove.html b/test/lines-remove.html
index 0c1315c..8902527 100644
--- a/test/lines-remove.html
+++ b/test/lines-remove.html
@@ -40,9 +40,8 @@ under the License.
 
             require([
                 'echarts',
-                'extension/bmap'
-            ], function (echarts) {
-                $.get('./data/map/json/china.json', function (json) {
+                './data/map/json/china.json'
+            ], function (echarts, json) {
                     echarts.registerMap('china', json);
 
                     var myChart = echarts.init(document.getElementById('main'));
@@ -343,7 +342,6 @@ under the License.
                         },
                         series: series
                     });
-                });
             });
 
         </script>
diff --git a/test/runTest/blacklist.js b/test/runTest/blacklist.js
index f5a030e..5b6a2f4 100644
--- a/test/runTest/blacklist.js
+++ b/test/runTest/blacklist.js
@@ -25,12 +25,15 @@ module.exports.blacklist = [
     'lines-ny-appendData.html',
     'linesGL-ny-appendData.html',
     'richText.html',
-    'tmp-base.html',
 
     'finished-gl.html',
     'scatter-gps.html',
     'webkit-dep.html',
 
+    // For test
+    'canvas-replay.html',
+    'tmp-base.html',
+
     // Mobile
     'mobileBench.html',
     'touch-test.html',
diff --git a/test/scatter-stream-not-large.html b/test/scatter-stream-not-large.html
index 97c3a37..677eda2 100644
--- a/test/scatter-stream-not-large.html
+++ b/test/scatter-stream-not-large.html
@@ -43,10 +43,9 @@ under the License.
         var ys = [4368000, 4537000];
 
         require([
-            'echarts'
-        ], function (echarts) {
-
-            $.get('./data/map/json/world.json', function (worldJson) {
+            'echarts',
+            './data/map/json/world.json'
+        ], function (echarts, worldJson) {
                 echarts.registerMap('world', worldJson);
 
                 var count = 35663;
@@ -160,8 +159,6 @@ under the License.
                 chart.on('finished', function () {
                     console.log('finished');
                 });
-
-            });
         });
 
         </script>

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 02/02: test(visual): optimize case reload

Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

shenyi pushed a commit to branch enhance-visual-regression-test
in repository https://gitbox.apache.org/repos/asf/echarts.git

commit 2e7feb59ec9283d90f3470b7bc35bc1e2bfd2636
Author: pissang <bm...@gmail.com>
AuthorDate: Sat May 8 22:27:43 2021 +0800

    test(visual): optimize case reload
---
 test/runTest/runtime/ActionPlayback.js | 3 +++
 test/runTest/runtime/main.js           | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/test/runTest/runtime/ActionPlayback.js b/test/runTest/runtime/ActionPlayback.js
index a7de86b..8ca6777 100644
--- a/test/runTest/runtime/ActionPlayback.js
+++ b/test/runTest/runtime/ActionPlayback.js
@@ -153,6 +153,9 @@ export class ActionPlayback {
                 timeline.pause();
                 await __VST_MOUSE_MOVE__(op.x, op.y);
                 await __VST_MOUSE_UP__();
+                if (window.__VST_RELOAD_TRIGGERED__) {
+                    return;
+                }
                 timeline.resume();
                 break;
             case 'mousemove':
diff --git a/test/runTest/runtime/main.js b/test/runTest/runtime/main.js
index 629d53c..d6f197d 100644
--- a/test/runTest/runtime/main.js
+++ b/test/runTest/runtime/main.js
@@ -55,7 +55,7 @@ window.__VST_START__ = function () {
                 window.__VST_RUN_CONTEXT__.currentActionIndex,
                 window.__VST_RUN_CONTEXT__.currentActionContext
             )
-        }, 500);
+        }, 1000);
     }
     else {
         // Screenshot after 1000ms (200ms if 5x speed), wait the animation to be finished
@@ -88,8 +88,9 @@ window.__VST_RUN_ACTIONS__ = async function (actions, restoredActionIndex, resto
     // We need to save the running info and keep running after reload.
     // window.location seems can't be redefined anymore. So we can only provide helper functions.
     window.__VST_RELOAD__ = function () {
+        // Mark reload triggered and let ActionPlayback stop.
+        window.__VST_RELOAD_TRIGGERED__ = true;
         saveRunningContext(actions, currentActionIndex, actionPlayback);
-        timeline.pause();   // Pause timeline to avoid send more messages.
         timeline.nativeSetTimeout(() => {
             // CDPSession pay be disconnected if reload immediately.
             nativeLocation.reload();

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org