Cypress test - including css change-CodePudding

I'm currently practicing tests with cypress on simple code. The most tests work within cypress except the button click which removes the class which disables the link. It seems like, that the changes to the css are not applied when testing. Apparently I should use a loader so that cypress can read the css, but my attempts so far have not worked. So my question is, if someone could recommend a loader or another way, so that the tests work.

My code:

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 >
  <h1 >Hallo</h1>
  <label for="text">New Headline:</label>
  <input type="text" id="text" name ="text"  placeholder="newHeadline">
  <button >Submit</button>
</div>

<a href="/page/login.html" id="login" >Login</a>

and here is my cypress test

it('submit new headline', () => {
cy.visit('http://localhost:8080/')


cy.get('input[name="text"]').type('hahahahhahhhhhhhhhhhhhhhh');
cy.get('.button').click();

cy.get('#login').click();})

CodePudding user response：

Your test should work as is if the css is loaded as part of the page. I'm not sure where it resides, so it's hard to make suggestion on that, but if you are just practicing testing, you could just include it in the html like this:

<style>
  .disabled {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: lightgrey;
  }
</style>

in addition, you could also test if the class is being added

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

but, obviously, that's checking whether the class is added, not whether the link is actually disabled