Using and checking classes in Sencha Test on Components and Elements

Classes.js

// Scenario URL: http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?classic#form-contact
describe('Check component and element classes', function() {
    it('should check the class applied to a component configuration', function() {
        // These examples reference an Ext JS component and check its configured classes
        
        // Example 1
        ST.button('form-contact button[text="Contact Us"]')
            .get('cls')
            .and(function(future) {
                expect(future.data.cls).toContain('contactBtn');
            });
        
        // Example 2
        ST.button('form-contact button[text="Contact Us"]')
            .expect('cls').toContain('contactBtn');
            
        // Example 3
        ST.button('form-contact button[text="Contact Us"]')
            .hasCls('contactBtn');
    });
    
    it('should check the CSS class applied to a rendered element within a component', function() {
        // These examples check the CSS classes on the rendered HTML elements
        
        // Example 1
        ST.element('form-contact button[text="Contact Us"] => span')
            .hasCls('x-btn-wrap-default-large');
        
        // Example 2
        ST.element('form-contact button[text="Contact Us"] => span')
            .expect('className').toContain('x-btn-wrap-default-large');
    });
    
    it('should use a CSS class in the element selector', function() {
        // This example shows the use of a CSS class being used in a composite locator,
        // to select a DOM element within a button that has the cls "x-btn-wrap-default-large"
        
        ST.element('form-contact button[text="Contact Us"] => .x-btn-wrap-default-large')
            .visible();
    });
});