Get help with testing, discuss unit testing strategies etc.


Post by marogalli »

Hi,

I have the following test that was working yesterday.
	t.waitForSelector('#status_aberta',function() {
		Ext.Msg.hide();
		var closeBtn = $('#closeBtn');
		//console.log(Ext.ComponentQuery.query('window')[0].title);
		t.click(closeBtn, function() {
				t.diag('Expire quotation - Click closeBtn with no chosen parts.')			
				t.waitFor(
					function() {
						return Ext.ComponentQuery.query('window')[0].title=='Nenhuma peça escolhida';
					},
					function() {		
						var msgExpireQuotation = Ext.ComponentQuery.query('window');
						t.is(msgExpireQuotation[0].title,'Nenhuma peça escolhida','Expired message confirmation box shown.');
						t.moveMouseTo(msgExpireQuotation[0],function(){
							t.moveMouseBy([-40,40],function() {
									t.click(function(){
										var openedTreeNodesSize = $('#openedAccordion').find('.x-grid-cell').length;
										t.is(openedTreeNodesSize,2,'After SIM clicked, expiredNode removed from openedTree');
										var expiredTreeNodesSize = $('#expiredAccordion').find('.x-grid-cell').length;
										t.is(expiredTreeNodesSize,3,'After SIM clicked, expiredNode inserted at expiredTree');
										var openedTreeNodes = $('#openedAccordion').find('.x-grid-cell');
										t.click(openedTreeNodes[0],function() {	 
											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() {
										   						t.diag('Close quotation - Click closeBtn with at least one chosen part.')			
									   							//var partsChosen = $("#conteudo_escolhida").find(".row_data").size();
																//t.is(partsChosen,1,'1 part was checked and exists in #chosen_content');
										   						var closeBtn = $('#closeBtn');
																t.click(closeBtn, function() {
																	t.waitFor(
																		function() {
																			return Ext.ComponentQuery.query('window')[0].title=='Enviar pedido';
																		},
																		function() {		
																			var msgExpireQuotation = Ext.ComponentQuery.query('window');
																			t.is(msgExpireQuotation[0].title,'Enviar pedido','Closed message confirmation box shown.');												
																		}
																	)
																});
															}
														)
												});
											});		
										});
									});
							});
						});
					}
				);
		});
	});
Now I started to work it is not working as expected. What I am trying to test is.
  • 1. Click in an button inside the data view.
    2. Test if an Message box apeared with a specific title.
    3. Click the YES button of MsgBox
    4. Test if a node was removed from one tree and inserted in another tree.


I do not understand whats going on. I did not change any line, it is the same as yerterday and stop working.

I am having some issues using Chrome, sometimes it seems it do not load the file again, as if it is using caching, but caching is disable. I got the same problem in private mode (caching is always disabled).

Tks

Post by marogalli »

Am I allowed to send videos?

That really strange! The output is different each time I click in the test, even if I did not change anything.

In the video I can show exactly what going on. The behaviour changes during the tests.

Tks

Post by jakub »

You can add the video as an attachment to post.
JavaScript/Angular/ExtJS consulting - kuba@virtualdesign.pl

Post by nickolay »

That probably means that somewhere in your code there's a delay. And other parts of the code relies on fact that delayed action has been executed (so-called race condition).

Post by nickolay »

Btw, try to use `t.chain` to reduce the indentation level in your test.

Post by marogalli »

The newer tests I am using t.chain() but the older not.
I intend to change them soon in the near future to remove indentation. Tks !

I uploaded the video. The delay which I use in the code is t.waitFor, maybe this is the problem.

console.log(Ext.ComponentQuery.query('window')[0].title);

When I log this above, is show the Title of my Ext.Message box. I use this in wait for, so it must work, in my opinion.

The test is simple. The Button is clicked, then move the cursor until the middle of MessageBox and them go to button "yes". Sometimes the MessageBox disappear before the YES (SIM in portuguese) is clicked, that why the test fails. What I cant understand is, why it has different behaviors (considering that t.waitFor is working - I thin it is because I did some test in it) even with the same code?

The video was too big, I uploaded in Vimeo. ( https://vimeo.com/39276599 ) . Due it is not HD it is hard to read what I've written So here is the sentence fro the video, ir order :

1.As I opened I ticket ( https://forum.bryntum.com/viewtopic.php?f=20&t=1792 ) , when I check an checkbox inside DataView using DOM visible it it not checked. If I close the DOM visible it works.
2.Just loaded the first test. I did not change the source file.
3.Now the tests from the middle(those in Red), is not passing, but the final test(checkbox) is passing.
4.Keeps results was enabled, but seems that the DOM was not keeped.
5. now, everything is working again.
6. Only the first test is executed.
7. Open the DOM and try again.
8. Using DOM opened, it it working, vbut not the final test.
9. Close the DOM and try again, evething is working.

Thank you all so much!




Tks

Post by nickolay »

Try to add this CSS styles to your harness page (not your application!):
iframe {
    width : 1280px !important;
    height : 1024px !important;
}
This should keep the iframes with the application always at the same size. Please let me know if it helps.

Post by marogalli »

Yes Nickolay! It helps ! :D

Now every time I run get the same results, all tests are passing! Sometimes it just run the first test, as I shown in video, but If I run again everything works.

The only problem is that if I use with DOM Opened the screen goes to a mess, but I think it is not a problem, because I intend to use Siesta with CI soon.

If I want to use with DOM Visible that works also, but to go back to my tests screen I need to make the screen smaller to see the close DOM Visible button. If I make the test page smaller from the beginning everything works fine.

The problem reported with checkbox inside the DataView is gone also with it. I will update this solution to ( https://forum.bryntum.com/viewtopic.php?f=20&t=1792 ).

Thank you!

Post by nickolay »

Glad it works! We'll try to figure out a better solution in 1.0.8 - configuration option for minimal iframe size I think.

DOM Visible can also be controlled the Options button (the one with the menu) and from the toolbar of the assertion grid (Toggle DOM visible).

Post Reply