Actualmente estoy practicando pruebas con ciprés en código simple. La mayoría de las pruebas funcionan dentro de Cypress, excepto el clic del botón que elimina la clase que desactiva el enlace. Parece que los cambios en el css no se aplican durante la prueba. Aparentemente, debería usar un cargador para que cypress pueda leer el css, pero mis intentos hasta ahora no han funcionado. Entonces mi pregunta es, si alguien podría recomendar un cargador u otra forma, para que las pruebas funcionen.
Mi código:
class Headline {
constructor(rootElement) {
this.rootElement = rootElement;
this.headline = this.rootElement.querySelectorAll('.headline');
this.toggler = this.rootElement.querySelectorAll('.button');
this.init();
}
init(){
this.toggler[0].addEventListener("click", () => {
let newHeadline = document.getElementById('text').value;
console.log(this.link)
if(newHeadline.length === 0){
alert("fehlender Input")
}else{
this.headline[0].innerHTML = newHeadline;
console.log(document.getElementById('login').classList.remove('disabled'));
}
});
}
}
document.querySelectorAll('.test').forEach((head) => {
const input = new Headline(head);
});
.disabled {
pointer-events: none;
cursor: default;
text-decoration: none;
color: lightgrey;
}
<div class="test">
<h1 class="headline">Hallo</h1>
<label for="text">New Headline:</label>
<input type="text" id="text" name ="text" class="input_text" placeholder="newHeadline">
<button class="button">Submit</button>
</div>
<a href="/page/login.html" id="login" class="disabled">Login</a>
y aquí está mi prueba de ciprés
it('submit new headline', () => {
cy.visit('http://localhost:8080/')
cy.get('input[name="text"]').type('hahahahhahhhhhhhhhhhhhhhh');
cy.get('.button').click();
cy.get('#login').click();})
Su prueba debería funcionar como está si el css se carga como parte de la página. No estoy seguro de dónde reside, por lo que es difícil hacer sugerencias al respecto, pero si solo está practicando pruebas, podría incluirlo en el html de esta manera:
<style>
.disabled {
pointer-events: none;
cursor: default;
text-decoration: none;
color: lightgrey;
}
</style>
además, también podría probar si la clase se está agregando
describe("empty spec", () => {
it("submit new headline", () => {
cy.visit("http://localhost:8080/");
cy.get('input[name="text"]').type("hahahahhahhhhhhhhhhhhhhhh");
cy.get("#login").should("have.class", "disabled"); // is disabled?
cy.get(".button").click();
cy.get("#login").should("not.have.class", "disabled"); // is enabled?
cy.get("#login").click();
});
});
pero, obviamente, eso es verificar si la clase se agrega, no si el enlace está realmente deshabilitado