Solution Review: Show Articles

This review provides an explanation to solve the 'Show Articles' challenge.

We'll cover the following...

Solution

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

const articles = {
"articles": [
{
"slug": "foo",
"title": "foo",
"description": "",
"body": "foosa",
"createdAt": "2020-12-08T18:09:01.720Z",
"updatedAt": "2020-12-08T18:09:01.720Z",
"tagList": [],
"favorited": false,
"favoritesCount": 0,
"author": {
"username": "foo",
"image": "",
"following": false
}
},
{
"slug": "bar",
"title": "bar",
"description": "",
"body": "barsa",
"createdAt": "2020-12-08T18:09:01.720Z",
"updatedAt": "2020-12-08T18:09:01.720Z",
"tagList": [],
"favorited": false,
"favoritesCount": 0,
"author": {
"username": "bar",
"image": "",
"following": false
}
}
],
"articlesCount": 2
}

const headers = { "Access-Control-Allow-Origin": "*" }

context("Global feed", () => {
it("Should show the articles returned by the back-end", () => {
cy.intercept("GET", "**/api/tags", { fixture: "tags/empty-tags", headers }).as("get-tags");
cy.intercept("GET", "**/api/articles/feed**", { fixture: "articles/empty-articles", headers }).as("get-feed");
cy.intercept("GET", "**/api/articles?limit=10&offset=0", { body: articles, headers }).as("get-articles");

cy.authenticateAndVisitIntegration("/");

cy.wait(["@get-tags", "@get-feed"]);
cy.findByText("Global Feed").click()
cy.wait("@get-articles")

for(const article of articles.articles) {
cy.findAllByText(article.title).should("be.visible")
}
});
});
Solution
...