add ace js test

Signed-off-by: Nluffy505 <zhangjuan54@huawei.com>

ace/ace_standard/src/main/config.json

@@ -51,7 +51,11 @@
         "pages": [
           "pages/index/index",
           "pages/routerPush/index",
-          "pages/routerReplace/index"
+          "pages/routerReplace/index",
+          "pages/button/index",
+          "pages/chart/index",
+          "pages/input/index",
+          "pages/slider/index"
         ],
         "name": "default",
         "window": {

ace/ace_standard/src/main/js/default/pages/button/index.css

+.div-button {
+    flex-direction: column;
+    width: 100%;
+}
+.circleall{
+    width: 90%;
+    flex-direction: row;
+    justify-content: space-around;
+    margin-left: 4%;
+}
+.circlealls{
+    flex-direction: row;
+}
+.buttons {
+    margin-top: 15px;
+    width: 45%;
+    height: 45px;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 10px;
+    background-color: #317aff;
+}
+.title{
+    font-size: 13px;
+    margin-top: 60px;
+    margin-left: 20px;
+    color: grey;
+}
+.all{
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.oriage{
+    background-color: #ee8443;
+}
+.white{
+    opacity: 0.4;
+}
+.icon{
+    icon-height: 30px;
+    icon-width: 30px;
+}
+.warn{
+    background-color: #f55a42;
+}
+.circle {
+    radius: 30px;
+    icon-width: 30px;
+    icon-height: 30px;
+    margin-left: 20px;
+    margin-top: 20px;
+    background-color: #317aff;
+}
+.cir{
+    background-color: #f55a42;
+}
+.text {
+    text-color: #0a59f7;
+    font-size: 17px;
+    font-weight: 600;
+    font-family: sans-serif;
+    font-style: normal;
+}
+.text1{
+    text-color: #969696;
+}
+.text2{
+    text-color: #e84026;
+}
+.download {
+    margin-top: 15px;
+    width: 88%;
+    height: 45px;
+    border-radius: 50px;
+    text-color: white;
+    background-color: #007dff;
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/button/index.hml

+<div class="div-button">
+    <text class="title">普通按钮</text>
+    <div class="circleall">
+        <button class="buttons">确认按钮</button>
+        <button class="buttons" waiting="true">Loading</button>
+    </div>
+    <div class="circleall">
+        <button class="buttons icon" icon="/common/images/paobu.png" value="跑步" placement="start"></button>
+        <button class="buttons white">禁用按钮</button>
+    </div>
+    <div class="circleall">
+        <button class="buttons  oriage">重置</button>
+        <button class="buttons  warn">告警按钮</button>
+    </div>
+    <text class="title">胶囊按钮</text>
+    <div class="circleall">
+        <button class="buttons" type="capsule">确认按钮</button>
+        <button class="buttons" type="capsule" waiting="true">Loading</button>
+    </div>
+    <div class="circleall">
+        <button class="buttons" type="capsule">清除</button>
+        <button class="buttons  white" type="capsule" >禁用按钮</button>
+    </div>
+    <div class="circleall">
+        <button class="buttons oriage" type="capsule">重置</button>
+        <button class="buttons warn" type="capsule">告警按钮</button>
+    </div>
+    <text class="title">圆形按钮</text>
+    <div class="circlealls">
+        <button class="circle" type="circle" icon="/common/images/fenleifuben.png">icon按钮</button>
+        <button class="circle cir" type="circle" icon="/common/images/rest-fill.png">icon按钮</button>
+    </div>
+    <text class="title">文本按钮</text>
+    <div class="circleall">
+        <button class="text" type="text">文本按钮1</button>
+        <button class="text text1" type="text">文本按钮2</button>
+        <button class="text text2" type="text">文本按钮3</button>
+    </div>
+    <text class="title">长胶囊按钮</text>
+    <div class="all">
+        <button class="download" type="download">下载按钮</button>
+        <button class="download white" type="download">禁止下载</button>
+        <button class="download" type="download" id="download-btn"
+                onclick="setProgress">{{downloadText}}</button>
+    </div>
+</div>

ace/ace_standard/src/main/js/default/pages/button/index.js

+export default {
+    data: {
+        progress: 10,
+        downloadText: "进度条按钮"
+    },
+    setProgress(e) {
+        var i=0
+        var set= setInterval(()=>{
+            i+=10
+            this.progress=i
+            this.downloadText = this.progress + "%";
+            this.$element('download-btn').setProgress({ progress: this.progress });
+            if(this.progress>=100){
+                clearInterval(set)
+                this.downloadText="完成"
+            }
+        },1000)
+    },
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/chart/index.css

+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.chart-region {
+    height: 400px;
+    width: 700px;
+}
+.chart-background {
+    object-fit: fill;
+}
+.chart-data {
+    width: 700px;
+    height: 600px;
+}
+button {
+    width: 100%;
+    height: 50px;
+    background-color: #F4F2F1;
+    text-color: #0C81F3;
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/chart/index.hml

+<div class="container">
+    <stack class="chart-region">
+        <image class="chart-background" src="common/background.png"></image>
+        <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
+    </stack>
+    <button value="Add data" onclick="addData"></button>
+</div>
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/chart/index.js

+// xxx.js
+export default {
+    data: {
+        lineData: [
+            {
+                strokeColor: '#0081ff',
+                fillColor: '#cce5ff',
+                data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+                gradient: true,
+            }
+        ],
+        lineOps: {
+            xAxis: {
+                min: 0,
+                max: 20,
+                display: false,
+            },
+            yAxis: {
+                min: 0,
+                max: 1000,
+                display: false,
+            },
+            series: {
+                lineStyle: {
+                    width: "5px",
+                    smooth: true,
+                },
+                headPoint: {
+                    shape: "circle",
+                    size: 20,
+                    strokeWidth: 5,
+                    fillColor: '#ffffff',
+                    strokeColor: '#007aff',
+                    display: true,
+                },
+                loop: {
+                    margin: 2,
+                    gradient: true,
+                }
+            }
+        },
+    },
+    addData() {
+        this.$refs.linechart.append({
+            serial: 0,
+            data: [Math.floor(Math.random() * 400) + 400]
+        })
+    }
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/input/index.css

+/* xxx.css */
+.content {
+    width: 60%;
+    flex-direction: column;
+    align-items: center;
+}
+.input {
+    placeholder-color: gray;
+}
+.button {
+    background-color: gray;
+    margin-top: 20px;
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/input/index.hml

+<!-- xxx.hml -->
+<div class="content">
+    <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
+           headericon="/common/search.svg" placeholder="Please input text" onchange="change"
+           onenterkeyclick="enterkeyClick">
+    </input>
+    <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
+</div>
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/input/index.js

+// xxx.js
+import prompt from '@system.prompt'
+export default {
+    change(e){
+        prompt.showToast({
+            message: "value: " + e.value,
+            duration: 3000,
+        });
+    },
+    enterkeyClick(e){
+        prompt.showToast({
+            message: "enterkey clicked",
+            duration: 3000,
+        });
+    },
+    buttonClick(e){
+        this.$element("input").showError({
+            error: 'error text'
+        });
+    },
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/slider/index.css

+/* xxx.css */
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/slider/index.hml

+<!-- xxx.hml -->
+<div class="container">
+    <text>slider start value is {{startValue}}</text>
+    <text>slider current value is {{currentValue}}</text>
+    <text>slider end value is {{endValue}}</text>
+    <slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
+</div>
\ No newline at end of file

ace/ace_standard/src/main/js/default/pages/slider/index.js

+// xxx.js
+export default {
+    data: {
+        value: 0,
+        startValue: 0,
+        currentValue: 0,
+        endValue: 0,
+    },
+    setvalue(e) {
+        if (e.mode == "start") {
+            this.value = e.value;
+            this.startValue = e.value;
+        } else if (e.mode == "move") {
+            this.value = e.value;
+            this.currentValue = e.value;
+        } else if (e.mode == "end") {
+            this.value = e.value;
+            this.endValue = e.value;
+        }
+    }
+}
\ No newline at end of file

ace/ace_standard/src/main/js/default/test/List.test.js

@@ -14,4 +14,5 @@
  */
 
 require('./basicabilityapi.test.js')
-require('./mediaquery.test.js')
\ No newline at end of file
+require('./mediaquery.test.js')
+require('./commonComponentJsApi.test.js')

ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js

+/*
+ * Copyright (C) 2021 Huawei Device Co., Ltd.
+ * Licensed 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.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from 'deccjsunit/index';
+
+
+
+describe('aceJsTest', function () {
+
+    async function sleep(time) {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve()
+            }, time)
+        }).then(() => {
+            console.info(`sleep ${time} over...`)
+        })
+    }
+
+    /**
+    * run after testcase
+    */
+    afterEach(async function () {
+        console.info('[aceJsTest] after each called')
+        router.clear();
+        await sleep(1000)
+    });
+
+
+    it('testButtonComponent', 0, async function (done) {
+        console.info('testButtonComponent START');
+        let result;
+        let options = {
+            uri : 'pages/button/index'
+        }
+        try {
+            result = router.push(options)
+            console.info("push button page success " + JSON.stringify(result));
+        } catch (err) {
+            console.error("push button page error " + JSON.stringify(result));
+        }
+        await sleep(1000)
+        let pages = router.getState();
+        console.info("[router.button] getState" + JSON.stringify(pages));
+        expect("pages/button/").assertEqual(pages.path);
+        done();
+    });
+
+    it('testChartComponent', 0, async function (done) {
+        console.info('testButtonComponent START');
+        let result;
+        let options = {
+            uri : 'pages/chart/index'
+        }
+        try {
+            result = router.push(options)
+            console.info("push button page success " + JSON.stringify(result));
+        } catch (err) {
+            console.error("push button page error " + JSON.stringify(result));
+        }
+        await sleep(1000)
+        let pages = router.getState();
+        console.info("[router.chart] getState" + JSON.stringify(pages));
+        expect("pages/chart/").assertEqual(pages.path);
+        done();
+    });
+
+    it('testInputComponent', 0, async function (done) {
+        console.info('testButtonComponent START');
+        let result;
+        let options = {
+            uri : 'pages/input/index'
+        }
+        try {
+            result = router.push(options)
+            console.info("push button page success " + JSON.stringify(result));
+        } catch (err) {
+            console.error("push button page error " + JSON.stringify(result));
+        }
+        await sleep(1000)
+        let pages = router.getState();
+        console.info("[router.input] getState" + JSON.stringify(pages));
+        expect("pages/input/").assertEqual(pages.path);
+        done();
+    });
+
+    it('testInputComponent', 0, async function (done) {
+        console.info('testButtonComponent START');
+        let result;
+        let options = {
+            uri : 'pages/slider/index'
+        }
+        try {
+            result = router.push(options)
+            console.info("push button page success " + JSON.stringify(result));
+        } catch (err) {
+            console.error("push button page error " + JSON.stringify(result));
+        }
+        await sleep(1000)
+        let pages = router.getState();
+        console.info("[router.slider] getState" + JSON.stringify(pages));
+        expect("pages/slider/").assertEqual(pages.path);
+        done();
+    });
+});
\ No newline at end of file