From fb1b9350268dc8b90324f12389721dba7039cac3 Mon Sep 17 00:00:00 2001 From: zhangrao Date: Tue, 15 Feb 2022 18:03:42 -0800 Subject: [PATCH] add gird Signed-off-by: zhangrao --- .../entry/src/main/config.json | 5 +- .../main/ets/MainAbility/pages/gridPage.ets | 106 +++++++++++ .../ets/MainAbility/test/GridJsunit.test.ets | 178 ++++++++++++++++++ .../main/ets/MainAbility/test/List.test.ets | 6 + 4 files changed, 294 insertions(+), 1 deletion(-) create mode 100755 ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/gridPage.ets create mode 100755 ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridJsunit.test.ets diff --git a/ace/ace_ets_component/entry/src/main/config.json b/ace/ace_ets_component/entry/src/main/config.json index 9f78b9f86..2dfd79873 100755 --- a/ace/ace_ets_component/entry/src/main/config.json +++ b/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": { diff --git a/ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/gridPage.ets b/ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/gridPage.ets new file mode 100755 index 000000000..baefbfd48 --- /dev/null +++ b/ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/gridPage.ets @@ -0,0 +1,106 @@ +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 diff --git a/ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridJsunit.test.ets b/ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridJsunit.test.ets new file mode 100755 index 000000000..b77b962c7 --- /dev/null +++ b/ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridJsunit.test.ets @@ -0,0 +1,178 @@ +// @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(); + }); + + }) +} diff --git a/ace/ace_ets_component/entry/src/main/ets/MainAbility/test/List.test.ets b/ace/ace_ets_component/entry/src/main/ets/MainAbility/test/List.test.ets index 045fb1e88..82a43bc1b 100755 --- a/ace/ace_ets_component/entry/src/main/ets/MainAbility/test/List.test.ets +++ b/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 gridContainerJsunit from './GridContainerJsunit.test.ets'; export default function testsuite() { ellipseJsunit(); systemRouterJsunit(); + gridContainerJsunit(); + swiperJsunit(); + gridContainerJsunit(); } \ No newline at end of file -- GitLab