How to create new event for unit testing in Angular 2?

Question

Hi I am writing unit test case for my angular code. I am trying to update textbox in gridview. Below is my gridview code.

<input *ngIf="editing[rowIndex + '-scopevalue']" class="inline-editor" autofocus (blur)="updateValue($event, 'scopevalue', value, rowIndex)" type="text" [value]="value" />

Below function performs update.

 updateValue(event, cell, cellValue, rowIndex) {
        this.editing[rowIndex + '-' + cell] = false;
        this.rows[rowIndex][cell] = event.target.value;
        this.rowsCache[rowIndex][cell] = event.target.value;
        this.scopeEdit = this.rows[rowIndex];
        this.updateScope();
    }

Below unit test case I am writing to check above code.

 it('update scope name value', () => {
        var row = component.rows[0];
        let cell = 'scopevalue';
        let cellValue = row.scopevalue;
        let rowIndex = 0;
        component.updateValue('/bmw', cell, cellValue, rowIndex);
    });

In the above method, first parameter supposed to be event. Can someone help me how to create event? Any help would be appreciated. Thank you

I don't know if that's you want, but you can make an harcoded value of `event.target.value` and verify in your `updateValue` function if `rowsCache[rowIndex][cell]`will have that value. You can mock Event with a simple object, like this : `const event = { target: { value: 42 }}; component.updateValue(event, cell, cellValue, rowIndex);` — Adrien SAULNIER, May 22 '18 at 09:07

Adrien SAULNIER · Accepted Answer · 2018-10-03T08:28:48.850

9

You can make an hardcoded value of event.target.value and verify in your updateValue function if rowsCache[rowIndex][cell] will have that value.

You can mock an event with a simple object, like this :

const event = { target: { value: 42 }};
component.updateValue(event, cell, cellValue, rowIndex);

edited Oct 03 '18 at 08:28

answered May 22 '18 at 09:33

Adrien SAULNIER

1,651
1
13
19

8

Note: This will not work if you have your argument typed as an Event object. There are several properties missing if you want to use that type. – TheCodeFox Nov 15 '19 at 15:08
1

@TheCodeFox do you know any solution for that problem? we can't mock completely the Event object, it is a waste of time, typecast didn't work either – Raphaël VO Jun 19 '21 at 10:45
@RaphaëlVO for me this works for me: https://stackoverflow.com/a/47713088/3876419 , basically create an object `const mockEvent : Event = { //insert your target value here };` – Sum NL Nov 16 '21 at 07:35
if I remember correctly, you can't use directly this mock as Event, you need to typecast it to prevent compile error, like this: `mock as unknown as Event` – Raphaël VO Nov 18 '21 at 08:27

score 4 · Answer 2 · answered Nov 16 '21 at 07:51

4

In case your method's argument is typed as an Event object instead:

const mockEvent: Event = <Event><any>{
  target: {
      value: 42      
  }
};
component.updateValue(mockEvent, cell, cellValue, rowIndex);

answered Nov 16 '21 at 07:51

Sum NL

1,055
2
12
21

score 0 · Answer 3 · answered Apr 28 '22 at 14:35

You can cast it first to unknown and then to an event like this:

// arrange
const file = {
  name: 'image.png',
  size: 50000,
  type: 'image/png'
} as File;


const mockEvent = {
  target: {
    files: [file]
  }
} as unknown as Event;

// act
component.onInputChange(mockEvent);

// assert
expect(component.files).toEqual([file]);

How to create new event for unit testing in Angular 2?

3 Answers3