Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Karma test paste event

I have a simple component that handle paste event into a form input.

The form:

this.searchForm = this.formBuilder.group({
  query: [ null, [Validators.required] ]
});

onPaste(event) {
    event.preventDefault();
    const formattedQuery = event.clipboardData.getData('text/plain')
      .split(/,?[\r\n\t]+\s?/)
      .join(', ')
      .replace(/,\s?$/g, '');

    this.searchForm.get('query').setValue(formattedQuery);
  }

Now I am trying to test that and it looks like this:

it('should reformat pasted data', () => {
    const queryField = fixture.debugElement.query(By.css('input[type="search"]'));
    queryField.nativeElement.dispatchEvent(new ClipboardEvent('paste', {
      dataType: 'text/plain', 
      data: '123\r123'
    }));
    fixture.detectChanges();
    expect(queryField.nativeElement.value).toBe('123, 123');
    // also tried expect(component.searchForm.get('query').value).toBe('123, 123');
  });

But as a result i've got

Expected '' to be '123, 123'

If i do console.log(queryField.nativeElement) it shows the input, but why it doesn't handle new ClipboardEvent('paste') event?

<input class="ng-untouched ng-pristine ng-invalid" formcontrolname="query" type="search" ng-reflect-name="query">

Full component you can find here https://stackblitz.com/edit/angular-cp9yhx?file=app%2Fhello.component.ts

What's wrong with my unit test?

like image 383
rel1x Avatar asked Dec 08 '17 13:12

rel1x


People also ask

What is karma and how does it work?

As a test runner, Karma does three important things: It starts a web server and serves your JavaScript source and test files on that server. Loads all the source and test files in the correct order. Finally, it spins up browsers to run the tests.

What is karma testing in angular?

When it comes to tools used in Angular unit testing—or even vanilla JavaScript testing, for that matter—no tool is better known than Karma (sometimes also called “Karma JS.”) Karma is a testing tool developed by the AngularJS team, so it’s understandable why it’s usually associated with the framework.

What is karma - a test runner?

That's why we created Karma - a test runner that fits all our needs. JS Everywhere 2012 Paris Watch Vojta Jína presenting Testacular at JS.everywhere. Things should be simple. We believe in testing and so we want to make it as simple as possible. The main goal for Karma is to bring a productive testing environment to developers.

What's the value added by Karma?

What’s the value added by Karma? The main selling point of Karma is the ability to run tests against real browsers and real devices, which makes your testing strategy more robust and reliable.


2 Answers

Try this:

it('should reformat pasted data', () => {
  component.onPaste(new ClipboardEvent('paste', {
    dataType: 'text/plain', 
    data: '123\r123'
  }));
  expect(queryField.nativeElement.value).toBe('123, 123');
});

Or even

it('should reformat pasted data', () => {
  component.onPaste(new ClipboardEvent('paste', {
    dataType: 'text/plain', 
    data: '123\r123'
  }));
  expect(component.searchForm.get('query').value).toBe('123, 123');
});
like image 70
pop Avatar answered Oct 02 '22 08:10

pop


This worked for me:

it('should trim pasted data', () => {
  const initialValue = 'test ';
  fixture.detectChanges();

  // Setting initial value
  const el = inputElement.nativeElement;
  el.value = initialValue;

  // Setting up event data
  const pasteData = new DataTransfer();
  pasteData.setData('text', initialValue);

  // Creating event
  const pasteEvent = new ClipboardEvent('paste', {
    clipboardData: 'new value'  <- CHANGED
  } as any);


  // Dispatching event    
  el.dispatchEvent(pasteEvent);

  expect(el.value).toEqual('new value'); <- CHANGED
});
like image 33
lukeCz Avatar answered Oct 02 '22 09:10

lukeCz