Add data-cy to element in extJs

user_14131095 0
Viewed 228

I'm searching to add a data-cy to my elements in my ExtJs, but seems that nothing works. The piece where I want to add it is the following one:

                items: [{
                        xtype: 'values',
                        name: 'value_x',
                        hideTrigger: true,
                    }

The whole code works, then the problem is that it cannot recognise it. I've already tried these codes, but any of them works:

    listeners: {
        afterrender: function(cmp) {
            cmp.getEl().set({
                "data-intro": 'some text',
                "data-step": 1
            });
        }
    }

    autoEl: {
        tag: 'div',
        'data-step': '1'
    }

I substitute data-step and data-intro with my data-cy, but nothing. The problem is that it doesn't return any error, but the data-cy (I've tried also with data-attribute and data-intro) is not put into the DOM when I open the localhost.

cypress frontend uniqueidentifier extjs unit-testing
3 Answers

Update: I solved the problem using simply

autoEl: {
        'data-cy': ’1'
    }

Without specifying the tag.

user_141310950

Unfortunately you are not telling us which Version you are using. From the example I take it that it is the 'CLASSIC' framework and I guess the latest version.

This works in my fiddle:

Ext.define('Fiddle.Container', {
    extend: 'Ext.Container',
    xtype: 'custom',
    
    autoEl: {
        tag: 'div',
        'data-step': '1',
        'data-cy': 2
    }
});

If you do not add the tag, it will automatically use div, so that your answer works too. But for fun exchange div for blockquote and you will see how it works in more detail.

In 'MODERN' you can use:

Ext.define('Fiddle.Custom', {
    extend: 'Ext.Component',
    xtype: 'custom',
    
    template: [{
        reference: 'bodyElement',
        tag: 'blockqoute',
        cls: Ext.baseCSSPrefix + 'body-el',
        uiCls: 'body-el',
        'data-cy': 1
    }],
    
});
user_9169370

There is a better way of doing this. You could also extend this with any other value.

{
     xtype: 'button',
     text: 'Login',
     handler: 'doLogin',
     testId: 'loginBtn',
}

and then override the Ext.Component.js

Ext.define('Portal.overrides.Component', {
    override: 'Ext.Component',

    /**
     * convert testId into data-cy
     */
    onRender() {
        this.callParent(arguments);
        const { el } = this;
        const testId = this.testId || this.itemId || '';
        if (el && el.dom && !Ext.isEmpty(testId) && Ext.isEmpty(this.inputAttrTpl)) {
            const attId = this.cyAtt || 'data-cy';
            el.dom.setAttribute(attId, testId);
        }
    },
});
```

Got that code from here: [Github][1]


  [1]: https://github.com/rjben/Coworkee/blob/master/client/overrides/Component.js
user_117330780
Related