innerHtml,innerText,innerContent in Testing

[puddlejumper26]

Here is an article to explain that textConent is better than innerHTML and innerText (Why textContent is better than innerHTML and innerText?)

It says that textContent is lighter, with better performance. innerText is heavy, requires some layout system information. And cannot insert HTML into this. innerHTML has cross site security attacks, so it's always better to avoiding using this. But it can insert HTML into this.

but basically, if any of those could be run successfully, then the other two should also be working.

<div class="className">0.2</div>
<div class="className">0.2</div>
<div class="className">0.2</div>
<div class="className">0.2</div>

console.log((fixture.debugElement.nativeElement as HTMLElement).querySelectorAll('.className'))

result in the test console should be

NodeList(4) [div.className, div.className, div.className, div.className]

open it

NodeList(4) [div.className, div.className, div.className, div.className]
0: div.className
1: div.className
2: div.className
3: div.className

let's open the 0

accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: _ngcontent-a-c1, 1: class, _ngcontent-a-c1: _ngcontent-a-c1, class: class, length: 2}
autocapitalize: ""
childElementCount: 0
childNodes: NodeList [text]
children: HTMLCollection []
classList: DOMTokenList ["className", value: "className"]
className: "className"
clientHeight: 20
clientLeft: 0
clientTop: 0
clientWidth: 49
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
elementTiming: ""
enterKeyHint: ""
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "0.2"                            <======
innerText: "0.2"                               <======
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "div"
outerText: "0.2"
ownerDocument: document
parentElement: div.overall-metrics-box
parentNode: div.overall-metrics-box
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 20
scrollLeft: 0
scrollTop: 0
scrollWidth: 49
tabIndex: -1
tagName: "DIV"
textContent: "0.2"                        <======
....

Therefore, in the testing, there should be no big differences to use them.