Get help with testing, discuss unit testing strategies etc.


Post by Yunzhou »

Hi All,

I'm writing a test for some basic grid and form (both done in Sencha Architect). I've encountered the following error:
Test suite threw an exception: Uncaught TypeError: Object [object Object] has no method 'isFixedHeight' https://localhost:8080/sampleTest/ux/Row ... 2365800041 212

Project code - view - I'm only doing the UI testing
/*
 * File: app/view/MyViewport.js
 *
 * This file was generated by Sencha Architect version 2.1.0.
 * https://www.sencha.com/products/architect/
 *
 * This file requires use of the Ext JS 4.1.x library, under independent license.
 * License of Sencha Architect does not include license for Ext JS 4.1.x. For more
 * details see https://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    width: 700,
                    collapsible: true,
                    hideCollapseTool: false,
                    manageHeight: false,
                    title: 'My Grid Panel',
                    columnLines: true,
                    forceFit: true,
                    hideHeaders: true,
                    scroll: 'vertical',
                    store: 'MyJsonStore',
                    viewConfig: {

                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'company',
                            text: 'Company'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'price',
                            text: 'Price'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'change',
                            text: 'Change'
                        },
                        {
                            xtype: 'templatecolumn',
                            tpl: [
                                '<p><b>Company: </b>{company}</p>',
                                '<p><b>Price: </b>{price}</p>',
                                '    '
                            ],
                            align: 'right',
                            text: 'Group'
                        }
                    ],
					plugins: [{
						ptype: 'rowexpander',
						rowBodyTpl : [
                                '<p><b>Company: </b>{company}</p>',
                                '<p><b>Price: </b>{price}</p>',
                                '<p><b>Change: </b>{change}</p>'
						]
					}]
                },
                {
                    xtype: 'form',
                    height: 200,
                    width: 700,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    bodyPadding: 10,
                    title: 'My Form',
                    items: [
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            maxWidth: 300,
                            fieldLabel: 'First Name'
                        },
                        {
                            xtype: 'textfield',
                            anchor: '100%',
                            maxWidth: 300,
                            fieldLabel: 'Last Name'
                        },
                        {
                            xtype: 'datefield',
                            anchor: '100%',
                            maxWidth: 250,
                            fieldLabel: 'Date of Birth'
                        },
                        {
                            xtype: 'container',
                            margins: '10 0 10 0',
                            height: 25,
                            layout: {
                                type: 'column'
                            },
                            items: [
                                {
                                    xtype: 'container',
                                    columnWidth: 0.5,
                                    height: 25,
                                    items: [
                                        {
                                            xtype: 'button',
                                            width: 70,
                                            text: 'Submit'
                                        }
                                    ]
                                },
                                {
                                    xtype: 'container',
                                    columnWidth: 0.5,
                                    height: 25,
                                    layout: {
                                        align: 'stretch',
                                        type: 'hbox'
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});
My test code:
StartTest(function(t) {

	Ext.onReady(function() {
		Application = Ext.create('Ext.app.Application', {
			name: 'MyApp',
			launch: function() {}
		});
		
	});
	
	
	t.diag('this tests if the UI clickings are working and update date to today');
		t.chain(
			{
				action: 'doubleClick', target: [100,50]
			},
			{
				action: 'type', target: '#textfield-1018-inputEl', text: 'Steve'
			},
			{
				action: 'type', target: '#textfield-1019-inputEl', text: 'Jobs'
			},
			{
				action: 'type', target: '#datefield-1020-inputEl', text: '11/08/2012[ENTER]'
			},
			{
				action: 'click', target: '.x-btn'
			}
			); 
		var today = new Date();
		var year = today.getFullYear();
		var month = today.getMonth();
		var date = today.getDate();
		var todayDate = new Date(year,month,date);
		t.isDateEqual(todayDate, new Date(2012, 10, 8), 'Date was updated correctly');

})    
I think I need to write something about Ext.us.RowExpander in the test code to solve the problem, but have no idea how to do it.

I appreciate any help. Thanks a lot!

Post by nickolay »

Does this exception appear in your app too?

Try enabling "Transparent exception" in the options menu and see in the debugger what causes the error?

Post by Yunzhou »

Hi Nickolay,

Thanks for the swift reply.

Yes, I noticed the exception appears in my app too, I can see it in my console, though it doesn't affect the app from running.

I've turned on "Transparent exception" and now the tests are passing.

Thanks a lot for your help!

Post by nickolay »

This means your users will see this exception too - I'd actually debug it. Btw, you are using auto-generated ids of DOM elements - that's not robust - they may change easily. Trying using at least the css selectors, or even better - component queries. See this for details: https://bryntum.com/products/siesta/docs ... tionTarget

Post by Yunzhou »

Hi Nickolay,

Thanks for pointing that out. I'll debug it.

Component queries look great! I'm still struggling a bit from time to time but I'm liking it!

Post Reply