Get help with testing, discuss unit testing strategies etc.


Post by divyasharma »

I have to test one view, code is written in extjs 6.
In the view, there're 3 combo boxes, 2nd has dependency on 1st and 3rd combo is dependent on 2nd one. How to test their dependency? I couldn't find any example code with loops or conditions.

Post by nickolay »

I assume by dependency you mean that the store 2nd combo is filtered, once the 1st combo is set with some value. You can then, set the value of the 1st combo and check the store of the 2nd combo, no need to even render the combos (you can trust Ext here).

Post by divyasharma »

Yes but I need to test a condition where if I select a blank option in 1st combobox and the other two get disabled.
What exactly I need to do is, If - when I select something in 1st combo box then i would be able to select in the next and then next and test will be passed but else- when I select a blank option in 1st combo box, the other two are disabled.
And I need to check if the 2nd combo box is disabled then no testing for this combo and move to the next part of the test, same for the 3rd combo.

Post by nickolay »

Sorry, I can't write your tests for you, but the logic is seems quite straightforward. You can get the instances of the combos using component query and then call methods. Its all plain JavaScript, no magic. As I mentioned probably you don't need to make actual selection in the UI, just: "combo.setValue()" should be enough.

Post by divyasharma »

I've written this function inside the t.chain, now the problem is when x is true its not going inside the true block but when its false the false block is running and passing the test and I don't understand why it is happening. code :
function (next) {
var planningChannel = t.global.Ext.ComponentQuery.query("bcKeyValueCombo[name=planningChannel]")[0],
carModel = t.global.Ext.ComponentQuery.query("bcKeyValueCombo[name=carModel]")[0];

if(planningChannel.disabled && carModel.disabled){
return x = true;
}
next();
},

x ? [
{ action: 'click', target: 'bcCheckBox[name=isActive] => .x-form-cb-input' },
]:[
{ action: 'click', target: 'bcButton[text=Abbrechen] => .x-btn-inner-default-small' }
]

Post by nickolay »

Using
code tags 
for you code will make it more readable (and more likely to be reviewed properly).

If you need to execute different actions depending from some condition, there are 2 cases:
1) condition is known upfront, when the "t.chain()" call is evaluated. In this case you can just construct the steps based on that condition:
var someCondition = a == b

t.chain(
	{ click : 'somewhere' },
	
	someCondition ? { click : 'place1' } : { click : 'place2' }

	{ click : 'somewhereelse' }
)
2) condition is calculated dynamically, inside of one of the steps. In this case you'll need to use nested "t.chain()" calls:
t.chain(
	{ click : 'somewhere' },

	function (next) {
		var someCondition = a == b

		if (someCondition)
			t.chain(
				{ click : 'somewhere' },
				next
			)
		else
			t.chain(
				{ click : 'somewhereElse' },
				next
			)
	},

	{ click : 'somewhere' },
)
Note, how in both nested chains we've specified the "next" callback from the outer step, as the last step of the nested chain. This will make sure, the main chain will continue execution once the nested chain completes.

Post by divyasharma »

I've tried nested t.chain too and still it is the same, for x- false working but for x= true it's not.

Post by nickolay »

Please try again, using the code I posted as a reference.

Post by divyasharma »

Yea, my mistake, I tried doing this:
function (next) {
			var planningChannel = t.global.Ext.ComponentQuery.query("bcKeyValueCombo[name=planningChannel]")[0],
				carModel = t.global.Ext.ComponentQuery.query("bcKeyValueCombo[name=carModel]")[0];

				if(planningChannel.disabled && carModel.disabled){
					return x = true;
				}
				next();
		},

		function (next) {
		if(x){
			t.chain(
				{ action: 'click', target: 'bcCheckBox[name=isActive] => .x-form-cb-input' }
			)
		}
		else{
			t.chain(
				{ action: 'click', target: 'bcButton[text=Abbrechen] => .x-btn-inner-default-small' }
			)
		}
		}
Last edited by divyasharma on Thu Jun 29, 2017 1:02 pm, edited 1 time in total.

Post by nickolay »

Please use the
 tags, when posting code.

Post Reply