How to disable the input fields in Lightning Webcomponents with test class

sampleForm.html
=====================
<template>
  <lightning-input type="text" label="FirstName"  class="fname"></lightning-input>
  <lightning-input type="text" label="LastName" class="lname"></lightning-input>
  <lightning-button label="Disable" variant="brand" onclick={handleClick}></lightning-button>
    
</template>

sampleForm.js
====================
import { LightningElement,track } from 'lwc';

export default class SampleForm extends LightningElement {
   handleClick(){
       this.template.querySelectorAll('lightning-input').forEach(item=>{
           item.disabled=true;

       })
   }

}

sampleForm.test.js
========================
import {createElement} from 'lwc';
import SampleForm from 'c/sampleForm';
describe('c-simple-calculator',()=>{
    beforeEach(()=>{ 
        const element=createElement('c-sample-form',{
        is:SampleForm
    })
    document.body.appendChild(element);

})
test('display input fields in disabled format',()=>{
    const element=document.querySelector('c-sample-form');
    const inputButton=element.shadowRoot.querySelector('lightning-button');
    inputButton.dispatchEvent(new CustomEvent('click'));
        return Promise.resolve().then(()=>{
            const inputVal=element.shadowRoot.querySelectorAll('lightning-input').forEach(item=>{
            expect(item.disabled).toBeTruthy();
        });
    })
})

})

Comments