ng-mocks
facilitates Angular testing and helps to:
The current version of the library has been tested and can be used with:
Angular | ng-mocks | Jasmine | Jest | Ivy |
---|---|---|---|---|
13 | latest | yes | yes | yes |
12 | latest | yes | yes | yes |
11 | latest | yes | yes | yes |
10 | latest | yes | yes | yes |
9 | latest | yes | yes | yes |
8 | latest | yes | yes | |
7 | latest | yes | yes | |
6 | latest | yes | yes | |
5 | latest | yes | yes |
Global configuration for mocks in src/test.ts
.In case of jest, src/setupJest.ts
should be used.
// All methods in mock declarations and providers
// will be automatically spied on their creation.
// https://ng-mocks.sudo.eu/extra/auto-spy
ngMocks.autoSpy('jasmine'); // or jest
// ngMocks.defaultMock helps to customize mocks
// globally. Therefore, we can avoid copy-pasting
// among tests.
// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock
ngMocks.defaultMock(AuthService, () => ({
isLoggedIn$: EMPTY,
currentUser$: EMPTY,
}));
An example of a spec for a profile edit component.
// Let's imagine that there is a ProfileComponent
// and it has 3 text fields: email, firstName,
// lastName, and a user can edit them.
// In the following test suite, we would like to
// cover behavior of the component.
describe('profile', () => {
// First of all, we would like to reuse the same
// TestBed in every test.
// ngMocks.faster suppresses reset of TestBed
// after each test and allows to use TestBed,
// MockBuilder and MockRender in beforeAll.
// https://ng-mocks.sudo.eu/api/ngMocks/faster
ngMocks.faster();
// Let's declare TestBed in beforeAll
// instead of beforeEach.
// The code mocks everything in SharedModule
// and provides a mock AuthService.
beforeAll(() => {
return TestBed.configureTestingModule({
imports: [
MockModule(SharedModule), // mock
ReactiveFormsModule, // real
],
declarations: [
MockComponent(AvatarComponent), // mock
ProfileComponent, // real
],
providers: [
MockProvider(AuthService), // mock
],
}).compileComponents();
});
// A test to ensure that ProfileComponent
// can be created.
it('should be created', () => {
// MockRender is an advanced version of
// TestBed.createComponent.
// It respects all lifecycle hooks,
// onPush change detection, and creates a
// wrapper component with a template like
// <app-root ...allInputs></profile>
// https://ng-mocks.sudo.eu/api/MockRender
const fixture = MockRender(ProfileComponent);
expect(
fixture.point.componentInstance,
).toEqual(jasmine.any(ProfileComponent));
});
// A test to ensure that the component listens
// on ctrl+s hotkey.
it('saves on ctrl+s hot key', () => {
// A fake profile.
const profile = {
email: 'test2@email.com',
firstName: 'testFirst2',
lastName: 'testLast2',
};
// A spy to track save calls.
// MockInstance helps to configure mock
// providers, declarations and modules
// before their initialization and usage.
// https://ng-mocks.sudo.eu/api/MockInstance
const spySave = MockInstance(
StorageService,
'save',
jasmine.createSpy('StorageService.save'),
);
// Renders <profile [profile]="params.profile">
// </profile>.
// https://ng-mocks.sudo.eu/api/MockRender
const { point } = MockRender(
ProfileComponent,
{ profile }, // bindings
);
// Let's change the value of the form control
// for email addresses with a random value.
// ngMocks.change finds a related control
// value accessor and updates it properly.
// https://ng-mocks.sudo.eu/api/ngMocks/change
ngMocks.change(
'[name=email]', // css selector
'test3@em.ail', // an email address
);
// Let's ensure that nothing has been called.
expect(spySave).not.toHaveBeenCalled();
// Let's assume that there is a host listener
// for a keyboard combination of ctrl+s,
// and we want to trigger it.
// ngMocks.trigger helps to emit events via
// simple interface.
// https://ng-mocks.sudo.eu/api/ngMocks/trigger
ngMocks.trigger(point, 'keyup.control.s');
// The spy should be called with the user
// and the random email address.
expect(spySave).toHaveBeenCalledWith({
email: 'test3@em.ail',
firstName: profile.firstName,
lastName: profile.lastName,
});
});
});
Profit.
If you like ng-mocks
, please support it:
Thank you!
P.S. Feel free to contact us if you need help.
在花了最后一天使这项工作完成之后,我发现我回过头来遇到开始时遇到的相同错误: 错误:意外请求:GET test-directive.html 我正在使用Karma和Jasmine在Angular中测试指令。我在StackOverflow上浏览了类似的问题,但发现在其他示例中尝试过的所有方法均无济于事。 代码结构 Test-App -src --bower --lib --js --modules
当ng项目越来越大的时候,单元测试就要提上日程了,有的时候团队是以测试先行,有的是先实现功能,后面再测试功能模块,这个各有利弊,今天主要说说利用karma和jasmine来进行ng模块的单元测试. 什么是Karma karma是一个单元测试的运行控制框架,提供以不同环境来运行单元测试,比如chrome,firfox,phantomjs等,测试框架支持jasmine,mocha,qunit,是一个以
问题内容: 我试图了解和/ 之间的区别,但对我来说它们看起来相同。 我应该记住使用一个或另一个来区别吗? 问题答案: ngIf 该指令根据表达式 删除或重新创建 DOM树的一部分。如果赋值为的表达式的计算结果为假值,则将元素从DOM中删除,否则将元素的克隆重新插入DOM中。 删除元素时,使用它的作用域将被销毁,并在恢复该元素时创建一个新的作用域。在内部创建的作用域使用原型继承从其父作用域继承。 如
问题内容: 任何人都可以为该JSFiddle提供正确的方法: JsFiddle链接 我正在尝试通过.class&#ID更改元素的类。 提前致谢 感谢tymeJV,新的JSFiddle: 解 问题答案: 正确的方法是根据切换变量使用,请考虑: CSS: JS: HTML: 通过根据变量(“ toggle”)是否为或分配引用的类(在上面为“红色”)来工作。
问题内容: 我了解这一点,并会影响在元素上设置的类,并控制是否将元素呈现为DOM的一部分。 有没有对选择的准则在/ 或反之亦然? 问题答案: 取决于您的用例,但总结不同之处: 将从DOM中删除元素。这意味着您所有的处理程序或所有附加到这些元素的内容都将丢失。例如,如果将单击处理程序绑定到子元素之一,则将其评估为false时,将从DOM中删除该元素,并且即使稍后将其评估为true并显示该元素,您的单
NG Bootstrap 是基于 Angular(非 Angular.js)开发的 Bootstrap CSS 框架的指令集。 原生开发 专为Bootstrap 4 开发的Angular组件,开发了符合Angular生态系统的API,没有使用任何第三方Javascript库来实现,全都是纯粹的原生Javascript。 Boostrap的JS插件 支持全部Boostrap自带的Javascript
Mogwai ERDesigner NG是一个实体关系建模工具类似于ERWin。它设计成让数据库建模变得尽可能简易并为整个开发过程提供支持,从数据库设计到模式 (schema)和代码生成。此外ERDesigner还提供一个灵活的插件体系,从而可以通过安装新的插件来扩展该工具的功能。ERDesigner提 供的功能包括: *.能够使用一个强大和易于使用的图形编辑来设计数据库模型。 *.能够依据ER图
ng-inspector 是Chrome和Safari的浏览器扩展程序,它显示一个检查器面板,该面板实时显示当前页面中的AngularJS作用域层次结构,以及哪些控制器或指令与哪个作用域相关联。 将鼠标悬停在检查器中的范围上将突出显示该范围附加到的DOM元素。单击模型将console.log该模型的内容。 该扩展程序在带有AngularJS徽标的地址栏旁边添加了一个按钮,用于打开和关闭窗格。