DEV Community: Wael Fezai

Handling dependencies with Deno

Wael Fezai — Thu, 21 May 2020 11:38:21 +0000

Handling dependencies with Deno

Introduction

Deno first stable version is just out and everyone went crazy about it, as shown in bestofjs Deno is getting an average of 700 stars daily!

That's why I gave it a try to see what's all the hype is about. So far I really like how straightforward and simple it is but one thing I didn't like is how handling the dependencies work.

The easy way

In all docs/tutorials importing any deno dependency (standard or third party) would look something like this:

import { v4 } from "https://deno.land/std/uuid/mod.ts";

The code looks simple we are importing the uuid standard library from the given link but what if you look closely you can understand that deno.land is a 'mirror' for the deno project on Github and that link actually points here mod.ts and that's simply the code source in the master branch.

So the question here what if we want to use a specific version and not always the latest one ?

Easy! you can just change the import to :

import { v4 } from "https://deno.land/std@0.52.0/uuid/mod.ts";

As you can see by adding the @0.52.0 now we are pointing the dependency to the exact version 0.52.0 and this way we will avoid having any breaking changes and we can safely updated the dependencies manually.

The Import Maps

As simple as it is, the first solution introduces a major inconvenient : If I use one dependency in 20 files, each time I updated I need to update them manually one by one!

To solve this problem Deno introduced an unstable feature (for now) which is import maps as mentioned in the documentation you can use import maps with the --importmap=<FILE> CLI flag.

You will have to create an import file and use it like the following:
Example:

// import_map.json

{
   "imports": {
      "http/": "https://deno.land/std@0.52.0/http/"
   }
}

// hello_server.ts

import { serve } from "http/server.ts";

const body = new TextEncoder().encode("Hello World\n");
for await (const req of serve(":8000")) {
  req.respond({ body });
}

$ deno run --allow-net --importmap=import_map.json --unstable hello_server.ts

Deno check updates

Although the import maps is still unstable and have some limitations (refer to documentation) but it makes handling the dependencies fairly easy. One limitation I noticed is that (unlike npm) there is no command to check if the dependencies are up to date or not.

That's why I've been working on deno-check-updates. using the module is easy you just need to run the command:

$ deno run -A --unstable https://deno.land/x/deno_check_updates/main.ts -f import_map.json

The script will parse the import_map.json file and list all the dependencies with the latest versions. Something like this :

{
  "imports": {
    "soxa/": "https://deno.land/x/soxa@v1.0/",
    "soxa2/": "https://deno.land/x/soxa@v0.4/",
    "checksum": "https://deno.land/x/checksum@1.2.0",
  }
}

name	module	url	version	latest	upToDate
soxa	soxa	"https://deno.land/x/soxa@v1.0/"	"v1.0"	"v1.0"	true
soxa2	soxa	"https://deno.land/x/soxa@v1.0/"	"v1.0"	"v1.0"	true
checksum	checksum	"https://deno.land/x/checksum@1.2.0"	"v1.2.0"	"v1.4.0"	false
http	std	"https://deno.land/std@0.51.0/http/"	"v0.51.0"	"v0.52.0"	false

This way you know which dependencies needs an update!

BDD with Angular and CucumberJS

Wael Fezai — Sat, 29 Feb 2020 12:19:07 +0000

Angular BDD

This project is part of the tutorial BDD with Angular and CucumberJs.
Full code can be found here Github

Introduction

BDD (Behavior Driven Development) became more common these years, especially with Scrum teams since it gives more agility between product owners (and functional people) and the developers.

One of the best tools to achieve BDD is cucumber along with its syntax called gherkin it gives an easier way to accomplish BDD.

The gherkin syntax looks like this :

  Scenario: Some determinable business situation
    Given some precondition
      And some other precondition
     When some action by the actor
      And some other action
      And yet another action
     Then some testable outcome is achieved
      And something else we can check happens too

CucumberJS

Since this example is focused on Angular a we will use CucumberJS along with Protractor and the framework protractor-cucumber-framework

Implementation

Angular application

We will start first by creating a simple Angular counter app.
We will do so just by changing the app component of the default app generated with the angular cli via the command ng new angular-bdd to the following:

<h3 id="counter">{{ counter }}</h3>

<button id="increment" (click)="increment()">INCREMENT</button>

<button id="decrement" (click)="decrement()">DECREMENT</button>

And

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.sass"]
})
export class AppComponent {
  counter = 0;

  increment(): void {
    this.counter++;
  }

  decrement(): void {
    this.counter--
  }
}

Configuring Protractor & Cucumber

Installing Protractor:

To install Protractor you can follow the official documentation found in : protractortest.org.

Running the following commands will do it :

npm install -g protractor
webdriver-manager update
ng e2e --port 4201

Angular should have created a test file called app.e2e-spec.ts with a test named should display welcome message.
You can modify that test to the following to test if everything is working fine (We will keep the default configuration for Protractor provided by Angular CLI):

  it('should have AngularBdd as a title', () => {
    page.navigateTo();
    expect(browser.getTitle()).toEqual('AngularBdd');
  });

Configuring CucumberJS

To use Cucumber with Protractor we are going to use this plugin : protractor-cucumber-framework. We can install it via the command :

npm install --save-dev cucumber@6 protractor-cucumber-framework chai @types/chai @types/cucumber

Now we can follow the official documentation of the protractor-cucumber-framework and configure our protractor.conf.js like the following :

exports.config = {
  // set to "custom" instead of cucumber.
  framework: 'custom',

  // path relative to the current config file
  frameworkPath: require.resolve('protractor-cucumber-framework'),

  // require feature files
  specs: [
    './src/specs/*.feature' // accepts a glob
  ],

  cucumberOpts: {
    // require step definitions
    require: [
      './src/steps/*.steps.ts' // accepts a glob
    ]
  }
};

You can see that in the specs section we are only targeting the .feature files. Those files are used by cucumber to describe the app's behavior, so let's go ahead and create a simple one (basic-spec.feature) :

Feature: Increment the counter
    This feature lets a user increment the counter by clicking on the button.

Scenario: Basic increment scenario
    Given I am on the home page
    When I click on the increment button 21 times
    Then The counter should show "21"

Now let's run our ng e2e command.
As you can notice you will get a bunch of undefined warnings from cucumber, this basically tells us that what Protractor can't translate what we just wrote in Gherkins, which is normal since in a scrum environment the product owners/functional are the ones who write this files in human language then comes the role of someone with some programming language to translate those. Let's do that.

Cucumber actually helps us by suggesting the methods that needs to be implemented in the output, all we have to do is create a new file under e2e/steps (let's call it basic.steps.ts)

// Import the cucumber operators we need
import { Before, Given, Then, When } from "cucumber";
import { AppPage } from "../app.po";
import { element, by } from "protractor";
import { expect } from "chai";

let page: AppPage;

Before(() => {
  page = new AppPage();
});

Given("I am on the home page", async () => {
  // Navigate to home page.
  await page.navigateTo();
});

When("I click on the increment button {int} times", async (x: number) => {
  // Click on the increment button x times.
  const incrementButton = element(by.id("increment"));
  for (let index = 0; index < x; index++) {
    await incrementButton.click();
  }
});

Then("The counter should show {string}", async (x: string) => {
  // Expect that we get the correct value showing
  expect(await element(by.id("counter")).getText()).to.equal(x);
});

Now we can run ng e2e command and check the result.

Conclusion

This was a quick introduction to BDD with Angular, Cucumber and Protractor. We can always add other features or scenarios.

The good thing about this configuration is, for example, we want to test the decrement feature we won't have to redefine the basic scenarios (going to the home page and expecting the result). This is very helpful since in theory someone working on functional definitions could write new tests without having to add any new code to the application.

Full code can be found here Github