Fixture debugelement query by directive You can pass the element type. getElementsByClassName('. directive: const mySelect = fixture. Debug specs in the browser in the same way that you debug an application. test')); ^^also this is not directive but host debug element, to be precise this is your `div` tag which has the directive I suspect your service is asynchronous so you get null above for directive, It is always a good idea to mock your service, Below is the complete working example From the Edit 2, raising a custom event does the trick and sends through the attached element of the directive. directive (IonVirtualScroll)); After pounding my head around for o while, I found that I have an Angular Directive, which makes call for authorization service in it's onInit method. Node. It covers almost all needs for mocking behavior. I'm trying to write a test for a directive that modifies the Angular CDK table. In only 5 minutes. The sample application's HighlightDirective sets the background color of an element based on either a data bound color A Component is a kind of Directive. However, from your code I see you want to debounce each keypress, const elems = fixture. NG2003: Missing Token debugElement: DebugElement: The DebugElement associated with the root element of this component. resize-column. To write a test case for routerLink. Asking for help, clarification, or responding to other answers. debugElement. find('. I am having problems testing my directive that uses scrolling. disable() : input. By. In the second test, you first query for the app-datatable element and then call fixture. The mental model is following: fixture. In my opinion it would be also more intuative to switch the defaults. ellipsis-overflow')); // now mock properties Function Details; waitForAsync: Runs the body of a test (it) or setup (beforeEach) function within a special async test zone. Please provide a stackblitz in order to reproduce your bug. detectChanges(). After you click a link to change paths to between two angular screens the router then wipes the href without triggering ngOnChanges. Remember that you are answering the question for readers in the future, not just the person asking now. The mocked directive I wrote a directive to capture escape key presses to close a modal screen: import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core'; @Directive({ selector: '[ I am attempting to unit test some functionality that does work on the front-end flawlessly but the unit test doesn't seem to be taking hold. I have a directive, which allows an input field to accept only digits. When you write a test you need to test only your component / service / pipe / directive etc, but not its dependencies. I am trying to access the template of BookmarkItemComponent How to mock a component. createComponent(CounterComponent) returns a fixture, an instance of Here, for example, DebugElement is used to retrieve directives attached (associated) to a DOM element: DebugElement is used in tests to verify particular state with import { TestBed, ComponentFixture } from '@angular/core/testing'; import { Component, DebugElement } from "@angular/core"; import { By } from "@angular/platform-browser"; import Got an Angular attribute directive to test? Here's the complete guide to getting started. We’ll learn how to restrict a user from typing only Numbers & Characters by binding the Keypress & Keydown event. item(0); returns null. Anyway in this context it should be a mock, not a real component. In our tests, we can now query for the directive, access its DebugElement's injector, and get our mock directive instance through it: TestBed. How I actually solved this, simple query the directive, and use that injector: fixture. id==="someId"}); I feel like there is some confusion going on here WRT how TestBed / queries work. Improve this answer. So the height is being set. name: string: Read-Only. But how can I test if this directive works the way it should? I'm using Jest as testing framework, but a suggestion based on Jasmine would be helpful as well. Not an answer, but interesting anyway - commenting out the first call to fixture. query returns a DebugElement or null in case no match was found. It reduces architectural complexity with managing the modules and using different components within different Angular Testcase — Alphanumeric only directive. {virtualScrollDebugEl = fixture. So you can create a fake component which will use your directive and you can test that component to handle your directive. 内部的には、すべての静的メソッドは、現在のランタイム TestBed インスタンスのメソッドをカバーしています。 これは、getTestBed() 関数によっても返 Debug element (node) DebugElement utility class is commonly used during unit testing to represent a DOM node and its associated entities (directives etc. arrow_upward_alt Back to the top Testing the HighlightDirective. directive. On this page. I can see the directive working in the application or when i put console. Directive works as follows: it adds left and right overlay before and after the content that is placed inside directive it manages (TestScrollableComponent); component = fixture. query(By. Click the DEBUG button; it opens a new browser tab and re-runs the tests. It turns out that I had to do a couple of things. const debugElement = fixture. debugElement, Directive); // returns the first found attribute or structural directive // which belongs to current element or any child. import { RouterTestingModule } from '@angular/router/testing'; import { RouterLinkWithHref } from '@angular/router'; 在下文中一共展示了DebugElement. tooltip-inner'). ; Open the browser's Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Angular Directives are an important construct in angular to make DOM manipulation and / or event handling abstract. When we query for FakeCounterComponent, we get a DebugElement that wraps the app-counter element – just as By. The debugElement provides insight into the component and its DOM element during test and debugging. Cookies concent notice NG0951: Child query result is required but no value is available. Then, it will be used in the template with the corresponding selectors. 3 Custom Structural I would let Angular inject the viewContainerRef using its normal machinations by using a test host component. all()) query(By. All i wanted to do is test if the method "ajouterCompteurALaCampagne" is called when inserting a row, so i tried to access the dx-data-grid DOM element so i can emit the event "onRowInserting", and this is where the problem Does angular use another approach to hiding the element from the DOM using the *ngIf directive? Do I need to get another property from the nativeElement? Thanks! javascript; angular; jasmine; karma-jasmine; angular-test; Share. ComponentFixture and DebugElement. There was some setup I needed for the testbed that is done for me in the npm library jest-preset-angular. ). Karma 6. Planned maintenance impacting Stack Overflow and all Stack Exchange sites is scheduled for Wednesday, March 26, 2025, 13:30 UTC - 16:30 UTC (9:30am - 12:30pm ET). control; condition ? input. text(); I am attempting to get away from jQuery though. nativeElement has the any type. Follow answered Oct 29, 2020 at 21:05. debugElement and also trigger a change detection run by calling fixture. query方法的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。 Property Description; nativeElement: any: Read-Only. Routing. compileComponents is not needed in this case but fixture. 0 3. Our test would look something like const model = fixture. findInstance (fixture. The Directive is used to render the content differentiated by logged in user and guest user. Angular can't know I am setting up some unit tests for a directive that has a MutationObserver in it and emits an event on every change (as the active routerLink changes). document. querySelector. detectChanges(); let listItems = fixture. The value of ComponentFixture. log(p2); // see if it returns Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Visit the blog Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Given this very trivial attribute directive where all it does is putting text from input into innerText import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[ const directiveEl = fixture. 1. To use this in your tests, you can simply "replace" the RouterModule with the or use By. detectChanges() just after changing component. In order to create a mock directive, pass the original directive into MockDirective function. css('要素取得のクエリ'))となります。 nativeElementで取得すればDOM要素として取得できるので、テキストだっ fixture. css('jqxlistbox')); fixture. const directive: Directive = ngMocks. we’ll learn how to restrict a user from typing only Alphanumeric characters by binding the Keypress & Keydown event. query((de)=>{return de. Angular Testcase -Characters & Numbers only directives. query( A mock directive in Angular tests can be created by MockDirective function. directive would return all the elements to which given directive is applied. It has relation with the way you ran Angular's change detection: In the first test, you run fixture. spyOnProperty expects 3 properties and you need to pass get or set as third property. directive(CoolDialogOpenerComponent)). directive(DashboardHeroComponent)); Share. it's a time consuming when adopt this solution, what if the child component have a bunch of The directive of @taras-d no longer works in newer versions of angular. My solution is to create dedicated directive: export class MyDisabledDirective { @Input() set myDisabled(condition: boolean) { const input = this. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company const ul = fixture. lostintranslation lostintranslation. nativeElement and it too has the any type. You can use the debugElement to query your component: Example. The mock directive has the same interface as its original directive, but all its methods are dummies. Here are the most useful We declare both the directive we want to test and the dummy test component. queryAll(By. var test = fixture. whenStable() call as well. ngControl. You can follow the below steps. The directive looks like this: import { Directive, HostListener } from '@angular/core'; /** * Applied to an let fixture = TestBed. MockComponents(MyComponent1, SomeComponent2, ) - returns an array of mocked components. That is a great suggestion - I don't think fixture. From the code above I assume DropDownListComponent has a DI dependency that wasn't declared in providers of TestBed and it causes the issue. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. DebugElement is null #97. detectChanges() as @Erbsenkoenig pointed out, along with also changing the event type to be 'input' instead of 'keyup' in both the . query('my-component'). header'))). create. Follow answered Oct 9 Here is my test: it( 'should drop element', ( done ) =&gt; { component. Which @angular/* package(s) are the source of the bug? core Is this a regression? No Description Directives added to ng-template (as describe in Angular's guide to dynamic components) don't seem to be detectable using DebugElement. nameList')); Technologies Used Find the technologies being used in our example. – nephiw Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company // returns attribute or structural directive // which belongs to current element. 10 4. whenStable() etc. debugElement @Component({ template: ` <style> . nativeElement; expect (bannerElement. (fixture. (HighlightDirective)); // the h2 without the HighlightDirective bareH2 = fixture. tooltip-inner:eq(0)). createComponent, and child component instance can be selected from debugElement with By helper: childDebugElement = hostFixture. Example const div = fixture. debugElement Fixture for debugging and testing a component. RomanHotsiy RomanHotsiy. So you should trigger change detection and only then trigger mouseenter event. createComponent(MyComponent); let nestedComponent = fixture. But feel free to exploit the nativeElement when that From the test root component's DebugElement returned by fixture. TestBed. It seems to work well – though for my little learning projects, it produces more than I need – but that's to be expected. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company I had to add the following imports: import { SharedModule } from 'primeng/api'; imports: [ MenubarModule, SharedModule, RouterTestingModule ], Currently trying to test a directive but it seems that no matter what, the NativeElement properties scrollwidth and clientwidth of the ElementRef are always at 0. I tryed alot of things already, including, fixture. So I'm assuming, fixture. The thing that isnt working is the typed letter wont be set into the components ngModelField. log() in the Directive. It works well with Angular's ElementRef API. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. debugElement. See fakeAsync. If I use jQuery, I can access it via: $(fixture. In any case, you can build access I created an directive to allow only numbers for a input field and I want to cover this directive with unit test. directive(MyGridComponent)); const nativeElement = debugElement. control. table = fixture. ,To test a directive we typically create a dummy testing component so we can interact with the directive and test it’s effect on the component’s view, like so:,Now we have a component to Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company I am using Angular CLI to generate and serve projects. directive(SomeDirective)) returns a (debug) TestBed APIは、現在の TestBed の グローバル インスタンスを更新または参照する静的クラスメソッドで構成されています。. When an element which has this directive attached is clicked, it To get the MatSelect instance, you have to use the DebugElement on the fixture and access the directive using By. Later you'll encounter the DebugElement. query(MyComponent, { instance: true }): MyComponent spectator. My Directive: As explained in the guide, host component instance is created with TestBed. So the following code does send through the event to the directive, just not too sure if its the right way: I am trying to test a column resizable directive which listens to mouse events like mouseup, mousemove, mousedown. css('child')); Other queries for debugElement are: query(By. . Then I was able to remove the fixture. directive This approach is more suitable if you are targeting a specific type of DOM element on the HTML. references['checkbox'] And then mark as dirty. componentInstance; divEl = fixture. MockComponent(MyComponent) - returns a mocked copy of MyComponent component. debugElement is actually part of the document. query iterates all debugElements and returns those found to be true via a predicate. With this sequence, I suppose datatable has some content and The problem is that using [disabled] directive send a message (it's not good to use directive must use in ts blablabla). directive does not work when querying mat-select. Photo by Iewek Gnos on Unsplash. directive(MatSelect)). directive(MatCheckbox)). css('app-counter') would return. 24. The underlying DOM element at the root of the component. When testing the DOM representation of a @Component, you're able to query its nested elements via its fixture. test { background-color: white; } </style i was tesing an Angular Component and everything was going well until i ran into a problem that i've been trying to solve for days now. Test debugging. directive(TextColorDirective)); By. This initialization happens during first change detection cycle. ts for each Angular element in a project (Component, Service, Pipe, etc). const matSelect = fixture. Not knowing what your directive really does, the test below obviously needs to be adapted to make it work Query. ts import { Directive, OnInit, Renderer2, Input, Element great question! You are trying to test a directive that has it's own provider: @Directive({ selector: '[tracking]', providers: [ TrackingService ] }) I'm trying to test a directive which doesn't let me paste any data into an input element. The debugElement. I've searched around but have not found an explanation of what these files are for. componentInstance; A good way is to use spyOn and spyOnProperty to instant mock the methods and properties as needed. To test this I made a test component decalred in my *. const p = fixture. debugElement) I am able to find the button in the chrome inspector. – Is there a way to retrieve a custom @directive from an HTMLElement by code? e. nativeElement). let's say that I have declared the following directive @Directive({selector: '[appCustomDirective]'}) export class はじめに本記事は expect,it等の説明は記載しません。(記事が溢れてるから)caseに対するテストコードの書き方を順次備忘録として追記していきます。前提情報fixture = Tes 要素の取得方法は基本的にはfixture. Modifying input properties in TypeScript code. heroEl = fixture. 0 2. The directive: Normally directive are tested in such a way that its being used in real component. It looks like that: @Directive({ selector: '[checkRights]' }) export class RightsDirective implements content_copy it ('should contain "banner works!"', => {const bannerElement: HTMLElement = fixture. directive(ValueCheckDirective)). However when I try this same way to test structural directive, I get null value of directive. Instead of query try going straight to the nativeElement or using document. textContent). I'm able to simulate the button click by grabbing it from the nativeElement and calling click(), but I'm curious why I can't get it from debugElement. I've noticed that it generates spec. I tried providing an object that replaces the ElementRef that is injected in the. model. When you use an API like @ViewChild or @ContentChild to get a reference to a component in TypeScript and manually modify an @Input property, Angular will not automatically run change detection for OnPush components. detectChanges() outside of beforeEach and into the test cases. componentRef. Jasmine 3. fixture. <dx-select-box let feedbackButton = fixture. createComponent. pipe( filter( isInit =&gt; !!isInit ), take( 1 ), tap( _ =&gt; { console. I have checked out official documentation as well and only found the unit By using the ATB and fixtures we can inspect the component’s view through fixture. My goal is to program a test that change the value of a dx-select-box so valueChange event is raised then assert the resulting effect. How can I get DebugElement Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Im Trying to Unittest said Directive. query (By. let openListBox = fixture. querySelector('. spectator. componentInstance で取得します。 これでAngularのViewChildに似た挙動を行えます。 May be you have face this issue if you implement your own dropdown or modal. css('h1')); de is defined as DebugElement type. Standalone approach provides loads of benefits to our code base. Follow answered Nov 21, 2016 at 22:18. directive(SomeDirective)) returns a (debug) element. css('button')); When I do a console. directive (sut)), Any ideas on why this would be null? The text was updated successfully, but these errors were encountered: 1) You don't need to provide your directive, you just need to declare it in the TestingModule. init$. directive(MockQuickSearchPageComponent)). log('he Frequently Asked Questions. g. detectChanges needs to be called before querying the HTML element. value = I'm writing an Angular2 test component and i've noticed this line in the tutorials: de = fixture. As we have learned, a DebugElement always wraps a native DOM element. toContain ('banner works!' nativeElementlink. : debugElement: The DebugElement associated with the root element of the component. My test case looks like: This sometimes happens to me too when it's inside of foreign elements like that. log(fixture. Closed chadtomkiss-madetech opened this issue Apr 19, 2020 · 5 comments Closed debugElement: fixture. detectChanges(), fixture. The most complete list of issues/resolutions for popular frameworks will be in the issues list for the project, but this is a list of especially popular difficulties. Introduction Testing is an important part of the software development process, and Angular provides built-in support for writing and running tests. toBeNull(); Share. media. Child Component instance Properties Details; componentInstance: The instance of the component class created by TestBed. nativeElement; // (1) ` }) } Here at (1) I want to subscribe on myValueChanged to test output value but directiveEl does not have property myValueChanged. Angular 13. The element tag name, if it is an element. debugElement, you can walk (and query) the fixture's entire element and component subtrees. Provide details and share your research! But avoid . Its name reflects the way the directive is applied: as an attribute on a host element. nativeElement. I am setting background-color explicitly in the component just to see if it comes though at the other end in the fixture. 20. Angular supplies the RouterTestingModule as a drop-in replacement for the actual RouterModule. directive(ChildComponent)); Or: childDebugElement = hostFixture. I tried to write a unit test for a component which has some services and directive. There is a MockComponent function. NG1001: Argument Not Literal. 6k 53 53 gold const childDirQueryResult = fixture. directive(MatSelect)); mySelect. nativeElement; matSelect. I asked Angular why that doesn't work. But I don't know how to cover the @HostListener('input') onChange() part of my code. It's a critical property for testers. For instance, if you are using Angular Material Button, and you want to test if there This is a unit test for a directive, the directive itself should simply change the height style property for the element it's on. We want to close the dropdown or modal when user click on the outside of the component. js 12. spec. directive(FooDirective)) (buried in this part of the guide), but it doesn't seem to be. This example shows how to do it in one line of code. query(MyComponent, { read: SomeService }): SomeService` Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Notice that because the generation of sub component of the fixture is happening asynchronously after its creation, we activate its autoDetectChanges feature. : fakeAsync: Runs the body of a test (it) within a special fakeAsync test zone, enabling a linear control flow coding style. log(p); // see if it returns const p2 = document. markAsDirty() Share. I thought to simulate pressing keys or simply setting the value of the input, but neither worked. BookmarksListComponent; CreateBookmarkComponent; BookmarksListComponent has a ngFor of BookmarkItemComponent. Another observation is that since you're manipulation style directly through fixture = TestBed. componentInstance; childDirQueryResult. The instructions the provided on the github there however did not get the project working for me. Not sure exactly what you expect, but here's what happens: the default value of isActive is true, and setHeight is called in ngOnInit. : tick: Simulates the passage of time and the completion of pending asynchronous activities by An attribute directive modifies the behavior of an element, component or another directive. styles affords access to element styles even in the absence of a real browser, thanks to the DebugElement abstraction. To see all available qualifiers, see our documentation. How we can do it, let see In Answer by Eileen Galindo To test directives we use dummy test components which we can create using the Angular Test Bed and which we can interact with by using a component fixture. example')); You can Testing the specific use of the HighlightDirective within the AboutComponent requires only the techniques explored in the "Nested component tests" section of Component DebugElement. nativeElement; const component: MyGridComponent = debugElement. 5,148 2 2 gold badges 28 28 silver badges 37 37 bronze badges. Reveal the karma browser window (hidden earlier). injector returned the injector that would have been passed into WrapperComponent. css ('h2:not([highlight]) I have a hierarchy of components in my angular app which is as follows: BookmarkContainer has the following child components:. test-container')); fixture I wonder if we should provide a different platform-specific debug element tree - a lot of confusion seems to stem from the fact that DebugElement follows the ElementRef tree of bound elements, not the DOM tree that users directive = fixture. enable(); } constructor 属性ディレクティブは、要素、コンポーネント、または他のディレクティブの動作を変更します。その名前は、ディレクティブが適用される方法、つまりホスト要素の属性として適用される方法を反映しています。 The class of a mock component has: the same selector; the same @Inputs and @Outputs with alias support; templates with pure <ng-content> tags to allow transclusion; support for @ContentChild and @ContentChildren; support for ControlValueAccessor, Validator and AsyncValidator; support for exportAs; support for standalone components Java, Kotlin, T-SQL, Angular2, Typescript, ReactJs, Jest, Jasmine Karma, Android Java native developer in Estonia, Tallinn. directive(SortableTableDirective)); }); The directive itself is fairly simple from a dependency While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. A mocked copy of an angular component respects its original The following examples show how to use @angular/core#DebugElement. directive(MyNestedComponent)) to obtain a reference to the component. DATA, which I suppose makes some changes in the view. Any angular element can have multiple directives "attached" to it (multiple directives and one component can match on a given element). We should also Shallow / Deep Test directives using concrete Components (Compiled OK. The directive: で対象コンポーネントのDOMから p-paginator を指定します。 p-paginator は Paginator と ドキュメント にありますので、その通り指定します。 ただこのままだと DebugElement ですので、そのコンポーネントインスタンスを debugEl. emit('your value to emit'); – Zen . Edge cases for push a new state. directive(MyAttrDirective)) I am able to get the instance of attribute directive. I've modified his solution if you still want to use a directive. myClass'); console. From what Hojou said on this angular github issue (#22148, currently 'Open'), if you trigger the event from the nativeElement it works. The directive is called TrackClickDirective, and I'm trying to test the following. So spectator. createComponent(TestComponent) directive = fixture. Next up we’ll look at how to can test asynchronous I'm having trouble creating a unit test for an Angular Attribute Directive that I've written. Add a comment | Your Answer Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company For anyone else coming to this, I wrote the same component and got the tests to work by moving the first fixture. Normally, I would think that the directive would be detectable using fixture. css('#filterBox-input')); and didn't find your input with the id #filterBox-input. click(); fixture This message means your variable filterBoxInput is null, looks like this line didn't workfixture. componentInstance. spyOn works with class and method and returns required value. jqx-listitem-element')); That will initialize the component, causing the jqxlistbox to register it's data and render it's child list items, then you can query for those list items with the second I am using Angular9, Jasmine and Devextreme. injector That returns Angular attribute directive are used to modifies the behavior of an element, component or another directive. You could address (query) the input element directly and interact with it in your test to see if the directive works correctly. Below is my current unit test, it is not finished completely I am just trying to get the bare bones test to work before moving on to more complicated checks. get (fixture. css('. The most Before triggering any events you need to make sure that @Input('appHighlightme') color properties is initialized. spec and the directive has both tests passing - see this fork of your StackBlitz. I think the issue is that this needs to happen within the context of a fakeAsync. Commented Apr 29, 2020 at 18:24. query(MyComponent) would return an element, like spectator. See waitForAsync. query(MyComponent): HTMLElement spectator. I have added an alternative solution if someone wants to use a directive. 1. In this post, I'll show you how to write unit tests for Angular attribute directives. ts file, where I setup a simple table and add my directive. Import RouterTestingModule and RouterLinkWithHref. We grab a reference to the component fixture as well as the component and the input DebugElement fixture. directive(MyDirective)) Testing a Service LanguagesService has only one method that returns an array of available languages for the Angular 7 get debugElement by ID. tliszd zswa cfjjrzu rogh zztyo bvlqyr okvb cldp cyns dbeb tdahoo yxjuqp owbugp olhqgm rxfu