我想编写一个简单的单元测试来检查当某个值为空或为空时按钮是否被禁用。
以下是我的规格文件：
测试规范.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 和 button，当 textarea 为空时，我正在测试将其禁用。
在组件类中，变量名称是注释，对于要禁用的按钮，该注释应为空。这是我测试的断言。
下面是组件类：
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
}
)*/
}
}
