大佬教程收集整理的这篇文章主要介绍了如何在角度单元测试中使用debugeElement访问nativeElement属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
以下是我的spec文件:
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(); }); });
测试失败:
我搜索了互联网,找到debugElement函数来获取元素的属性,但找不到确切的解决方案.
这是类似SO Question的参考
更新:
下面是组件的HTML
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>
在html的末尾有textarea和按钮,当textarea为空时我正在测试它被禁用.
在组件类中,变量名是注释,对于要禁用的按钮,该注释应为空.这是我的测试的断言.
下面是Component类:
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,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 } )*/ } }
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); } });
值得注意的是,您可以在不访问nativeElement的情况下检查DebugElement
.
以上是大佬教程为你收集整理的如何在角度单元测试中使用debugeElement访问nativeElement属性全部内容,希望文章能够帮你解决如何在角度单元测试中使用debugeElement访问nativeElement属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。