How to test the html content in Lightning Webcomponents

sampleDemo.html
<template>
    <p class="FirstName">Brahmanaidu</p>
    <p class="LastName">Mandalapu</p>
</template>

sampleDemo.test.js
import  {createElement} from 'lwc';
import SampleDemo from 'c/sampleDemo';
describe('c-sample-Demo',()=>{
    test('display FirstName',()=>{
        const element=createElement('c-sample-Demo',{
            is:SampleDemo
        });
        document.body.appendChild(element);
        const fName=element.shadowRoot.querySelector('p.FirstName');
        expect(fName.textContent).toBe('Brahmanaidu');
    })
    test('display LastName',()=>{
        const element=createElement('c-sample-Demo',{
            is:SampleDemo
        });
        document.body.appendChild(element);
        const lName=element.shadowRoot.querySelector('p.LastName');
        expect(lName.textContent).toBe('Mandalapu');
    })
    test('display FirstName negative scenario',()=>{
        const element=createElement('c-sample-Demo',{
            is:SampleDemo
        });
        document.body.appendChild(element);
        const fName=element.shadowRoot.querySelector('p.FirstName');
        expect(fName.textContent).not.toBe('Mandalapu');
    })
    test('display LastName negative scenario',()=>{
        const element=createElement('c-sample-Demo',{
            is:SampleDemo
        });
        document.body.appendChild(element);
        const lName=element.shadowRoot.querySelector('p.LastName');
        expect(lName.textContent).not.toBe('Brahmanaidu');
    })
})

Comments