76599

angular2 test, how to test event is bound to an element

Question:

I am writing an angular2 unit test for a component. With fully using JQuery it's possible to find what event is bound to an element. However in Angular2, I am not sure it's possible or not

For example, the following code has a click event, which is a public function of a component

<button (click)="doLogin()" [disabled]="myDisabled">Login</button>

By reading DOM element, I can make it sure all properties and data binding is correct by running a test. Only thing that I don't know is, "event binding is correct or not" because the generated html is like the following

<button>Login</button>

I want to make it sure someone does not delete this event binding in the future by writing a test for it.

In summary, how do I know event is properly bound to DOM element?

EDIT: Is there a way to know there is click event without actually clicking it?

Answer1:

You could use the approach below (calling the click:

it('should render list', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { return tcb.createAsync(MyList).then((componentFixture: ComponentFixture) => { const element = componentFixture.nativeElement; componentFixture.detectChanges(); expect(element.querySelectorAll('li').length).toBe(5); document.getElementById('test').click(); }); }));

See this question for more details:

<ul><li><a href="https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click" rel="nofollow">How can I trigger a JavaScript event click</a></li> </ul>

Recommend

  • Old values in input fields by GET request
  • java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/db [duplicate]
  • Managed bean is sometimes null and sometimes not
  • Angular infinite digest loop with ui-router
  • IE11 textarea loses focus if another textarea is disabled
  • My first C# WPF ValidationRule is not firing
  • How do I bind multiple properties in an Android layout element
  • How can I reset dropdown data if modal closed on vue component?
  • Caliburn Micro, How to use ContentControl (or display 'sub' ViewModel) using ViewModel Fir
  • Drawing a Path in XAML (with binding) vs. C#. One works, one doesn't
  • Consuming a WCF service in a Java Client using wsHttpBinding
  • How to getText() from the input field of an angularjs Application
  • Web.config system.webserver errors
  • Force show.bind execution
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Django rest serializer Breaks when data exists
  • Android fill_parent issue
  • Recording logins for password protected directories
  • Get one-time binding to work for ng-if
  • Is there any way to access browser form field suggestions from JavaScript?
  • jquery mobile loadPage not working
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • QuartzCore.framework for Mono Develop
  • 0x202A in filename: Why?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Getting error when using KSoap library to consume .NET web services
  • File not found error Google Drive API
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?