QQs'Note

2020前端展望

跨端开发，混合应用，小程序等

工程化

FCC article：前端工程化

• 编码规范
• repository规范
• ci/cd
• 测试 单元测试 e2e
• 性能
• 数据上报 requestIdleCallback, restful api
• 用户行为收集 metadata, page/input/click… —> kafka Queue —> ElasticSearch

Tips
刷新/关闭页面前发请求
Navigator.sendBeacon(url, data) 在页面unload时也可以调用

microservice和serverless

Interview T-stack

后端一次性给你10w条数据

网络延迟

抓包工具 Fiddler4 配置移动设备抓取 Https 请求

移动端‘像素点’密度往往高于桌面显示器，而横纵比例较小，使用移动设备打开页面，可能因为宽度不足产生挤压变形，也可能因为自动像素缩放导致layout变形

视口(viewport)

在document形成的整个视图中，从一个虚拟的窗口观察，视口较小时，需要借助横纵滚动条才能浏览页面

1

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

• 请勿使用较大的固定宽度元素
• 不要让内容依赖于特定值的视口宽度
• 使用媒体查询为小屏幕和大屏幕应用不同样式

  Grid

  如Bootstrap Grid水平分割若干份，计算并罗列每份宽度，使用百分比，block之间用float排列，行末清除浮动

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} [class*="col-"] { float: left; padding: 15px; border: 1px solid red; } .row::after { content: ""; clear: both; display: table; }

  Breakpoint

  设置一个边界，使用媒体查询，实现当宽度越过边界值时，触发从桌面屏幕layout到移动设备layout的跃变

  Images

  tip: 图片的拉伸是有限的，专业的做法是为不同设备提供不同的资源

  1 2 3 4 5 6 7 8 9 10 11

  /* For width smaller than 400px: */ body { background-image: url('img_smallflower.jpg'); } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url('img_flowers.jpg'); } }

  HTML5 新元素支持指定多个资源以及媒体条件

  1 2 3 4 5

  <picture> <source srcset="img_smallflower.jpg" media="(max-width: 400px)"> <source srcset="img_flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers"> </picture>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

import { Component, ContentChild, Input, TemplateRef } from "@angular/core";

@Component({
    selector:'app-partner-carousel',
    template:`
    <div class="carousel">
    <div class="btn-pre" (click)="carouselMove('LEFT')" [hidden]="carouselIndex===0"></div>
    <div class="slick-window">
        <div class="slick-container" *ngIf="data.length>0" [ngStyle]="carouselAnimotion">
          <span *ngFor="let dataItem of data">
            <ng-container
            *ngIf="dataItemTemplateRef"
            [ngTemplateOutlet]="dataItemTemplateRef"
            [ngTemplateOutletContext]="{$implicit:dataItem}"></ng-container>
          </span>
        </div>
    </div>
    <div class="btn-next" (click)="carouselMove('RIGHT')" [hidden]="carouselIndex>=data.length-3"></div>
    </div>
    `,
    styles:[`.carousel{display:flex}`,
    `.slick-window {
      position: relative;
      width: 690px;
      overflow: hidden;
      transform: translateZ(0);
    }`,
    `.slick-container{
      transform: translate3d(0px, 0px, 0px);
      transition: 0.6s ease-in-out;
      // width: 1500px;
      position: relative;
      line-height: inherit;
      margin-right: 45px;
      overflow-y: hidden;
    }`,
    `.slick-container>span{display:inline-block}`,
    `.btn-pre, .btn-next {
      // width: 15px;
      cursor: pointer;
   }`,
   `.btn-pre::before, .btn-next::before {
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 16px;
      border-top: 22px solid transparent;
      border-bottom: 22px solid transparent;
   }`,
   `.btn-pre::before {
      border-right: 15px solid #ccc;
      border-left: 0px solid transparent;
      left: -15px;
   }`,
   `.btn-next::before {
      border-right: 0px solid transparent;
      border-left: 15px solid #ccc;
   }`]
})
export class PartnerCarouselComponent{
  readonly slickWidth = 230;
  carouselAnimotion:any = {};
  private _data:Array<any> = [];
  @Input() 
    set data(value:Array<any>){
      this.carouselAnimotion.width = `${this.slickWidth * value.length}px`;
      this._data = value;
    }
    get data(){
      return this._data;
    }
    @ContentChild('dataItem', {static:false}) dataItemTemplateRef:TemplateRef<any>;
    carouselIndex:number = 0;
    constructor(){}

    carouselMove(orient: string) {
        let distance = 0;
        if (orient === 'LEFT') {
          this.carouselIndex = this.carouselIndex > 3 ? this.carouselIndex -= 3 : 0
        }
        if (orient === 'RIGHT') {
          this.carouselIndex = this.carouselIndex < this._data.length - 5 ? this.carouselIndex += 3 : this._data.length - 3;
        }
        distance = this.slickWidth * this.carouselIndex;
        this.carouselAnimotion.transform = `translate3d(-${distance}px, 0px, 0px)`;
    }
}

滑动原理

position: relative和transform: translateZ(0)将‘窗口’定位，其子元素是宽度超过屏幕宽度的所有滑块的集合，这个超长的‘胶片’用translate3d控制移动，使其某一格可以暴露在窗口中
移动的动画效果为 transition: 0.6s ease-in-out

循环体套用父元素模板

子组件(Carousel)中，为每个item套用其宿主定义的template，这里用到了NgContainer和TemplateRef，NgContainer使组件可以内嵌视图模板，内嵌的内容（ng-template）用ViewChild读取，此处声明为dataItemTemplateRef，使用NgTemplateOutlet指令将dataItemTemplateRef插入到ng-content位置，同时可以用ngTemplateOutletContext指令为内嵌视图附加一个上下文对象，显然就是为传递循环体的item打造的。
使用#id指定要插入到ng-container的template
官方示例:

1
2
3
4
5
6
7
8
9
10

<ng-container *ngTemplateOutlet="greet"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
<hr>

<ng-template #greet><span>Hello</span></ng-template>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
<ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>

响应式解决方案

npm install @angular/sdk
注意该package大版本跟随Angular版本
Angular CDK Layout

1
2
3
4
5
6
7
8
9
10
11
12

constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.Small]).subscribe(result => {
      if (result.matches) {
        // max-width: 959px
        this.windowWidth = { width: `${this.slickWidth}px` };
        this.interval = 1;
      } else {
        this.windowWidth = { width: `${this.slickWidth * 3}px` };
        this.interval = 3;
      }
    });
}

Azure SQL包括

• Azure SQL DB
• Azure MI (Managed Instance 与SQL Server功能一致的服务，用于云迁移方案)
• SQL Server in Azure VM
  Azure SQL DB 和 Azure MI属于PaaS， SQL Server in Azure VM属于IaaS

  可用性功能

  可用性区域和可用性组。较低服务层级中的数据库使用“不同但等效的机制”通过存储提供冗余。 内置逻辑可帮助防范单个计算机发生故障。 使用活动异地复制功能可以在灾难损毁整个区域时提供保护。
  业务连续性和全局可伸缩性。

安装并初始化既有项目

1

npm eslint --init

安装后自动运行cli提示，选择所需的运行环境(node.js vs browser),模块化风格(es import/export vs CommonJS),是否使用typescript等
之后会向package.json添加并安装@typescript-eslint/eslint-plugin eslint-plugin-react @typescript-eslint/parser eslint等

配置cli(commandline interface)
package.json

1

"lint": "eslint --ext .js src/"

Issue: ‘global’ is not defined
对于使用webpack打包的web app其编译环境是node.js的，因此可以配置

1 2 3 4

"env": { "browser": true, "node": true },

ESLint：环境参数

Issues:

Arrow function expected no return value. (consistent-return)

141:7 error React Hook useEffect has a missing dependency: ‘render’. Either include it or remove the dependency array react-hooks/exhaustive-deps

render 方法中包含state属性 应改为useCallback 加入依赖state属性， 然后把render加入报错的副作用的依赖中

Expected ‘this’ to be used by class method ‘getValBetweenFms’. (class-methods-use-this)

改为static方法

Expected to return a value at the end of method ‘getValBetweenFms’. (consistent-return)

函数在循环体中某条件达成时返回 运行时必定返回 但静态类型检查不通过 应在函数末尾return undefined

《What is kubernetes》

Kubernetes 也称为 K8s，是用于自动部署、扩缩和管理容器化应用程序的开源系统。

Docker、Kubernetes 与 K3s 的关系

一句话概括：

Docker 负责把应用打包并运行成容器，Kubernetes 负责管理大规模容器集群，K3s 是 Kubernetes 的轻量版发行版。

这三个概念不是同一层面的东西：

• Docker 更偏向开发和单机容器管理。
• Kubernetes 更偏向生产环境中的集群编排。
• K3s 仍然是 Kubernetes，只是更轻量，适合边缘设备、小型服务器和实验环境。

Docker：让容器容易使用

Linux 很早就有容器相关能力，例如：

• namespace
• cgroups
• LXC

但这些底层能力对普通开发者并不友好。Docker 的重要贡献是把容器打包、分发和运行流程标准化：

1
2
3
4
5
6
7
8
9

Dockerfile
    ↓
docker build
    ↓
Docker Image
    ↓
docker run
    ↓
Container

常见命令：

1
2
3
4

docker build
docker run
docker pull
docker push

Docker 主要解决的问题是：

如何把一个应用及其依赖打包成一个可移植、可运行的容器。

例如：

1

docker run nginx

就可以快速启动一个 Nginx 容器。

为什么还需要 Kubernetes

当容器数量较少时，Docker 可以很好地完成本地开发和单机运行。但如果有很多机器和大量容器，例如：

1
2

100 台服务器
每台运行多个 Nginx、Java、Redis、Python 服务

就会出现新的问题：

• 容器挂了如何自动恢复？
• 机器故障后如何迁移服务？
• 应用升级时如何滚动发布？
• 流量增加时如何自动扩容？
• 服务之间如何发现彼此？
• 如何统一管理配置、密钥和负载均衡？

Docker 本身更擅长管理一台机器上的容器，不负责整个集群的调度和编排。

Kubernetes 解决的是：

如何管理一个集群中大量容器化应用的部署、调度、扩缩容、自愈和服务发现。

Kubernetes：容器编排系统

Kubernetes，简称 K8s，由 Google 基于内部 Borg 系统的经验开源而来。

可以这样理解：

1
2

Kubernetes 负责决策和调度
Docker/containerd 负责真正运行容器

Kubernetes 会根据用户声明的目标状态做出调度决策，例如：

• 启动 5 个副本。
• 停止多余的副本。
• 把服务迁移到另一台节点。
• 在节点故障后重新创建 Pod。
• 按策略进行滚动升级。
• 将外部流量转发到后端服务。

一个形象的比喻：

• Docker 像集装箱和单车运输工具。
• Kubernetes 像港口调度中心。

港口不制造集装箱，但它负责决定集装箱放到哪里、从哪里运走、哪个仓库可用、哪条路线更合适。

Kubernetes 管理的是 Pod

Kubernetes 直接管理的最小调度单位不是 Container，而是 Pod。

一个 Pod 可以包含一个或多个容器：

1
2
3

Pod
├── nginx
└── sidecar

因此层级关系可以理解为：

1
2
3
4
5
6
7
8
9

Kubernetes
    ↓
Pod
    ↓
Container
    ↓
containerd / Docker Engine
    ↓
Linux container

实际开发中，最常接触的 Kubernetes 对象包括：

• Pod
• Deployment
• Service
• ConfigMap
• Secret
• Ingress

Docker 与 Kubernetes 的运行时关系

早期 Kubernetes 可以通过 Docker Engine 运行容器：

1
2
3
4
5
6
7

Kubernetes
    ↓
Docker Engine
    ↓
containerd
    ↓
runc

后来 Kubernetes 去掉了对 Docker Engine 作为容器运行时的直接支持。这个变化容易被误解为“Kubernetes 废弃了 Docker”。

更准确的说法是：

Kubernetes 不再直接把 Docker Engine 当作容器运行时，但 Docker 仍然是常用的镜像构建和本地开发工具。

Kubernetes 真正需要的是符合 CRI 标准的容器运行时，例如 containerd。Docker Engine 内部本来也会调用 containerd，因此现在 Kubernetes 通常直接使用 containerd：

1
2
3
4
5

Kubernetes
    ↓
containerd
    ↓
runc

这样少了一层 Docker Engine，结构更清晰，也更适合生产集群。

Docker 现在还有什么用

Docker 仍然非常重要，尤其是在开发阶段：

1
2
3
4
5
6
7

写代码
    ↓
docker build
    ↓
推送镜像到镜像仓库
    ↓
Kubernetes 部署

现代云原生流程通常是：

1
2
3
4
5
6
7
8
9
10
11
12

开发者
├── docker build
├── docker run
└── docker compose
    ↓
镜像仓库，例如 Docker Hub、Harbor
    ↓
Kubernetes / K3s
    ↓
containerd
    ↓
Linux container

所以 Docker 与 Kubernetes 更多是互补关系：

• Docker 负责构建镜像、本地调试和单机运行。
• Kubernetes 负责生产环境中的集群部署、调度、扩缩容和自愈。

Docker Compose 与 Kubernetes

Docker Compose 适合在一台机器上管理多个容器：

1

docker compose up

例如在本地同时启动：

• nginx
• mysql
• redis
• backend

但 Docker Compose 不擅长：

• 多机器调度
• 自动恢复
• 自动扩缩容
• 滚动发布
• 集群级服务发现

因此 Docker Compose 常用于本地开发和小规模单机部署，而 Kubernetes 面向更复杂的集群化生产环境。

K3s：轻量版 Kubernetes

K3s 是 Rancher 推出的轻量级 Kubernetes 发行版。它仍然是 Kubernetes，核心概念和 API 大部分保持一致，只是对安装方式、依赖和默认组件做了简化。

K3s 的特点：

• 单个二进制文件较小。
• 安装简单。
• 资源占用低。
• 单节点默认可以使用 SQLite。
• 高可用部署也可以使用 etcd。
• 适合边缘计算、IoT、小型服务器、家庭 Lab、开发测试和小团队环境。

安装示例：

1

curl -sfL https://get.k3s.io | sh -

K8s 与 K3s 对比：

学习 K3s 时掌握的 Pod、Deployment、Service、Ingress、ConfigMap、Secret 等概念，绝大多数都可以迁移到标准 Kubernetes。

推荐学习顺序

如果目标是机器人软件架构、数字孪生、WebGL 仿真、AI Agent 系统或云原生方向，可以按下面顺序学习：

1. Docker：镜像、Dockerfile、网络、Volume、Compose。
2. 容器基础：Linux namespace、cgroups、OCI 镜像规范。
3. Kubernetes 核心对象：Pod、Deployment、Service、ConfigMap、Secret、Ingress。
4. K3s 实战：在本地、虚拟机或小服务器搭建集群。
5. Helm 与 GitOps：Helm、Argo CD。
6. 可观测性：Prometheus、Grafana、日志和链路追踪。

对于机器人平台或 AI Native 系统，常见部署方式是：

• 每个服务都打包成 Docker 镜像，例如前端、后端、推理服务、数据库、消息队列。
• 本地开发和调试使用 Docker 或 Docker Compose。
• 测试环境、小型部署使用 K3s。
• 大规模生产环境使用标准 Kubernetes。
• 底层运行时通常使用 containerd。

工作区配置文件就是angular.json

关于当前Project

1
2
3
4
5
6
7
8

"MyApp": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
    "@schematics/angular:component": {}
},

编译/测试等工具

关于build target

architect/build 节会为 ng build 命令的选项配置默认值。它具有下列顶层属性:builder,option,configurations.
另外对应ng serve,ng test,ng lint命令，有architect/serve|test|lint命令

• builder就是个编译器名字，默认是@angular-devkit/build-angular:browser，(ng test的是karma，ng lint的是tslint)
• options提供构建时的选项及默认值，私以为这些option可以认为是builder工具链所需参数，因而在test和lint中也各有不同

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  "options": { "aot": true, "progress": false, "extractCss": true, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ], "styles": [ "src/theme.less", "src/styles.scss" ], "scripts": [] }

• configurations 脚手架生成项目会添加一个production的配置在这里，对编译进行部分优化以及打包限制，ng build 带—prod参数(注意—xxx是命令参数)使用该production配置，可以仿照production写其他(如 stage)配置，使用时形如 ng build —configuration stage
  另配置可以加载复数个，后者的项会覆盖前者：ng build —configuraion staging,fr
  “configurations”: {
  “production”: {

    "fileReplacements": [
    {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
    }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
    {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
    },
    {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
    }
    ]
  

  }
  }
  ```

  样式预处理选项

  Angular Doc:Styles and scripts configuration

ngFor loop with async pipe

参数订阅可观察对象的值，从而保持最新，当数据更新时，循环渲染的视图会随之更新，见StackOverflow:*ngFor loop with async pipe?
完整栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@Component({
  selector: 'users-list',
  template: `
      <ul>
        <li *ngFor="let user of users$ | async">
          {{ user.username }} 
        </li>
      </ul>
  `
})
export class UsersListComponent {
  users$;

  constructor(private http: Http) {  }

  ngOnInit() {
    this.users$ = this.http
        .get('/api/users')
        .map(res => res.json());
  }
}

1

*ngFor="let user of users$ | async as users; index as i"

1
2
3
4
5
6

<div *ngIf="isLoggedIn(); else notLoggedIn">
    Hi, {%raw%}{{ user.name }}!{%endraw%}
</div>
<ng-template #notLoggedIn>
    You're not logged in.
</ng-template>

1

$("#fileInput").click();

1

document.getElementById("fileInput").click();

1
2
3
4
5
6
7
8

@ViewChild('fileInput') fileInput:ElementRef;
constructor(private renderer:Renderer) {}

showImageBrowseDlg() {
  let event = new MouseEvent('click', {bubbles: true});
  this.renderer.invokeElementMethod(
      this.fileInput.nativeElement, 'dispatchEvent', [event]);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div style="width: 128px; height: 128px; background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 2px;cursor: pointer;display: flex;justify-content: center;align-items: center;"
  (click)="showImageBrowseDlg($event)"> + 
  <input type="file" style="display: none;" (change)="handleUpload($event)">
</div>

showImageBrowseDlg(event){
  if(event.target.children[0]){
      const fileinput:HTMLElement = event.target.children[0] as HTMLElement;
      fileinput.click();
      event.stopPropagation();
  }
}

封装一个http的provider，参考ionic3+angular4 HttpClient封装优化

测试驱动开发(Test Driven Development, TDD)和行为驱动开发(Behavior Driven Development, BDD)
Jasmine 通过用自然语言书写非程序员可读的测试用例扩展了测试驱动开发方法, 行为驱动开发人员使用混合了领域中统一的语言的母语语言来描述他们的代码的目的

被测系统(System under test, SUT)

单测不负责检查跨类或者跨系统的交互逻辑，那都是集成测试的范围

单测不能受到外界环境的影响, 依赖需要用本地实现注入，或者提供一个mock(桩对象)

单测需要能快速执行，有必要在每次修改代码时运行单测

单测应随编码进行，补单测是没有意义的

1
2
3
4
5
6
7
8
9
10
11
12
13

├───lib
│   └───jasmine-3.4.0
│           boot.js
│           jasmine-html.js
│           jasmine.css
│           jasmine.js
│           jasmine_favicon.png
├───spec
│       PlayerSpec.js
│       SpecHelper.js
└───src
        Player.js
        Song.js

spec + src文件夹是栗子

笔记目的导向：

• spec.ts写的啥(Jasmine 单元测试的书写语法)
• 组件声明周期中应该存在哪些用例(如实例化，输入/输出，方法，释放)
• 依赖项的处理

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

  describe("Player", function() { var player; var song; beforeEach(function() { player = new Player(); song = new Song(); }); it("should be able to play a Song", function() { player.play(song); expect(player.currentlyPlayingSong).toEqual(song); //demonstrates use of custom matcher expect(player).toBePlaying(song); }); describe("when song has been paused", function() { beforeEach(function() { player.play(song); player.pause(); }); it("should indicate that the song is currently paused", function() { expect(player.isPlaying).toBeFalsy(); // demonstrates use of 'not' with a custom matcher expect(player).not.toBePlaying(song); }); it("should be possible to resume", function() { player.resume(); expect(player.isPlaying).toBeTruthy(); expect(player.currentlyPlayingSong).toEqual(song); }); }); // demonstrates use of spies to intercept and test method calls it("tells the current song if the user has made it a favorite", function() { spyOn(song, 'persistFavoriteStatus'); player.play(song); player.makeFavorite(); expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true); }); //demonstrates use of expected exceptions describe("#resume", function() { it("should throw an exception if song is already playing", function() { player.play(song); expect(function() { player.resume(); }).toThrowError("song is already playing"); }); }); });

  init with Node.js

  1 2	npm install --save-dev jasmine npx jasmine init

  describe

  以describe分组specs,它代表一组相似的测试用例,通常有 2 个参数：字符串和方法。字符串作为特定 Suite 的名字和标题。方法是包含实现的代码。

  1 2 3 4 5 6

  describe ('HeroesService (with spies)', () => { ... }); describe('HeroesService (with mocks)', () => { ... });

  waitForAsync TestBed

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing'; describe('nz-table', () => { let injector: Injector; beforeEach( waitForAsync(() => { // injector = TestBed.configureTestingModule({ imports: [BidiModule, NzTableModule], declarations: [NzTestTableBasicComponent, NzTestTableScrollComponent, NzTableSpecCrashComponent, NzTestTableRtlComponent] }); TestBed.compileComponents(); }) ); ... })

  it 和 specs

  specs即specification(规则)，它们是一个个断言，可以是 true 或者 false。当每个 Spec 中的所有 expectations 都是 true，则通过测试。以it函数定义，与describe类似的，有 2 个参数：标题和方法。

  expect tobe

  1 2	expect(true).toBe(true); expect(false).not.toBe(true);

  断言

• toBe 和 toEqual 前者相当于比较运算符=== 后者比较字面量的值(对于对象进行属性的比较)
• toMatch
• toBeDefined 和 toBeNull
• toContain
• toBeGreaterThan 和 toBeLessThan
• toBeCloseTo
• toThrow

  beforeEach和afterEach

  分别在每个it断言测试前/后调用

  spy

  存根(stub)和跟踪(track)任意函数

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  spyOn(foo, 'setBar'); foo.setBar(123); foo.setBar(456, 'another param'); }); it("tracks that the spy was called", function() { expect(foo.setBar).toHaveBeenCalled(); }); it("tracks that the spy was called x times", function() { expect(foo.setBar).toHaveBeenCalledTimes(2); }); it("tracks all the arguments of its calls", function() { expect(foo.setBar).toHaveBeenCalledWith(123); expect(foo.setBar).toHaveBeenCalledWith(456, 'another param'); });

  spy一个foo对象上的setBar方法，分别断言该方法被调用、被调用若干次、被以某某参数调用
  很多时候用spy对应模拟对象

用例