DEV Community: Mehmet Kırkoca

Unit Testing with Jest and Rewire in JavaScript

Mehmet Kırkoca — Sun, 17 Sep 2023 07:53:39 +0000

Introduction
Unit testing is a crucial aspect of modern software development, ensuring code reliability and correctness. In this guide, we will explore unit testing using Jest, a powerful testing framework, and introduce the rewire module to enhance your testing capabilities.

Why Use Rewire?
When unit testing JavaScript code, it’s essential to isolate the functions or modules you’re testing to ensure that you’re only evaluating the specific functionality you’re interested in. However, JavaScript’s module system can sometimes make this challenging, as it doesn’t provide a straightforward way to access and manipulate the internal state of a module.

This is where the rewire module comes into play. Rewire is a tool that allows you to access and modify private variables and functions within a module. It effectively "rewires" the module, giving you greater control and visibility into its internals during testing, all while preserving encapsulation in your production code.

Using Rewire with Jest
Let’s dive into practical examples of how to use Jest and Rewire together for effective unit testing. These test cases are from my open-source project, the social media manager.

const rewire = require('rewire');
const formatter = rewire('../index');

describe('formatForTwitter', () => {
  it('should format a message for Twitter', async () => {
    const message = 'Hello, Twitter!';
    const formatForTwitter = formatter.__get__('formatForTwitter');
    const result = await formatForTwitter(message);
    expect(result).toBe('message formatted for twitter: Hello, Twitter!');
  });
});

describe('formatForLinkedIn', () => {
  it('should format a message for LinkedIn', async () => {
    const message = 'Hello, LinkedIn!';
    const formatForLinkedIn = formatter.__get__('formatForLinkedIn');

    const result = await formatForLinkedIn(message);
    expect(result).toBe('message formatted for linkedin: Hello, LinkedIn!');
  });
});

In this context, we seamlessly integrate Jest and Rewire to access and test the internal functions within the index.js file. This approach enables us to comprehensively test private functions while preserving encapsulation in the production code.

Benefits of This Approach
Combining Jest and Rewire offers several advantages for unit testing:

Isolation and Focus: You can concentrate on testing specific functions without exposing them in your production code, preserving encapsulation.

Simplicity and Clarity: The testing process becomes simpler, as you can easily access and modify private variables and functions.

Confidence in Functionality: By testing internal functions in isolation, you can gain confidence in their correctness and expected behavior.

Maintainable Tests: Tests remain robust even if you refactor your code or change the module’s internal structure, as long as the public API remains consistent.

Conclusion
Mastering unit testing with Jest and Rewire in JavaScript empowers you to ensure the reliability and correctness of your code. By combining these powerful tools, you can confidently test private functions and variables while maintaining the integrity of your production code. With this approach, you’ll be better equipped to deliver high-quality, error-free JavaScript applications.

Nginx Configuration Setting up a Reverse Proxy

Mehmet Kırkoca — Sun, 17 Sep 2023 07:49:49 +0000

In this article, As some of you may know, Nginx is a web server and reverse proxy server capable of handling incoming HTTP requests and distributing them to multiple back-end servers. I will show you how I set up a reverse proxy using the nginx.conf file for the social media manager project I am working on. We have four locations: two of them belong to the UI service, one is for the socket.io service, and the last one is for API calls.

This is the real-world scenario I’m utilizing for my social media manager project with this configuration.

events {}
http {
  server {
    listen 80;
    server_name localhost;
    location / {
        proxy_pass http://ui:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location /ws {
        proxy_pass http://ui:5173;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location /socket.io/ {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_pass  http://socket:8084/socket.io/;
    }
    location /api/ {
      rewrite ^/api/(.*) /$1 break;
      proxy_pass http://gateway:8084;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
}

Basic Nginx Structure

An Nginx configuration is organized into blocks: http, server, and location.

1. Starting an HTTP Block:
http { … } block defines the start of an HTTP server configuration.

2. Defining a Server Block:
The ‘server { … }’ block is your command center, providing configuration settings for a specific server. The ‘listen’ directive is your server’s attentive ear, indicating which port to tune into — usually, it’s 80, the standard for HTTP communication. But what about the ‘server_name’? It’s your online identity, specifying your domain name, which in our case is simply, “localhost”.

3. Location Blocks:
location blocks determine how Nginx handles requests based on their URL path. / location handles requests to the root (“/”) and proxies them to a front-end named “ui” on port 5173.

Proxying Requests:
proxy_pass directive forwards requests to the specified webservice.

proxy_set_header is an essential component of setting up a reverse proxy in Nginx configuration. When you use this directive, you’re essentially defining HTTP headers to the request sent to the proxied servers.

Specific Functions of proxy_set_header

Host: The host is one of the header fields in an HTTP request, and this represents the host and port number of the server to which the request is being sent. In the context of proxy_set_header, it refers to the host for which the request should appear to be intended.

X-Real-IP: This, on the other hand, is used to give the server information about the client’s IP address. Typically, when there’s a proxy in the mix, the client’s IP address can get lost. However, proxy_set_header can send this in a header, so the server knows.

Upgrade: The connection can then “upgrade” from HTTP to a different protocol such as WebSocket. This is triggered by the client sending an Upgrade request header in its HTTP request.

Connection: Ensures the connection is maintained during the upgrade

Using proxy_set_header
Here’s an example of how you might use the proxy_set_header directive:

proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade';

These settings aid in maintaining the original client’s address even when requests are being made through a proxy server, as the HTTP header would carry the IP address in the form of the X-real-IP. Plus, it helps set up a seamless WebSocket connection.

In summary, proxy_set_header serves a critical role in setting up a reverse proxy configuration with Nginx. It not only maintains the request’s integrity but also enables advanced features like WebSocket support.

sets HTTP headers for proxying, such as Host, X-Real-IP, and headers needed for WebSocket support.

Handling WebSocket Requests:
WebSocket connections are enabled using proxy_http_version, Upgrade, and Connection headers. The second location /ws block handles WebSocket requests and forwards them similarly to the “ui” backend.

Handling Specific Routes:
The third location /socket.io/ block forwards requests to a different backend service on port 8084, intended for WebSocket communication.

Rewriting URL Paths:
The fourth location /api/ block rewrites URL paths, removing the “/api” prefix, and proxies requests to a “gateway” backend.

Conclusion:
If you’re orchestrating multiple services, Nginx as a reverse proxy simplifies communication. Try it and supercharge your project!

What do you think about using Nginx as a reverse proxy? Share your thoughts and experiences in the comments below!

Open Source Social Media Management

Mehmet Kırkoca — Sun, 17 Sep 2023 07:41:36 +0000

In this article, I will provide you with information about a social media management app. The idea for creating this app originated from my experience of opening multiple social media accounts. Unfortunately, they remained inactive because managing them all simultaneously was challenging. To solve this problem, an idea struck me: I can generate content and then share it across all my social media accounts. However, I soon realized that each social media platform has different requirements, such as Twitter’s character limit. That’s when the idea for such an application emerged, and I began researching.

While similar applications were already available on the internet, most of them were paid. However, I noticed that there was no free and open-source social media management application that I could run on my own server, so I decided to take action to address this issue.

My goal is to develop a high-quality product and make it available to everyone for free as open source software. Of course, I have other motivations, such as enhancing my own experience and creating an application I can use as a reference.

If you also struggle with managing multiple social media platforms, setting alarms to remind you to post on time, dealing with the complexities of formatting each post according to different requirements, and want to handle interactions with your audience on multiple platforms.

Technologies Used
‘social-media-manager’ utilizes a powerful technology stack to enhance the user experience:
Node.js: Provides high performance and reliability to support the front-end and microservices.
Vue.js: Offers a dynamic, user-friendly frontend for an intuitive and visually appealing interface.
Tailwind CSS: Utilizes Tailwind CSS to create an elegant and functional design.
Nginx: Efficiently routes and deploys the application by using Nginx as the preferred reverse proxy for the gateway API and sockets.
Docker: Facilitates the deployment of applications by using container technology like Docker for scalability.
Fastify: Uses Fastify, a high-performance web framework, to support fast interactions.
RabbitMQ: Ensures seamless operation by using a communication system like RabbitMQ to facilitate communication between microservices.

Key Features It Will Provide
Automatic Post Formatting: This application automatically formats your posts to meet the requirements of each platform using artificial intelligence, eliminating the need for manual formatting.

Advantages for Users
Efficiency: Saves time by automating post formatting and automatically reposting content across multiple platforms.
Centralized Management: Provides easy access to all your social media accounts through a single user-friendly interface.
Scheduled Posts: Allows you to schedule and publish posts at ideal times, maximizing your reach and engagement without considering your audience’s time zones.

Installation and Usage
Getting started with ‘social-media-manager’ is straightforward:
Make sure Docker is installed on your system.
Clone the project from GitHub.
Run the ‘docker-compose up’ command to install the necessary containers.
That’s it!

Join Us!
Our vibrant community eagerly awaits your participation:
Show your support by starring the project. Fork the project, get involved deeply, and actively contribute. We welcome your contributions, whether you’ve found a bug or have groundbreaking feature ideas. Share your ideas and suggestions by opening discussions. Engage in constructive conversations and help shape the future of social media management.

Future Plans
As ‘social-media-manager’ evolves, we commit to working more systematically with contributors and community members. Together, we will learn, adapt, and improve the project based on user feedback.

Conclusion
In conclusion, ‘social-media-manager’ may be the answer to your social media management challenges. With open-source spirit, and commitment to the future, it can assist individuals and businesses in achieving success in the digital world.