DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Ariel Mejia
Ariel Mejia

Posted on

Test Laravel Breeze Authentication with Cypress

This post is showing some examples that are pretty easy to add to any Laravel project that use Laravel Breeze.

In order to use the full example you should require to use the Laracast/Cypress package.

Here a login example:

Take in mind that the default user factories from Laravel sets user password generated by factories as "password":

describe('Authentication test', () => {
    it('tests a success manual authentication with the login form', () => {
        cy.visit(`/login`);

        cy.php(`
            App\\Models\\User::factory()->create(['email', 'john@doe.com']);
        `).then(user => {
            cy.get('input[type="email"]').type(user.email);
            cy.get('input[type="password"]').type('password');
        });

        cy.get('button[type="submit"]').click();

        cy.location('pathname').should('equal', '/dashboard');
    });
});
Enter fullscreen mode Exit fullscreen mode

Some interesting ideas could be:

Test http status code

cy.request('http://localhost:8000/dashboard').then((response) => expect(response.status).to.eq(200));
Enter fullscreen mode Exit fullscreen mode

Test a middleware

// visit a url
cy.visit('http://localhost:8000/dashboard');
// check the next url location
cy.url().should('match', /login);
Enter fullscreen mode Exit fullscreen mode

Sometimes you require to test a larger workflow like logout and then check that some middleware works...

cy.visit('/logout') // I got you cover, it would do the magic
Enter fullscreen mode Exit fullscreen mode

Check some content

Take in mind that you should avoid testing texts that could be escaped, with that said, you can test something like a welcome message in the /dashboard url.

cy.contains('Welcome');
Enter fullscreen mode Exit fullscreen mode

Or even better, use the PHP method or the login helper to test exactly the current user welcome message:

cy.login({ email: 'john@doe.com', name: 'John Doe' });
cy.visit('/dashboard').contains('Welcome Back, John Doe');
Enter fullscreen mode Exit fullscreen mode

Hopefully this little examples, helps to provide enough guide to create you own tests for your applications.

Top comments (0)

Rust language vs others

Stop by this week's meme thread!