VSCode tool , 可以直接幫忙你測試一個
test
,不用在 npm run test
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
提示寫法
https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets
toBeTruthy():確認是為為 true 如果為 false, 0, '',null , undefine, NaN,為false
expect 系列,相關的 function
toHaveBeenCalledWith():
可以多看 ssr 專案中 notifications ,should send get /config/getNotifications
it('should send get /config/getNotifications', () => {
const apiSpy = jest.spyOn(apiService, 'get'); // apiService 打 api-service
service.getNotifications();
expect(apiSpy).toHaveBeenCalledWith('/config/getNotifications');
});
mockReturnValue():
Accepts a value that will be returned whenever the mock function is called.
可以 return 所設定的值
jest.spyOn(apiService, 'post').mockReturnValue(
throwError({
error: {
// email已經存在
ReturnCode: 40032,
},
})
);
import { HeaderLeftComponent } from './header-left.component';
describe('HeaderLeftComponent', () => {
let fixture: ComponentFixture<HeaderLeftComponent>;
// const component = fixture.componentInstance
it('test sum function', () => {
expect(fixture.componentInstance.sum(1, 2)).toBe(3);
});
}
// click 的寫法
fixture = TestBed.createComponent(HeaderLeftComponent);
const menu = fixture.debugElement.nativeElement.querySelector('header-hamburger');
menu.click();
...
expect(...).toBe(...)
call service 的 function 來用
const video = {
play() {
return true;
},
};
module.exports = video;
//
const video = require('./video');
test('plays video', () => {
const spy = jest.spyOn(video, 'play');
const isPlaying = video.play();
expect(spy).toHaveBeenCalled();
expect(isPlaying).toBe(true);
spy.mockRestore(); // 為了要回復狀態用的
});
Q:What is the difference between it
and test
in Jest ?
看起來是一樣的東西
What is the difference between 'it' and 'test' in Jest?
jest.spyOn(object, methodName)
jest function
JEST 單元測試學習筆記 | Mock Functions
寫 unit test 的想法
TestBed.configureTestingModule({
declarations: [GeneralDialogComponent],
imports: [
MatDialogModule,
HttpClientModule,
BrowserModule,
TranslateModule.forRoot({}), // pipe 'translate'
RouterTestingModule.withRoutes([]),
GoogleTagManagerModule.forRoot({
id: environment.tagManagerID,
}),
BrowserAnimationsModule,
],
}).overrideModule(BrowserModule, {
set: {
entryComponents: [GeneralDialogComponent],
},
});
// 需要加 overrideModule
可以去看 auth.spec.ts 的寫法
import { ApiService } from './api.service';
import { ApiSystemService } from './api/api-system.service';
import { AuthService } from './auth.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
describe('AuthService', () => {
let service: AuthService;
let apiService: ApiService;
let apiSystemService: ApiSystemService;
let apiSpy = null;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule.withRoutes([])],
providers: [ApiService],
});
service = TestBed.inject(AuthService);
apiService = TestBed.inject(ApiService);
apiSystemService = TestBed.inject(ApiSystemService);
apiSpy = jest.spyOn(apiSystemService, 'getCheckAuth').mockReturnValue(
of({
data: {
config: {
user: { id: '1', timezone: '+8' },
supplier: { id: '2', status: 'Inactive' },
},
},
})
);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
it('should send get /config/checkAuth', () => {
service.initUserRoles();
expect(apiSpy).toBeCalledTimes(1);
});
it('should get userId', () => {
service.initUserRoles();
expect(service.userId).toBe('1');
});
it('should get supplierId', () => {
service.initUserRoles();
expect(service.supplierId).toBe('2');
});
it('should get userTimezone', () => {
service.initUserRoles();
expect(service.userTimezone).toBe('+8');
});
it('should get isLogin', () => {
service.initUserRoles();
expect(service.isLogin()).toBeTruthy();
});
it('should get isActiveSupplier', () => {
service.initUserRoles();
expect(service.isActiveSupplier()).toBeFalsy();
});
});
響應式表單提供了一種模型驅動的方式來處理表單輸入,其中的值會隨時間而變化。本文會向你展示如何建立和更新基本的表單控制元件,接下來還會在一個表單組中使用多個控制元件,驗證表單的值,以及建立動態表單,也就是在執行期新增或移除控制元件。 form 表單 這裡的 require 建儀是寫在 formGroup 裡面去作理管,才可方便的在 js 中看到何為必填值。 <form [formGroup]="subscribeForm" (ngSubmit)="submit()"> <mat-form-field class="w-full"> <input matInput required type="email" formControlName="email" /> <mat-error> Please enter a valid email address </mat-error> </mat-form-field>
Jul 15, 2024angular 原生的 number 需要特別去看一下 decimaPipe
Jul 15, 2024asdf
Dec 1, 2022開發 Angular 就不能不知道 Angular CLI 這個超級好用的命令列工具,有了這個工具,原本渾沌的開發環境,頓時清晰,許多繁瑣的瑣事,一個命令就搞定!這邊是我自己的操作筆記,讓記憶力不佳的我,有個地方可以方便查詢。 這裡的內容不保證最新,但會盡量持續更新。 最即時的文件請參考 Angular CLI 在 Github 上的文件,例如要查 ng new 這個指令的用法,請參考這個連結。 安裝 建議使用 Node.js 的 npm 套件管理工具來安裝 Angular CLI,請使用以下指令安裝: npm install -g angular-cli
Dec 1, 2022or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up