模拟SharePoint的context测试

这是我参与11月更文挑战的第2天，活动详情查看：11月更文挑战 这SharePoint我终于学到curd了,我想我现在应该算是入门了吧.

在本地工作台打开web服务器

根据前面的知识,在本地工作台运行前面要使用托管工作台的项目的时候 会发现什么都没有发生,此时你检查元素会发现报错

不要慌,这都是咱们意料之中的错误,这是因为本地工作台没有你所需要的context,SharePoint的API只能在真实地环境下才可以用.

这太麻烦了,所以我们要想一个方式来解决它.

造测试数据

首先,为了我们的程序更加健壮,需要判断一下是本地环境还是真实环境,不能说我测试是一个程序,实际是另外一个程序,这样就太不简洁了,一点都不好.程序一点都不健壮

微软给了我们一个API去判断是否是真实环境.既然有一种检测当前 SharePoint 环境的方法，您就可以使用此方法在真实的 SharePoint 环境中运行时有条件地调用 SharePoint REST API。以下方法使用_isSharePoint()先前定义的以示例数据填充数组或使用 SharePoint REST API 填充数组。

导入我们需要的包 放在{你的包名}WebPart.ts 文件中

import {
  Environment,
  EnvironmentType
} from '@microsoft/sp-core-library';

//方法很好理解,主要是SharePoint分为现代风格和经典风格,但是不管那个风格都属于真实环境
private get _isSharePoint(): boolean {
  return (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint);
}

//找到onGetListItems方法修改一下
if (!this._isSharePoint) {
  this._countries = [
    { Id: '1', Title: 'Country 1' },
    { Id: '2', Title: 'Country 2' },
    { Id: '3', Title: 'Country 3' },
    { Id: '4', Title: 'Country 4' }
  ];
  this.render();
} else {
  this._getListItems()
    .then(response => {
      this._countries = response;
      this.render();
    });
}

好的,此时就完成了对于数据的模拟,开始测试

开始测试

gulp serve

当打开的是本地工作台的时候,点击按钮会出现 咱们写死的假数据,而打开的是托管工作台时,拿到的是咱们从SharePoint ListData里面的数据

到此为止,我们就学会了在本地工作台中开发和测试 SharePoint 框架组件时 如何使用模拟来模拟 SharePoint 数据。我们可以在SharePoint上面进行curd.