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?
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.
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.
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? 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.
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');
});
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With