| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Test Report</title> |
| <link href="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css" rel="stylesheet" type="text/css"> |
| |
| <style> |
| #app { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| .import-type-title { |
| padding: 10px; |
| } |
| |
| .import-type-title div { |
| font-size: 14px; |
| font-family:'Courier New', Courier, monospace; |
| } |
| |
| .type-error-log { |
| padding: 10px; |
| color: red; |
| font-family:'Courier New', Courier, monospace; |
| } |
| .type-error-log pre { |
| margin: 5px 0; |
| padding: 0; |
| /* https://css-tricks.com/snippets/css/make-pre-text-wrap/ */ |
| white-space: pre-wrap; |
| } |
| .type-passed { |
| font-size: 14px; |
| color: green; |
| font-family:'Courier New', Courier, monospace; |
| padding: 10px; |
| } |
| </style> |
| |
| </head> |
| <body> |
| <div id="app"> |
| <el-tabs v-model="tab" type="border-card"> |
| <el-tab-pane label="Type Checking" name="typechecking"> |
| <div v-for="item in typeCheckingResult"> |
| <h3>{{ item.testName }}({{item.compileErrorsCount}})</h3> |
| <el-row :gutter="30"> |
| <el-col :span="12"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <div class="import-type-title"> |
| <div>全量引入</div> |
| <div>Full Import</div> |
| </div> |
| <div class="type-error-log" v-if="item.compileErrors.full.length"> |
| <div v-for="compileError in item.compileErrors.full"> |
| <pre>[{{compileError.location.join(', ')}}] {{compileError.message}}</pre> |
| </div> |
| </div> |
| <div class="type-passed" v-else> |
| No Error |
| </div> |
| </el-card> |
| </el-col> |
| <el-col :span="12"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <div class="import-type-title"> |
| <div>按需引入</div> |
| <div>Minimal Import </div> |
| </div> |
| <div class="type-error-log" v-if="item.compileErrors.minimal.length"> |
| <div v-for="compileError in item.compileErrors.minimal"> |
| <pre>[{{compileError.location.join(', ')}}] {{compileError.message}}</pre> |
| </div> |
| </div> |
| <div class="type-passed" v-else> |
| No Error |
| </div> |
| </el-card> |
| </el-col> |
| </el-row> |
| </div> |
| </el-tab-pane> |
| <el-tab-pane label="Screenshots Compare" name="screenshots"> |
| <div v-for="item in screenshotsCompareResult"> |
| <h3>{{ item.testName }}({{item.screenshotDiffRatio}})</h3> |
| <el-row :gutter="10"> |
| <el-col :span="4"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <el-image :src="SCREENSHOT_ROOT + item.testName + '.png'"></el-image> |
| <div class="import-type-title"> |
| <div>全量引入</div> |
| <div>Full Import</div> |
| </div> |
| </el-card> |
| </el-col> |
| <el-col :span="4"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.png'"></el-image> |
| <div class="import-type-title"> |
| <div>按需引入</div> |
| <div>Minimal Import </div> |
| </div> |
| </el-card> |
| </el-col> |
| <el-col :span="4"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.legacy.png'"></el-image> |
| <div class="import-type-title"> |
| <div>自注册方式按需引入</div> |
| <div>Minimal Import with Self Registion</div> |
| </div> |
| </el-card> |
| </el-col> |
| <el-col :span="4"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.diff.png'"></el-image> |
| <div class="import-type-title"> |
| <div>按需引入差异</div> |
| <div>Diff of Minimal Import </div> |
| </div> |
| </el-card> |
| </el-col> |
| <el-col :span="4"> |
| <el-card :body-style="{ padding: '0px' }"> |
| <el-image :src="SCREENSHOT_ROOT + item.testName + '.minimal.legacy.diff.png'"></el-image> |
| <div class="import-type-title"> |
| <div>自注册方式按需引入差异</div> |
| <div>Diff of Minimal Import with Self Registion</div> |
| </div> |
| </el-card> |
| </el-col> |
| </el-row> |
| </div> |
| </el-tab-pane> |
| </el-tabs> |
| </div> |
| <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script> |
| |
| <script> |
| const app = new Vue({ |
| el: '#app', |
| data() { |
| return { |
| typeCheckingResult: [], |
| screenshotsCompareResult: [], |
| |
| SCREENSHOT_ROOT: './tmp/screenshots/', |
| |
| tab: 'screenshots', |
| splitterModel: 10 |
| }; |
| } |
| }); |
| |
| fetch('./tmp/result.json') |
| .then(response => response.json()) |
| .then(json => { |
| const result = []; |
| function getCompilerErrorsCount({ full, minimal, minimalLegacy }) { |
| return full.length + minimal.length + minimalLegacy.length; |
| } |
| function getScreenshotDiffRatio({ minimal, minimalLegacy }) { |
| return minimal.ratio + minimalLegacy.ratio; |
| } |
| |
| Object.keys(json).forEach(key => { |
| result.push({ |
| ...json[key], |
| compileErrorsCount: getCompilerErrorsCount(json[key].compileErrors), |
| screenshotDiffRatio: getScreenshotDiffRatio(json[key].screenshotDiff), |
| testName: key |
| }); |
| }); |
| app.typeCheckingResult = result.slice().sort((a, b) => { |
| return b.compileErrorsCount - a.compileErrorsCount; |
| }); |
| app.screenshotsCompareResult = result.slice().sort((a, b) => { |
| return b.screenshotDiffRatio - a.screenshotDiffRatio; |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
