¿Cómo probar si un elemento tiene clase usando Transportador?

Estoy probando Protractor para probar la aplicación Angular e2e y no he descubierto cómo detectar si un elemento tiene una clase específica o no.

En mi caso, la prueba hace clic en el botón enviar y ahora quiero saber si el formulario [name = "getoffer"] tiene clase .ngDirty. ¿Cuáles pueden ser las soluciones?

describe('Contact form', function() {
    beforeEach(function(){
        browser.get('http://localhost:9000');
        element(by.linkText('Contact me')).click();
    });

    it('should fail form validation, all fields pristine', function() {
        element(by.css('.form[name="getoffer"] input[type="submit"]')).click();
        expect(element(by.name('getoffer'))).toHaveClass('ngDirty'); // <-- This line
    });
});

Un problema que debe tener en cuenta al usar toMatch(), como en la respuesta aceptada, son coincidencias parciales. Por ejemplo, digamos que tiene un elemento que podría tener las clases correcty incorrect, y desea probar que tiene la clase correct. Si lo usara expect(element.getAttribute('class')).toMatch('correct'), devolverá verdadero incluso si el elemento tiene laincorrect clase.

Mi sugerencia:

Si solo desea aceptar coincidencias exactas, puede crear un método auxiliar para ello:

var hasClass = function (element, cls) {
    return element.getAttribute('class').then(function (classes) {
        return classes.split(' ').indexOf(cls) !== -1;
    });
};

Puedes usarlo así (aprovechando que expectresuelve automáticamente las promesas en Transportador):

expect(hasClass(element(by.name('getoffer')), 'ngDirty')).toBe(true);

Si está usando Transportador con Jasmine, podría usar toMatchpara hacer coincidir como una expresión regular ...

expect(element(by.name('getoffer')).getAttribute('class')).toMatch('ngDirty');

Además, tenga en cuenta que toContaincoincidirá con los elementos de la lista, si lo necesita.

El más simple es:

expect(element.getAttribute('class')).toContain("active");

Según la respuesta de Sergey K, también puede agregar un comparador personalizado para hacer esto:

(coffeescript)

  beforeEach(()->
    this.addMatchers({
      toHaveClass: (expected)->
        @message = ()->
          "Expected #{@actual.locator_.value} to have class '#{expected}'"

        @actual.getAttribute('class').then((classes)->
          classes.split(' ').indexOf(expected) isnt -1
        )
    })
  )

Entonces puedes usarlo en pruebas como esta:

expect($('div#ugly')).toHaveClass('beautiful')

Y obtendrá el siguiente error si no es así:

 Message:
   Expected div#ugly to have class beautiful
 Stacktrace:
   Error: Expected div#ugly to have class 'beautiful'

Has probado...

var el = element(by.name('getoffer'));
expect(e.getAttribute('class')).toBe('ngDirty')

o una variación de lo anterior ...

Hice este emparejador, tuve que envolverlo en una promesa y usar 2 devoluciones

this.addMatchers({
    toHaveClass: function(a) {
        return this.actual.getAttribute('class').then(function(cls){
            var patt = new RegExp('(^|\\s)' + a + '(\\s|$)');
            return patt.test(cls);
        });
    }
});

en mi prueba ahora puedo hacer cosas como esta:

   var myDivs = element.all(by.css('div.myClass'));
   expect(myDivs.count()).toBe(3);

   // test for class
   expect(myDivs.get(0)).not.toHaveClass('active');

esto también funciona cuando un elemento tiene varias clases o cuando un elemento no tiene ningún atributo de clase.

Aquí, un toHaveClasscomparador personalizado Jasmine 1.3.x con .notsoporte de negación más espera hasta 5 segundos (o lo que especifique).

Encuentre el emparejador personalizado completo que se agregará en su bloque onPrepare en esta esencia

Uso de muestra:

it('test the class finder custom matcher', function() {
    // These guys should pass OK given your user input
    // element starts with an ng-invalid class:
    expect($('#user_name')).toHaveClass('ng-invalid');
    expect($('#user_name')).not.toHaveClass('ZZZ');
    expect($('#user_name')).toNotHaveClass('ZZZ');
    expect($('#user_name')).not.toNotHaveClass('ng-invalid');
    // These guys should each fail:
    expect($('#user_name')).toHaveClass('ZZZ');
    expect($('#user_name')).not.toHaveClass('ng-invalid');
    expect($('#user_name')).toNotHaveClass('ng-invalid');
    expect($('#user_name')).not.toNotHaveClass('ZZZ');
});

function checkHasClass (selector, class_name) {
    // custom function returns true/false depending if selector has class name

    // split classes for selector into a list
    return $(selector).getAttribute('class').then(function(classes){
        var classes = classes.split(' ');
        if (classes.indexOf(class_name) > -1) return true;
        return false;
    });
}

Así es como lo hago al menos, sin la necesidad de usar la función de espera. Esta función simplemente devuelve verdadero si la clase está dentro del elemento y falso si no. Esto también usa promesas, por lo que lo usaría como:

checkHasClass('#your-element', 'your-class').then(function(class_found){
    if (class_found) console.log("Your element has that class");
});

Editar: me acabo de dar cuenta de que esto es esencialmente lo mismo que la respuesta principal

Una forma de lograr esto sería usar xpath y usar contains()

Ejemplo:

var expectElementToHaveClass = function (className) {
    var path = by.xpath("//div[contains(@class,'"+ className +"')]");
    expect(element.all(path).count()).to.eventually.be.eq(1);
};

Puede usar el analizador CSS para manejar esto verificando si existe un elemento con la clase dada:

expect(element(by.css('.form[name="getoffer"].ngDirty')).isPresent()).toBe(true);