UXII8.2 xts

Signed-off-by: Nsunjiakun <sunjiakun3@huawei.com>

arkui/ace_ets_components_ux/ace_ets_component_tabs/Test.json

@@ -4,7 +4,7 @@
         "type": "OHJSUnitTest",
         "test-timeout": "600000",
         "bundle-name": "com.example.acetabstest",
-        "module-name": "phone",
+        "module-name": "entry_test",
         "shell-timeout": "600000",
         "testcase-timeout": 240000
     },

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/TestAbility/pages/Index.ets

@@ -33,7 +33,7 @@ struct TabsExample {
     @State nullFlag: boolean = false
 
     @State strokeWidthNum: number = 10
-    @State dividerColorNum: number = 0xFFFF0000
+    @State dividerColorNum: number = 0xFF0000
     @State startMarginNum: number = 5
     @State endMarginNum: number = 5
 
@@ -235,7 +235,7 @@ struct TabsExample {
                     Column().width('100%').height('100%').backgroundColor(Color.Yellow)
                 }.tabBar(SubTabBarStyle.of('pink')
                 .indicator({
-                    color: 0xFFFF0000, //下划线颜色
+                    color: 0xFF0000,
                 })
                 .selectedMode(this.selfSelectedMode)
                 .board({ borderRadius: this.selfSubTabBorderRadius })

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/TestAbility/pages/IndexSec.ets

+/*
+ * Copyright (c) 2023 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.events.emitter';
+import AbilityDelegatorRegistry from '@ohos.application.abilityDelegatorRegistry';
+import { Hypium } from '@ohos/hypium';
+import hilog from '@ohos.hilog';
+import testsuite from '../../test/List.test'
+@Entry
+@Component
+struct TabsExampleSec {
+    private controller: TabsController = new TabsController()
+    
+    @State barOverlap: boolean = false
+    @State barBackgroundColorColor: Color = Color.Red
+    @State barBackgroundColorNumber: number = 0
+    @State barBackgroundColorString: string = "#00000000"
+    @State barBackgroundColorResource: Resource = $r("sys.color.ohos_toggle_bg")
+
+    private stateChangCallBack = (eventData) => {
+        console.info("tabs page state change called:" + JSON.stringify(eventData));
+        if (eventData != null) {
+            this.barOverlap = eventData.data.barOverlap;
+            this.barBackgroundColorColor = eventData.data.barBackgroundColorColor;
+            this.barBackgroundColorNumber = eventData.data.barBackgroundColorNumber;         
+            this.barBackgroundColorString = eventData.data.barBackgroundColorString;        
+            this.barBackgroundColorResource = eventData.data.barBackgroundColorResource;
+        }
+    }
+
+    aboutToAppear(){
+        var stateChangeEvent = {
+            eventId: 183,
+            priority: events_emitter.EventPriority.LOW
+        }
+        events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+    }
+
+    build() {
+        Column() {
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .key('TabsOverlapTest1')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(this.barOverlap)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .key('TabsOverlapTest2')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(false)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .barBackgroundColor(this.barBackgroundColorColor)
+            .key('BarBackgroundColorColor')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(false)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .barBackgroundColor(this.barBackgroundColorNumber)
+            .key('BarBackgroundColorNumber')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(false)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .barBackgroundColor(this.barBackgroundColorString)
+            .key('BarBackgroundColorString')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .height('90%')
+            .width('90%')
+            .barBackgroundColor(this.barBackgroundColorResource)
+            .key('BarBackgroundColorResource')
+        }
+    }
+}
\ No newline at end of file

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/test/List.test.ets

@@ -13,7 +13,9 @@
  * limitations under the License.
  */
 import tabs from './Tabs'
+import tabsSec from './TabsSec'
 
 export default function testsuite() {
        tabs()
+       tabsSec()
 }
\ No newline at end of file

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/test/Tabs.ets

@@ -69,10 +69,10 @@ export default function tabs() {
           eventId: 183,
           priority: events_emitter.EventPriority.LOW
         }
-        console.info("[ArkUI_Tabs_Divider_0100] start to publish emit");
+        console.info("start to publish emit");
         events_emitter.emit(innerEvent, eventData);
       } catch (err) {
-        console.log("[ArkUI_Tabs_Divider_0100] change component data error: " + err.message);
+        console.log("change component data error: " + err.message);
       }
       await Utils.sleep(2000);
       done();
@@ -277,7 +277,7 @@ export default function tabs() {
           eventId: 183,
           priority: events_emitter.EventPriority.LOW
         }
-        console.info("[ArkUI_Tabs_Divider_0900] start to publish emit");
+        console.info("[ArkUI_Tabs_Divider_0800] start to publish emit");
         events_emitter.emit(innerEvent, eventData);
       } catch (err) {
         console.log("[ArkUI_Tabs_Divider_0800] change component data error: " + err.message);

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/test/TabsSec.ets

+/*
+ * Copyright (c) 2023 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.
+ */
+// @ts-nocheck
+import { describe, beforeEach, afterEach, it, expect } from '@ohos/hypium'
+import events_emitter from '@ohos.events.emitter';
+import Utils from './Utils.ets';
+import router from '@system.router';
+
+export default function tabsSec() {
+  describe('ActsAceTabsTestSec', function () {
+        beforeEach(async function (done) {
+      let options = {
+        uri:  "TestAbility/pages/IndexSec",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get IndexSec state success " + JSON.stringify(pages));
+        if (!("IndexSec" == pages.name)) {
+          console.info("get IndexSec state success " + JSON.stringify(pages.name));
+          let result = await router.push(options)
+          console.info("push IndexSec page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push IndexSec page error " + JSON.stringify(err));
+      }
+
+      await Utils.sleep(2000);
+      console.info("tabs beforeEach start");
+      done();
+    })
+
+    afterEach(async function (done) {
+      console.info("tabs afterEach start");
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": false,
+            "barBackgroundColorColor": Color.Red,
+            "barBackgroundColorNumber": 0,
+            "barBackgroundColorString": "#00000000",
+            "barBackgroundColorResource": $r("sys.color.ohos_toggle_bg"),
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      done();
+    })
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0100
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Gets the default values of barOverlap.
+     */
+    it('ArkUI_Tabs_BarOverlap_0100', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0100 start");
+      let strJson = getInspectorByKey('TabsOverlapTest1');
+      let obj = JSON.parse(strJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0100] barOverlap:" + obj.$attrs.barOverlap);
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0200
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Gets the values of barOverlap, when the value of the barOverlap is true.
+     */
+    it('ArkUI_Tabs_BarOverlap_0200', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0200 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0200: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": true,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0200] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0200] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0200] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(true);
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0300
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Gets the values of barOverlap, when the value of the barOverlap is false.
+     */
+    it('ArkUI_Tabs_BarOverlap_0300', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0300 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0300: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": false,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0300] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0300] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0300] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0400
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Gets the values of barOverlap, when the value of the barOverlap is null.
+     */
+    it('ArkUI_Tabs_BarOverlap_0400', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0400 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0400: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": null,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0400] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0400] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0400] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0500
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Gets the values of barOverlap, when the value of the barOverlap is undefined.
+     */
+    it('ArkUI_Tabs_BarOverlap_0500', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0500 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0500: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": undefined,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0500] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0500] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0500] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0600
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Step1: Gets the values of barOverlap, when the value of the barOverlap is true.
+     *               Step2: Gets the values of barOverlap, when the value of the barOverlap is false.
+     */
+    it('ArkUI_Tabs_BarOverlap_0600', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0600 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0600: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": true,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0600] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0600] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0600] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(true);
+
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": false,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0600] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0600] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      newJson = getInspectorByKey('TabsOverlapTest2');
+      obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0600] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+    
+     /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0700
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Step1: Gets the values of barOverlap, when the value of the barOverlap is true.
+     *               Step2: Gets the values of barOverlap, when the value of the barOverlap is null.
+     */
+    it('ArkUI_Tabs_BarOverlap_0700', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0700 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0700: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": true,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0700] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0700] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0700] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(true);
+
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": null,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0700] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0700] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      newJson = getInspectorByKey('TabsOverlapTest2');
+      obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0700] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+    
+    /**
+     * @tc.number    ArkUI_Tabs_BarOverlap_0800
+     * @tc.name      Tests the barOverlap property of the tabs component.
+     * @tc.desc      Step1: Gets the values of barOverlap, when the value of the barOverlap is true.
+     *               Step2: Gets the values of barOverlap, when the value of the barOverlap is undefined.
+     */
+    it('ArkUI_Tabs_BarOverlap_0800', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarOverlap_0800 start");
+      let strJson = getInspectorByKey('TabsOverlapTest2');
+      console.info("ArkUI_Tabs_BarOverlap_0800: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": true,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0800] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0800] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('TabsOverlapTest2');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0800] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      let barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(true);
+
+      try {
+        var eventData = {
+          data: {
+            "barOverlap": undefined,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarOverlap_0800] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarOverlap_0800] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      newJson = getInspectorByKey('TabsOverlapTest2');
+      obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarOverlap_0800] barOverlap:" + JSON.stringify(obj.$attrs.barOverlap));
+      barOverlapObject = JSON.parse(obj.$attrs.barOverlap);
+      expect(barOverlapObject).assertEqual(false);
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0100
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the default values of barBackgroundColor.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0100', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('TabsOverlapTest1');
+      
+      let obj = JSON.parse(strJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0100] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#00000000");
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0200
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the values of BarBackgroundColor, when the value of the barBackgroundColor is Color.Blue.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0200', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('BarBackgroundColorColor');
+      console.info("ArkUI_Tabs_BarBackgroundColor: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barBackgroundColorColor": Color.Blue,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarBackgroundColor_0200] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarBackgroundColor_0200] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('BarBackgroundColorColor');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0200] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#FF0000FF");
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0300
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the values of BarBackgroundColor, when the value of the barBackgroundColor is 123.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0300', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('BarBackgroundColorNumber');
+      console.info("ArkUI_Tabs_BarBackgroundColor: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barBackgroundColorNumber": 123,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarBackgroundColor_0300] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarBackgroundColor_0300] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('BarBackgroundColorNumber');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0300] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#FF00007B");
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0400
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the values of BarBackgroundColor, when the value of the barBackgroundColor is #0000FF.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0400', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('BarBackgroundColorString');
+      console.info("ArkUI_Tabs_BarBackgroundColor: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barBackgroundColorString": "#0000FF",
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarBackgroundColor_0400] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarBackgroundColor_0400] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('BarBackgroundColorString');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0400] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#FF0000FF");
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0500
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the values of BarBackgroundColor, when the value of the barBackgroundColor is sys.color.ohos_toggle_bg.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0500', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('BarBackgroundColorResource');
+      console.info("ArkUI_Tabs_BarBackgroundColor: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barBackgroundColorResource": $r("sys.color.ohos_toggle_bg"),
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarBackgroundColor_0500] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarBackgroundColor_0500] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('BarBackgroundColorResource');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0500] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#0C182431");
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0600
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the values of BarBackgroundColor, when the value of the barBackgroundColor is null.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0600', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('BarBackgroundColorColor');
+      console.info("ArkUI_Tabs_BarBackgroundColor: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barBackgroundColorColor": null,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarBackgroundColor_0600] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarBackgroundColor_0600] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('BarBackgroundColorColor');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0600] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#00000000");
+      done();
+    });
+
+    /**
+     * @tc.number    ArkUI_Tabs_BarBackgroundColor_0700
+     * @tc.name      Tests the BarBackgroundColor property of the tabs component.
+     * @tc.desc      Gets the values of BarBackgroundColor, when the value of the barBackgroundColor is undefined.
+     */
+    it('ArkUI_Tabs_BarBackgroundColor_0700', 0, async function (done) {
+      console.info("ArkUI_Tabs_BarBackgroundColor start");
+      let strJson = getInspectorByKey('BarBackgroundColorColor');
+      console.info("ArkUI_Tabs_BarBackgroundColor: " + JSON.stringify(strJson))
+      try {
+        var eventData = {
+          data: {
+            "barBackgroundColorColor": undefined,
+          }
+        }
+        var innerEvent = {
+          eventId: 183,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[ArkUI_Tabs_BarBackgroundColor_0700] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[ArkUI_Tabs_BarBackgroundColor_0700] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let newJson = getInspectorByKey('BarBackgroundColorColor');
+      let obj = JSON.parse(newJson);
+      console.info("[ArkUI_Tabs_BarBackgroundColor_0700] barBackgroundColor:" + JSON.stringify(obj.$attrs.barBackgroundColor));
+      let barBackgroundColorObject = obj.$attrs.barBackgroundColor;
+      expect(barBackgroundColorObject).assertEqual("#00000000");
+      done();
+    });  
+
+  })
+}

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/module.json

 {
   "module": {
-    "name": "phone",
+    "name": "entry_test",
     "type": "feature",
     "description": "$string:module_test_desc",
     "mainElement": "TestAbility",

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/resources/base/profile/test_pages.json

 {
   "src": [
-    "TestAbility/pages/Index"
+    "TestAbility/pages/Index",
+    "TestAbility/pages/IndexSec"
   ]
 }