DEV Community: Issac Lewkowicz

Have a little RSpec(t)

Issac Lewkowicz — Tue, 05 Jul 2022 02:06:00 +0000

intro

We can test our code in quite a few ways. We typically use debugging tools such as byebug as we want to make sure things are behaving as they should (or when they don't...). A well placed puts may be all you need to see what is happening in a specific spot in your code. We could use the console to test our methods. Giving them data to work with and seeing what we get back in return.
But for proper testing, we would use test frameworks (or suites ).
A test framework would allow us to write external files that will run our code and check if the results are as expected.
Ruby on Rails comes with its own test framework, but we will be discussing how to use RSpec in this blog.

Writing your own tests

Instead of writing tests to check if the code that we have written works as expected, in TDD the practice is to write tests before we write our implemented code.

This practice of development, leads us to stop & think about what we are trying to achieve, and how we are going to build it.
If we jump straight into implementation, we could lose sight of what our exact expectations from the code should be.
This leads to wasting a lot of time writing unnecessary code.

For starters, we may:

Write tests that match what we are trying to accomplish.
Run our test (it will fail, as we have not yet written any code).
Think about how to write code that will lead us to pass the test.
Write the code, and test it.
Repeat step 4 until all tests pass
Refactor code and make sure it still passes the tests.

Sticking to this process will have you stay on-point with your goals, writing precise meaningful code and checking that it all works, all-in-one.

BDD - behavior-driven development, is a step forward from TDD.
I will not touch much on The differences here. But suffice to say that BDD is tested from an end-user view point, and requires a team to prepare (including managers and test engineers), and that BDD is testing a feature, not just small slices of code.

RSpec

I will not be getting into how to setup RSpec in your project, although the process is simple enough.

In RSpec we write tests that are also the specs (specifications) for our applications behavior.
We use the describe keyword to define our test block,
then we describe what behavior is expected.
The test accepts either a class name (from an existing class) or a string.

Let's assume we are writing a test for a calculator app.
We have a class method called ".exponent_calculator" designed to calculate the result of an exponent of a number (x**y = result).

describe Calculator do

  describe ".exponent_calculator" do
    context "given two numbers" do
      it "returns a result of the first number raised to the power of the second number" do
        expect(Calculator.exponent_calculator(2,10)).to eq(1024)
      end
    end
  end
end

We are describing in plain English what is expected of the method, and in what context (context is optional).
This makes our test very easy to understand and maintain.

Running rspec will then then check if sending in the numbers 2 and 10 into the method will return 1024. The test will pass or fail depending on results.
For better testing you would want to test for edge cases as well.
Make sure to consider all possible input (imagine testing a quadratic equation calculator. Or better yet go build and test one yourself - it's quite fun.)

When you write your implemented code, check what happens when you purposely fail the test - check that it really only passes when you need it to.

Conclusion

There is so much more to cover about testing - testing can even become your career path. This was just a small taste of what testing is about. Like it or not, at the end of the day testing is a big part of developing. TDD and BDD are going to be part of your life in some way.

References

rspec GitHub page
A nice beginner's tutorial I found
BDD vs TDD

CRUD and Event Handling in React

Issac Lewkowicz — Wed, 01 Jun 2022 02:39:36 +0000

Fetching in react

Fetching in React is similar to fetching in JavaScript.
The way we handle those requests is different due to State hooks and the way we render things to the DOM.

Note: I will be using a pessimistic approach to rendering elements - by only updating state from successful fetches.

CRUD requests

GET

In react, we cannot simply have our fetch request in a function.
If we do that, the page will re-render in an infinite loop of:

component rendering → fetch → data is set to state → state update triggers a re-render → re-render triggers another fetch -> the fetch updates state -> re-render → infinite loop.

Instead, we can use a {useEffect} hook for our GET to render once, and the empty dependency array will make sure it won't re-render.

useEffect(() => {
  fetch('fetchURL')
      .then(response => response.json())
      .then(data => setState(data))
  }, [])

POST

We can handle post requests by having a handler function receive the return data.
Here's an example of a form submitting Component:

import React, { useState } from "react";

function NewItemForm({ onAddItem }) {

    const defaultFormData = {
        example1: "",
        example2: ""
    }

    const [formData, setFormData] = useState(defaultFormData)

    const updateFormData = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();

        const postConfig = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify(formData),
        };

        fetch('fetchURL/Items', postConfig)
            .then(response => response.json())
            .then((newItem => {
                onAddItem(newItem);
                setFormData(defaultFormData);
            }))
    }

    return (
        <form onSubmit={handleSubmit} >
            <input onChange={updateFormData} name="example1" value={formData.example1} />
            <input onChange={updateFormData} name="example2" value={formData.example2} />
            <input type="submit" value="Submit" />
        </form>
    );
}

export default NewItemForm;

For POST we would usually want to concatenate the new data to the existing data array.
So we need to be aware to not overwrite the existing data. Fortunately, we have the spread operator to help us out.

This is an example of how our handler handleNewItem (what onAddItem is called in the parent component) may look like:

const handleNewItem = (newItem) => {
const updatedItemList = [...itemList, newItem];
setItemList(updatedItemList)
}

By using this method, we avoid changing the state array directly (a subject worthy of it's own blog post) and update our array with the new item.

PATCH

PATCH requests are similar to POST requests.
This time we will use the .map array method to update our array in our state. This is our way of updating a specific element in our data array.

function handleUpdateItem(newItem) {
    const updatedItems = items.map(item => 
        item.id === newItem.id ? newItem : item)
    setItems(updatedItems)
}

const patchConfig = {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
  },
  body: JSON.stringify({key: updatedValue}),
};


fetch('fetchURL/items/${item.id}', patchConfig);
  .then(response => response.json())
  .then(newItem => handleUpdateItem(newItem))

Delete

Deleting requires us to use the filter array function.
If we simply let everything in except for the deleted item, we achieve our goal again without deleting from the array in state directly.

const handleDelete = (id) => {
  const updateItemList = itemList.filter((item) => item.id !== id);
  setItemList(updateItemList);
}

fetch(`fetchURL/items/${item.id}`, {
  method: 'DELETE'
 }).then(response => {
    if (response.ok) {
        handleDelete(item.id)
    } else {
        handleError({error: "Item was not deleted"})
    }
})

Conclusion

In the examples above we can see simple methods for applying state, using controlled forms, and fetching in React.
Applying the right method to manipulate the data in state, is imperative.
Now go ahead and try these out, and don't forget to be CRUD-y.

Strings acting as Arrays

Issac Lewkowicz — Tue, 10 May 2022 01:38:46 +0000

The following statement is inaccurate in regards to JavaScript (under-the-hood differences from other languages), but is still relevant:

Basically, strings can be looked at as arrays of chars, that have been manipulated (in a similar way to how split() and join() do, as shown in an example hereinafter).
Because of said manipulation, many array methods won't work on strings - although there are some alternatives.

Let there be string:

const str = 'abcde';

Here's an alternative to using array methods on strings, for example:

const char = str[3];
//=> d

chars can be accessed this way similarly to elements of an array
The above would have normally been: char = str.charAt(3)), but we can use index positioning to find our char.
Lets try another array method on our string:

const reversedString = str.reverse();
//=>TypeError: str.reverse is not a function

Whoops!! This threw an error! str is not an array...

Lets try a different approach:

const arrStr = str.split('');
//=> [ 'a', 'b', 'c', 'd', 'e' ]

As you can see, we used the split() method to convert the string into an array.
This can also be achieved like this: const arrStr = [...str]; (using the spread operator).

Now lets use array methods on an array! Let's try reverse() again:

const revArrStr = arrStr.reverse();
//=> [ 'e', 'd', 'c', 'b', 'a' ]

Not this time, Error!

We need our string to be a string again:

const revStr = revArrStr.join('');
//=> 'edcba'

Now that's the stuff!

So we can use the split() method to convert a string into an array - use array methods on it - and then join() it back together.
In other words: We can operate on strings in their "array version", as arrays.

But there are a lot of wasted chars all over this page.
Lets shorthand it all:

const shortRevStr = str.split('').reverse().join('');
//=> LOG: edcba

Short and sweet!

Other methods that work on arrays, but not on strings can be used on these 'temporary' arrays as well.
The ability to manipulate strings in this way, allows us access to many additional tools.
I'd love to hear about some of the ways that you use data type manipulation to your advantage!