Delve into front-end testing principles, learn best practices for writing enduring tests, and discover strategies for E2E testing and integration into CI pipelines. Gain actionable testing insights.

React Testing 101 Component, Integration, and End-to-end Testing_1.png

tarball.tar.gz

jest

jest_describe

jest_onlytest

skiptest

aftereach

headless

foo2

opening

first_test

custom

final_job

foo_final

This course will provide you with important information, principles, and experience-based advice, to enter the world of testing methodologies. 

Here, you will learn the best practices to follow to write useful and lasting tests, how to test different user flows without a working back-end, how to write effective end-to-end tests (E2E), and how to integrate tests into development and Continuous Integration pipelines.

At the end of the course, you will be able to apply the fundamental principles of the test methodologies to understand what and how to test effectively.

Front-end Testing 101: Integration and End-to-end Testing

# Solution
> Note: You can see the Cypress UI better by opening the link next to **Your app can be found at:**

Cypress.Commands.add("createPost", ({ title, text } = {}) => {
cy.intercept("POST", "**/api/articles").as("create-article-request");

cy.visit("/editor");
cy.findByPlaceholderText("Article Title").type(title)
cy.findByPlaceholderText("Write your article (in markdown)").type(text)
cy.findByText("Publish Article").click()

// ... and AJAX call waiting
cy.wait("@create-article-request").should((interception) => {

expect(interception.request.body).deep.equal({
article: {
title,
body: text,
description: "",
tagList: []
},
});

expect(interception.response.statusCode).to.equal(200);

cy.wrap(interception.response.body)
.should("have.property", "article")
.and(article => expect(article).to.have.property("slug").and.to.be.a("string").and.not.to.be.empty)
.and("deep.include", { title, body: text });
});
});

context("Login flow", () => {
it("When the user is not registered, the server should respond with a 422 status", () => {
cy.signupV3();
cy.createPost({title: "title", text: "text"});
});
});


Java - Swing

Python - tkinter

# Explanation
Let’s learn the code line by line to understand how the `command` and `tests` work.
## `createPost` Command  
- **Line 2:** You intercept the `post` to `**/api/articles` as `create-article-request`.
- **Line 4-7:** You visit the `editor` page and find the `Article Title`. Then type the `title`, find the `Write your article (in markdown)`, type the `text`, we find `Publish Article`, and `click` `Publish Article`.
- **Line 10-19:** Wait for the `create-article-request` `post` request and check that the `post` request has a `title`,`body`, `description`, and `tagList`.
- **Line 21:** Check for the  `statusCode` in the response of the `post` request and make sure that it is `200`.
- **Line 23-28:** Check that `response` has a property `article`.  Check that the `article`, which should be  `non-empty` and contain `title` and `text` within it.
## Test
- **Line 30-35:** Write a test which signs up the user using `signupV3` command and write the article using the `createPost` command.   

 


This review provides an explanation to solve the “Write a Test and Custom Command” challenge.

Introduction

E2E Testing

The First E2E Test

Polishing the E2E test

Ajax Requests

Custom Commands

UI Integration Tests

Other Best Practices

Bonus Section

Conclusion

Appendix

Solution Review: Write a Test and Custom Command

Solution