Блог

Главная - Вопросы по программированию - Добавьте данные-cy в элемент в ExtJS

Добавьте данные-cy в элемент в ExtJS

#unit-testing #extjs #frontend #cypress #uniqueidentifier

Вопрос:

Я ищу, чтобы добавить код данных в мои элементы в моей EXTJ, но, похоже, ничего не работает. Фрагмент, в который я хочу его добавить, следующий:

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

Весь код работает, тогда проблема в том, что он не может его распознать. Я уже пробовал эти коды, но любой из них работает:

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

Я заменяю шаг с данными и вводную часть данными, но ничего.
Проблема в том, что он не возвращает никаких ошибок, но data-cy (я пробовал также использовать атрибут данных и ввод данных) не помещается в DOM, когда я открываю локальный хост.

Ответ №1:

Обновление: Я решил проблему, используя просто

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

Без указания тега.

Ответ №2:

К сожалению, вы не сообщаете нам, какую версию вы используете. Из примера я беру, что это «КЛАССИЧЕСКИЙ» фреймворк, и я предполагаю, что это последняя версия.

Это работает в моей скрипке:

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

Если вы не добавите тег, он будет использоваться автоматически div , так что ваш ответ тоже будет работать. Но для удовольствия обменяйтесь div blockquote , и вы увидите, как это работает более подробно.

В «СОВРЕМЕННОМ» вы можете использовать:

 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
    }],
    
});

Ответ №3:

Есть лучший способ сделать это. Вы также можете расширить это с помощью любого другого значения.

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

а затем переопределить 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 amp;amp; el.dom amp;amp; !Ext.isEmpty(testId) amp;amp; 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
Метки: