Results 1 to 6 of 6

Thread: Read flash messages and tool tip

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2014
    Posts
    10
    Vote Rating
    0
      0  

    Default Read flash messages and tool tip

    Could you please help how to read tool tip of a component and how to read flash messages like saved successfully or updated successfully

  2. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    164
    Answers
    17
    Vote Rating
    23
      0  

    Default

    For the "flash messages" are you referring to the Ext JS Toast messages that show and auto-hide after a few seconds? If so, you can do something like this after saving/updating a record, to check for the presence of a toast message, and validate its text content:

    Code:
    // http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#toast-view
    describe('Toast messages', function() {
        it('should show a toast message when button is clicked', function() {
            ST.button('[text="Simple Toast"]')
                .click();
                
            ST.component('toast')
                .textLike('Simple Toast');
        });
    });
    And for tooltips:

    Code:
    // http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#anchored-tooltips
    describe('Tooltip check', function() {
        it('should have a valid tooltip message on the button', function() {
            var driver = ST.defaultContext.driver;
            
            ST.button('[reference=basicTip]')
                .get('id')
                .and(function() {
                    // Move to the object, causing the tooltip to display
                    driver.moveToObject('#' + this.future.data.id);
                });
            
            // Get currently visible tooltip and validate its text
            ST.component('tooltip[hidden=false]')
                .textLike('A simple tooltip');
        });
    });
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2014
    Posts
    10
    Vote Rating
    0
      0  

    Default Read flash messages

    Thanks Daniel.
    For flash messages we are using Ext.custom and the code is like

    Code:
    Ext.Custom = function () {
        var msgCt;
     
        function createBox(t, s) {
            return '<div class="msg ' + Ext.baseCSSPrefix + 'border-box"><h3>' + t + '</h3><p>' + s + '</p></div>';
        }
        return {
            Msg: {
                show: function (title, text) {
                    if (!msgCt) {
                        msgCt = Ext.DomHelper.insertFirst(document.body, { id: 'msg-div' }, true);
                    }
                    var m = Ext.DomHelper.append(msgCt, createBox(title, text), true);
                    m.hide();
                    m.slideIn('t').ghost("t", { delay: 3000, remove: true });
                },
     
                init: function () {
                    if (!msgCt) {
                        // It's better to create the msg-div here in order to avoid re-layouts
                        // later that could interfere with the HtmlEditor and reset its iFrame.
                        msgCt = Ext.DomHelper.insertFirst(document.body, { id: 'msg-div' }, true);
                    }
                }
            },
            Time:{
                getTime:function(date){
                    date=new Date(date);
                    var hours = date.getHours();
                    var minutes = date.getMinutes();
                    var ampm = hours >= 12 ? 'PM' : 'AM';
                    hours = hours % 12;
                    hours = hours ? hours : 12; // the hour '0' should be '12'
                    minutes = minutes < 10 ? '0'+minutes : minutes;
                    var strTime = hours + ':' + minutes + ' ' + ampm;
                    return strTime;
     
                }
            }
        };
    }();
    and it is used as
    Code:
      Ext.custom.Msg.show("title","message text").
    Also how can we read validation message. In example , i have numeric field and have a validation (active errors property) of minimum value should be 1.When I type 0 and hover over the mouse, it displays the validation message.I need to read that message.

    Thanks
    Cenoy

    Quote Originally Posted by daniel.gallo View Post
    For the "flash messages" are you referring to the Ext JS Toast messages that show and auto-hide after a few seconds? If so, you can do something like this after saving/updating a record, to check for the presence of a toast message, and validate its text content:

    Code:
    // http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#toast-view
    describe('Toast messages', function() {
        it('should show a toast message when button is clicked', function() {
            ST.button('[text="Simple Toast"]')
                .click();
                
            ST.component('toast')
                .textLike('Simple Toast');
        });
    });
    And for tooltips:

    Code:
    // http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#anchored-tooltips
    describe('Tooltip check', function() {
        it('should have a valid tooltip message on the button', function() {
            var driver = ST.defaultContext.driver;
            
            ST.button('[reference=basicTip]')
                .get('id')
                .and(function() {
                    // Move to the object, causing the tooltip to display
                    driver.moveToObject('#' + this.future.data.id);
                });
            
            // Get currently visible tooltip and validate its text
            ST.component('tooltip[hidden=false]')
                .textLike('A simple tooltip');
        });
    });

  4. #4
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    164
    Answers
    17
    Vote Rating
    23
      0  

    Default

    To read your custom "flash" message, you could use the CSS class of the element as the locator, e.g.

    Code:
    ST.element('>> div.msg.x-border-box')
        .textLike(/message text/i);
    And for the form field validation - the validation message is in a tooltip, so the example above would work. You would focus on the form field, which would display the tooltip, then reference the tooltip to check the validation messages:

    Code:
    // http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#form-checkout
    describe('Validation tooltip check', function() {
        it('should try and submit an invalid form', function() {
            ST.button('button[text=Complete Purchase]')
                .click();
        });
        
        it('should have a valid tooltip message on the form field', function() {
            var driver = ST.defaultContext.driver;
            
            ST.textField('[name=mailingStreet]')
                .get('id')
                .and(function() {
                    // Move to the object, causing the tooltip to display
                    driver.moveToObject('#' + this.future.data.id);
                });
            
            // Get currently visible tooltip and validate its text
            ST.component('tooltip[hidden=false]')
                .textLike(/This field is required/i);
        });
    });
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2014
    Posts
    10
    Vote Rating
    0
      0  

    Default Read flash messages

    Thanks Daniel,

    for flash message the code works perfectly .But for validation I am getting error like

    "Timeout waiting for target (tooltip[hidden=false]) to be available for ST.future.Component"

    Thanks
    Cenoy

    Quote Originally Posted by daniel.gallo View Post
    To read your custom "flash" message, you could use the CSS class of the element as the locator, e.g.

    Code:
    ST.element('>> div.msg.x-border-box')
        .textLike(/message text/i);
    And for the form field validation - the validation message is in a tooltip, so the example above would work. You would focus on the form field, which would display the tooltip, then reference the tooltip to check the validation messages:

    Code:
    // http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#form-checkout
    describe('Validation tooltip check', function() {
        it('should try and submit an invalid form', function() {
            ST.button('button[text=Complete Purchase]')
                .click();
        });
        
        it('should have a valid tooltip message on the form field', function() {
            var driver = ST.defaultContext.driver;
            
            ST.textField('[name=mailingStreet]')
                .get('id')
                .and(function() {
                    // Move to the object, causing the tooltip to display
                    driver.moveToObject('#' + this.future.data.id);
                });
            
            // Get currently visible tooltip and validate its text
            ST.component('tooltip[hidden=false]')
                .textLike(/This field is required/i);
        });
    });

  6. #6
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    164
    Answers
    17
    Vote Rating
    23
      0  

    Default

    Is the field marked as invalid when Sencha Test is focussing on it? If it's not marked as invalid when Sencha Test focuses on it, there will be no validation tooltip, which is probably why it's failing. Maybe your form needs to have validation carried out on it (maybe by clicking on a save button), then you can focus on the form field and check its tooltip.
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

Similar Threads

  1. Replies: 4
    Last Post: 30 Aug 2012, 7:59 PM
  2. adding tool tip to a tool in the titile bar for grid in extjs
    By madhuchowdary in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 13 Dec 2010, 7:39 PM
  3. Grid paging tool bar tool tips not visible
    By snehaltikekar in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 22 Apr 2008, 5:37 AM
  4. How to add the qtip to show error messages and tool tips
    By marimuthup in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 2 Aug 2007, 9:53 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •