JS_API_Mock
JS_API_Mock
简介
当前ACE JS应用在DevEco中的PC预览运行环境仅包含ACE子系统代码，不包含其他子系统代码，所以当前无法提供瑜真机上类似的JS API的功能；为了避免开发者在使用JS API时引起页面报错或阻塞页面显示等问题，需要将对应的JS API在Pc预览上进行mock，使得开发者在js中实现的逻辑可以继续执行。
注意：JS预览器功能依赖于电脑显卡的OpenGL版本，OpenGL版本要求为3.2及以上。（通常桌面云上的版本较低，请使用PC验证）
代码需要在蓝区提交至https：//gitee.com/openharmony/third_party_jsframework的master分支， API8的需要先合入master后合入3.1release分支，API9的需要合入master分支
**#ACE JS应用:**Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。 Ace一直是Cloud9 IDE的主要编辑器，并且是Mozilla Skywriter（Bespin）项目的后继者。
#DevEco:HUAWEI DevEco Studio基于IntelliJ IDEA Community开源版本深度定制开发，是面向全场景多设备的一站式分布式应用开发平台，支持HarmonyOS和OpenHarmony应用及服务开发。作用: HarmonyOS应用开发，Android应用开发
#MOCK
mock用英文翻译过来，具有虚假的，模拟的模仿的意思。我理解它其实是一种思想。据百度百科：mock测试就是在测试过程中，对于某些不容易构造或者容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。
#为什么要mock
这里举例说明几种场景：
1.你测试的A接口依赖B接口，但是开发还没有开发完成B接口，这时候你不可能去等吧，如果等那迭代后面的时间会压缩的很紧，这时候你就可以mockB接口模拟B返回的值，然后去测A接口。
2.你所依赖的外部接口没有开放，比如测支付这一块，支付宝或者微信的支付接口还没有开放，那这时候也可以用mock来解决。
3.你测试的东西依赖的太多，搭建环境比较复杂，时间成本高的情况下可以用mock，例：测试A接口时候，A依赖B，B依赖C,D， C和D又依赖其他，这时候你就可以用mock来模拟B，来对A进行测试。
JS_API_Mock步骤
蓝区JS_API_Mock步骤
注意：蓝区代码一定要在蓝区环境push到gitee，在黄区push是典型的信息安全违规操作，如没有蓝区环境，请与对应接口华为方人员联系。不要在黄区push！不要在黄区push！不要在黄区push！
获取标准系统源码
实现JS API Mock
#蓝区DevEco获取地址：https://developer.harmonyos.com/cn/develop/deveco-studio 请下载DevEco Studio 3.0 Beta1版本及以上版本（新版本建议使用API9的工程）创建项目API选择8，JS（9里面没有JS）;点击help->Check for Updates，更新到最新；打开sdk路径，全部删除，重新打开DevEco，file->Settings重新下载sdk;#在av_session/frameworks/kitsimpl/js/session下找到@ohos.multimedia.avsession.d.ts，移动在DevEco的SDK路径下：C:\Users\sirui\AppData\Local\OpenHarmony\Sdk\js\3.1.6.5\api(jdk8，只做此操作即可)C:\Users\sirui\AppData\Local\OpenHarmony\Sdk\js\3.2.2.5\apiC:\Users\sirui\AppData\Local\OpenHarmony\Sdk\ets\3.1.6.5\apiC:\Users\sirui\AppData\Local\OpenHarmony\Sdk\ets\3.2.2.5\api这四个目录都添加一下@ohos.multimedia.avsession.d.ts#在third_party/jsframework/runtime/main/extend/systemplugin/napi目录下增加对应的js文件,文件命名格式与dts文件保持一直，例如@ohos.accessibility.d.ts则其对应的js文件名为ohos_accessibility.js；实现对于对应的JS API Mock，编写ohos_multimedia_av_session.js#在third_party/jsframework/runtime/main/extend/systemplugin/napi目录下修改index.js在对应地方添加下面两条语句：1.import { mockMultimediaAVSession } from './ohos_multimedia_av_session'2.case "multimedia.avsession": return mockMultimediaAVSession();import { paramMock } from "../utils"const AVSessionControllerMock = { sessionId: "[PC Preview] unknow sessionId", getAVPlaybackState: function (...args) { console.warn("AVSessionController.getAVPlaybackState interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") const len = args.length if (typeof args[len - 1] === 'function') { args[len - 1].call(this, paramMock.businessErrorMock, AVPlaybackState); } else { return new Promise((resolve, reject) => { resolve(AVPlaybackState); }) } }, getAVMetadata: function (...args) { console.warn("AVSessionController.getAVMetadata interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") const len = args.length if (typeof args[len - 1] === 'function') { args[len - 1].call(this, paramMock.businessErrorMock, AVMetadata); } else { return new Promise((resolve, reject) => { resolve(AVMetadata); }) } }, getOutputDevice: function (...args) { console.warn("AVSessionController.getOutputDevice interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") const len = args.length if (typeof args[len - 1] === 'function') { args[len - 1].call(this, paramMock.businessErrorMock, OutputDeviceInfo); } else { return new Promise((resolve, reject) => { resolve(OutputDeviceInfo); }) } }, sendAVKeyEvent: function (...args) { console.warn("AVSessionController.sendAVKeyEvent interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") const len = args.length if (typeof args[len - 1] === 'function') { args[len - 1].call(this, paramMock.businessErrorMock); } else { return new Promise((resolve, reject) => { resolve(); }) } }, getLaunchAbility: function (...args) { console.warn("AVSessionController.getLaunchAbility interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") const len = args.length if (typeof args[len - 1] === 'function') { args[len - 1].call(this, paramMock.businessErrorMock, {}); } else { return new Promise((resolve, reject) => { resolve({}); }) } }, getRealPlaybackPositionSync: function (...args) { console.warn("AVSessionController.getRealPlaybackPositionSync interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") },}export function mockMultimediaAVSession() { const avsession = { createController: function (...args) { console.warn("AVSession.createController interface mocked in the Previewer. How this interface works on the Previewer" + " may be different from that on a real device.") const len = args.length if (typeof args[len - 1] === 'function') { args[len - 1].call(this, paramMock.businessErrorMock, AVSessionControllerMock); } else { return new Promise((resolve, reject) => { resolve(AVSessionControllerMock); }) } } } return avsession;}编译验证JS API Mock
如果是下载代码后第一次编译需要执行预编译二进制工具链下载
./build/prebuilts_download.sh --no-check-certificatie -skip--ssl编译PC预览动态库
执行如下命令：
./build.sh --product-name ohos-sdk替换SDK中PC预览动态库
#如果使用的是Openharmony SDK，将2.1.3中编译PC预览动态库中编译出来的out/sdk/ohos-sdk/windows/previewer/common下所有内容替换到DevEco中使用的SDK路径下的previewer/5.x.x.x/common目录下。#如果使用的是HarmonyOS SDK，将2.1.3中编译PC预览动态库中编译出来的out/sdk/ohos-sdk/windows/previewer/common下所有内容替换到DevEco中使用的SDK路径下的previewer/5.x.x.x/tv目录下。注意：如果需要多次编译dll文件，请在后续每次的编译前删除out/sdk/mingw_x86_64/obj/third_party/jsframework/目录，以免修改后的内容，不能编译到dll文件中。若遇到替换后白屏的问题，将2.1.3中编译PC预览动态库中编译出来的out/sdk/ohos-sdk/windows/ets或js目录下的三个文件夹(需要先删除该文件夹下的JS文件夹)，需要替换DevEco使用的SDK路径下js/5.x.x.x/目录下(到这一步就好了)，注意，只替换这几个文件夹不替换对应路径下的配置文件，然后在ets/5.x.x.x/build-tools/ets-load目录下执行npm install；验证JS API Mock结果
Mock扫描规范：
https://gitee.com/huyisuo/third_party_jsframework/wikis/JS%20API%20Mock%20%E6%89%AB%E6%8F%8F%E8%A7%84%E8%8C%83编写js/ets应用（JS API使用方式与真实开发者使用方式一致）使用被mock的JS API，验证mock结果。
在DevEco下：
在External Libraries/JS-3.1.6.5/api/device-define/default.json中，添加（在.d.ts文件开头有）：
"SystemCapability.Multimedia.AVSession.Core",编写MyMock/entry/src/main/js/MainAbility/pages/index/index.js（import在.d.ts文件开头有）：
import avsession from '@ohos.multimedia.avsession'export default { data: { title: "" }, onInit() { this.title = this.$t('strings.world'); avsession.createController(1,function(err,controller){ console.log("controller:"+controller.sessionId) controller.getAVPlaybackState(function(err,getavplaybackstate){ console.log("getAVPlaybackState AsyncCallback:"+JSON.stringify(getavplaybackstate)) }) controller.getAVPlaybackState().then((getavplaybackstate)=>{ console.log("getAVPlaybackState Promise:"+JSON.stringify(getavplaybackstate)) }) controller.getAVMetadata(function(err,avmetadata){ console.log("getAVMetadata AsyncCallback:"+JSON.stringify(avmetadata)) }) controller.getAVMetadata().then((avmetadata)=>{ console.log("getAVMetadata Promise:"+JSON.stringify(avmetadata)) }) controller.getOutputDevice(function(err,outputdeviceinfo){ console.log("getOutputDevice AsyncCallback:"+JSON.stringify(outputdeviceinfo)) }) controller.getOutputDevice().then((outputdeviceinfo)=>{ console.log("getOutputDevice Promise:"+JSON.stringify(outputdeviceinfo)) }) controller.sendAVKeyEvent('a',function(err){ console.log("sendAVKeyEvent AsyncCallback") }) controller.sendAVKeyEvent('a').then(()=>{ console.log("sendAVKeyEvent Promise") }) controller.getLaunchAbility(function(err,wantagent){ console.log("getLaunchAbility AsyncCallback:"+JSON.stringify(wantagent)) }) controller.getLaunchAbility().then((wantagent)=>{ console.log("getLaunchAbility Promise:"+JSON.stringify(wantagent)) }) var num = controller.getRealPlaybackPositionSync() console.log("getRealPlaybackPositionSync:"+JSON.stringify(num)) }) }}最后在DevEco中点击最后边的Previewer，左下角点击PreviewerLog查看日志打印；
[default][Console INFO] 07/11 14:51:18 26800 app Log: Application onCreate[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSession.createController interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: controller:[PC Preview] unknow sessionId[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getAVPlaybackState interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getAVPlaybackState AsyncCallback:{"state":"[PC Preview] unknow state","speed":"[PC Preview] unknow speed","bufferedTime":"[PC Preview] unknow bufferedTime","loopMode":"[PC Preview] unknow loopMode","isFavorite":"[PC Preview] unknow isFavorite"}[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getAVPlaybackState interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getAVMetadata interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getAVMetadata AsyncCallback:{"assetId":"[PC Preview] unknow assetId","title":"[PC Preview] unknow title","artist":"[PC Preview] unknow artist","author":"[PC Preview] unknow author","album":"[PC Preview] unknow album","writer":"[PC Preview] unknow writer","composer":"[PC Preview] unknow composer","duration":"[PC Preview] unknow duration","mediaImage":"[PC Preview] unknow mediaImage","publishDate":"[PC Preview] unknow publishDate","subtitle":"[PC Preview] unknow subtitle","description":"[PC Preview] unknow description","lyric":"[PC Preview] unknow lyric","previousAssetId":"[PC Preview] unknow previousAssetId","nextAssetId":"[PC Preview] unknow nextAssetId"}[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getAVMetadata interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getOutputDevice interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getOutputDevice AsyncCallback:{"isRemote":"[PC Preview] unknow isRemote","deviceId":"[PC Preview] unknow Array","deviceName":"[PC Preview] unknow Array"}[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getOutputDevice interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.sendAVKeyEvent interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: sendAVKeyEvent AsyncCallback[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.sendAVKeyEvent interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getLaunchAbility interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getLaunchAbility AsyncCallback:{}[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getLaunchAbility interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console WARNING] 07/11 14:51:18 26800 app Log: AVSessionController.getRealPlaybackPositionSync interface mocked in the Previewer. How this interface works on the Previewer may be different from that on a real device.[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getRealPlaybackPositionSync:"[PC Preview] unknow number"[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getAVPlaybackState Promise:{"state":"[PC Preview] unknow state","speed":"[PC Preview] unknow speed","bufferedTime":"[PC Preview] unknow bufferedTime","loopMode":"[PC Preview] unknow loopMode","isFavorite":"[PC Preview] unknow isFavorite"}[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getAVMetadata Promise:{"assetId":"[PC Preview] unknow assetId","title":"[PC Preview] unknow title","artist":"[PC Preview] unknow artist","author":"[PC Preview] unknow author","album":"[PC Preview] unknow album","writer":"[PC Preview] unknow writer","composer":"[PC Preview] unknow composer","duration":"[PC Preview] unknow duration","mediaImage":"[PC Preview] unknow mediaImage","publishDate":"[PC Preview] unknow publishDate","subtitle":"[PC Preview] unknow subtitle","description":"[PC Preview] unknow description","lyric":"[PC Preview] unknow lyric","previousAssetId":"[PC Preview] unknow previousAssetId","nextAssetId":"[PC Preview] unknow nextAssetId"}[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getOutputDevice Promise:{"isRemote":"[PC Preview] unknow isRemote","deviceId":"[PC Preview] unknow Array","deviceName":"[PC Preview] unknow Array"}[default][Console DEBUG] 07/11 14:51:18 26800 app Log: sendAVKeyEvent Promise[default][Console DEBUG] 07/11 14:51:18 26800 app Log: getLaunchAbility Promise:{}提交代码
（1）代码提交前，需要自查格式，确保格式没有问题
（2）蓝区mock代码需要加入版权头(如果是对2021的mock内容修改改为2021-2022，如果是2022新增mock文件，则改为2022)
（3）代码提交前， 需按照d.ts自检补充3.2测试验收三点要求。在蓝区提交的代码一定要在蓝区自验证，并且发给胡益锁wx1119949review时要附上提交链接和对应的d.ts文件链接以及蓝区自验证截图。review完成后，找黄施昱00369912合入
（4）代码提交步骤参考：https://gitee.com/openharmony/docs/blob/master/zh-cn/contribute/%E8%B4%A1%E7%8C%AE%E6%B5%81%E7%A8%8B.md 需要符合对应的代码编程规范然后按照贡献流程提交代码。
（5）代码需要在蓝区提交至https：//gitee.com/openharmony/third_party_jsframework的master分支， API8的需要先合入master后合入3.1release分支，API9的需要合入master分支
测试验收
JS API 是已评审过的d.ts为准编写的JS Moc代码。验收时，应以d.ts为准，在PC预览上使用对应的JS API，执行到对应逻辑时确认以下三点：
1.接口类型实现与d.ts定义一致，即：同步接口、异步回调接口，promise接口等。
2.日志打印提示开发者当前接口时被mock，与真机环境存在差异。
3.接口返回或回调参数数据结构与d.ts一致，保证基本的数据结构框架，数据内容可能与真机存在差异。