DEV Community: Jure Prnaver

What I have learned about testing

Jure Prnaver — Sat, 10 Jun 2023 12:14:35 +0000

Let's face it, testing can be challenging for many developers. It is one of the things that we want to avoid. I certainly know that because I was also thinking the same way. But many challenges and setbacks changed my view on it. Below are some of the situations that I have experienced along the way and what I have learned from them. These lessons can help you on your path to becoming better at testing.

Know why you are writing tests

Before writing any test it's important to know why we write them. Kent C. Dodds has a great definition for that:

We write tests to be confident that our application will work when the user uses them. (source)

This is related to one situation at work. I took over a ticket and implemented the changes. Everything seemed to be working well and I pushed the code. After some time some tests in the CI pipeline failed. At first, I thought the tests were wrong, but it turned out that new changes broke another part of the app. That was the first time when tests got my back.

This experience taught me a good lesson - tests are worth doing. They take some effort when writing them, but in the future, they can save you from making changes that you don't intend to make.

Look from the perspective of the user

This is the fundamental principle. When I learned it well, it helped me immensely.

When you test a part of your app, look through the perspective of a user. Think in terms of what effect your code has on the user. The same perspective applies when using queries in tests.

Here are some questions to point you in the right direction:

What does the user see?
How can he interact with the app?
What effect does his actions have?

Hopefully answering these questions gives you a better perspective on the user flow.

From this point you can start writing tests for the common user path. Start with simple ones and progress towards more complex ones. The next thing is covering edge cases. Try to think about all the different ways that could go wrong and test them.

Both opposing views should help you test most use cases. This will give you confidence that your app is running as you have imagined.

Writing tests test your understanding of the code

Most probably you will get to a point when you have trouble writing a test. There are two reasons for this: you are not good at testing yet or you don't understand what the code does.

I remember when I tried to improve test coverage for an older part of the code. I quickly looked through it and dived right into testing. It didn't take much time until I got stuck. The bottleneck in this situation was my understanding of what the code does. I had to take time to thoroughly inspect the code. When I figured out what it does, I successfully finished writing tests for it.

So take time to understand the code before writing tests for a component or a part of an app.

Write simple tests

This seems straightforward advice, but some developers find it hard to follow. Sometimes developers fall into the trap of over-engineering the code. We write the code in a too-smart way.

This can feel good at the moment but can hurt you and your team members in the future. The same thing can happen when writing tests. So we need to be aware of this phenomenon and try to actively mitigate it.

Here are some helpful tips:

Test only one scenario per test: don't try to force many scenarios into a single test
Copy the code rather than abstract it: Don't add any abstractions and if statements when they are not necessary. In that case, it's better to copy some of the code to have clearer tests
Follow a clear and well defined structure:
- Arrange: arranging all the inputs, mocks, connections...
- Act: run the code
- Assert: set expectations, what should happen if the test runs correctly

Debugger is your friend

This tool can save you time when writing tests. Of course, you need to know how to use it in order to unleash all of its power. It is especially useful in a large codebase containing old code.

Imagine you are testing an older component. You write a test that you think should work but it fails. You try some things and add console logs in different places, but you are still stuck.

In this situation, the debugger is your best friend. You add it to the executable part of the code and run the test in debugger mode. The execution of the code stops where you put debugger. At this point, you can see all defined variables, and buttons for step over, step into, and step out. Now step over the code until you get to a point where it unexpectedly fails.

Here lies the magic of the debugger. Right before the breaking point, you can inspect what is missing in the test. Did you forget to mock some function or method? What variables are missing? Add those to the test and try again. Sooner or later you should get it to run green.

Always test the opposite expectation

A lot of articles advise that you: "Fail the test first, then make it green". This sounds great when you follow TDD (test-driven development), but the way I work it needed some modification. My definition is: "Make the test green, then let it fail, and lastly revert it back to green". This approach assures you that the test does what it suppose to do.

Following this rule helped me in some interesting situations. I remember once when I wrote a test that ran green. Following the rule I changed the expected case to be the opposite of the previous expectation. When running the test again it was again green.

You probably won't get to this situation many times, but I still find it valuable enough to follow it. The rule ensures that tests are working correctly and improve your confidence in them.

Conclusion

Thank you for sticking with me until the end. I hope that your thinking about tests has been challenged and that you have learned something new.

Share your experiences in the comments below. I would love to read what you have learned when testing.

Movie Database - find the perfect movie

Jure Prnaver — Thu, 08 Dec 2022 18:55:42 +0000

What I built

The app that let's you discover more information about your favorite movie.

Category Submission:

Search No More

App Link

https://movie-database-33.vercel.app/

Screenshots

Description

Inside the app the main functionality is to quickly search for a movie that you are looking for. When typing you get autosuggestion with links to movies, or you can press enter to go to search page. On the top menu you can also go to all movies and filter or sort them as you wish. Clicking on single movie navigates you on the page with more information about it. There you will find a link to the page with all cast and crew.

To enable saving films to watchlist you need to login using your Google account. Then inside your profile you can see the watchlist.

Link to Source Code

https://github.com/eruj22/movie-database

Permissive License

MIT

Background

It was so exciting to learn about this hackathon, as I love to use MongoDB. The idea for it came rather easy, as I frequently use look up more information about movies to watch. It was a good challenge to make something similar on my own.

Inspiration for the layout came from TMDB, IMDb and Rotten Tomatoes. Color scheme was heavily inspired by socks that were a gift right before I started making the design for an app (not kidding, proof is in the image below).

Technologies used

Next.js
MongoDB
Emotion
NextAuth
Typescript

How I built it

First phase of the app was sketching wireframes by hand and making a rough design in Figma.

Then it was time to set up database and basic search functionality. I have populated the data in the database using data from TMDB and modified it a bit for my use case. Next up I set up search indexes to search all movies and autocomplete. These were connected to the functions in App Services.

Moving on comes my favorite part, building out the frontend part of the app. The framework that helped me make data visible to users is Next.js.

First I made the hero page and a connection to the database. Next page was movies page, where you can filter through all movies. Clicking on single movie navigates you to the page with more data about the movie. Inside it is also a link to the page with all the cast and crew.

Search page is a page that you see when you submit search query. Inside it there is a search component (also on hero page) that uses the function in the MongoDB called searchMovies. This function searches through the whole database and returns what it finds.

exports = (title) => {
    let collection = context.services.get("mongodb-atlas").db("test").collection("singlemovies");

    const pipeline = [
      {
        $search: {
          index: "searchMovies",
          text: {
            query: title,
            path: {
              "wildcard": "*"
            },
            fuzzy: {}
          }
        }
      }
    ]

  return collection.aggregate(pipeline)  
};

The index field below is used inside the function on the top to form aggregation pipeline.

{
  "mappings": {
    "dynamic": true,
    "fields": {
      "title": [
        {
          "dynamic": true,
          "type": "document"
        }
      ]
    }
  }
}

Inside search component there is also autocomplete functionality that suggests movies based on what you type in. The function autocompleteMovies returns maximum 6 items and each field consists of only title and id.

exports = function(arg){
 let collection = context.services.get("mongodb-atlas").db("test").collection("singlemovies");

 let pipeline = [
    {
      $search: {
        index: "autocompleteMovies",
        "autocomplete": {
          "query": arg,
          "path": "title",
          "tokenOrder": "sequential"
        }
      }
    },
    {
      $limit: 6
    },
    {
      $project: {
        "title": 1,
        "_id": {"$toString" : "$_id"},
      }
    }
  ]

  return collection.aggregate(pipeline)
};

The function uses search index with index field set only to title and it starts suggesting when you write at least 3 letters.

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "title": [
        {
          "analyzer": "lucene.standard",
          "foldDiacritics": true,
          "maxGrams": 14,
          "minGrams": 3,
          "tokenization": "edgeGram",
          "type": "autocomplete"
        }
      ]
    }
  }
}

Last but not least is the login functionality. For this job I picked NextAuth as widely used solution for authentication in a Next.js app. In the app you can only login using your Google account.

In the end I have made final visual improvements in the app and took some time to correctly deploy it.

During the development I had a lot of fun. It is very satisfying to build something new. During the process I have faced many challenges and also successfully solved many of them.

One thing to note, there are only 40 movies stored in the database.

Thank you for reading.

Create Custom Keyboard Navigation for Grid Items

Jure Prnaver — Sun, 16 Oct 2022 15:16:04 +0000

Recently I have faced a challenge of setting up a custom keyboard navigation inside a long list of files. They are displayed both in grid and list view. As I haven't found the exact solution when googling, here is an article explaining what I have learned. Thanks to Ryan Mulligan's article for inspiration.

Prerequisite: basic knowledge of React.

Check out the working project demo site to see what we are building.

Setting up starter code

Get starter GitHub repository to follow along as we dive into the code.You can clone the repository or download the whole file.

Open code it in your favorite editor and run commands yarn install && yarn start. This will run the code in your local environment.

Start of the project

Now we are ready to start coding. Let’s first add title and show items. All the necessary data for the items is in the file items.json. We can import them into the App and loop through each one.

import "./App.css";
import items from "./items.json";

function App() {
  return (
    <main className="main">
      <h1 className="title">Custom keyboard navigation</h1>

      <section className="items">
        {items.map((item) => {
          return <article>single item</article>;
        })}
      </section>
    </main>
  );
}

export default App;

Currently we just display the same text for each item. We can change that in order to display image and checkbox. Open the component Item inside src/components/Item.tsx and update the component.

import "./Item.css";

type ItemProps = {
  description: string;
  id: number;
  name: string;
  url: string;
};

function Item(props: ItemProps) {
  const { description, name, url } = props;

  return (
    <div className="item">
      <input className="input" type="checkbox" name={name} id={name} />
      <img className="image" src={url} alt={description} />
    </article>
  );
}

export default Item;

We also need to import the Item into the App and pass all the props to it. Here we spread all props instead of manually adding each one.

import "./App.css";
import Item from "./components/Item";
import items from "./items.json";

function App() {
  return (
    <main className="main">
      <h1 className="title">Custom keyboard navigation</h1>

      <section className="items">
        {items.map((item) => {
          return <Item {...item} />;
        })}
      </section>
    </main>
  );
}

export default App;

Now we can add some styles to both components to make the app look better.

In the App.css we make style main and display items inside a grid.

.main {
  margin: auto;
  max-width: 1000px;
  text-align: center;
}

.items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

In the Item.css we style image and absolutely position checkbox.

.item {
  position: relative;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid lightgray;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.input {
  position: absolute;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

What we want to do next is to select checkbox when we click on the image. This makes whole user experience much better than just clicking on small checkbox.

To do that we need to add state inside Item to track if checkbox is checked. We add onClick handler to the whole item and manually set checkbox state via checked property.

import { useState } from "react";
import "./Item.css";

type ItemProps = {
  description: string;
  id: number;
  name: string;
  url: string;
};

function Item(props: ItemProps) {
  const { description, name, url } = props;
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div
      className={isChecked ? "item checked" : "item"}
      onClick={() => setIsChecked(!isChecked)}
    >
      <input
        className="input"
        type="checkbox"
        name={name}
        id={name}
        checked={isChecked}
      />
      <img className="image" src={url} alt={description} />
    </article>
  );
}

export default Item;

In the code above we have added new class name checked, so we also need to add it to the Item.css.

.checked {
  border: 2px solid rgb(36, 36, 174);
}

Add custom keyboard navigation

Currently, when you tab through the app, the focus changes from one checkbox to the other. This is still okay if you have small number of items. Imagine displaying 500 items and trying to navigate via keyboard to the next section of the app. Would you be happy to tab through 500 items just to get to the next section? Probably not. Luckily, there is a better way to navigate through long lists of items.

The idea is simple. You only have one checkbox with tabIndex=0 (can be focused) and all the others have tabIndex=-1 (ignored by keyboard navigation). Then we programmatically change tabIndex for each item based on which arrow the user clicks.

Let's get back to our code. Inside the App we add ref to the main so that we only listen for keyboard clicks inside it. We also add state for tracking cursor to know which item is currently focused.

Inside the first useEffect we add event listener. On each keyboard button press the function handleKey is fired. Inside it we look for any arrow key press and based on it we modify state of the cursor. To simplify things a bit the numberOfColumns is hard coded.

In the second useEffect we find the correct checkbox inside main based on it’s name and then focus it.

import { keyboardKey } from "@testing-library/user-event";
import { useEffect, useRef, useState } from "react";
import "./App.css";
import Item from "./components/Item";
import items from "./items.json";

function App() {
  const itemsRef = useRef<HTMLElement>(null);
  const [cursor, setCursor] = useState(1);
  const numberOfColumns = 4;
  const totalNumberOfFiles = items.length;

  useEffect(() => {
    const handleKey = (event: keyboardKey) => {
      if (event.key === "ArrowRight") {
        setCursor((prevCursor) => {
          if (prevCursor === totalNumberOfFiles) {
            return totalNumberOfFiles;
          }

          return prevCursor + 1;
        });
      }

      if (event.key === "ArrowLeft") {
        setCursor((prevCursor) => {
          if (prevCursor === 0) {
            return 0;
          }

          return prevCursor - 1;
        });
      }

      if (event.key === "ArrowDown") {
        setCursor((prevCursor) => {
          if (prevCursor + numberOfColumns > totalNumberOfFiles) {
            return prevCursor;
          }

          return prevCursor + numberOfColumns;
        });
      }

      if (event.key === "ArrowUp") {
        setCursor((prevCursor) => {
          if (prevCursor - numberOfColumns < 0) {
            return prevCursor;
          }

          return prevCursor - numberOfColumns;
        });
      }
    };

    if (itemsRef.current) {
      const currentCursor = itemsRef.current;

      currentCursor.addEventListener("keyup", handleKey);

      return () => currentCursor.removeEventListener("keyup", handleKey);
    }
  }, [totalNumberOfFiles, numberOfColumns]);

  useEffect(() => {
    if (itemsRef.current) {
      const selectCursor = itemsRef.current.querySelector(
        `input[name='item ${cursor}']`
      );
      (selectCursor as HTMLInputElement)?.focus();
    }
  }, [cursor]);

  return (
    <main ref={itemsRef} className="main">
      <h1 className="title">Custom keyboard navigation</h1>

      <section className="items">
        {items.map((item) => {
          const tabIndex = cursor === item.id ? 0 : -1;

          return <Item {...item} tabIndex={tabIndex} />;
        })}
      </section>
    </main>
  );
}

export default App;

The last thing that we need add is tabIndex to the Item

import { useState } from "react";
import "./Item.css";

type ItemProps = {
  description: string;
  id: number;
  name: string;
  url: string;
  tabIndex: number;
};

function Item(props: ItemProps) {
  const { description, name, url, tabIndex } = props;
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div
      className={isChecked ? "item checked" : "item"}
      onClick={() => setIsChecked(!isChecked)}
    >
      <input
        className="input"
        type="checkbox"
        name={name}
        id={name}
        checked={isChecked}
        tabIndex={tabIndex}
      />
      <img className="image" src={url} alt={description} />
    </article>
  );
}

export default Item;

Thank you for reading this article. Hope you have learned something new.

Link to the finished project GitHub repository

Pizza Delivery App

Jure Prnaver — Wed, 12 Jan 2022 21:30:32 +0000

Overview of My Submission

This app is pizza ordering app. You can browse through different pizzerias from my favorite local pizzerias. Goal of the app is to order your selected pizza easily and quickly.

Submission Category:

E-Commerce Creation

Link to Code

GitHub repository - frontend: https://github.com/eruj22/pizza-delivery
GitHub repository - backend: https://github.com/eruj22/pizza-delivery-backend
Working demo: https://pizza-delivery-33.netlify.app/

Additional Resources / Info

Technologies used:

ReactJS
NodeJS
mongoDB
Atlas Search
Stripe

Overview of the app

Let's start with the backend. NodeJS backend is connected with mongoDB. There are 3 collections:

Orders: finished orders
Pizzas: information about each pizza
Pizzerias: basic information about pizzerias

I also implemented search option. It is made for the pizzas collection and you can search for pizzas name and ingredients. The backend is deployed to Heroku. I have used free option so some users can wait for the dynos to wake up. Well, it's free, you can't argue with that.

So, when the app finally starts, you will see home page. There you can select from 3 pizzerias. After clicking on one, you will see all the pizzas that it offers. You can freely select which one you would like and in modal select its size. You can see your selected pizzas on the right side.

When you click order items you are navigated to the checkout page. There you have a form to fill with inputs validated. In the payment section you have option to pay with cash or card. When you choose with cash, you can submit form and pizza should be on its way to you. When you choose card, you need to input credit card number (it's in testing mode). I have used stripe CardElement for displaying card payment element.

When your inputs are all correct and you submit your order, then you are navigated to the success page. It informs you that your order was successful. All the information about it is sent to the mongoDB collection named orders.

One more thing to note. When you are in selected pizzeria page and you navigate to another page, your selected pizzas are deleted. This is because you can't order from many different pizzerias at the same time.

Last but not least, the search function. It has been there the whole time, hiding in the navigation section. When you input at least 2 letters the autocomplete function is activated (presuming you tried to write pizza name or some ingredient). When you submit the searching term you are navigated to the search page, where you can see all the results. It is using mongoDB search option for the collection of pizzas.

If you have any additional questions or improvements, write a comment down below.