angularjs - change - ng-model

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

Question

Estoy probando Protractor para probar e2e la aplicación angular 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 de enviar y ahora quiero saber si la forma [name = "getoffer"] tiene la 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
    });
});

Answer 1

El más simple es:

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

Answer 2

En función de la respuesta de Sergey K, también podría agregar un marcador 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:

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

Answer 3

Has probado...

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

o una variación de los anteriores ...

Answer 4

Hice esta combinación, tuve que envolverla 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 algo así:

   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 múltiples clases o cuando un elemento no tiene ningún atributo de clase.

Answer 5

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

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

Answer 6

Puedes usar toMatch si tienes cuidado. Tenga en cuenta el / b en la expresión regular. Eso asegura que haya un límite en cualquiera de los extremos de tu nombre de clase.

expect(element(by.name(''getoffer'')).getAttribute(''class'')).toMatch(//bngDirty/b/);

Answer 7

Si está utilizando un transportador con jazmín, puede usar toMatch para que coincida con una expresión regular ...

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

Además, tenga en cuenta que toContain coincidirá con los elementos de la lista, si es necesario.

Answer 8

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

Ejemplo:

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

Answer 9

Uno tiene que tener en cuenta al usar toMatch() , como en la respuesta aceptada, son coincidencias parciales. Por ejemplo, supongamos que tiene un elemento que podría tener las clases correct e incorrect , y desea probar que tiene la clase correct . Si expect(element.getAttribute(''class'')).toMatch(''correct'') que usar expect(element.getAttribute(''class'')).toMatch(''correct'') , eso devolverá verdadero incluso si el elemento tiene la clase incorrect .

Mi sugerencia:

Si solo quiere aceptar coincidencias exactas, puede crear un método de ayuda para ello:

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

Puede usarlo así (aprovechando el hecho de que expect que se resuelvan automáticamente las promesas en el transportador):

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

Answer 10

Here un Jasmine 1.3.x personalizado toHaveClass matcher con negación .not compatible, además de esperar hasta 5 segundos (o lo que especifique).

Here

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'');
});

Answer 11

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 utilizar la función de esperar. Esta función simplemente devuelve verdadero si la clase está dentro del elemento y falso si no. Esto también usa promesas para que lo use 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 superior