HarmonyOS ArkTS 用户首选项的开辟及测试

本节以一个“账本”为例，使用首选项的相干接口实现了对账单的增、删、改、查操纵，并使用自动化测试框架arkxtest来对应用举行自动化测试。
为了演示该功能，创建一个名为“ArkTSPreferences”的应用。应用源码可以在文末《跟老卫学HarmonyOS开辟》链接找到。
1. 操纵Preferences

首先要获取一个Preferences来操纵首选项。
在src/main/ets目次下创建名为“common”目次，用于存放常用的工具类。在该common目次创建工具类PreferencesUtil，代码如下：

1. // 导入preferences模块
2. import { preferences } from '@kit.ArkData';
4. import { BusinessError } from '@kit.BasicServicesKit';
5. import { common } from '@kit.AbilityKit';
8. let context = getContext(this) as common.UIAbilityContext;
9. let options: preferences.Options = { name: 'myStore' };
11. export default class PreferencesUtil {
12.   private dataPreferences: preferences.Preferences | null = null;
14.   // 调用getPreferences方法读取指定首选项持久化文件，
15.   // 将数据加载到Preferences实例，用于数据操作
16.   async getPreferencesFromStorage() {
17.     await preferences.getPreferences(context, options).then((data) => {
18.       this.dataPreferences = data;
19.       console.info(`Succeeded in getting preferences`);
20.     }).catch((err: BusinessError) => {
21.       console.error(`Failed to get preferences, Cause:` + err);
22.     });
23.   }
24. }
25. 复制

复制代码

为了对数据举行生存、查询、删除查操纵，我们要封装对应接口。首选项接口提供的生存、查询、删除方法均有callback和Promise两种异步回调方式，本例子使用了Promise异步回调。代码如下：

1. // 将用户输入的数据，保存到缓存的Preference实例中
2. async putPreference(key: string, data: string) {
3.   if (this.dataPreferences === null) {
4.     await this.getPreferencesFromStorage();
5.   } else {
6.     await this.dataPreferences.put(key, data).then(() => {
7.       console.info(`Succeeded in putting value`);
8.     }).catch((err: BusinessError) => {
9.       console.error(`Failed to get preferences, Cause:` + err);
10.     });
12.     // 将Preference实例存储到首选项持久化文件中
13.     await this.dataPreferences.flush();
14.   }
15. }
17. // 使用Preferences的get方法读取数据
18. async getPreference(key: string) {
19.   let result: string= '';
20.   if (this.dataPreferences === null) {
21.     await this.getPreferencesFromStorage();
22.   } else {
23.     await this.dataPreferences.get(key, '').then((data) => {
24.       result = data.toString();
25.       console.info(`Succeeded in getting value`);
26.     }).catch((err: BusinessError) => {
27.       console.error(`Failed to get preferences, Cause:` + err);
28.     });
29.   }
31.   return result;
32. }
34. // 从内存中移除指定文件对应的Preferences单实例。
35. // 移除Preferences单实例时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。
36. async deletePreferences() {
38.   preferences.deletePreferences(context, options, (err: BusinessError) => {
39.     if (err) {
40.       console.error(`Failed to delete preferences. Code:${err.code}, message:${err.message}`);
41.       return;
42.     }
44.     this.dataPreferences = null;
45.     console.info('Succeeded in deleting preferences.');
46.   })
47. }
48. 复制

复制代码

2. 账目信息的表现

在src/main/ets目次下创建名为“database”目次，并在该database目次下创建类AccountData，代码如下：

1. export default interface AccountData {
2.   id: number;
3.   accountType: number;
4.   typeText: string;
5.   amount: number;
6. }
7. 复制

复制代码

AccountData各属性寄义如下：

• id：主键。
  
• accountType：账目类型。0表现支出；1表现收入。
  
• typeText：账目的具体类别。
  
• amount：账目金额。
  

3. 计划界面

为了简化程序，突出核心逻辑，我们的界面计划的非常简单，只是一个Text组件和四个Button组件。四个Button组件用于触发增、删、改、查操纵，而Text组件用于展示每次操纵后的效果。修改Index代码如下：

1. // 导入PreferencesUtil
2. import PreferencesUtil from '../common/PreferencesUtil';
3. // 导入AccountData
4. import AccountData from '../database/AccountData';
6. const PREFERENCES_KEY = 'fruit';
8. @Entry
9. @Component
10. struct Index {
11.   @State message: string = 'Hello World'
12.   private preferencesUtil = new PreferencesUtil();
14.   async aboutToAppear() {
15.     // 初始化首选项
16.     await this.preferencesUtil.getPreferencesFromStorage();
18.     // 获取结果
19.     this.preferencesUtil.getPreference(PREFERENCES_KEY).then(resultData => {
20.       this.message = resultData;
21.     });
22.   }
24.   build() {
25.     Row() {
26.       Column() {
27.         Text(this.message)
28.           .id('text_result')
29.           .fontSize(50)
30.           .fontWeight(FontWeight.Bold)
32.         // 增加
33.         Button(('增加'), { type: ButtonType.Capsule })
34.           .width(140)
35.           .fontSize(40)
36.           .fontWeight(FontWeight.Medium)
37.           .margin({ top: 20, bottom: 20 })
38.           .onClick(() => {
39.             // 保存数据
40.             let newAccount: AccountData = { id: 1, accountType: 0, typeText: '苹果', amount: 0 };
41.             this.preferencesUtil.putPreference(PREFERENCES_KEY, JSON.stringify(newAccount));
42.           })
44.         // 查询
45.         Button(('查询'), { type: ButtonType.Capsule })
46.           .width(140)
47.           .fontSize(40)
48.           .fontWeight(FontWeight.Medium)
49.           .margin({ top: 20, bottom: 20 })
50.           .onClick(() => {
51.             // 获取结果
52.             this.preferencesUtil.getPreference(PREFERENCES_KEY).then(resultData => {
53.               this.message = resultData;
54.             });
55.           })
57.         // 修改
58.         Button(('修改'), { type: ButtonType.Capsule })
59.           .width(140)
60.           .fontSize(40)
61.           .fontWeight(FontWeight.Medium)
62.           .margin({ top: 20, bottom: 20 })
63.           .onClick(() => {
64.             // 修改数据
65.             let newAccount: AccountData = { id: 1, accountType: 1, typeText: '栗子', amount: 1 };
66.             this.preferencesUtil.putPreference(PREFERENCES_KEY, JSON.stringify(newAccount));
67.           })
69.         // 删除
70.         Button(('删除'), { type: ButtonType.Capsule })
71.           .width(140)
72.           .fontSize(40)
73.           .fontWeight(FontWeight.Medium)
74.           .margin({ top: 20, bottom: 20 })
75.           .onClick(() => {
76.             this.preferencesUtil.deletePreferences();
77.           })
78.       }
79.       .width('100%')
80.     }
81.     .height('100%')
82.   }
83. }
84. 复制

复制代码

上述代码，在aboutToAppear生命周期阶段，初始化了Preferences。点击“新增”会将预设好的数据“{ id: 1, accountType: 0, typeText: '苹果', amount: 0 }”写入到Preferences。点击“修改”会将预设好的“{ id: 1, accountType: 1, typeText: '栗子', amount: 1 }”的数据更新到Preferences。点击“删除”则会从内存中移除指定文件对应的Preferences单实例。
4. 运行

运行应用表现的界面效果如下图所示。

当用户点击“增加”后再点击“查询”时，界面如下图所示，证明数据已经成功写入Preferences。

当用户点击“修改”后再点击“查询”时，界面如下图所示，证明数据已经被修改并更新回Preferences。

当用户点击“删除”后再点击“查询”时，界面如下图所示，证明数据已经从Preferences删除。

5. 编写UI测试脚本

UI测试基于单元测试，UI测试脚本在单元测试脚本上增加了对UiTest接口，具体请参考API文档。
如下的示例代码是在上面的单元测试脚本底子上增量编写，实现的是在启动的应用页面上举行点击操纵，然后检测当前页面变化是否为预期变化。
在“ohosTest/ets/test/”目次下，是专门用于存放具体测试代码的。在该目次下，已经存在了一个测试用例样板代码Ability.test.ets文件，基于该文件举行编写UI测试脚本。修改后，代码如下：

1. import { describe, it, expect } from '@ohos/hypium';
2. import { abilityDelegatorRegistry, Driver, ON } from '@kit.TestKit';
3. import { UIAbility, Want } from '@kit.AbilityKit';
4. import AccountData from '../../../main/ets/database/AccountData';
6. const delegator: abilityDelegatorRegistry.AbilityDelegator = abilityDelegatorRegistry.getAbilityDelegator()
7. const bundleName = abilityDelegatorRegistry.getArguments().bundleName;
9. function sleep(time: number) {
10.   return new Promise<void>((resolve: Function) => setTimeout(resolve, time));
11. }
13. export default function abilityTest() {
14.   describe('ActsAbilityTest', () => {
16.     // 编写UI测试脚本
17.     it('testUi',0, async (done: Function) => {
18.       console.info("uitest: testUi begin");
19.       // 启动待测试的 ability
20.       const want: Want = {
21.         bundleName: bundleName,
22.         abilityName: 'EntryAbility'
23.       }
24.       await delegator.startAbility(want);
25.       await sleep(1000);
27.       // 检查顶层显示的 ability
28.       await delegator.getCurrentTopAbility().then((Ability: UIAbility)=>{
29.         console.info("get top ability");
30.         expect(Ability.context.abilityInfo.name).assertEqual('EntryAbility');
31.       })
33.       // UI 测试代码
34.       // 初始化driver
35.       let driver = Driver.create();
36.       await driver.delayMs(1000);
38.       // 查找'增加'按钮
39.       let buttonAdd = await driver.findComponent(ON.text('增加'));
41.       // 点击按钮
42.       await buttonAdd.click();
43.       await driver.delayMs(1000);
45.       // 查找'查询'按钮
46.       let buttonQuery = await driver.findComponent(ON.text('查询'));
48.       // 点击按钮
49.       await buttonQuery.click();
50.       await driver.delayMs(1000);
52.       // 查找 id 为'text_result'的 Text 组件
53.       let text = await driver.findComponent(ON.id('text_result'));
55.       // 检查文本内容
56.       await text.getText().then(result => {
57.         let newAccount: AccountData = { id: 1, accountType: 0, typeText: '苹果', amount: 0 };
59.         expect(result).assertEqual(JSON.stringify(newAccount))
60.       });
62.       done();
63.     })
65.   })
66. }
67. 复制

复制代码

上述代码主要做了以下几件事：

• 查找增加按钮，并举行点击；
  
• 查找查询按钮，并举行点击；
  
• 查找Text组件，断言该Text组件文本内容是否与渴望的值一致。
  

6. 运行UI测试脚本

首先，启动模拟器或者真机。在模拟器或者真机上安装应用。
其次，点击如下图13-1所示的测试用例的左侧三角按钮，以运行测试脚本。

如果断言成功，则说明测试通过，可以看到如下绿色打勾的标识。

如果断言失败，则说明测试没有通过，可以看到如下赤色告警标识，并会提示断言失败的缘故原由。

7. 参考

• 《跟老卫学HarmonyOS开辟》 开源免费教程，GitHub - waylau/harmonyos-tutorial: HarmonyOS Tutorial. 《跟老卫学HarmonyOS开辟》
  
• 《鸿蒙HarmonyOS手机应用开辟实战》（清华大学出版社）
  
• 《鸿蒙HarmonyOS应用开辟从入门到醒目战》（北京大学出版社）
  
• “鸿蒙体系实战短视频App 从0到1把握HarmonyOS”（鸿蒙体系实战短视频App 从0到1把握HarmonyOS_实战课程_慕课网）
  
• 《鸿蒙HarmonyOS应用开辟入门》（清华大学出版社）
  
• “2024鸿蒙零底子快速实战-仿抖音App开辟（ArkTS版）”（2024 鸿蒙零底子快速实战-仿抖音App开辟（ ArkTS版 ）_实战课程_慕课网）
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。