You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ac...@apache.org on 2017/04/27 06:34:52 UTC
[4/6] incubator-weex git commit: + [test] Add screenshot diff util
and border tests
+ [test] Add screenshot diff util and border tests
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/cf7ee9d1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/cf7ee9d1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/cf7ee9d1
Branch: refs/heads/0.12-dev
Commit: cf7ee9d12bf8d88eb9b6e1d1a9f95519840f0bfe
Parents: c9b53a2
Author: yinfeng <cx...@apache.org>
Authored: Tue Apr 25 11:12:58 2017 +0800
Committer: yinfeng <cx...@apache.org>
Committed: Tue Apr 25 11:12:58 2017 +0800
----------------------------------------------------------------------
package.json | 1 +
test/pages/css/border.vue | 283 +++++++++++++++++++++++++++++++++++
test/screenshot/border-ios.png | Bin 0 -> 168396 bytes
test/scripts/css/border.test.js | 63 ++++++++
test/scripts/util.js | 33 ++++
5 files changed, 380 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cf7ee9d1/package.json
----------------------------------------------------------------------
diff --git a/package.json b/package.json
index 0769b3e..caf3ba5 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
},
"dependencies": {
"animationjs": "^0.1.5",
+ "blink-diff": "~1.0.12",
"core-js": "^2.4.0",
"cubicbezier": "^0.1.1",
"envd": "^0.1.1",
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cf7ee9d1/test/pages/css/border.vue
----------------------------------------------------------------------
diff --git a/test/pages/css/border.vue b/test/pages/css/border.vue
new file mode 100644
index 0000000..5c433ad
--- /dev/null
+++ b/test/pages/css/border.vue
@@ -0,0 +1,283 @@
+<template>
+ <scroller>
+ <div class="container">
+ <text class="radius box solid"></text>
+ <text class="topleft box solid"></text>
+ <text class="topright box solid"></text>
+ <text class="bottomleft box solid"></text>
+ <text class="bottomright box solid"></text>
+ <text>solid</text>
+ </div>
+ <div class="container">
+ <text class="radius box dotted"></text>
+ <text class="topleft box dotted"></text>
+ <text class="topright box dotted"></text>
+ <text class="bottomleft box dotted"></text>
+ <text class="bottomright box dotted"></text>
+ <text class="box dotted dottedLarge"></text>
+ <text>dotted</text>
+ </div>
+ <div class="container">
+ <text class="radius box dashed"></text>
+ <text class="topleft box dashed"></text>
+ <text class="topright box dashed"></text>
+ <text class="bottomleft box dashed"></text>
+ <text class="bottomright box dashed"></text>
+ <text class="box dashed dashedLarge"></text>
+ <text>dashed</text>
+ </div>
+ <div class="container">
+ <text class="constrained1"></text>
+ <text class="constrained2"></text>
+ <text class="constrained1 dashed"></text>
+ <text class="constrained2 dashed" ></text>
+ <text class="constrained1 dotted" ></text>
+ <text class="constrained2 dotted" ></text>
+ <text>constrained</text>
+ </div>
+ <div class="container">
+ <text class="box radius differentWidth1"></text>
+ <text class="box radius differentWidth2"></text>
+ <text class="box radius differentWidth3"></text>
+ <text class="box radius differentWidth4" ></text>
+ <text class="box radius differentWidth5" ></text>
+ <text>different width</text>
+ </div>
+ <div class="container">
+ <text class="box borderClipping1"></text>
+ <text class="box borderClipping2"></text>
+ <text class="box borderClipping3"></text>
+ <text>border clipping</text>
+ </div>
+ <div class="container">
+ <text class="boxShadow1"></text>
+ <text class="boxShadow2"></text>
+ <text test-id="test-text">box shadow</text>
+ </div>
+ <div class="container">
+ <text class="circle transparent1"></text>
+ <text class="circle transparent2"></text>
+ <text class="circle transparent3"></text>
+ <text class="circle transparent4"></text>
+ <text>transparent</text>
+ </div>
+ <div class="container">
+ <image class="box topleft" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg"></image>
+ <image class="box topright" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg"></image>
+ <image class="box bottomleft" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg"></image>
+ <image class="box bottomright" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg"></image>
+ <image class="box" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg"></image>
+ <image class="circle" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg"></image>
+ <text>image</text>
+ </div>
+ </scroller>
+</template>
+
+<style>
+.container {
+ flex-direction: row;
+}
+.box {
+ width: 100px;
+ height: 100px;
+ margin: 2px;
+ background-color: #ccc;
+ border-width: 6px;
+ border-color: #f00;
+}
+/* the different border-radii styles defined in CSS3 */
+.radius {
+ border-radius: 20px;
+}
+.topleft {
+ border-top-left-radius: 20px;
+}
+.topright {
+ border-top-right-radius: 20px;
+}
+.bottomright {
+ border-bottom-right-radius: 20px;
+}
+.bottomleft {
+ border-bottom-left-radius: 20px;
+}
+.dottedLarge {
+ border-width: 21px;
+ border-radius: 40px;
+ border-left-color: rgba(0,0,255,1);
+ border-bottom-color: rgba(0,128,0,0.5);
+ border-right-color: rgba(0,128,0,0.5);
+}
+.dashedLarge {
+ border-top-width: 19px;
+ border-bottom-width: 19px;
+ border-left-width: 38px;
+ border-right-width: 38px;
+ border-top-left-radius: 50px;
+ border-top-right-radius: 50px;
+ border-bottom-left-radius: 25px;
+ border-bottom-right-radius: 25px;
+ border-left-color: rgba(0,0,255,1);
+}
+
+/* the different border styles defined in CSS3 */
+.dotted {
+ border-style: dotted;
+}
+.dashed {
+ border-style: dashed;
+}
+.solid {
+ border-style: solid;
+}
+
+.constrained1 {
+ width: 100px;
+ height: 40px;
+ border-width: 10px ;
+ border-color: #f00;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 40px;
+ border-bottom-left-radius: 40px;
+ border-bottom-right-radius: 15px;
+}
+
+.constrained2 {
+ width: 40px;
+ height: 100px;
+ margin-left: 10px;
+ border-width: 10px ;
+ border-color: #f00;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 40px;
+ border-bottom-left-radius: 40px;
+ border-bottom-right-radius: 15px;
+}
+
+.differentWidth1
+{
+ border-top-width: 10px;
+ border-right-width: 15px;
+ border-bottom-width: 20px;
+ border-left-width: 30px;
+}
+.differentWidth2
+{
+ border-top-width: 10px;
+ border-right-width: 25px;
+ border-bottom-width: 40px;
+ border-left-width: 25px;
+}
+.differentWidth3
+{
+ border-top-width: 10px;
+ border-right-width: 25px;
+ border-bottom-width: 10px;
+ border-left-width: 25px;
+}
+.differentWidth4
+{
+ border-top-width: 16px;
+ border-right-width: 4px;
+ border-bottom-width: 110px;
+ border-left-width: 32px;
+}
+.differentWidth5
+{
+ border-right-width: 50px;
+}
+
+.borderClipping1 {
+ border-radius: 30px;
+ border-top-color: red;
+ border-top-width: 10px;
+ border-left-color: blue;
+ border-left-width: 10px;
+ border-right-color: green;
+ border-right-width: 30px;
+ border-bottom-color: yellow;
+ border-bottom-width: 30px;
+}
+.borderClipping2 {
+ border: solid rgba(255,0,0,1);
+ border-top-width: 20px;
+ border-bottom-width: 20px;
+ border-left-width: 40px;
+ border-right-width: 40px;
+ border-top-left-radius: 50px;
+ border-top-right-radius: 50px;
+ border-bottom-left-radius: 25px;
+ border-bottom-right-radius: 25px;
+ border-left-color: rgba(0,0,255,1);
+ border-bottom-color: rgba(0,128,0,0.5);
+ border-right-color: rgba(0,128,0,0.5);
+}
+.borderClipping3 {
+ border-width:10px;
+ border-radius: 50px;
+ border-top-right-radius: 0px;
+ border-bottom-left-radius: 0px;
+ border-left-color: rgba(0,0,255,1);
+ background-color: green;
+ border-top-width: 5px;
+ border-bottom-width: 5px;
+ border-left-width: 18px;
+ border-right-width: 0px;
+}
+
+.boxShadow1 {
+ width: 100px;
+ height: 45px;
+ background-color: #000000;
+ border-top-left-radius: 30px;
+ border-top-right-radius: 30px;
+ box-shadow: 0px 0px 1px 1px #000000;
+ margin-top: 20px;
+}
+.boxShadow2 {
+ width: 100px;
+ height: 45px;
+ background-color: #000000;
+ box-shadow: 30px 15px 0px -10px lime;
+ border-bottom-right-radius: 50px;
+ margin:30px;
+}
+
+.circle {
+ width: 100px;
+ height: 100px;
+ border-width: 33px;
+ border-color: rgba(255, 0, 0, 0.5);
+ border-style: solid;
+ border-radius:50px;
+}
+.transparent1 {
+ border-right-color: transparent;
+}
+.transparent2 {
+ border-right-color: transparent;
+ border-right-width: 33px;
+}
+.transparent3 {
+ border-right-color: transparent;
+ border-right-width: 0;
+ border-bottom-color: transparent;
+ border-bottom-width: 0;
+}
+.transparent4 {
+ border-right-color: transparent;
+ border-right-width: 0;
+ border-bottom-color: transparent;
+}
+</style>
+
+<script>
+ module.exports = {
+ data : function(){
+ return {
+ }
+ },
+ methods : {
+ }
+ }
+</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cf7ee9d1/test/screenshot/border-ios.png
----------------------------------------------------------------------
diff --git a/test/screenshot/border-ios.png b/test/screenshot/border-ios.png
new file mode 100644
index 0000000..667233d
Binary files /dev/null and b/test/screenshot/border-ios.png differ
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cf7ee9d1/test/scripts/css/border.test.js
----------------------------------------------------------------------
diff --git a/test/scripts/css/border.test.js b/test/scripts/css/border.test.js
new file mode 100644
index 0000000..c1dcee4
--- /dev/null
+++ b/test/scripts/css/border.test.js
@@ -0,0 +1,63 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+'use strict';
+
+var assert = require('chai').assert
+var wd = require('weex-wd')
+var path = require('path');
+var util = require("../util.js");
+var assert = require('chai').assert
+
+describe('border test', function () {
+ this.timeout(util.getTimeoutMills());
+ var driver = util.createDriver(wd);
+
+ if (process.env.platform !== 'ios') {
+ return;
+ }
+
+ before(function () {
+ return util.init(driver)
+ .get(util.getPage('/css/border.js'))
+ .waitForElementById('test-text',util.getGETActionWaitTimeMills() + 2000,1000)
+ });
+
+ after(function () {
+ return util.quit(driver);
+ })
+
+
+ it('#1 border screenshot diff', () => {
+ return driver
+ .takeScreenshot()
+ .then(imgData => {
+ var newImg = new Buffer(imgData, 'base64');
+ var screenshotFolder = path.resolve(__dirname, '../../screenshot');
+ var oldImgPath = path.join(screenshotFolder, process.env.platform === 'android' ? 'border-android.png' : 'border-ios.png');
+ var diffImgPath = path.join(screenshotFolder, process.env.platform === 'android' ? 'border-android-diff.png' : 'border-ios-diff.png');
+ return util.diffImage(oldImgPath, newImg, 1, diffImgPath);
+ })
+ .then(result => {
+ console.log(result)
+ assert.isOk(result)
+ })
+ })
+});
+
+
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cf7ee9d1/test/scripts/util.js
----------------------------------------------------------------------
diff --git a/test/scripts/util.js b/test/scripts/util.js
index ce804ff..81dc100 100644
--- a/test/scripts/util.js
+++ b/test/scripts/util.js
@@ -20,6 +20,8 @@
var path = require('path');
var os = require('os')
+var fs = require('fs')
+const BlinkDiff = require('blink-diff');
var platform = process.env.platform || 'android';
platform = platform.toLowerCase();
@@ -67,6 +69,36 @@ function getIpAddress(){
return addresses[0];
}
+function diffImage(imageAPath, imageB, threshold, outputPath) {
+ if (!fs.existsSync(imageAPath)) {
+ fs.writeFileSync(imageAPath, imageB, 'base64', function(err) {
+ console.log(err);
+ });
+ }
+
+ return new Promise((resolve, reject) => {
+ var diff = new BlinkDiff({
+ imageAPath: imageAPath, // Path
+ imageB: imageB, // Buffer
+ thresholdType: BlinkDiff.THRESHOLD_PIXEL,
+ threshold: threshold,
+ imageOutputPath: outputPath,
+ cropImageA:{y : (isIOS ? 128 : 0)},
+ cropImageB:{y : (isIOS ? 128 : 0)}
+ });
+
+ diff.run((err, result) => {
+ if (err) {
+ return reject(err);
+ }
+ var ifPassed = diff.hasPassed(result.code);
+ console.log(ifPassed ? 'Image Comparison Passed' : 'Image Comparison Failed');
+ console.log(`Found ${result.differences} pixel differences between two images.`);
+ resolve(ifPassed);
+ });
+ });
+}
+
module.exports = {
getConfig:function(){
@@ -94,6 +126,7 @@ module.exports = {
getGETActionWaitTimeMills:function(){
return (isRunInCI ? 120 : 5 ) * 1000;
},
+ diffImage,
createDriver:function(wd){
var driver = global._wxDriver;
if(!driver){