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/04/28 11:31:06 UTC
[echarts] 01/01: test(visual): optimize UI of visual regression test
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 27122988aefaf28fd70eac9d178617ab725fcb1d
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Apr 28 19:28:50 2021 +0800
test(visual): optimize UI of visual regression test
---
test/runTest/client/client.css | 81 ++++++++++++++++-------
test/runTest/client/index.html | 144 ++++++++++++++++++++++-------------------
2 files changed, 137 insertions(+), 88 deletions(-)
diff --git a/test/runTest/client/client.css b/test/runTest/client/client.css
index 8a2c598..b48fb2a 100644
--- a/test/runTest/client/client.css
+++ b/test/runTest/client/client.css
@@ -30,17 +30,17 @@
}
.header {
- background-color: #293c55;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+ background-color: #fff;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
position: relative;
- z-index: 10;
+ z-index: 20;
+ height: 55px;
}
.header h1 {
- color: #fff;
+ color: #222;
line-height: 50px;
margin: 0;
- font-weight: 200;
font-size: 20px;
}
@@ -54,27 +54,41 @@
margin-right: 20px;
}
-.nav-toolbar {
+.el-aside {
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 10;
+}
+
+.el-main {
+ background: #f3f4fa;
+ padding: 0;
+}
+
+.nav-toolbar, .test-run-controls {
padding: 10px 10px;
- background: #162436;
- box-shadow: inset 0 0 5px black;
+ background: #fff;
position: fixed;
- top: 50px;
width: 330px;
z-index: 2;
+ /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */
+ border-bottom: 1px solid #eee;
}
-.nav-toolbar .controls {
- margin-top: 10px;
+
+.test-run-controls {
+ z-index: 1;
+ width: 100%;
+ padding: 5px 20px;
}
-.nav-toolbar .controls>* {
+
+.test-run-controls>* {
display: inline-block;
vertical-align: middle;
}
-.nav-toolbar .controls .el-checkbox {
+.test-run-controls .el-checkbox {
margin-right: 2px;
}
.nav-toolbar .el-icon-setting {
- color: #f3f3f3;
font-size: 20px;
margin-left: 5px;
cursor: pointer;
@@ -85,34 +99,40 @@
}
.run-config-item {
- margin: 5px 0;
+ margin: 0 5px;
}
.run-config-item>* {
display: inline-block;
vertical-align: middle;
- margin-right: 10px;
+ font-size: 12px;
+ color: #afafaf;
+}
+
+.run-config-item .label {
+ margin-right: 2px;
+ margin-left: 5px;
}
.test-list {
overflow-x: hidden;
- background: #293c55;
+ background: #fff;
margin: 0;
padding: 0;
- margin-top: 80px;
+ margin-top: 48px;
}
.test-list li {
list-style: none;
padding-left: 10px;
cursor: pointer;
- color: #f3f3f3;
+ color: #222;
}
.test-list li a.menu-link {
display: inline-block;
text-decoration: none;
font-size: 14px;
line-height: 40px;
- color: #f3f3f3;
+ color: #222;
margin-left: 3px;
cursor: pointer;
}
@@ -122,10 +142,13 @@
}
.test-list li.active {
- background: #e43c59;
+ background: #5470C6;
+}
+.test-list li.active a {
+ color: #fff;
}
.test-list li:hover {
- background: #162436;
+ border-right: 4px solid #5470C6
}
.test-list li>* {
vertical-align: middle;
@@ -136,6 +159,20 @@
font-size: 12px!important;
}
+.el-progress.is-success .el-progress__text {
+ color: #67C23A;
+ -webkit-text-stroke: 1px #67C23A;
+}
+.el-progress.is-exception .el-progress__text {
+ color: #F56C6C;
+ -webkit-text-stroke: 1px #F56C6C;
+}
+
+.test-result {
+ padding: 20px;
+ margin-top: 80px;
+}
+
.test-result .el-progress__text {
font-size: 14px!important;
}
diff --git a/test/runTest/client/index.html b/test/runTest/client/index.html
index 49c498c..2f3a698 100644
--- a/test/runTest/client/index.html
+++ b/test/runTest/client/index.html
@@ -39,71 +39,17 @@ under the License.
<el-container style="min-height: 0"> <!-- https://juejin.im/post/5c642f2ff265da2de660ecfc -->
<el-aside width="350px">
<div class="nav-toolbar">
- <el-input v-model="searchString" size="mini" placeholder="Filter Tests"></el-input>
- <div class="controls">
- <el-checkbox :indeterminate="isSelectAllIndeterminate" v-model="allSelected" @change="handleSelectAllChange"></el-checkbox>
- <el-button title="Sort By Failue Percentage" @click="toggleSort" size="mini" type="primary" icon="el-icon-sort">Sort</el-button>
-
- <el-dropdown v-if="!running" split-button type="primary" size="mini" title="Run"
- @click="run('selected')"
- @command="run"
- >
- <i class="el-icon-caret-right"></i> Run selected ({{selectedTests.length}})
- <el-dropdown-menu slot="dropdown" >
- <el-dropdown-item command="unfinished">Run unfinished ({{unfinishedTests.length}})</el-dropdown-item>
- <el-dropdown-item command="failed">Run failed ({{failedTests.length}})</el-dropdown-item>
- <el-dropdown-item command="all">Run all ({{fullTests.length}})</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
-
- <el-button-group v-else>
- <el-button type="primary" size="mini" :loading="true">Stop</el-button>
- <el-button title="Run Selected" @click="stopTests" size="mini" type="primary" icon="el-icon-close" style="padding-left: 3px;padding-right:3px;"></el-button>
- </el-button-group>
-
-
- <el-popover title="Configuration" class="run-configuration">
- <div class="run-config-item">
- <el-checkbox v-model="runConfig.noHeadless">Replay</el-checkbox>
- <el-slider
- style="width: 130px;"
- v-model="runConfig.replaySpeed"
- :step="1" :min="1" :max="10"
- show-stops
- :format-tooltip="function(val) { return val + 'x'; }"
- :disabled="!runConfig.noHeadless"
- ></el-slider>
- </div>
- <div class="run-config-item">
- <span>Threads</span>
- <el-slider style="width: 140px;" v-model="runConfig.threads" :step="1" :min="1" :max="8" show-stops></el-slider>
- </div>
- <div class="run-config-item">
- <span>Version</span>
- <span style="font-size: 12px; color:#afafaf">Expected</span>
- <el-select size="mini" v-model="runConfig.expectedVersion" placeholder="Select Version"
- style="width: 80px;"
- >
- <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
- </el-select>
- <span style="font-size: 12px; color: #afafaf">Actual</span>
- <el-select size="mini" v-model="runConfig.actualVersion" placeholder="Select Version"
- style="width: 80px;"
- >
- <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
- </el-select>
- </div>
- <div class="run-config-item">
- <span>Renderer</span>
- <el-select size="mini" v-model="runConfig.renderer" placeholder="Select Renderer">
- <el-option key="canvas" label="canvas" value="canvas"></el-option>
- <el-option key="svg" label="svg" value="svg"></el-option>
- </el-select>
- </div>
- <i slot="reference" class="el-icon-setting"></i>
- </el-popover>
-
- </div>
+ <el-row class="filters" :gutter="10" :align="'middle'">
+ <el-col :span="2">
+ <el-checkbox :indeterminate="isSelectAllIndeterminate" v-model="allSelected" @change="handleSelectAllChange"></el-checkbox>
+ </el-col>
+ <el-col :span="17">
+ <el-input v-model="searchString" size="mini" placeholder="Filter Tests"></el-input>
+ </el-col>
+ <el-col :span="2">
+ <el-button title="Sort By Failue Percentage" @click="toggleSort" size="mini" type="primary" icon="el-icon-sort">Sort</el-button>
+ </el-col>
+ </el-row>
</div>
<ul class="test-list">
<li v-for="(test, index) in tests"
@@ -129,13 +75,21 @@ under the License.
></el-progress>
</el-tooltip>
<el-tooltip
- v-if="test.status==='finished' && test.actualErrors && test.actualErrors.length > 0"
+ v-else-if="test.status==='finished' && test.actualErrors && test.actualErrors.length > 0"
>
<div slot="content">{{test.actualErrors.length}} Errors</div>
<i class="el-icon-message-solid"
style="color: #F56C6C"
></i>
</el-tooltip>
+ <el-tooltip
+ content="Not yet run"
+ v-else
+ >
+ <i class="el-icon-question"
+ style="color: #ccc;font-size: 20px;"
+ ></i>
+ </el-tooltip>
<a :href="'#' + test.name" class="menu-link">
{{test.name}}
<i v-if="test.actions" class="el-icon-video-camera-solid"></i>
@@ -145,6 +99,64 @@ under the License.
</ul>
</el-aside>
<el-main>
+ <div class="test-run-controls">
+ <el-dropdown v-if="!running" split-button type="primary" size="mini" title="Run"
+ @click="run('selected')"
+ @command="run"
+ >
+ <i class="el-icon-caret-right"></i> Run selected ({{selectedTests.length}})
+ <el-dropdown-menu slot="dropdown" >
+ <el-dropdown-item command="unfinished">Run unfinished ({{unfinishedTests.length}})</el-dropdown-item>
+ <el-dropdown-item command="failed">Run failed ({{failedTests.length}})</el-dropdown-item>
+ <el-dropdown-item command="all">Run all ({{fullTests.length}})</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+
+ <el-button-group v-else>
+ <el-button type="primary" size="mini" :loading="true">Stop</el-button>
+ <el-button title="Run Selected" @click="stopTests" size="mini" type="primary" icon="el-icon-close" style="padding-left: 3px;padding-right:3px;"></el-button>
+ </el-button-group>
+
+
+ <!-- <div class="run-config-item">
+ <el-checkbox v-model="runConfig.noHeadless">Replay</el-checkbox>
+ <el-slider
+ style="width: 80px;"
+ v-model="runConfig.replaySpeed"
+ :step="1" :min="1" :max="10"
+ show-stops
+ :format-tooltip="function(val) { return val + 'x'; }"
+ :disabled="!runConfig.noHeadless"
+ ></el-slider>
+ </div> -->
+ <div class="run-config-item">
+ <span class="label">Expected</span>
+ <el-select size="mini" v-model="runConfig.expectedVersion" placeholder="Select Version"
+ style="width: 80px;"
+ >
+ <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
+ </el-select>
+ <span class="label">Actual</span>
+ <el-select size="mini" v-model="runConfig.actualVersion" placeholder="Select Version"
+ style="width: 80px;"
+ >
+ <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
+ </el-select>
+ </div>
+ <div class="run-config-item">
+ <span class="label">Renderer</span>
+ <el-select size="mini" style="width: 100px;" v-model="runConfig.renderer" placeholder="Select Renderer">
+ <el-option key="canvas" label="canvas" value="canvas"></el-option>
+ <el-option key="svg" label="svg" value="svg"></el-option>
+ </el-select>
+ </div>
+ <div class="run-config-item">
+ <span class="label">Threads</span>
+ <el-slider style="width: 100px;" v-model="runConfig.threads" :step="1" :min="1" :max="8" show-stops></el-slider>
+ </div>
+ </div>
+
+
<div v-if="currentTest" class="test-result">
<div class="title">
<el-progress
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org