Click check box inside DataView

[marogalli]

I have a checkBox that perform some DOMs actions. This check box is inside the DataView.

I am able to get the element, but when I do the following below, nothing happens.

        t.waitForSelector('#cb11_13',function() {
		var cb1 = Ext.select("#cb11_13");
		console.log(cb1.elements[0]);
		t.click(cb1.elements[0]);
         })

The output was : <input id="cb11_13" type="checkbox" onclick="setEscolhida(this)">

Tks

Marcelo

[mats]

Can you post a real siesta test case?

[marogalli]

Mats, this is my app test. My config is :

{
group: 'Buyer App',
preload: [],
items: [
{
hostPageUrl: 'buyer.html',
url: 'tests/buyer/app/test_Navigation.js'
}
]
}
and the code :

StartTest(function(t) {

	// Create an OpenedTree instance and override ajax proxy for tests
	Ext.create('Cotexo.store.OpenedTree');	
	Cotexo.store.OpenedTree.override({
	    proxy: {
	        type: 'ajax',
	        url: 'tests/data/openedTree.php',
	        reader:{
	             type: 'json',
	             root: 'results'                         
	        }
    		}
	});
	
	// Create an  ExpiredTree instance and override ajax proxy for tests
	Ext.create('Cotexo.store.ExpiredTree');	
	Cotexo.store.ExpiredTree.override({
	    proxy: {
	        type: 'ajax',
	        url: 'tests/data/expiredTree.php',
	        reader:{
	             type: 'json',
	             root: 'results'                         
	        }
    		}
	});
	
	// Create a OpenedQuotation store instance and override ajax proxy for tests
	Ext.create('Cotexo.store.OpenedQuotation');	
	Cotexo.store.OpenedQuotation.override({
    		proxy: {
       		type: 'ajax',
        		url: 'tests/data/openedQuotation.php',
	        actionMethods :{
	         	read   : 'POST'
	        },
            extraParams: {
        			idCotacao: ''
    			},
            reader: {
                type: 'json',
                root: 'infoCotacao',
        			id: 'idCotacao'
            }
		}
	});
	
	// Create a ExpiredQuotation store instance and override ajax proxy for tests
	Ext.create('Cotexo.store.ExpiredQuotation');	
	Cotexo.store.ExpiredQuotation.override({
    		proxy: {
       		type: 'ajax',
        		url: 'tests/data/expiredQuotation.php',
	        actionMethods :{
	         	read   : 'POST'
	        },
            extraParams: {
        			idCotacao: ''
    			},
            reader: {
                type: 'json',
                root: 'infoCotacao',
        			id: 'idCotacao'
            }
		}
	});

		  
	t.waitForSelector('#status_aberta',function() {
		Ext.Msg.hide();
		t.chain(
		    function (next) {
				var quotationCenter = Ext.getCmp('quotationCenterPanel');
				t.diag("openedInfo was loaded at application startup.");
				t.elementIsVisible('#status_aberta','openedInfo is visble');
				var openedSearchBox = Ext.ComponentQuery.query('openedNavigator')[0].down('[name="searchTextField"]');
				t.click(openedSearchBox,function(){
			    		t.moveMouseBy([0, -25],function() {
			    			t.diag("expand() and collapse() at westAccordion changes infos on centerPanel");
			    			t.click(function() {
			    				t.waitFor(
		       					function() {
		       						return quotationCenter.getActiveTab().xtype=="expiredInfo";
		       					},
			       				function() {
		    							t.is(quotationCenter.getActiveTab().xtype,'expiredInfo','expiredInfo is shown when openedAccordion was collapsed.');							      	
									t.moveMouseBy([0, 90],function() {
										t.click(function() {
											var brandInfo = $('#infosMarcaExpirada').text();
											t.is(brandInfo,'Ford','expiredTree item click working');
											t.moveMouseBy([0, -90],function() {
												t.click(function() {
													t.waitFor(
							   							function() {
								   							return quotationCenter.getActiveTab().xtype=="openedInfo";
								   						},
								       					function() {
															t.is(quotationCenter.getActiveTab().xtype,'openedInfo','openedInfo is shown when openedAccordion was expanded.');			
								  							t.moveMouseBy([0, 60],function() {
																t.click(function() {
																	var brandInfo = $('#infosMarcaAberta').text();
																		t.is(brandInfo,'Honda','openedTree item click working');
																		next();
																});
															});
								  						}
													)
												});
											});
										});
									});
								}
							);     		
				   		});
					});
			    	});	
		},
		function (next) {
			t.diag("openedTree chosenState functionalities");
			t.waitForSelector('#cb11_13',function() {
				var cb1 = Ext.select("#cb11_13");
				console.log(cb1.elements[0]);
			        t.click(cb1.elements[0]);				
			});
			
	    }
		);    
	});	
})

[marogalli]

I don't know how my code really helps. I am experiencing problems and difficult dealing with t.click(). That why for the moment I using t.moveMouseTo() and t.click(), but I intend to change it soon.

I would prefer to test my components isolated, I mean, instead of loading all application. When I load the view from the component I want to test I can't use the actions that is in the Controller. I did my best to test it isolated, but with no sucesss, thats why I am testing the hole application.

Summarizing, I have a Tree and when I click the node I load the DataView. This Dataview has some checkboxes that must be clicked in order to test.

I am loving Siesta! I intend to use it in CI soon.

I appreciate your help.

Do you have interest in my cooperation writing tutorials about using Siesta?

[nickolay]

I don't know how my code really helps. I am experiencing problems and difficult dealing with t.click(). That why for the moment I using t.moveMouseTo() and t.click(), but I intend to change it soon.

I would prefer to test my components isolated, I mean, instead of loading all application. When I load the view from the component I want to test I can't use the actions that is in the Controller. I did my best to test it isolated, but with no sucesss, thats why I am testing the hole application.

Summarizing, I have a Tree and when I click the node I load the DataView. This Dataview has some checkboxes that must be clicked in order to test.

Hm.. Can you try to add one more wait step to your outer "t.chain"? Perhaps your test ends right after the click on the checkbox and the context is cleared.

      function (next) {
         t.diag("openedTree chosenState functionalities");
         t.waitForSelector('#cb11_13',function() {
            var cb1 = Ext.select("#cb11_13");
            console.log(cb1.elements[0]);
                 t.click(cb1.elements[0], next);            
         });
         
       },
       function () {
           setTimeout(function () {}, 5000)
       }

I am loving Siesta! I intend to use it in CI soon.

I appreciate your help.

Do you have interest in my cooperation writing tutorials about using Siesta?

Thanks! What is your CI tool? Sure, we would love to see any tutorial/guide about using Siesta with various CI tools.

[marogalli]

Thank you. Instead of usind setTimeOut I used t.waitFor. The solution was :

t.waitForSelector('#cb11_13',function() {
		var cb1 = Ext.select("#cb11_13");
                 t.click(cb1.elements[0],function() {
                     t.waitFor(
				function() {
						return $("#conteudo_escolhida").find(".row_data").size()!=0;
				},
	   			function() {
					var partsChosen = $("#conteudo_escolhida").find(".row_data").size();
					t.is(partsChosen,1,'1 part was checked and exists in #chosen_content');
				}
			);
 });

This solution just work if the DOM (east panel size) is closed. If it is open, the selection is not done and the test returns fail. If I hit CRTL + "-" in the browser until the checkbox is in the screen it works even with the Toogle DOM active. If I can't see the checkbox in the east screen the t.click does not work, if I make the screen smaller, util I see the check box, t.click works. Do you understand what I mean?

I dont have CI yet. The plans is to have it in the next 60 days and Jenkins was the chosen. It would be a pleasure to help with documentations using it.

I having problems selecting a node from a Tree. I will open another post to treat it.

Thanks.

[mats]

I think elements you click must be visible, in your test you can try calling scrollIntoView on your element prior to clicking it if you know it'll be outside the visible area.

https://developer.mozilla.org/en/DOM/el ... llIntoView

[nickolay]

I dont have CI yet. The plans is to have it in the next 60 days and Jenkins was the chosen. It would be a pleasure to help with documentations using it.

Cool! We support outputting the report in the JUnit format, see https://bryntum.com/products/siesta/docs ... automation
Would be great to hear about your experience with Jenkins integration - let us know how it goes!

[marogalli]

It has scrolled, but I need to add a call back before t.click().

Tks

[marogalli]

t.waitForSelector('#cb11_13',function() {
				 var cb1 = Ext.select("#cb11_13");
				 cb1.elements[0].scrollIntoView();
				 t.waitFor(
				 	function() {
				 		return cb1.elements[0].scrollIntoView()==undefined
				 	},
				 	function() {
				 		 t.click(cb1.elements[0],function() {
		                		t.waitFor(
								function() {
									return $("#conteudo_escolhida").find(".row_data").size()!=0;
								},
			   					function() {
									var partsChosen = $("#conteudo_escolhida").find(".row_data").size();
									t.is(partsChosen,1,'1 part was checked and exists in #chosen_content');
								}
							);
		 				});
				 	}
				 );

I see the scrollIntoView and the click on the right place, but nothing happens. If I close the DOM Toogle it kepps working. Something I missed?