React Testing #2

 From part 28

 

 

 

 

Create a folder skills

 


Here we cant use getbyrole as it has multiple element (list items)

Textmatch


 

 

 

 

 

 Here,we are conditonally rendering button

It means login button is present in the ui

 

We exactly want this

 

 However there is an error

 

 Now test pass


Summary: When we want to ensure that an element is not present than we use queryby or queryallby set of classes

 now check for start learning button

 

 Test passes after doing this

The drfault timeout is 2000 ms but we can change it

 

 

 

 

 debugging a test

 When we change start learn the test fails 

It can be easily seen and also dom tree is there to help us debug

To get dom tree we can use debug method

 debug before start lerning not present and afetr present

to get log of views

 

 helps find logs in getbyroles method

Testing playground chrome extension

 Hiver over query to find best testing method

Testing user interaction

 

 

 user-event is imported by default

minor-uissue->cra use 13v but 14v is now avail...so if it is this case than update

 Handling mouse interactions


 Bith the element present so the test passes

This also passes

next import user-event


 Our test passes

 hiver and unhover also use for tooltip

 Dont use unless absolutely req as not necessary

Keyboard interactions

 Test the input value using rtl

 

 1) get amount ip

2) user type

3) check if type match

4) next click

5) check if heading match

 1) first get all 3 elements

2) yser tab focuse goes to increment btn

3) user tab focus goes to spinner btn

4) usertab focus to amount btn

 

 

 can use label or value -> so 1 and 3 is true

 


Testing Providers

 

 

m

 

Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more