Results 1 to 8 of 8

Thread: .expect('innerText').toBe(); has issues with updated values?

  1. #1

    Default Answered: .expect('innerText').toBe(); has issues with updated values?

    I am testing the update functionality of a grid we have on our website.

    Via a seperate edit panel changes can be made in order to alter the grid's entries.

    After I save made changes, the grid should update (does not yet, have to manually update) and then visibly displays the new value.

    But if I want to check the cell's value using cell().expect('innerText').toBe('newValue');
    the test fails stating that it 'Expected 'oldValue' to be 'newValue'.'

    Code:
        
        it('Make changes > Save them > Grid updated?', function(){
            stpo.carrierContact.contactEmail().setValue('').type('newValue');
            stpo.carrierContact.saveButton().click();
            
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .expect('innerText').toBe('newValue'); // Fails as desired because grid does not automatically update
        });
        
        it('Manually Update Grid > Changes stored?', function(){
            stpo.carrierContact.refreshButton().click();
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .expect('innerText').toBe('newValue'); // Fails because it expects the old value
        });
    
    This does work though, but is this behaviour intended?
    Code:
        it('Make changes > Save them > Grid updated?', function(){
            stpo.carrierContact.contactEmail().setValue('').type('newValue');
            stpo.carrierContact.saveButton().click();
            
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .getData(function(value){
                    expect(value).toBe('newValue');
             }); // Results in a positive outcome even though the grid is not updated yet
        });
    
        it('Manually Update Grid > Changes stored?', function(){
            stpo.carrierContact.refreshButton().click();
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .getData(function(value){
                     expect(value).toBe('newValue'); // results positive as desired
             });
        });

  2. When the refresh button is clicked, does that load data from the backend again? If so, I'm wondering whether that slight delay in loading data is causing an issue - the row and cell API calls will execute after the refresh button is clicked, and may be referencing old/stale instances of the data if the grid is updated after a server-side request for updates.

    One way to test that theory is to add a manual "wait" after the refresh button is clicked:

    Code:
    stpo.carrierContact.refreshButton().click().wait(4000);

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    I would suggest using the Sencha Test "text" API for verifying the text content of cells:

    Code:
    ST.grid('mygrid')
        .rowAt(1)
        .cellAt(1)
        .text('Your text');
    If the text in the cell doesn't match the value defined within the "text()" API, this will cause the test to fail with an appropriate error.

    Regular expressions are also supported, through the use of the "textLike" API.
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  4. #3

    Default

    Problem is with the .text() API is that grid cells, which abbreviate its content using '...' because it's to long, won't be asserted properly by this method.

  5. #4

    Default

    But actually the main problem is, that after refreshing the grid I can see that the cell's value is updated to 'newValue' but the .text('newValue') fails and text('oldValue') completes.

    Code:
        it('Make changes > Save them > Grid updated?', function(){
            stpo.carrierContact.contactEmail().setValue('').type('newValue');
            stpo.carrierContact.saveButton().click();
            
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .text('newValue'); // Fails as desired: Timeout waiting for text to be matching newValue for ST.future.Cell 
        });
        
        it('Manually Update Grid > Changes stored?', function(){
            stpo.carrierContact.refreshButton().click();
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                text('newValue'); // Fails but shouldn't: Timeout waiting for text to be matching newValue for ST.future.Cell 
        });
    Expecting oldValue after refresh:

    Code:
        it('Make changes > Save them > Grid updated?', function(){
            stpo.carrierContact.contactEmail().setValue('').type('newValue');
            stpo.carrierContact.saveButton().click();
            
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .text('newValue'); // Fails as desired: Timeout waiting for text to be matching newValue for ST.future.Cell 
        });
        
        it('Manually Update Grid > Changes stored?', function(){
            stpo.carrierContact.refreshButton().click();
            stpo.carrierContact.grid()
                .rowWith('contact_name', 'ST_CN_01')
                .cellWith('dataIndex', 'contact_email')
                .text('oldValue'); // Completes but shouldn't
        });
    Same goes for .expect.('innerText').toBe('newValue') which fails after a refresh even though it shouldn't.

    Using .getData(value => expect(value).toBe('newValue')); causes both tests to complete even though the first shouldn't
    Using .getData(value => expect(value).toBe('oldValue')); causes both tests to complete even though the second shouldn't

  6. #5
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    When the refresh button is clicked, does that load data from the backend again? If so, I'm wondering whether that slight delay in loading data is causing an issue - the row and cell API calls will execute after the refresh button is clicked, and may be referencing old/stale instances of the data if the grid is updated after a server-side request for updates.

    One way to test that theory is to add a manual "wait" after the refresh button is clicked:

    Code:
    stpo.carrierContact.refreshButton().click().wait(4000);
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  7. #6

    Default

    Yes that is exactly whats happening. I was just dreading to use the wait-statements because they will heavily increase the runtime of these tests in the long term, right?
    Apart from that, the earlier descirbed abbreviation issue is not solved yet, but for these tests I can probably shorten the previously set cell value enough to see the whole string.

    Also if the connection to the database should take longer than expected the test will fail right?
    Is there a way to display what caused the tets to fail in this case? like manually throwing an error when the update takes too long?

  8. #7

    Default

    Another thing:
    Checking if a cells value does not equal a specified string can be achieved via the textNotLike-API but if the test then fails the error output is difficult to read as ST is unable to display the regex properly (Timeout waiting for text to be like [object Object] for ST.future.Cell). Is there a way to achieve the same error output as from the text()-Method (Timeout waiting for text to be matching 'paramOfText()-Method' for ST.future.Cell) for a negative assertions?

  9. #8

    Default

    Quote Originally Posted by freightgateone View Post
    Another thing:
    Checking if a cells value does not equal a specified string can be achieved via the textNotLike-API but if the test then fails the error output is difficult to read as ST is unable to display the regex properly (Timeout waiting for text to be like [object Object] for ST.future.Cell). Is there a way to achieve the same error output as from the text()-Method (Timeout waiting for text to be matching 'paramOfText()-Method' for ST.future.Cell) for a negative assertions?
    I'll answer that myself:

    the .expect('innerText').toBe('string'); behaves the same as the text()-Method, even checks for the actual (not only displayed) value.
    Its toBe() can be preponed with .not. making it .expect('innerText').not.toBe('string');

Tags for this Thread

Posting Permissions

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