Advice for UI Testing

Hi!

I have my app running well and I'd like to add test (unit and/or e2e).

I have one problem. Everything is about UI. You can see the code to start.

function handleWord(text) {
    const textArr = text.split(" ");
    let wordCount = 0;

    for(word of textArr) {
        if(/[a-zA-Z0-9]/.test(word)) {
            wordCount += 1;
        }
    }

    renderText(wordDOM, wordCount);      

}

function handleChar(text) {
    renderText(charDOM, text.length);

}

function init() {
    document
      .querySelector('textarea')
      .addEventListener("input", event => {
        const text = event.target.value.trim();

        handleChar(text);
        handleWord(text);

    });
}

init();

What solution do you suggest to me to test this code? I would go with mocha but jest is also fine. The only problem is to interact with the DOM.
https://www.cypress.io/, https://testing-library.com/ or another solution you have.

Thank you in advance.

Comments

[John Peters]

Yes cypress is good for Ui testing, it's better than Jasmine because the entire app can be tested. Proper use of input parms, and permutations make it a great choice for unit tests. Jasmine was never a good unit test choice anyway.

[Abel Lifaefi Mbula]

Thank you for sharing your thought. I'd give cypress a try and see if it what it says.

[Pankaj Patel]

Cypress.io will provide the way to interact, mock and test/expect the functionalities in the UI. So it is definitely a solution to go for.

Though, testing-library is gonna provide the helpers to easily test Visual Components in the Unit Tests in addition to Jest. So both are recommended, though you can do unit tests without testing-library and only with Jest.

Test as much as possible in Unit test individually. And then test the whole app in E2E with cypress.

[Ryan Latta]

Heya Abel, let me offer a bit of advice here.

You have 3 methods. I'll give a short bit of advice to get you started.

Pull renderText out of handleWord and handleText. Instead make those two methods return the info you need and do the render somewhere else. Then you can unit test.

Next, consider making your anonymous function that pulls input text an actual function that extracts text. You can test that against various input then.