I want to mock simultaneously both my default exported class constructor and a static function of the said class that instantiate and returns an instance of the said class(singleton). How can I do it with Jest. Here is a code sample:
export default class MyClass {
private static instance: MyClass;
private data: any;
constructor() {
this.data = ...DefaultData...;
}
public static getInstance(): MyClass {
if (!MyClass.instance) {
MyClass.instance = new MyClass();
}
return MyClass.instance;
}
public setData(newData){
this.data = newData;
}
public methodA(){...doSomethingWith_this.data}
}
Also as requested heres an example of my test where I only have mocked the 'getInstance' method.
import MyClass from 'path/to/MyClass';
jest.mock('path/to/MyClass', () => {
const instance = {
methodA: jest.fn(),
setData: jest.fn()
};
return {
__esModule: true,
default: {
getInstance: () => instance
}
};
});
describe('SystemUnderTest', () => {
it('test for in code instantiation', ()=>{});
it('test for singleton instance', ()=>{});
})
Finally the error I get when running the tests is this
_MyClass.default is not a constructor
Change this to MyClass. A static variable is a class property that is used in a class and not on the instance of the class.
export default class MyClass {
private static instance: MyClass;
constructor() {}
public static getInstance(): MyClass {
if (!MyClass.instance) {
MyClass.instance = new MyClass();
}
return MyClass.instance;
}
}
This is how a singleton works based on your code example. You do not have any example from Jest therefore I must refer to https://stackoverflow.com/help/how-to-ask
export class abc extends React.Component<IProps, IState> {
function(name: string) {
console.log("I wish to call this function"+ name);
}
render() {
return (
<div>Hello</div>
);
}
}
Now I wish to call the function method of the above-defined component into another xyz.ts class (which is not a react component) is it possible to do the same?
You could use the listener pattern like this:
export interface IListener {
notify: (name:string) => void;
}
export class Listener {
listener : IListener[] = [];
addListener(listener: IListener) {
this.listener.add(listener)
}
notifyListener() {
this.listener.forEach((listener) => {
listener.notify("abc");
});
}
}
export class abc extends React.Component<IProps, IState> implements IListener {
componentDidMount() {
// register this class as a listener
new Listener().addListener(this);
}
public notify(name:string) {
this.test(name);
}
test(name: string) {
console.log("I wish to call this function"+ name);
}
render() {
return (
<div>Hello</div>);
}
}
You should definitely move the function out of the component and export it if you want to use it in a different ts file.
I am implementing this feature in my angular code to pull to refresh data and its pretty straightforward.
const ptr = PullToRefresh.init({
mainElement: 'div.custom-div'
onRefresh() {
this.getData();
}
});
and i have a function in my component called getData()
export class HomeComponent implements OnInit {
constructor() {}
ngOnInit(): void {
const ptr = PullToRefresh.init({
mainElement: 'div.custom-div'
onRefresh() {
this.getData();
}
});
}
getData() {
// get data function
}
}
but I'm having a hard time calling that from the javascript function. It throws the error
getData is not a function
and I know it does this because it reads this as the js function instead of the component it is embedded in. How can i go about this correctly?
Try this:-
export class HomeComponent implements OnInit {
constructor() {}
ngOnInit(): void {
const This = this;
const ptr = PullToRefresh.init({
mainElement: 'div.custom-div'
onRefresh() {
This.getData();
}
});
}
getData() {
// get data function
}
}
im trying to instance a class passed as parameter to another, I have this in one file, ImportedClass.ts:
export default class ImportedClass {
public constructor(something: any) {
}
public async exampleMethod() {
return "hey";
}
}
And this in another, InstanceClass.ts:
interface GenericInterface<T> {
new(something: any): T;
}
export default class InstanceClass <T> {
private c: GenericInterface<T>;
public constructor(c: T) {
}
async work() {
const instanceTry = new this.c("hello");
instanceTry.exampleMethod();
}
}
And this in another, ClassCaller.ts: <--EDITED-->
import ImportedClass from './ImportedClass';
import ImportedClass from './InstanceClass';
const simulator = new InstanceClass <ImportedClass>(ImportedClass);
Then when I call it like this:
simulator.work();
It throw this error:
error TS2339: Property 'exampleMethod' does not exist on type 'T'.
Any help is welcome, thanks.
If T must have a method named exampleMethod you must include this in the constraint for T on Simulator to be able to use it inside Simulator:
export class ImportedClass {
public constructor(something: any) {
}
public async exampleMethod() {
return "hey";
}
}
interface GenericInterface<T> {
new(something: any): T;
}
export class Simulator<T extends { exampleMethod(): Promise<string> }> {
public constructor(private c: GenericInterface<T>) {
}
async work() {
const instanceTry = new this.c("hello");
await instanceTry.exampleMethod();
}
}
const simulator = new Simulator(ImportedClass);
simulator.work()
Playground link
There were other small issues that needed to be fixed to make the snippet above work, but that is the mai issue.
ETA: I know that there are various ways to watch my form for changes. That is not what I am trying to do. As the title says, I am asking how to watch for changes to an object. The app shown below is for illustration purposes only. Please answer the question that I have asked. Thanks!
I have this simple app:
import { Component, OnInit } from '#angular/core';
export class Customer {
firstName: string;
favoriteColor: string;
}
#Component({
selector: 'my-app',
template: `
<div *ngIf="customer">
<input type="text" [(ngModel)]="customer.firstName">
<input type="text" [(ngModel)]="customer.favoriteColor">
</div>
`
})
export class AppComponent implements OnInit {
private customer: Customer;
ngOnInit(): void {
this.customer = new Customer();
// TODO: how can I register a callback that will run whenever
// any property of this.customer has been changed?
}
}
Note the TODO. I need to register a callback that will run whenever any property of this.customer has been changed.
I cannot use ngChange on the inputs. I need to subscribe directly to changes on the model. The reasons pertain to my use case, and aren't worth going into here. Just trust me that this isn't an option.
Is this possible? I've done a lot of Googling, but I've come up dry.
Angular usually uses injected into constructor KeyValueDiffers class.
For your case it could look like:
import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '#angular/core';
export class Customer {
firstName: string;
favoriteColor: string;
}
#Component({
selector: 'my-app',
templateUrl: `./app.component.html`
})
export class AppComponent {
private customerDiffer: KeyValueDiffer<string, any>;
private customer: Customer;
constructor(private differs: KeyValueDiffers) {}
ngOnInit(): void {
this.customer = new Customer();
this.customerDiffer = this.differs.find(this.customer).create();
}
customerChanged(changes: KeyValueChanges<string, any>) {
console.log('changes');
/* If you want to see details then use
changes.forEachRemovedItem((record) => ...);
changes.forEachAddedItem((record) => ...);
changes.forEachChangedItem((record) => ...);
*/
}
ngDoCheck(): void {
const changes = this.customerDiffer.diff(this.customer);
if (changes) {
this.customerChanged(changes);
}
}
}
Stackblitz Example
One more option is using setter on properties that you want to check.
See also
http://blog.mgechev.com/2017/11/14/angular-iterablediffer-keyvaluediffer-custom-differ-track-by-fn-performance/
I need to subscribe directly to changes on the model.
Then you need to listen to model changes with ngModelChange
Template:
<input type="text" (ngModelChange)="doSomething($event)" [ngModel]="customer.firstName">
Class:
doSomething(event) {
console.log(event); // logs model value
}
DEMO
You can't watch changes in an object. Its not angular 1 there are no watchers here. Another solution will be via observables.
use form
<form #f="ngForm">
<input type="text" name="firstName" [(ngModel)]="customer.firstName">
<input type="text" name="favoriteColor" [(ngModel)]="customer.favoriteColor">
</form>
in code
#ViewChild('f') f;
ngAfterViewInit() {
this.f.form.valueChanges.subscribe((change) => {
console.log(change)
})
}
You could use custom setters to trigger your callback:
class Customer {
private _firstName: string
get firstName(): string {
return this._firstName
}
set firstName(firstName: string) {
this.valueChanged(this._firstName, firstName)
this._firstName = firstName
}
private _lastName: string
get lastName(): string {
return this._lastName
}
set lastName(lastName: string) {
this.valueChanged(this._lastName, lastName)
this._lastName = lastName
}
valueChanged: (oldVal, newVal) => void
constructor (valueChanged?: (oldVal, newVal) => void) {
// return an empty function if no callback was provided in case you don't need
// one or want to assign it later
this.valueChanged = valueChanged || (() => {})
}
}
Then just assign the callback when you create the object:
this.customer = new Customer((oldVal, newVal) => console.log(oldVal, newVal))
// or
this.customer = new Customer()
this.customer.valueChanged = (oldVal, newVal) => console.log(oldVal, newVal)
visit https://github.com/cartant/rxjs-observe. it bases on rxjs and proxy.
import { observe } from "rxjs-observe";
const instance = { name: "Alice" };
const { observables, proxy } = observe(instance);
observables.name.subscribe(value => console.log(name));
proxy.name = "Bob";
We are tasked with converting an Angular 1.x app to Angular 9. It's an application with ESRI maps, so we have some neat tools that the ESRI framework brought to the table. ESRI has watchUtils that do a whole lot more than just watch for changes.
But I missed Angular 1's simple $watch. Besides, we create Entities and Models in our application, and we may need to observe these from time to time.
I created an abstract class called MappedPropertyClass. It uses a Map<string, any> to map class properties, which allows me to easily implement toJSON and other utility functions.
The other Map this class has is _propertyChangeMap: Map<string, EventEmitter<{newvalue,oldvalue}>;
We also have a function called... $watch, which takes a string and a callback function.
This class can be extended by Entities as well as components or services
I'm happy to share, the caveat is your properties must look like this:
public get foo(): string {
return this._get("foo");
}
public set foo(value:string) {
this._set("foo", value);
}
--------------------------------------------------------------------
import { EventEmitter } from '#angular/core';
export abstract class MappedPropertyClass {
private _properties: Map<string, any>;
private _propertyChangeMap: Map<string, EventEmitter<{ newvalue, oldvalue }>>;
protected _set(propertyName: string, propertyValue: any) {
let oldValue = this._get(propertyName);
this._properties.set(propertyName, propertyValue);
this.getPropertyChangeEmitter(propertyName).emit({ newvalue:
propertyValue, oldvalue: oldValue });
}
protected _get(propertyName: string): any {
if (!this._properties.has(propertyName)) {
this._properties.set(propertyName, undefined);
}
return this._properties.get(propertyName);
}
protected get properties(): Map<string, any> {
var props = new Map<string, any>();
for (let key of this._properties.keys()) {
props.set(key, this._properties.get(key));
}
return props;
}
protected constructor() {
this._properties = new Map<string, any>();
this._propertyChangeMap = new Map<string, EventEmitter<{ newvalue: any,
oldvalue: any }>>();
}
private getPropertyChangeEmitter(propertyName: string): EventEmitter<{
newvalue, oldvalue }> {
if (!this._propertyChangeMap.has(propertyName)) {
this._propertyChangeMap.set(propertyName, new EventEmitter<{ newvalue,
oldvalue }>());
}
return this._propertyChangeMap.get(propertyName);
}
public $watch(propertyName: string, callback: (newvalue, oldvalue) => void):
any {
return this.getPropertyChangeEmitter(propertyName).subscribe((results) =>
{
callback(results.newvalue, results.oldvalue);
});
}
}