!1935 add gird

Merge pull request !1935 from tomatoDevboy/master

ace/ace_ets_component/entry/src/main/config.json

@@ -61,7 +61,10 @@
           "pages/index",
           "pages/ellipse",
           "pages/systemRouterA",
-          "pages/systemRouterB"
+          "pages/systemRouterB",
+          "pages/gridContainer",
+          "pages/swiper",
+          "pages/gridPage"
         ],
         "name": ".MainAbility",
         "window": {

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/gridPage.ets

+// @ts-nocheck
+/**
+ * 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 events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct gridPage {
+  @State numbers: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15']
+  @State columnsGap: string= '2px'
+  @State rowsGap: string= '2px'
+  @State columnsTemplate: string = '1fr 1fr 1fr 1fr 1fr'
+  @State rowsTemplate: string = '1fr 1fr 1fr 1fr 1fr'
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("on state change called " + JSON.stringify(eventData))
+      if (eventData.data.columnsGap != null) {
+        this.columnsGap = eventData.data.columnsGap
+      }
+      if (eventData.data.rowsGap != null) {
+        this.rowsGap = eventData.data.rowsGap
+      }
+      if (eventData.data.columnsTemplate != null) {
+        this.columnsTemplate = eventData.data.columnsTemplate
+      }
+      if (eventData.data.rowsTemplate != null) {
+        this.rowsTemplate = eventData.data.rowsTemplate
+      }
+    }
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text('Hello World')
+        .fontSize(50)
+        .fontWeight(FontWeight.Bold)
+      Column() {
+        Grid() {
+          GridItem() {
+            Text('4')
+              .key('grid_item_4')
+              .fontSize(16)
+              .backgroundColor(0xFAEEE0)
+              .width('100%')
+              .height('100%')
+              .textAlign(TextAlign.Center)
+          }.rowStart(1).rowEnd(4)
+
+          ForEach(this.numbers, (item) => {
+            GridItem() {
+              Text(item)
+                .fontSize(16)
+                .backgroundColor(0xF9CF93)
+                .width('100%')
+                .height('100%')
+                .textAlign(TextAlign.Center)
+            }.forceRebuild(false)
+          }, item => item)
+          GridItem() {
+            Text('5')
+              .fontSize(16)
+              .backgroundColor(0xDBD0C0)
+              .width('100%')
+              .height('100%')
+              .textAlign(TextAlign.Center)
+          }.columnStart(1).columnEnd(5)
+        }
+        .key('grid')
+        .columnsGap(this.columnsGap)
+        .rowsGap(this.rowsGap)
+        .columnsTemplate(this.columnsTemplate)
+        .rowsTemplate(this.rowsTemplate)
+        .width('90%')
+        .height(300)
+      }.width('100%').margin({ top: 5 })
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  onPageShow() {
+    console.info('button page show called');
+    var stateChangeEvent = {
+      eventId: 1001,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+    var stateChangeEvent2 = {
+      eventId: 1002,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent2, this.stateChangCallBack)
+    var stateChangeEvent3 = {
+      eventId: 1003,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent3, this.stateChangCallBack)
+    var stateChangeEvent4 = {
+      eventId: 1004,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent4, this.stateChangCallBack)
+    var stateChangeEvent5 = {
+      eventId: 1005,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent5, this.stateChangCallBack)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridJsunit.test.ets

+// @ts-nocheck
+/**
+ * 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 {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.emitter'
+import Utils from './Utils';
+
+export default function gridJsunit() {
+  describe('gridTest', function () {
+    beforeEach(async function (done) {
+      console.info('beforeEach ===================grid test beforeEach called===================');
+      let options = {
+        uri: 'pages/gridPage',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info('beforeEach get prompt state pages:' + JSON.stringify(pages));
+        if (!('gridPage' == pages.name)) {
+          console.info('beforeEach get prompt state pages.name:' + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info('beforeEach push prompt page result:' + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error('beforeEach push prompt page error:' + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info('[ afterEach ] ===================grid test after each called===================');
+    });
+
+    // columnsGap
+    it('gridTest01', 0, async function (done) {
+      console.info('gridTest01==================== start');
+      await Utils.sleep(1000)
+      let strJson = getInspectorByKey('grid');
+      let obj = JSON.parse(strJson);
+      console.info('gridTest01 all attribute before change is: ' + JSON.stringify(obj.$attrs.columnsGap));
+      expect(obj.$attrs.columnsGap).assertEqual('2.000000px')
+      try {
+        var eventData = {
+          data: {
+            "columnsGap": '3px'
+          }
+        }
+        var innerEvent = {
+          eventId: 1001,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info('gridTest01 start to publish emit')
+        events_emitter.emit(innerEvent, eventData)
+      } catch (err) {
+        console.log('gridTest01 change component data error: ' + err.message)
+      }
+      await Utils.sleep(1000)
+      let strJsonAfterChange = getInspectorByKey('grid');
+      let objAfterChange = JSON.parse(strJsonAfterChange);
+      console.info('gridTest01 columnsGap attribute after change is: ' + JSON.stringify(objAfterChange.$attrs.columnsGap));
+      expect(objAfterChange.$attrs.columnsGap).assertEqual('3.000000px')
+      console.info('[gridTest01] ==================== end');
+      done();
+    });
+
+    // rowsGap test
+    it('gridTest02', 0, async function (done) {
+      console.info('[ gridTest02 ] ==================== start');
+      await Utils.sleep(1000)
+      let strJson = getInspectorByKey('grid');
+      let obj = JSON.parse(strJson);
+      console.info('[ gridTest02 ] attribute rowsGap before change is: ' + JSON.stringify(obj.$attrs.rowsGap));
+      expect(obj.$attrs.rowsGap).assertEqual('2.000000px')
+      try {
+        var eventData = {
+          data: {
+            "rowsGap": '3px'
+          }
+        }
+        var innerEvent = {
+          eventId: 1002,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info('[ gridTest02 ] start to publish emit')
+        events_emitter.emit(innerEvent, eventData)
+      } catch (err) {
+        console.log('[ gridTest02 ] change component data error: ' + err.message)
+      }
+      await Utils.sleep(1000)
+      let strJsonAfterChange = getInspectorByKey('grid');
+      let objAfterChange = JSON.parse(strJsonAfterChange);
+      console.info('[ gridTest02 ] attribute rowsGap after change is: ' + JSON.stringify(objAfterChange.$attrs.rowsGap));
+      expect(objAfterChange.$attrs.rowsGap).assertEqual('3.000000px')
+      console.info('[ gridTest02 ] ==================== end');
+      done();
+    });
+
+    // columnsTemplate test
+    it('gridTest03', 0, async function (done) {
+      console.info('[ gridTest03 ] ==================== start');
+      await Utils.sleep(1000)
+      let strJson = getInspectorByKey('grid');
+      let obj = JSON.parse(strJson);
+      console.info('[ gridTest03 ] attribute columnsTemplate before change is: ' + JSON.stringify(obj.$attrs.columnsTemplate));
+      expect(obj.$attrs.columnsTemplate).assertEqual('1fr 1fr 1fr 1fr 1fr')
+      try {
+        var eventData = {
+          data: {
+            "columnsTemplate": '1fr 1fr 1fr 1fr'
+          }
+        }
+        var innerEvent = {
+          eventId: 1003,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info('[ gridTest03 ] start to publish emit')
+        events_emitter.emit(innerEvent, eventData)
+      } catch (err) {
+        console.log('[ gridTest03 ] change component data error: ' + err.message)
+      }
+      await Utils.sleep(1000)
+      let strJsonAfterChange = getInspectorByKey('grid');
+      let objAfterChange = JSON.parse(strJsonAfterChange);
+      console.info('[ gridTest03 ] attribute columnsTemplate after change is: ' + JSON.stringify(objAfterChange.$attrs.columnsTemplate));
+      expect(objAfterChange.$attrs.columnsTemplate).assertEqual('1fr 1fr 1fr 1fr')
+      console.info('[ gridTest03 ] ==================== end');
+      done();
+    });
+
+    // rowsTemplate test
+    it('gridTest04', 0, async function (done) {
+      console.info('[ gridTest04 ] ==================== start');
+      await Utils.sleep(1000)
+      let strJson = getInspectorByKey('grid');
+      let obj = JSON.parse(strJson);
+      console.info('[ gridTest04 ] attribute rowsTemplate before change is: ' + JSON.stringify(obj.$attrs.rowsTemplate));
+      expect(obj.$attrs.rowsTemplate).assertEqual('1fr 1fr 1fr 1fr 1fr')
+      try {
+        var eventData = {
+          data: {
+            "rowsTemplate": '1fr 1fr 1fr 1fr'
+          }
+        }
+        var innerEvent = {
+          eventId: 1004,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info('[ gridTest04 ] start to publish emit')
+        events_emitter.emit(innerEvent, eventData)
+      } catch (err) {
+        console.log('[ gridTest04 ] change component data error: ' + err.message)
+      }
+      await Utils.sleep(1000)
+      let strJsonAfterChange = getInspectorByKey('grid');
+      let objAfterChange = JSON.parse(strJsonAfterChange);
+      console.info('[ gridTest04 ] attribute rowsTemplate after change is: ' + JSON.stringify(objAfterChange.$attrs.rowsTemplate));
+      expect(objAfterChange.$attrs.rowsTemplate).assertEqual('1fr 1fr 1fr 1fr')
+      console.info('[ gridTest04 ] ==================== end');
+      done();
+    });
+
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/List.test.ets

@@ -14,8 +14,14 @@
  */
 import ellipseJsunit from './EllipseJsunit.test.ets';
 import systemRouterJsunit from './SystemRouterJsunit.test.ets';
+import gridContainerJsunit from './GridContainerJsunit.test.ets';
+import swiperJsunit from './SwiperJsunit.test.ets';
+import gridJsunit from './GridJsunit.test.ets';
 
 export default function testsuite() {
     ellipseJsunit();
     systemRouterJsunit();
+    gridContainerJsunit();
+    swiperJsunit();
+    gridJsunit();
 }
\ No newline at end of file