New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ng-mocks

Package Overview
Dependencies
Maintainers
2
Versions
175
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-mocks - npm Package Compare versions

Comparing version 13.5.2 to 14.0.0

examples/TestStandaloneComponent/test.spec.ts
examples/TestStandaloneDirective/test.spec.ts
examples/TestStandalonePipe/test.spec.ts

20

examples/MockComponent/test.spec.ts

@@ -0,1 +1,2 @@

import { CommonModule } from '@angular/common';
import {

@@ -6,2 +7,3 @@ Component,

Input,
NgModule,
Output,

@@ -37,3 +39,3 @@ TemplateRef,

})
class TestedComponent {
class MyComponent {
public value = '';

@@ -43,9 +45,15 @@ public trigger = (obj: any) => obj;

@NgModule({
imports: [CommonModule],
declarations: [MyComponent, DependencyComponent],
})
class ItsModule {}
describe('MockComponent', () => {
beforeEach(() => {
return MockBuilder(TestedComponent).mock(DependencyComponent);
return MockBuilder(MyComponent, ItsModule);
});
it('sends the correct value to the child input', () => {
const fixture = MockRender(TestedComponent);
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

@@ -64,3 +72,3 @@

// Let's pretend that DependencyComponent has 'someInput' as
// an input. TestedComponent sets its value via
// an input. MyComponent sets its value via
// `[someInput]="value"`. The input's value will be passed into

@@ -76,3 +84,3 @@ // the mock component so we can assert on it.

it('does something on an emit of the child component', () => {
const fixture = MockRender(TestedComponent);
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

@@ -88,3 +96,3 @@

// Again, let's pretend DependencyComponent has an output
// called 'someOutput'. TestedComponent listens on the output via
// called 'someOutput'. MyComponent listens on the output via
// `(someOutput)="trigger($event)"`.

@@ -91,0 +99,0 @@ // Let's install a spy and trigger the output.

19

examples/MockDirective-Attribute/test.spec.ts

@@ -6,2 +6,3 @@ import {

Input,
NgModule,
Output,

@@ -33,3 +34,3 @@ } from '@angular/core';

})
class TestedComponent {
class MyComponent {
public value = '';

@@ -39,9 +40,15 @@ public trigger = () => undefined;

@NgModule({
declarations: [MyComponent, DependencyDirective],
})
class ItsModule {}
describe('MockDirective:Attribute', () => {
beforeEach(() => {
return MockBuilder(TestedComponent).mock(DependencyDirective);
// DependencyDirective is a declaration in ItsModule.
return MockBuilder(MyComponent, ItsModule);
});
it('sends the correct value to the input', () => {
const fixture = MockRender(TestedComponent);
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

@@ -60,3 +67,3 @@

// Let's pretend DependencyDirective has 'someInput'
// as an input. TestedComponent sets its value via
// as an input. MyComponent sets its value via
// `[someInput]="value"`. The input's value will be passed into

@@ -72,3 +79,3 @@ // the mock directive so we can assert on it.

it('does something on an emit of the child directive', () => {
const fixture = MockRender(TestedComponent);
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

@@ -87,3 +94,3 @@

// Again, let's pretend DependencyDirective has an output called
// 'someOutput'. TestedComponent listens on the output via
// 'someOutput'. MyComponent listens on the output via
// `(someOutput)="trigger()"`.

@@ -90,0 +97,0 @@ // Let's install a spy and trigger the output.

5

examples/MockDirective-Structural/test.spec.ts

@@ -36,3 +36,3 @@ import {

})
class TargetModule {}
class ItsModule {}

@@ -45,3 +45,4 @@ describe('MockDirective:Structural', () => {

beforeEach(() => {
return MockBuilder(TargetComponent, TargetModule).mock(
// DependencyDirective is a declaration in ItsModule.
return MockBuilder(TargetComponent, ItsModule).mock(
DependencyDirective,

@@ -48,0 +49,0 @@ {

21

examples/MockForms/test.spec.ts

@@ -1,2 +0,2 @@

import { Component, forwardRef } from '@angular/core';
import { Component, forwardRef, NgModule } from '@angular/core';
import {

@@ -36,6 +36,12 @@ ControlValueAccessor,

})
class TestedComponent {
class MyComponent {
public value: any;
}
@NgModule({
imports: [FormsModule],
declarations: [MyComponent, DependencyComponent],
})
class ItsModule {}
describe('MockForms', () => {

@@ -46,5 +52,8 @@ // Helps to reset customizations after each test.

beforeEach(() => {
return MockBuilder(TestedComponent)
.mock(DependencyComponent)
.keep(FormsModule);
// DependencyComponent is a declaration in ItsModule.
return (
MockBuilder(MyComponent, ItsModule)
// FormsModule is an import in ItsModule.
.keep(FormsModule)
);
});

@@ -66,3 +75,3 @@

const fixture = MockRender(TestedComponent);
const fixture = MockRender(MyComponent);
// FormsModule needs fixture.whenStable()

@@ -69,0 +78,0 @@ // right after MockRender to install all hooks.

10

examples/MockInstance/test.spec.ts

@@ -0,1 +1,2 @@

import { CommonModule } from '@angular/common';
import {

@@ -5,2 +6,3 @@ AfterViewInit,

Injector,
NgModule,
ViewChild,

@@ -43,2 +45,8 @@ } from '@angular/core';

@NgModule({
imports: [CommonModule],
declarations: [RealComponent, ChildComponent],
})
class ItsModule {}
describe('MockInstance', () => {

@@ -48,3 +56,3 @@ // A normal setup of the TestBed, TargetComponent will be replaced

// Do not forget to return the promise of MockBuilder.
beforeEach(() => MockBuilder(RealComponent).mock(ChildComponent));
beforeEach(() => MockBuilder(RealComponent, ItsModule));

@@ -51,0 +59,0 @@ beforeEach(() => {

15

examples/MockModule/test.spec.ts

@@ -45,3 +45,3 @@ import { CommonModule } from '@angular/common';

})
class TestedComponent {
class MyComponent {
public value = '';

@@ -51,9 +51,16 @@ public trigger = () => undefined;

@NgModule({
imports: [DependencyModule],
declarations: [MyComponent],
})
class ItsModule {}
describe('MockModule', () => {
beforeEach(() => {
return MockBuilder(TestedComponent).mock(DependencyModule);
// DependencyModule is an import of ItsModule.
return MockBuilder(MyComponent, ItsModule);
});
it('renders TestedComponent with its dependencies', () => {
const fixture = MockRender(TestedComponent);
it('renders MyComponent with its dependencies', () => {
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

@@ -60,0 +67,0 @@

9

examples/MockPipe/test.spec.ts

@@ -26,3 +26,3 @@ import {

})
class TargetModule {}
class ItsModule {}

@@ -43,5 +43,6 @@ // A fake transform function.

beforeEach(() => {
return MockBuilder(TargetComponent, TargetModule).mock(
DependencyPipe,
spy,
return (
MockBuilder(TargetComponent, ItsModule)
// DependencyPipe is a declaration in ItsModule
.mock(DependencyPipe, spy)
);

@@ -48,0 +49,0 @@ });

18

examples/MockReactiveForms/test.spec.ts

@@ -1,2 +0,2 @@

import { Component, forwardRef } from '@angular/core';
import { Component, forwardRef, NgModule } from '@angular/core';
import {

@@ -37,6 +37,12 @@ ControlValueAccessor,

})
class TestedComponent {
class MyComponent {
public readonly formControl = new FormControl();
}
@NgModule({
imports: [ReactiveFormsModule],
declarations: [MyComponent, DependencyComponent],
})
class ItsModule {}
describe('MockReactiveForms', () => {

@@ -47,5 +53,5 @@ // Helps to reset MockInstance customizations after each test.

beforeEach(() => {
return MockBuilder(TestedComponent)
.mock(DependencyComponent)
.keep(ReactiveFormsModule);
return MockBuilder(MyComponent, ItsModule).keep(
ReactiveFormsModule,
);
});

@@ -67,3 +73,3 @@

const fixture = MockRender(TestedComponent);
const fixture = MockRender(MyComponent);
const component = fixture.point.componentInstance;

@@ -70,0 +76,0 @@

6

examples/MockRender/test.spec.ts

@@ -40,3 +40,3 @@ import { CommonModule } from '@angular/common';

})
class TestedComponent {
class MyComponent {
@Output() public readonly trigger = new EventEmitter();

@@ -49,3 +49,3 @@ @Input() public value1 = 'default1';

// Do not forget to return the promise of MockBuilder.
beforeEach(() => MockBuilder(TestedComponent, DependencyModule));
beforeEach(() => MockBuilder(MyComponent, DependencyModule));

@@ -98,3 +98,3 @@ it('renders template', () => {

// (trigger)="trigger"></tested>.
const fixture = MockRender(TestedComponent, {
const fixture = MockRender(MyComponent, {
trigger: spy,

@@ -101,0 +101,0 @@ value1: 'something2',

19

examples/ngMocksFaster/test.spec.ts

@@ -1,2 +0,2 @@

import { Component, Injectable } from '@angular/core';
import { Component, Injectable, NgModule } from '@angular/core';

@@ -29,2 +29,8 @@ import {

@NgModule({
declarations: [TargetComponent],
providers: [TargetService],
})
class ItsModule {}
describe('examples:performance', () => {

@@ -36,5 +42,4 @@ describe('beforeEach:mock-instance', () => {

// with its mock copy.
beforeEach(() => {
return MockBuilder(TargetComponent).mock(TargetService);
});
// TargetService is a provider in ItsModule.
beforeEach(() => MockBuilder(TargetComponent, ItsModule));

@@ -113,3 +118,7 @@ // Configuring behavior of the mock TargetService.

beforeEach(() => {
return MockBuilder(TargetComponent).mock(TargetService, mock);
return (
MockBuilder(TargetComponent, ItsModule)
// TargetService is a provider in ItsModule.
.mock(TargetService, mock)
);
});

@@ -116,0 +125,0 @@

8

examples/TestProviderInComponent/test.spec.ts
import { Component, Injectable } from '@angular/core';
import { MockBuilder, MockRender } from 'ng-mocks';
import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';

@@ -34,5 +34,5 @@ // A simple service, might have contained more logic,

// The root element is fixture.point and it is the TargetComponent
// with its injector for extracting internal services.
const service = fixture.point.injector.get(TargetService);
// The component's element is fixture.point.
// Now we can use ngMocks.get to extract internal services.
const service = ngMocks.get(fixture.point, TargetService);

@@ -39,0 +39,0 @@ // Here we go, now we can assert everything about the service.

28

examples/TestProviderInDirective/test.spec.ts

@@ -52,10 +52,12 @@ import {

it('has access to the service via a directive', () => {
// Let's render a div with the directive. It provides a point
// to access the service.
const fixture = MockRender('<div target></div>');
// Let's render a div with the directive.
MockRender('<div target></div>');
// The root element is fixture.point and it has access to the
// context of the directive. Its injector can extract the service.
const service = fixture.point.injector.get(TargetService);
// Let's find the debugElement with the directive.
// Please note, that we use ngMocks.find here.
const el = ngMocks.find(TargetDirective);
// Let's extract the service.
const service = ngMocks.get(el, TargetService);
// Here we go, now we can assert everything about the service.

@@ -66,10 +68,12 @@ expect(service.value).toEqual(true);

it('has access to the service via a structural directive', () => {
// Let's render a div with the directive. It provides a point to
// access the service.
const fixture = MockRender('<div *target></div>');
// Let's render a div with the directive.
MockRender('<div *target></div>');
// The root element is fixture.point and it has access to the
// context of the directive. Its injector can extract the service.
const service = fixture.point.injector.get(TargetService);
// Let's find the debugNode with the directive.
// Please note, that we use ngMocks.reveal here.
const node = ngMocks.reveal(TargetDirective);
// Let's extract the service.
const service = ngMocks.get(node, TargetService);
// Here we go, now we can assert everything about the service.

@@ -76,0 +80,0 @@ expect(service.value).toEqual(true);

20

examples/TestRoute/test.spec.ts

@@ -63,4 +63,5 @@ import { Location } from '@angular/common';

beforeEach(() => {
return MockBuilder(RouterModule, TargetModule).keep(
RouterTestingModule.withRoutes([]),
return MockBuilder(
[RouterModule, RouterTestingModule.withRoutes([])],
TargetModule,
);

@@ -115,5 +116,10 @@ });

beforeEach(() => {
return MockBuilder(TargetComponent, TargetModule)
.keep(RouterModule)
.keep(RouterTestingModule.withRoutes([]));
return MockBuilder(
[
TargetComponent,
RouterModule,
RouterTestingModule.withRoutes([]),
],
TargetModule,
);
});

@@ -132,4 +138,4 @@

// By default our routes do not have a component.
// Therefore non of them should be rendered.
// By default, our routes do not have a component.
// Therefore, none of them should be rendered.
expect(location.path()).toEqual('/');

@@ -136,0 +142,0 @@ expect(() => ngMocks.find(Target1Component)).toThrow();

8

examples/TestRoutingGuard/test.spec.ts

@@ -118,6 +118,6 @@ import { Location } from '@angular/common';

beforeEach(() => {
return MockBuilder(LoginGuard, TargetModule)
.exclude(NG_MOCKS_GUARDS)
.keep(RouterModule)
.keep(RouterTestingModule.withRoutes([]));
return MockBuilder(
[LoginGuard, RouterModule, RouterTestingModule.withRoutes([])],
TargetModule,
).exclude(NG_MOCKS_GUARDS);
});

@@ -124,0 +124,0 @@

11

examples/TestRoutingResolver/test.spec.ts

@@ -91,5 +91,10 @@ import { Location } from '@angular/common';

beforeEach(() => {
return MockBuilder(DataResolver, TargetModule)
.keep(RouterModule)
.keep(RouterTestingModule.withRoutes([]));
return MockBuilder(
[
DataResolver,
RouterModule,
RouterTestingModule.withRoutes([]),
],
TargetModule,
);
});

@@ -96,0 +101,0 @@

10

examples/TestToken/test.spec.ts

@@ -55,8 +55,6 @@ import { Injectable, InjectionToken, NgModule } from '@angular/core';

beforeEach(() => {
return MockBuilder()
.mock(TargetModule)
.keep(TOKEN_CLASS)
.keep(TOKEN_EXISTING)
.keep(TOKEN_FACTORY)
.keep(TOKEN_VALUE);
return MockBuilder(
[TOKEN_CLASS, TOKEN_EXISTING, TOKEN_FACTORY, TOKEN_VALUE],
TargetModule,
);
});

@@ -63,0 +61,0 @@

2

package.json
{
"name": "ng-mocks",
"version": "13.5.2",
"version": "14.0.0",
"description": "An Angular testing library for creating mock services, components, directives, pipes and modules in unit tests, which includes shallow rendering, precise stubs to dump child dependencies, supports Angular 5 6 7 8 9 10 11 12 13, jasmine and jest.",

@@ -5,0 +5,0 @@ "keywords": [

10

README.md

@@ -1,6 +0,6 @@

[![chat on gitter](https://img.shields.io/gitter/room/ike18t/ng-mocks)](https://gitter.im/ng-mocks/community)
[![npm version](https://img.shields.io/npm/v/ng-mocks)](https://www.npmjs.com/package/ng-mocks)
[![build status](https://img.shields.io/circleci/build/github/ike18t/ng-mocks/master)](https://app.circleci.com/pipelines/github/ike18t/ng-mocks?branch=master)
[![coverage status](https://img.shields.io/coveralls/github/ike18t/ng-mocks/master)](https://coveralls.io/github/ike18t/ng-mocks?branch=master)
[![language grade](https://img.shields.io/lgtm/grade/javascript/g/ike18t/ng-mocks)](https://lgtm.com/projects/g/ike18t/ng-mocks/context:javascript)
[<img src="https://img.shields.io/gitter/room/ike18t/ng-mocks" alt="chat on gitter" width="90" height="20" />](https://gitter.im/ng-mocks/community)
[<img src="https://img.shields.io/npm/v/ng-mocks" alt="npm version" width="88" height="20" />](https://www.npmjs.com/package/ng-mocks)
[<img src="https://img.shields.io/circleci/build/github/ike18t/ng-mocks/master" alt="build status" width="88" height="20" />](https://app.circleci.com/pipelines/github/ike18t/ng-mocks?branch=master)
[<img src="https://img.shields.io/coveralls/github/ike18t/ng-mocks/master" alt="coverage status" width="104" height="20" />](https://coveralls.io/github/ike18t/ng-mocks?branch=master)
[<img src="https://img.shields.io/lgtm/grade/javascript/g/ike18t/ng-mocks" alt="language grade" width="138" height="20" />](https://lgtm.com/projects/g/ike18t/ng-mocks/context:javascript)

@@ -7,0 +7,0 @@ # Mock components, services and more out of annoying dependencies for simplification of Angular testing

index.js

Sorry, the diff of this file is too big to display

index.js.map

Sorry, the diff of this file is not supported yet

ng-mocks.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc