DEV Community

Cover image for Effective Testing using Cypress.io
CodingCatDev profile image Alex Patterson
Alex Patterson for CodingCatDev

Posted on Edited on Originally published at codingcat.dev

Effective Testing using Cypress.io

#angular #storyblok #mcp #podcast

Original: https://codingcat.dev/podcast/3-6-Effective-Testing-using-Cypress.io

▶ Watch on YouTube & Subscribe to CodingCat.dev

**Effective Testing using Cypress.io **is a CodingCat.dev podcast episode featuring Jordan Powell alongside Alex Patterson and Brittney Postma focused on Angular, Storyblok. Jordan tells his story of becoming a Developer Advocate and demos testing Angular components using Cypress.io. Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

Podcast Questions

  1. How did you get started at Cypress.io?
  2. How did you get into DevRel?
  3. Jordan tries to prove to Alex why he should test.
  4. What is Unit vs. E2E Testing?
  5. Angular Cypress Demo
  6. Angular Component Testing

More about Cypress.io

Are you tired of writing ineffective tests that only serve to clutter your codebase? Well, fear not my dear developers, because I'm here to introduce you to the magical world of Cypress.io - the ultimate solution for all your testing woes.

With Cypress.io, testing has never been more enjoyable. In fact, it's so enjoyable that you might even forget you're testing at all! Just fire up Cypress and watch as it automagically clicks buttons, types in text boxes, and navigates through your app - all while you sit back and relax with a cup of coffee.

But don't let the ease of use fool you - Cypress is a powerhouse when it comes to testing. It's designed to handle even the most complex applications with ease. Let's take a look at some code examples to see just how effective Cypress can be.

Suppose you have a simple login form on your website. You want to test whether the form accepts valid credentials and rejects invalid ones. With Cypress, you can write a test like this:

describe('Login form', () => {
    it('Accepts valid credentials', () => {
        cy.visit('/login');
        cy.get('#username').type('testuser');
        cy.get('#password').type('testpassword');
        cy.get('#login-btn').click();
        cy.url().should('eq', 'https://example.com/dashboard');
    });

    it('Rejects invalid credentials', () => {
        cy.visit('/login');
        cy.get('#username').type('invaliduser');
        cy.get('#password').type('invalidpassword');
        cy.get('#login-btn').click();
        cy.get('.error-msg').should('be.visible');
    });
});
Enter fullscreen mode Exit fullscreen mode

In this example, we use Cypress's visit command to navigate to the login page. We then use the get command to select the username and password input fields and the login button. We simulate user input with the type command and simulate a button click with the click command. Finally, we use Cypress's assertion commands to verify that the user is redirected to the dashboard on successful login and that an error message is displayed on unsuccessful login.

But what if you're testing a more complex application, like a single-page app? Cypress can handle that too. Here's an example of testing a form submission in a React app:

describe('Contact form', () => {
    it('Submits form successfully', () => {
        cy.visit('/');
        cy.get('[data-cy="name-input"]').type('Test User');
        cy.get('[data-cy="email-input"]').type('testuser@example.com');
        cy.get('[data-cy="message-input"]').type('This is a test message.');
        cy.get('[data-cy="submit-btn"]').click();
        cy.get('[data-cy="success-msg"]').should('be.visible');
    });
});
Enter fullscreen mode Exit fullscreen mode

In this example, we use Cypress's data-cy attribute selectors to select the input fields and submit button. We simulate user input with the type command and simulate a button click with the click command. Finally, we use Cypress's assertion commands to verify that a success message is displayed on form submission.

And the best part? Cypress is so versatile that you can use it for just about any type of application. Whether you're testing a simple website or a complex single-page application, Cypress has got you covered.

So why waste time with ineffective testing when you can have the power of Cypress.io at your fingertips? Give it a try and see for yourself why developers everywhere are turning to Cypress for their testing needs. And who knows, you might even find yourself having fun in the process!

Angular Testing with Cypress.io

To get started with Angular Component tests using Cypress.io, you need to have a basic understanding of Angular and Cypress. If you are new to Angular or Cypress, you can learn more about them on their respective official websites.

Now, let's dive into writing tests for an Angular Component using Cypress.io.

Setting up Cypress.io in your Angular application

To set up Cypress.io in your Angular application, you need to follow these steps:

  1. Install Cypress.io by running the following command in your Angular application's root directory: 
npm install cypress --save-dev
Enter fullscreen mode Exit fullscreen mode
  1. Once the installation is complete, add a script to your package.json file to run Cypress: 
"scripts": {
  "cypress": "cypress open"
}
Enter fullscreen mode Exit fullscreen mode
  1. Create a cypress.json file in the root directory of your Angular application and add the following configuration: 
{
    "baseUrl": "http://localhost:4200"
}
Enter fullscreen mode Exit fullscreen mode
  1. Start your Angular application by running the following command in your terminal: 
ng serve
Enter fullscreen mode Exit fullscreen mode
  1. Finally, run the following command to open the Cypress test runner: 
npm run cypress
Enter fullscreen mode Exit fullscreen mode

Writing tests for an Angular Component using Cypress.io

Now that we have set up Cypress.io in our Angular application, let's write tests for an Angular Component.

For this tutorial, we will write tests for a simple Angular Component that displays a message on the screen.

Here's what the component looks like:

import { Component } from '@angular/core';

@Component({
    selector: 'app-message',
    template: ` <div>{{ message }}</div> `
})
export class MessageComponent {
    message = 'Hello, world!';
}
Enter fullscreen mode Exit fullscreen mode

Our component is very simple. It just displays a message on the screen.

Let's write some tests for this component using Cypress.io.

Test 1: Ensure the message is displayed

Our first test will ensure that the message is displayed on the screen.

Here's what the test looks like:

describe('MessageComponent', () => {
    beforeEach(() => {
        cy.visit('/message');
    });

    it('should display the message', () => {
        cy.get('app-message div').should('contain.text', 'Hello, world!');
    });
});
Enter fullscreen mode Exit fullscreen mode

In this test, we first visit the /message route in our Angular application. Then, we use the cy.get() method to get the div element inside the app-message component and ensure that it contains the text Hello, world!.

Test 2: Ensure the message can be changed

Our second test will ensure that the message can be changed by the user.

Here's what the test looks like:

describe('MessageComponent', () => {
    beforeEach(() => {
        cy.visit('/message');
    });

    it('should allow the user to change the message', () => {
        cy.get('app-message div')
            .should('contain.text', 'Hello, world!')
            .click()
            .type('Hello, Cypress!')
            .should('contain.text', 'Hello, Cypress!');
    });
});
Enter fullscreen mode Exit fullscreen mode

In this test, we first visit the /message route in our Angular application. Then, we use the cy.get() method to get the div element inside the app-message component and ensure that it contains the text Hello, world!.

Next, we simulate a click on the div element and type in the new message, "Hello, Cypress!". Finally, we assert that the div element contains the new message.

Conclusion

In this tutorial, we learned how to write Angular Component tests using Cypress.io. We first set up Cypress.io in our Angular application and then wrote two tests for a simple Angular Component. These tests demonstrated how to ensure that a message is displayed on the screen and how to change the message using user input.

Writing tests for your Angular application is an important aspect of software development. Tests help you catch bugs early and ensure that your application works as intended. Cypress.io provides a powerful and easy-to-use testing framework that can help you write comprehensive tests for your Angular application.

Learn more about Angular

Video Chapters & Timestamps

Jump directly to any segment of Effective Testing using Cypress.io on YouTube using the timestamped chapters below:

Resources, Links & Official Documentation

Related CodingCat.dev Tutorials & Podcast Episodes

Frequently Asked Questions (FAQ)

What are the main takeaways from Effective Testing using Cypress.io?

Jordan tells his story of becoming a Developer Advocate and demos testing Angular components using Cypress.io. 3.6 - Effective Testing using Cypress.io: Jordan tells his story of becoming a Developer Advocate and demos testing Angular components using Cypress.io. https://codingcat.dev/podcast/3-6-Effective-Testing-using-Cypress.io Sponsors: Storyblok

Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & ma Throughout this podcast, Jordan Powell breaks down real-world implementation details for Angular, Storyblok so developers can apply these patterns directly in production.

How do you implement Angular best practices in production?

When adopting Angular and Storyblok in a production stack, start by validating your configuration against the Angular Developer Guide (Signals, standalone components, and enterprise Angular workflows). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

Where can I watch the full Effective Testing using Cypress.io walkthrough and find related code resources?

You can watch the complete video session for Effective Testing using Cypress.io on the CodingCat.dev YouTube channel. For a deeper dive into Angular, check out our related guide: Angular 16 Hydration, Signals, Vite.

Top comments (0)