Comment accéder à l'attribut nativeElement à l'aide de debugeElement dans le test d'unité angulaire
Je veux écrire un test unitaire simple pour vérifier si le bouton est désactivé lorsque certaines valeurs sont nulles ou vides.
Ci-dessous mon fichier de spécification:
test.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import 'reflect-metadata';
import { Component,
DebugElement,
ViewChild }
from "@angular/core";
import {By} from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { ListCommentsComponent } from './list-comments.component';
import {CommentsDataService} from '../../services/comments/comments-data.service'
describe('ListCommentsComponent', () => {
let component: ListCommentsComponent;
let fixture: ComponentFixture<ListCommentsComponent>;
let debugElement:DebugElement;
let htmlElement:HTMLElement;
let addCommentBtn:DebugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ FormsModule, HttpClientModule],
declarations: [ ListCommentsComponent ],
providers:[{provide: CommentsDataService}],
// providers:[HttpClientModule, HttpClient]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ListCommentsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
fit('should be disabled when comment is empty', () => {
component.comment = '';
addCommentBtn = fixture.debugElement.query(By.css('button.addCommentBtn'));
expect(addCommentBtn.nativeElement.getAttribute('disabled')).toBeTruthy();
});
});
Test échoué:
Undefined attendu pour être 'désactivé'.
J'ai effectué des recherches sur Internet pour trouver les fonctions debugElement afin d'obtenir les propriétés de l'élément, mais je n'ai pas trouvé de solution exacte.
Ceci est une référence similaire SO Question
METTRE À JOUR:
Ci-dessous HTML du composant
HTML
<div class="container">
<!--<h1 id="hello"></h1>-->
<div class="row listCommentsContainer">
<div class="col-lg-8 col-sm-8" *ngFor="let commentData of commentsData| async ; let i = index">
<ol style="list-style: none;">
<li class="listComments">
<div style="display: block">
<div style="display:inline-block;">
<a class="avatar">
<img style="" src="{{commentData.profile_image}}">
</a>
</div>
<a class="commentPostByUserName">
<span class="commentPostByUserName" style="">{{commentData.first_name}}</span>
</a>
<div class="commentTime">{{commentData.time_stamp}}</div>
</div>
<div class="commentTextDisplay">{{commentData.object}}</div>
<br>
<!-- Reply Link -->
<div class="addReplyContainer" >
<a class="addReplyLink" (click)="showReplyTextArea($event,i )">Reply</a>
</div>
<!-- Add Reply -->
<div [attr.commentId] = "commentData.target_id" *ngIf = "selectedindex == i "
class="addReplyContainer replyTextAreaContainer" >
<textarea [(ngModel)]="reply" style="width:100%"
class="replyText commentText addReplyTextarea form-control"></textarea>
<button [attr.commentId]="commentData.id" [disabled] = "!reply || reply.length>500" class="btn btn-success addCommentBtn" (click)="addReply(commentData.target_id)">Add</button>
</div>
<!-- -----Add Reply end------ -->
<!-- List Replies -->
<div class="replies col-lg-8 col-sm-8" *ngFor="let reply of commentData.comment">
<ol style="list-style: none;">
<li class="listComments listReplies">
<div style="display: block">
<div style="display:inline-block;">
<a class="avatar">
<img style="" src="{{reply.profile_image}}">
</a>
</div>
<a class="commentPostByUserName">
<span class="commentPostByUserName" style="">{{reply.first_name}}</span>
</a>
</div>
<div class="commentTextDisplay replyTextDisplay">{{reply.object}}</div>
</li>
</ol>
</div>
<!-- -------list reply end-------- -->
</li>
</ol>
</div>
</div>
<!-- Add Comment-->
<div class="row">
<div class="addCommentContainer col-lg-6 col-sm-12">
<textarea maxlength="500"
[(ngModel)]="comment" class="commentText form-control"
placeholder="Add Comment">
</textarea>
<button #addCommentBtn [disabled] = "!comment || comment.length>500" (click)="addComment()" class="btn addCommentBtn btn-success">Add</button>
</div>
</div>
<!-- Add Comment end-->
</div>
À la fin du code HTML, il y a textarea et le bouton que je teste pour être désactivé lorsque textarea est vide.
Dans la classe de composant, nom de variable est comment qui doit être vide pour que le bouton soit désactivé. _ {C'est l'assertion de mon test.} _
Ci-dessous, la classe de composant:
import {Component, OnInit, ElementRef, ViewChild, Renderer2} from '@angular/core';
import { CommentsDataService} from "../../services/comments/comments-data.service";
import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';
import {IComment} from "../../comments";
import {ICommentType} from "../../commentType";
declare let jQuery: any;
@Component({
selector: 'app-list-comments',
templateUrl: './list-comments.component.html',
styleUrls: ['./list-comments.component.css'],
providers:[CommentsDataService]
})
export class ListCommentsComponent implements OnInit {
constructor(private commentsDataService:CommentsDataService, private el: ElementRef) {
}
commentsData :any; // Comment Data received from service.
comment:string; // Comment text; declaration.
reply:string;
commentObj:any;
commentArrayObj:any;
public selectedindex;
getComments; // Declaration of function.
saveComment;
getUser;
/**
* This Function is triggered to
* call save function and append
* new comment.
* Append new comment
*
*/
addComment()
{
this.comment = this.comment.trim();
let commentObj;
let comment = this.comment;
commentObj ={
"root_id":"1",
"target_id": "1",
"object": this.comment,
"time_stamp":'2 secs ago',
"profile_image":"/../../assets/images/no-user.png",
"first_name" : "john",
};
//let commentObj = this.commentObj; //Put this.commentObj to Push it into this.commentData
if( typeof this.comment == "undefined" || this.comment === '' || this.comment == null || this.comment == '\n' || this.comment.length>500 )
{
return false;
}
else
{
this.commentsData.Push( commentObj );
this.comment = ''; // Empty comment Textarea.
return comment;
}
}
/**
*
* Function triggered when
* reply link is clicked
* @param event
* @param index
*/
showReplyTextArea(event, index);
showReplyTextArea(event, index)
{
this.selectedindex = index;
console.log( this.selectedindex);
}
/**
* Append Reply to list.
* @param event
* @param target_id
*/
addReply(target_id)
{
let commentData = this.commentsData; //creating local variable
let reply = this.reply; //creating local variable
if(reply == "" || reply === '/n' || reply.length <=0 || reply.length > 500 )
{
return false;
}
else
{
this.commentObj = {
root_id:1,
target_id: target_id,
object: reply,
profile_image:"/../../assets/images/no-user.png",
actor:1,
first_name : "john"
};
let commentObj = this.commentObj;
this.commentArrayObj =[
{
root_id:1,
target_id: target_id,
object: reply,
actor:"user:123",
time_stamp: "2 min ago",
first_name : "john",
profile_image:"/../../assets/images/no-user.png"
}
];
let commentArrayObj1 = this.commentArrayObj;
console.log('commentObj');
console.log(commentObj);
jQuery.each(this.commentsData, function (index, value) {
if(value.target_id == target_id)
{
if(! ('comment' in commentData[index]))
{
commentData[index]['comment'] = commentArrayObj1;
}
else
{
commentData[index].comment.Push(commentObj);
}
}
})
}
this.reply = ''; // Empty textarea after posting reply.
}
ngOnInit() {
this.commentsData = this.commentsDataService.getComments();
//Service call for Comments listing.
/* this.commentsDataService.getComments().subscribe(comments=>{
this.commentsData = comments
}
)*/
}
}
Vous devez mettre à jour la vue après avoir défini le component.comment = ''. Ajoutez l'appel fixture.detectChanges() avant de rechercher votre élément et de faire les assertions.
fit('should be disabled when comment is empty', () => {
component.comment = '';
fixture.detectChanges() // <-- add this to update the view
addCommentBtn = fixture.debugElement.query(By.css('button.addCommentBtn'));
// this asserts that button matches <button disabled>Hello</button>
expect(addCommentBtn.nativeElement.getAttribute('disabled')).toEqual('');
// this asserts that button matches <button>Hello</button>
expect(addCommentBtn.nativeElement.getAttribute('disabled')).toEqual(null);
}
});
Il est à noter que vous pouvez inspecter la DebugElement sans accéder à la nativeElement.
voici une légère modification du code. Essayez ceci
expect(addCommentBtn.nativeElement.attributes).toContain['disabled'];