DEV Community: Milán Tenk

Setting up a basic environment with Jasmine to test pure JavaScript logic

Milán Tenk — Sat, 13 Feb 2021 09:35:34 +0000

In a lot of use cases, Jasmine is used together with test runners like Karma. However, if we do not want to run the JavaScript code in a browser, but only using Node, then Karma is not necessary.
In this case, we can use Jasmine directly and in this post, I'm going to describe, how can we do that and how can we use breakpoints in Visual Studio Code in it.

This project setup can be useful for example in those cases, when we are practicing for interviews, coding competitions, or when we take out a code part from a legacy system to check some edge cases with tests on them.

So let's get started.

As a prerequisite make sure that Node.js is installed on the machine.

Initialize a package.json:

npm init -y

Install Jasmine:

npm install --save-dev jasmine

Initiate Jasmine:

npx jasmine init

This will generate the spec folder and a default jasmine config in spec/support.

In package.json update the test npm script to

"scripts": {
  "test": "jasmine"
}

Create the src folder and put a file in it with simple logic. For example, I create the adder.js which looks like this:

function adder(a, b) {
    return a + b;
}

module.exports = adder;

To write a test for it create the adder.spec.js file in the spec folder with the following content:

const adder = require('../src/adder');

describe("adder", () => {
    it("should add the values", () => {
        // ARRANGE & ACT & ASSERT
        expect(adder(1, 2)).toEqual(3);
    });
});

Note that based on the default configuration of Jasmine only test files in the spec folder will be detected with the *.[sS]pec.js ending.

And run the Jasmine test with the following command

npm test

We can see the test case was executed successfully

Now the test runs let's see how the debugger can be used.

Put a breakpoint in the adder function:

Press F5 and choose JavaScript Debug Terminal

In the opened terminal run npm test and the breakpoint will be hit:

And that's it. If you don't want to go through the steps, the environment can be found on GitHub here.

Note that in this case, Jasmine works with Node. It does not support using the ES6 module imports out of the box. It follows that the require module syntax can only be applied.

The story behind my open-source Angular library

Milán Tenk — Tue, 25 Aug 2020 17:22:04 +0000

I released the ngx-interactive-paycard some weeks ago, which is the Angular alternative of vue-interactive-paycard.

In this post, I'll share my story about implementing the Angular alternative of the Vue component.

I came along at vue-interactive-paycard roughly half a year ago on GitHub. That time there was an open issue there, which required an Angular component for the Vue based interactive paycard.

I did not find any Angular implementation, and as there was a demand for it, I started considering implementing it myself. As I haven't used the @angular/animations module of Angular before, it seemed to be a great side project for getting an insight into the Angular animations. On the other hand, doing the implementation of an already existing component in another framework did not seem to be a never-ending story, which was an important aspect, because I have limited capacity in my free time for programming.

I started the work in a private repo. As the first step, I generated an Angular workspace for the project, which contained the library itself and a consumer which can demonstrate the capabilities of the library. I set up the environment based on the Angular guidelines. To have a tight feedback loop, I created an npm script, which is able to watch the changes in the library and in the consumer. This way, when the library is developed, the changes can be seen in the browser immediately. (The watch:all in package.json.)

After that, I created the templates for components. At this part, I had to run over some Vue documentation, so that I could find the Angular alternative for the different Vue specific attributes.

As next step I took the scss over and split them between the Angular components of the library.

Then I implemented the component codes. This is where I faced the issue, that there is a big difference between handling animations in Vue and in Angular. In Vue the <transition> wrapper component does the job for the animations, while in Angular a state machine has to be defined. I also needed to implement some Angular directives to remove elements from the DOM for the animations.

As I did the implementation, I decided to use images with a permissive license in the demo application. I haven't added any logos that are registered as a trademark, this is why I created my own logos for the showcase. These are all input parameters of the library, so the user is able to choose their own images.
I did not want to limit the user with the card number formats as well, so I made them also parameterizable.
As some code of the original Vue based implementation is reused, my LICENSE file contains the license of the original.

When the project was ready to be shown to the public, I changed the visibility of the repo to public. From this point, I was able to create a CI for it with Travis. I created a simple CI, which makes sure, that a tagged library version will be published to npmjs. So when I create a new release on GitHub, I place a tag that triggers the deployment in the CI.

And this is where we are right now. I worked on this project in my free time when I was in the mood. This is why I did not hustle, there were several weeks/months when I left it behind. Now I'm happy that I was able to get to the point, where I can show it to you. I hope it will be beneficial for some devs around the world. 😃

I have some ideas, where the library could be improved further. As Hacktoberfest is approaching, I plan to create some issues, that could be nice tasks also for beginner contributors. I hope to see you around. 😃

Deno - Angular Development Environment

Milán Tenk — Fri, 05 Jun 2020 05:24:35 +0000

In a previous post I showed you how to set up a Deno server with Angular.

The goal of this post is to extend the Proof of Concept with the features that are needed for the development of the server and the client app. It covers following topics:

Set up Angular development tools
- Installing VS Code Extensions
- Set up Angular live reloading
- Configure debugger
Set up Deno development tools
- Install VS Code Extensions for Deno development
- Set up live reloading
- Configure the debugger

The below description uses the outcome of the previous post. The code, from where I continue, can be found on GitHub.

The folder structure that we are working with looks following:

Here client-app contains the Angular app, server the Deno server code and common the shared code between server and client side.

Set up Angular development tools

We are going to develop the Angular app in a separate VS Code window. Let's open Visual Studio Code from the angular-deno-stack-poc\client-app folder and get started.

Installing VS Code Extensions for Angular development

Install Angular language service to make easier the editing of Angular code.
Install Debugger for Chrome extension to make possible the usage of the debugger.

Set up Angular live reloading

To use the live reloading feature of Angular we need to configure ng serve to send the requests of the Angular app to the Deno server. Otherwise we would be unable to fetch data from the server, when the app is developed with ng serve. So let's do following steps:

Create a file named proxy.conf.json.
Add following content to it to have a proxy configuration to the Deno server that will listen on port 8080.



{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

In the package.json modify the start script to use the proxy config:



"start": "ng serve --proxy-config proxy.conf.json",

Let's check if it works.
- In angular-deno-stack-poc\client-app folder run npm run start from the command line.
- In angular-deno-stack-poc\server folder run deno run --allow-net --allow-read .\server.ts command to start the Deno server.
- Open the browser on http://localhost:4200/. (Note that the port 8080 serves the built app from the dist folder, we have the live reloading feature of Angular on port 4200.) If everything is configured fine we are able to see the fetched data from the server, it is "Hello from API!" and the actual time.
- Let's change something in the Angular code to check the live reloading. Open the app.component.html add some text and save it. The change will be reloaded instantly in the browser:

When this works we can continue with setting up the debugger for Angular.

Configure debugger

In this section we enable the usage of breakpoints on the client side.

Press F5 in VS Code and choose Chrome
This will create a launch.json with a default content. In this file change the url to http://localhost:4200, so it should have following content:



{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Let's check if the debugger works. Make sure that the app is up and running. (npm run start if it is not running.) Put a breakpoint somewhere and press F5.

So that's it on the client side. Let's continue with the server.

Set up Deno development tools

We are going to develop the Deno app in a separate VS Code window. Let's open Visual Studio Code from the angular-deno-stack-poc\server folder.

Install VS Code Extensions for Deno development

Install Deno language service to support the development of Deno code.
If the above extension is active in the VS Code of Angular, the Angular code will be full of red underlines as you can see below:

As a workaround I suggest to disable the Deno extension globally and enable it only in the workspace of the Deno server.

Set up live reloading for Deno

To have a live reloading feature while developing the Deno server denon is needed. Install it using below command:



deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts

After installing it, run denon --version command to check if the installation was successful.
Stop the Deno server if it is still running and start it with denon:



denon run --allow-net --allow-read .\server.ts

Let's check if the live reloading works for the server. Add console.log("Live reloading works!"); in the server code before app.listen({ port: 8080 }); save it and check the console:

The live reload is working. denon can be called with the same parameters as deno, so it can be used simply instead of deno command when live reload is needed.

Configure the debugger for Deno

In this section we enable the usage of breakpoints on the server side.

To set up the debugger for Deno, create a default launch.json by hitting F5 and choosing Chrome in the VS Code. Change the content of the generated launch.json to following:



{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Deno",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "deno",
      "runtimeArgs": [
        "run",
        "--inspect-brk",
        "-A",
        "server.ts"
      ],
      "port": 9229
    }
  ]
}

Let's check if it works. Make sure that the Deno server is running. Put a breakpoint somewhere in the code and press F5.

If it is configured fine the breakpoint is hit.

Conclusion

Now we have a development environment which is capable of using live reloading and debugging both on the frontend and backend side. This is very powerful since the feedback loops are kept tight while development.

I personally like to see the frontend and the backend code in two separate Visual Studio Code windows that's why I have set up the launch.json files separately. The disadvantage of this approach is that I have to open a third editor if the common code needs to be edited.

However if you would like to develop from the angular-deno-stack-poc root folder with one VS Code window, the Deno language service extension can not be used right now, because it would mess up the frontend code with the underlines. If you already have a solution for this open point please let me know.

The finished development environment is available on GitHub.

Deno - Angular Stack Proof of Concept

Milán Tenk — Thu, 28 May 2020 06:45:27 +0000

The goal of this post is to give a step-by-step guide on how to set up a Proof of Concept (PoC) project using Deno and Angular. The PoC covers the following topics:

Setting up a Deno server
Generating an Angular application
Serve the Angular application with Deno
Call an endpoint of Deno from the Angular app

The result of this guide can be found on GitHub.
The project can be easily used for playing around with this stack. In the following sections, I show how to set it up.

Setting up the Deno server to serve the Angular app

First of all, Deno has to be installed based on the installation guide. Please follow the installation instructions and when it is finished check the installation with running deno run https://deno.land/std/examples/welcome.ts from the command line. The result should be similar to this:
When it is successfully installed, create the project folder. In my case, it is angular-deno-stack-poc. In this folder a subfolder has to be created for the server, the folder name is server.
Let's open a Visual Studio Code in angular-deno-stack-poc\server folder and create a TypeScript file called server.ts.
To download the index.html of the Angular app following code snippet is needed as first iteration:

import { Application, send } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use(async (context) => {
  await send(context, context.request.url.pathname, {
    root: `${Deno.cwd()}/../client-app/dist/angular-deno-poc`,
    index: "index.html",
  });
});

app.listen({ port: 8080 });
console.log(`Listening on localhost:${8080}`);

The above code uses oak middleware.
Details about it can be found in the official documentation.

The above code snippet assumes that a built Angular application exists on ./../client-app/dist/angular-deno-poc path. I describe in the next section how to create it.

Generate the Angular app

Install Node.js LTS if it is not installed yet on the computer.
If the Angular CLI is not installed globally yet install it with running npm install -g @angular/cli in the command line. If we type ng --version in the command line and the version is printed out then the installation was successful.
In the terminal let's go back to the angular-deno-stack-poc folder and run ng new angular-deno-poc. The Angular CLI asks some questions, I choose to use routing and use scss.
Rename the created folder to client-app. This way the Angular app is named angular-deno-poc in the development environment and it is located in the client-app folder.
Navigate in terminal in the client-app folder and run npm run build -- --prod. This way a production build is created in the dist folder. If the build was successful the terminal shows the following output: The app is ready, let's check if it can be served with the Deno server.

Check the app in the browser

Navigate in command line in angular-deno-stack-poc\server and run deno run --allow-net --allow-read .\server.ts command. The server will listen on port 8080.
Open a browser and navigate to http://localhost:8080/. If every step was successful, the boilerplate code of Angular CLI is displayed.

Now we have a running Deno server that serves the Angular app. As the next step, an endpoint is created and the Angular app will fetch some data from there.

Add an endpoint to the server and fetch data from Angular

We are going to send a message string and a timestamp from the server to the client.

Create a Data Transfer Object

First a Data Transfer Object (Dto) is created, which describes the traveling data between the client and the server-side. As we have TypeScript on both sides of the stack, we can use the same TypeScript file for this. Let's create a new folder in angular-deno-stack-poc root folder, it should be called common.
In the common folder the message-dto.ts file has to be created with the following content:

export interface MessageDto {
    message: string;
    timeStamp: string;
}

Create the endpoint

As the next step the server code has to import the file created above and the endpoint has to be created. It means, that after update the server code has to look like this:

import { Application, send, Router } from "https://deno.land/x/oak/mod.ts";
import { MessageDto } from "./../common/message-dto.ts";

const app = new Application();
const router = new Router();

router
  .get("/api/message", (ctx) => {
    const message: MessageDto = {message: "Hello from API!", timeStamp: new Date().toTimeString()}
    ctx.response.body = message;
  });

app.use(router.routes());
app.use(router.allowedMethods());
app.use(async (context) => {
  await send(context, context.request.url.pathname, {
    root: `${Deno.cwd()}/../client-app/dist/angular-deno-poc`,
    index: "index.html",
  });
});

app.listen({ port: 8080 });
console.log(`Listening on localhost:${8080}`);

After the code modification resart the Deno server.
The endpoint sends response to get requests on /api/message route. It can be check from the browser with navigating to http://localhost:8080/api/message url.

Add a service to Angular

To fetch data from the server an Angular service has to be used.

In angular-deno-stack-poc\client-app\src\app create the core folder and create a file called example.service.ts. The content of it should be the following:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MessageDto } from '../../../../common/message-dto'


@Injectable()
export class ExampleService {

    constructor(private http: HttpClient) { }

    getExampleMessage(): Observable<MessageDto> {
        return this.http.get<MessageDto>('/api/message');
    }
}

In app.module.ts import the HttpClientModule and add ExampleService to the providers. The content of the file should be following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { ExampleService } from './core/example.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [ExampleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

To display the fetched data change app.component.ts content to the below snippet:

import { Component } from '@angular/core';
import { ExampleService } from './core/example.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  message: string;
  timeStamp: string;

  constructor(private exampleService: ExampleService) { }
  ngOnInit() {
    this.exampleService.getExampleMessage().subscribe((result) => {
      this.message = result.message;
      this.timeStamp = result.timeStamp;
    });
  }
}

And change app.component.html to

<h3>Message from the server API:</h3>
<p>{{message}}</p>
<p>{{timeStamp}}</p>

After the changes, the Angular app has to be rebuilt. Run npm run build -- --prod from the angular-deno-stack-poc\client-app in command line.
After that if the http://localhost:8080/ url is checked in the browser the fetched data is displayed:

Conclusion

It was quite easy to get started with Deno. I find it very convenient that it supports TypeScript out of the box. Having the same programming language on frontend and backend side has several benefits, for example in my PoC, I was able to use the same Dto to represent the transferred object.

It would be great to use the same input validation code on frontend and backend side. Do you have any tips or best practices for that? Please let me know. :)

There is a post that continues this topic with setting up the development tools on this stack.