Forem: Anthony Santonocito

Test Driven Api Development With Cypress

Anthony Santonocito — Mon, 16 Sep 2024 13:55:22 +0000

Delivering reliable and high-quality APIs is crucial for ensuring seamless integration and functionality. Test-Driven Development (TDD) has emerged as a powerful methodology to enhance code quality and streamline the development process.

This article will review technical requirements and develop Cypress test code for TDD. The following guidelines will be illustrated in the test code.

Testing Guidelines

Test code should build upon previous test code
Test whenever possible for early bug detection
Develop the API between each test for faster debugging
Tests should not impact the database
Ensure your tests are robust against unrelated changes
Failed Tests Improve Refactoring Confidence

Guideline - Test code should build upon previous test code

Check that POST returns the proper status/properties:
POST
Check that POST results in properly stored data:
POST > GET checks posted data
Check that DELETE results in the deletion of the data:
POST > DELETE > GET confirms a bad request for deleted information
Watch the Test Driven API Development Demonstration

Requirements:

Model the following database:

Seed the database with the following 3 products:

[
0: {
id: 1
name: "Dog Food"
description: "Your dog will love our beef and rice flavored dry dog food."
price: 9.99
}
1: {
id: 2
name: "Cat Food"
description: "Your cat will passively enjoy our salmon flavored wet cat food."
price: 12.99
}
2: {
id: 3
name: "Lizard Food"
description: "Your lizard likes to eat bugs. So this is made of bugs."
price: 3.99
}
]

Requirement 1:

Create a GET endpoint returning all products in a JSON array of objects.
Return all fields including (id, name, description, price).

TEST NAME: cy.gets-all-products

network_requests.cy.js

const base = "http://localhost:5090/api/";

context("Network Requests", () => {
  it("cy.gets-all-products", () => {
    cy.request(`${base}product`).then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body[0]).to.include.keys(
        "id",
        "name",
        "description",
        "price"
      );
    });
  });
});

This test makes an GET api call then checks the status and keys of the call. Requirement 3 will show a more thorough GET test.

Guideline - Develop the api between each test for faster debugging

Testing and development should be continuous

Writing all of the test code before the API code is similar to writing all of the API code before the test code.

Requirement 2:

Create a Post endpoint accepting lineitem fields (id, quantity, userId).
This endpoint must create an orderheader and add this lineitem to that order.
It should also set the total field on the orderheader.
It must return the orderheaderid of the orderheader created.

network_requests.cy.js

const base = "http://localhost:5090/api/";
const item = { productid: 1, quantity: 2, userid: 1 };
 ...
  it("cy.posts-order", () => {
    // Create Order
    cy.request("POST", `${base}order`, item).then((response) => {
      expect(response.status).to.eq(201);
      expect(response.body).to.include.keys("id");
    });

// Delete Order

});

A POST request sent lineitem information along with the userid to create an order. The status and keys of a POST call are checked.

Guideline - Test whenever possible for early bug detection:

Even if the test seems partial, it should still be written. We do not have a way to delete this POST yet. We also cannot properly check the data in the database without a way to retrieve an orderheader.

Requirement 3:

Create a GET endpoint accepting a query labeled "id" which will be used to pass the orderheaderid.
Use the orderheaderid to query the database and return the orderheader and related orderlines as well as the orderlines related product.
Return all fields of all tables involved.

TEST NAME: cy.retrieves-order-by-id

network_requests.cy.js

const base = "http://localhost:5090/api/";
const item = { productid: 1, quantity: 2, userid: 1 };

...

  it("cy.retrieves-order-by-id", () => {
    // Create Order
    cy.request("POST", `${base}order`, item).then((response) => {
      cy.wrap(response.body.id).as("id");
    });

    // Get Order By ID
    cy.get("@id").then((id) => {
      cy.request({
        url: `${base}order/byid`,
        qs: {
          id: id,
        },
      }).then((response) => {
        expect(response.status).to.eq(200);
        expect(response.body.lineitems[0]).to.include.keys(
          "id",
          "quantity",
          "price",
          "productid",
          "product",
          "orderheaderid",
          "orderheader"
        );
        expect(response.body.lineitems[0].product).to.include.keys(
          "id",
          "name",
          "description",
          "price"
        );
        expect(response.body.lineitems).to.be.an("array").and.have.lengthOf(1);
        expect(response.body.total).eq(
            response.body.lineitems[0].price * response.body.lineitems[0].quantity
          );
        expect(response.body.customer).eq(1);
        expect(response.body.lineitems[0].productid).eq(1);
        expect(response.body.lineitems[0].quantity).eq(2);
        expect(response.body.lineitems[0].price).eq(
          response.body.lineitems[0].product.price
        );
      });

      // Delete Order
    });
  });

While within a single test block we can save values with
cy.wrap(<value>).as("<key>") the key can be retrieved with cy.get("@<key>").then((<value>) => {})

This test confirms every field is properly populated during our POST.

Guideline - Ensure your tests are robust against unrelated changes:

Avoid hardcoding values that might change.

In the above code, the price of the orderline is tested against the price of the product. The total of the orderheader is linked to the price and quantity of the orderline. This test will not fail if the product price is change. It will fail if the API is not properly updating the lineitem price.

Requirement 4:

Create a DELETE endpoint accepting a query labeled "id" which will be used to pass the orderheaderid.
This endpoint must delete an orderheader.
It should return JSON with key "success" and value true.

Guideline - Tests should not impact the database:

After running all API tests, the database should be left unchanged
You will notice delete in all the relevant positions in the test code. Failed tests may impact the database.

This is the final code.

TEST NAME: cy.deletes-an-order

network_requests.cy.js

const base = "http://localhost:5090/api/";
const item = { productid: 1, quantity: 2, userid: 1 };

context("Network Requests", () => {
  it("cy.gets-all-products", () => {
    cy.request(`${base}product`).then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body[0]).to.include.keys(
        "id",
        "name",
        "description",
        "price"
      );
    });
  });

  it("cy.posts-order", () => {
    // Create Order
    cy.request("POST", `${base}order`, item).then((response) => {
      expect(response.status).to.eq(201);
      expect(response.body).to.include.keys("id");
      cy.wrap(response.body.id).as("id");
    });

    // Delete Order
    cy.get("@id").then((id) => {
      cy.request("DELETE", `${base}order?id=${id}`).then((response) => {
        expect(response.status).to.eq(200);
        expect(response.body).to.include.keys("success");
      });
    });
  });

  it("cy.retrieves-order-by-id", () => {
    // Create Order
    cy.request("POST", `${base}order`, item).then((response) => {
      cy.wrap(response.body.id).as("id");
    });

    // Get Order By ID
    cy.get("@id").then((id) => {
      cy.request({
        url: `${base}order/byid`,
        qs: {
          id: id,
        },
      }).then((response) => {
        expect(response.status).to.eq(200);
        expect(response.body.lineitems[0]).to.include.keys(
          "id",
          "quantity",
          "price",
          "productid",
          "product",
          "orderheaderid",
          "orderheader"
        );
        expect(response.body.lineitems[0].product).to.include.keys(
          "id",
          "name",
          "description",
          "price"
        );
        expect(response.body.lineitems).to.be.an("array").and.have.lengthOf(1);
        expect(response.body.total).eq(
          response.body.lineitems[0].price * response.body.lineitems[0].quantity
        );
        expect(response.body.customer).eq(1);
        expect(response.body.lineitems[0].productid).eq(1);
        expect(response.body.lineitems[0].quantity).eq(2);
        expect(response.body.lineitems[0].price).eq(
          response.body.lineitems[0].product.price
        );
        // Delete Order
        cy.request("DELETE", `${base}order?id=${id}`).then((response) => {
          expect(response.status).to.eq(200);
          expect(response.body).to.include.keys("success");
        });
      });
    });
  });

  it("cy.deletes-an-order", () => {
    // Create Order
    cy.request("POST", `${base}order`, item).then((response) => {
      cy.wrap(response.body.id).as("id");
    });

    cy.get("@id").then((id) => {

      // Delete Order
      cy.request("DELETE", `${base}order?id=${id}`).then((response) => {
        expect(response.status).to.eq(200);
        expect(response.body).to.include.keys("success");
      });

      // Get Deleted Order By Id
      cy.request({
        url: `${base}order/byid`,
        failOnStatusCode: false,
        qs: {
          id: id,
        },
      }).then((response) => {
        expect(response.status).to.eq(400);
      });
    });
  });
});

Failed API calls result in a Cypress test failure. Including failOnStatusCode: false in the request, negates that behavior.

The next requirement might force us to ensure a cascading delete of all lineitems upon deletion of an orderheader. Try writing that test. Here is the sudo code.

POST an order
GET orderheader
Save the lineitemid
DELETE the orderheader
GET lineitem by passing the lineitemid to an endpoint the returns a lineitem by id - expect this get to fail

Guideline - Failed Tests Improve Refactoring Confidence:

Testing for functionality should include tests that expect to fail.
In the repo, you will see many tests expecting to fail after the order status is changed. Note that this results in a test passing.

View the finished code including the API on github:

Build a React Hooks Shopping Cart with useState and useEffect

Anthony Santonocito — Thu, 20 Aug 2020 16:43:47 +0000

Video Walkthrough

subscribe on youtube for more content.

Article Explanation of Hooks

In this article, we will use hooks to create a video game shop and shopping cart.

First, I will show an example of how to use the useState hook.

import React, { useState } from "react";

const Shop = () => {
  const [open, setOpen] = useState(true);
  console.log(open)

  const closeStore = () => {
    setOpen(false)
}
  return(
    <div>
    <input type="submit" value="close" onClick={() => closeStore()} />
    </div>
)
}

export default Shop;

In this example, open is a key that holds the useState argument as its value. useState(true), open = true.

setOpen is a function that takes a value as an argument.

setOpen will set open to the new value passed to setOpen.

setOpen(false), sets open = false

This shows a button that can be clicked in order to change the value of open from true to false.

Let's try a more complex use case.

In App.js we will return a div with our soon to be created Shop component:

import React from "react";
import Shop from "./shop/Shop";

function App() {
  return (
    <div>
      <Shop />
    </div>
  );
}

export default App;

We will create the shop component next. Create a folder in src named shop. Then create a file in that folder named Shop.js

The finished Shop.js code is at the bottom of the article.

We are going to return an empty functional component to get us started:

import React, { useState, useEffect } from "react";

const Shop = () => {
    return <div />
}

export default Shop;

Let's add our inventory as an array labeled items:

const Shop = () => {
  const items = [
    {
      id: 1,
      name: "overwatch",
      price: 20,
    },
    {
      id: 2,
      name: "minecraft",
      price: 32,
    },
    {
      id: 3,
      name: "fortnite",
      price: 51,
    },
  ];
  return <div />
}

We are only selling these three video games. We need to display them. So, we will create a new formatted array called listItems using .map(). Now, we should return listItems:

  const listItems = items.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="add" onClick={() => addToCart(el)} />
    </div>
  ));

return(<div>{listItems}</div>)

Above items, we will create our first useState hook:

const [cart, setCart] = useState([]);

The const cart is where we will hold our cart state. We can call setCart() and pass in the state changes we want to make to cart. Let's create our addToCart function using setCart:

  const addToCart = (el) => {
      setCart([...cart, el]);
  };

addToCart takes the element selected and adds it to the cart array.

We are going to display the cart, in our app, under our store. First, make a new formatted array from the cart array:

  const cartItems = cart.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="remove" onClick={() => removeFromCart(el)} />
    </div>
  ));

We can create our removeFromCart function using the filter method. note* We will make a copy of the cart state before filtering:

  const removeFromCart = (el) => {
    let hardCopy = [...cart];
    hardCopy = hardCopy.filter((cartItem) => cartItem.id !== el.id);
    setCart(hardCopy);
  };

Change the return statement to include cartItems:

  return (
    <div>
      STORE
      <div>{listItems}</div>
      <div>CART</div>
      <div>{cartItems}</div>
    </div>
  );

Finally, we will keep track of the total using useState and useEffect:

  const [cartTotal, setCartTotal] = useState(0);

  useEffect(() => {
    total();
  }, [cart]);

  const total = () => {
    let totalVal = 0;
    for (let i = 0; i < cart.length; i++) {
      totalVal += cart[i].price;
    }
    setCartTotal(totalVal);
  };

The useEffect hook contains an arrow function. Inside the arrow function, we call our total function.

The second argument in useEffect is the dependency array containing [cart].

useEffect will detect changes in the variables named within its dependency array. When it detects a change, it will run again.

Every time an item is added or removed from the cart, useEffect will detect a change in cart and run the total function.

Finally, place total in your return:

import React, { useState, useEffect } from "react";

const Shop = () => {
  const [cart, setCart] = useState([]);
  const [cartTotal, setCartTotal] = useState(0);
  const items = [
    {
      id: 1,
      name: "overwatch",
      price: 20,
    },
    {
      id: 2,
      name: "minecraft",
      price: 32,
    },
    {
      id: 3,
      name: "fortnite",
      price: 51,
    },
  ];

  useEffect(() => {
    total();
  }, [cart]);

  const total = () => {
    let totalVal = 0;
    for (let i = 0; i < cart.length; i++) {
      totalVal += cart[i].price;
    }
    setCartTotal(totalVal);
  };

  const addToCart = (el) => {
      setCart([...cart, el]);
  };

  const removeFromCart = (el) => {
    let hardCopy = [...cart];
    hardCopy = hardCopy.filter((cartItem) => cartItem.id !== el.id);
    setCart(hardCopy);
  };

  const listItems = items.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="add" onClick={() => addToCart(el)} />
    </div>
  ));

  const cartItems = cart.map((el) => (
    <div key={el.id}>
      {`${el.name}: $${el.price}`}
      <input type="submit" value="remove" onClick={() => removeFromCart(el)} />
    </div>
  ));

  return (
    <div>
      STORE
      <div>{listItems}</div>
      <div>CART</div>
      <div>{cartItems}</div>
      <div>Total: ${cartTotal}</div>
    </div>
  );
};

export default Shop;

Watch the video for more! Next, we will refactor this code to use Redux. After that, we will start making http requests using the fetch api and redux-thunk. Finally, we will convert the project to redux-saga. The videos are up on youtube already Youtube Channel Link and the articles are on their way!

Async Await from Beginner to Advanced Features Including Concurrency

Anthony Santonocito — Sun, 16 Aug 2020 19:31:25 +0000

Async Await Tutorial

Link to youtube channel: https://www.youtube.com/channel/UC3b871DqOlA5tKbizv4J6mg

What is Async Await?

Async await is used to execute asynchronous tasks in Javascript. The tutorial video above covers Async await and concurrency.

Write Better Code With Concurrency

If you are here to learn async await, watch the video above. Below we will illustrate the power of concurrency!

This is a wait function that returns a promise. The promise resolves in the amount of milliseconds passed to it as an argument.

const wait = (ms) => {
    return new Promise(function(resolve) {
        setTimeout(resolve, ms, 'Message Received');
    });
}

The following function, findMessage(), will await 3 separate asynchronous calls to the wait() function above. Wait is called and 2000 is passed in. This means the promise resolves in 2 seconds. This code takes 6 seconds to execute.

const findMessage = async () => {
  const timeStart = Date.now()
  const one = await wait(2000)
  console.log(one)
  const two = await wait(2000)
  console.log(two)
  const three = await wait(2000)
  console.log(three)
  const timeEnd = Date.now()
  console.log(`Time ${timeEnd - timeStart}`)
}

findMessage()

The following function, findMessageConcurrently(), will await 3 asynchronous calls to the wait() function above. Wait is called and 2000 is passed in. This means the promise resolves in 2 seconds. This code takes just over 2 seconds to execute.

const findMessageConcurrently = async () => {
   const timeStart = Date.now()
   const [one, two, three] = await Promise.all([wait(2000),
 wait(2000), wait(2000)])
   console.log(one)
   console.log(two)
   console.log(three)
   const timeEnd = Date.now()
   console.log(`Time ${timeEnd - timeStart}`)
 }

findMessageConcurrently()

Why?

When using Promise.all, each promise passed in is started. Then it is added to the end of the event loop where a response is awaited. The two second promises can all be done concurrently using Promise.all.