Question

我正在Angular工作，在编写测试用例时，我需要模拟数据。我想使用一种方法，该方法将以我想要使用的格式为我提供所需的数据，例如，我有一个用户

的界面

Answer 1

我觉得您可以使用Math.Random（）函数随机生成模拟用户。

请查看下面的URL，我在StackBlitz上做了一个示例

https://stackblitz.com/edit/angular-cpdery

如果您有任何问题，请告诉我。

export class AppComponent  {
  name = 'Angular';
  IUser:any []= [{ id : 0, name : ''}]

//假设这是您的用户界面

  ngOnInit(){
    var temp :any [] = this.genrateUsers(10)
    temp.forEach(element =>{
      console.log('Element is',element)
    })
  }

//此函数根据作为参数传递给此函数的i的值随机生成用户，并返回用户数组

  genrateUsers(i){
    this.IUser.length=0;
    for(var x=0; x<i; x++){
      this.IUser.push({id:Math.random().toString().substr(16),name:Math.floor(Math.random()*16777215).toString(16)})
    }
    return this.IUser
  }
}

Answer 2

在为前端项目生成模拟数据时，我使用json-generator ("next" version)（这样，我不需要等待后端完成就可以从前端开始，我只需要返回暂定的数据结构）。它是由Vazha Omanashvili创建的，因此所有功劳都归功于他。这个json-generator是用JavaScript构建的，因此，它也允许使用JS代码（即Array方法等），这对于前端开发人员来说是完美的。基本上，它提供了具有许多内置功能的简单GUI，可让您快速.json中生成模拟数据，而不必花费大量时间使用原始javascript循环等将其写出。

对于像用户模型这样的更简单的模拟数据，可以如此简单，如果需要更多属性，可以在生成的代码中添加更多代码：

简单的模拟数据，生成代码：

[
  {
    'repeat(5, 10)': {
      id: '{{index()}}',
      name(tags) {
        return `Test-User-${this.id}`;
      }
    }
  }
]

结果

[
  {
    "id": 0,
    "name": "Test-User-0"
  },
  {
    "id": 1,
    "name": "Test-User-1"
  },
  {
    "id": 2,
    "name": "Test-User-2"
  },
  {
    "id": 3,
    "name": "Test-User-3"
  },
  {
    "id": 4,
    "name": "Test-User-4"
  },
  {
    "id": 5,
    "name": "Test-User-5"
  },
  {
    "id": 6,
    "name": "Test-User-6"
  },
  {
    "id": 7,
    "name": "Test-User-7"
  },
  {
    "id": 8,
    "name": "Test-User-8"
  },
  {
    "id": 9,
    "name": "Test-User-9"
  },
  {
    "id": 10,
    "name": "Test-User-10"
  },
  {
    "id": 11,
    "name": "Test-User-11"
  },
  {
    "id": 12,
    "name": "Test-User-12"
  },
  {
    "id": 13,
    "name": "Test-User-13"
  },
  {
    "id": 14,
    "name": "Test-User-14"
  },
  {
    "id": 15,
    "name": "Test-User-15"
  },
  {
    "id": 16,
    "name": "Test-User-16"
  },
  {
    "id": 17,
    "name": "Test-User-17"
  },
  {
    "id": 18,
    "name": "Test-User-18"
  },
  {
    "id": 19,
    "name": "Test-User-19"
  }
]

对于更复杂的数据结构，您可以将2个数组链接在一起，就像将2个db表连接在一起一样。

复杂的模拟数据生成代码-JavaScript + json-generator的内置函数

[
  {
    'repeat(5)':{
        category_id: "{{index()}}", //built-in function to generate IDsssssssss
        category_info(tags){
          const CATEGORIES = ['Dairy', 'Vegetables', 'Chips & Snacks'];

          const CATEGORY_DESCRIP = ['Products containing milk', 'Green and healthy', 'Unhealthy food'];

          let _oneRandCategory = CATEGORIES[tags.integer(0, CATEGORIES.length-1)]; //tags.integer is basically a built-in random integer method

          let _oneLinkedCatDescrip = CATEGORY_DESCRIP[CATEGORIES.indexOf(_oneRandCategory)]; //join by index of array

          return {category:_oneRandCategory , description:_oneLinkedCatDescrip };
        }
    }
  }
]

生成的结果，json格式

[
  {
    "category_id": 0,
    "category_info": {
      "category": "Vegetables",
      "description": "Green and healthy"
    }
  },
  {
    "category_id": 1,
    "category_info": {
      "category": "Dairy",
      "description": "Products containing milk"
    }
  },
  {
    "category_id": 2,
    "category_info": {
      "category": "Dairy",
      "description": "Products containing milk"
    }
  },
  {
    "category_id": 3,
    "category_info": {
      "category": "Dairy",
      "description": "Products containing milk"
    }
  },
  {
    "category_id": 4,
    "category_info": {
      "category": "Chips & Snacks",
      "description": "Unhealthy food"
    }
  }
]

您可能会看到，类别和描述通过数组的索引“连接”在一起-就像2个数据库表连接在一起。因此，生成代码中的2个数组充当模拟db表。我可以简单地将repeat(5)更改为repeat(100)并生成100x对象来测试前端表或搜索/过滤器功能等中的分页外观。

生成模拟数据后，您必须将json数组保存在.json文件中，或者仅将其作为数组添加到测试用例/组件中。我更喜欢将其放在单独的文件夹中，以便在不同的地方重复使用，例如app/mockdata/mock-users-data.json。

然后，使用import { users } from 'app/mockdata/mock-users-data.json导入json文件。 users是一个任意标识符，您可以使用任何名称来标识json文件中的json数组。然后在代码中使用users，例如let mockUsers = users。

Answer 3

如果您想要某种服务器来调用并获取测试数据，则可以使用：JSONPlaceholder

JSONPlaceholder是一个免费的在线REST API，您可以在需要一些假数据时使用它。非常适合教程，测试新库，共享代码示例，...

甚至您也可以创建自己的测试数据：My JSON Server :Fake Online REST server for teams

如何

在GitHub（/）上创建存储库创建一个db.json文件访问https://my-json-server.typicode.com/ /访问您的服务器没有注册。没什么要安装的。

动态生成用户模拟数据

3 个答案: