Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 27122988 编写于 作者: P pissang
浏览文件
操作

test(visual): optimize UI of visual regression test

上级 e922c074
隐藏空白更改
内联 并排
Showing with 137 addition and 88 deletion
test/runTest/client/client.css
浏览文件 @ 27122988
......@@ -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;
}
......
test/runTest/client/index.html
浏览文件 @ 27122988
......@@ -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
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或