Javascript on Micha Kops' Tech Notes

Writing a React Component Test with Jest and Testing Library

Fri, 04 Jun 2021 00:00:00 +0200

Goals

render a React component in a test
mock HTTP/REST calls to the backend
verify results
achieve the above using typescript, jest and testing-library

Application under Test

This is our application’s shortened package.json, generated by create-react-app, adding dependencies for …

jest
testing-library
typescript
react
dom implementations (jest-dom/react-dom)
axios (for the HTTP/REST call)

package.json

{
  [..]
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1",
    "axios": "^0.19.0"
  },
  [..]
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  [..]
}

AWS Snippets

Thu, 01 Mar 2018 00:00:00 +0100

AWS Command Line Interface

Installation

$ curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64-2.0.30.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

AWS Documentation

RDS

Export Database Configuration

Export instance configuration

aws rds describe-db-instances --db-instance-identifier arn:aws:rds:eu-central-1:123456789:db:hascode-prd-db --no-paginate

Export parameter group configuration

aws rds describe-db-parameters --db-parameter-group-name PARAM_GROUP_NAME >> param_group_conf.json

Export option group configuration

aws rds describe-option-groups --option-group-name OPT_GROUP_NAME >> option_group_conf.json

Generate Signed URLs with Linux Tools

e.g. for accessing a website behind a CloudFront distribution using a canned policy.

Write the policy file

Writing BDD-Style Webservice Tests with Karate and Java

Thu, 06 Apr 2017 00:00:00 +0200

There is a new testing framework out there called Karate that is build on top of the popular Cucumber framework.

Karate makes it easy to script interactions with out web-services under test and verify the results. In addition it offers us a lot of useful features like parallelization, script/feature re-use, data-tables, JsonPath and XPath support, gherkin syntax, switchable staging-configurations and many others.

In the following tutorial we’ll be writing different scenarios and features for a real-world RESTful web-service to demonstrate some of its features.

Quick Mobile Application Prototyping with Ionic Creator

Tue, 17 Nov 2015 00:00:00 +0100

When it comes to the field of hybrid mobile application development, Ionic and its tool-stack is often an attractive choice.

Now there is Ionic Creator to speed up the development process offering an in-browser editor to create user interfaces via drag and drop and supporting basic templates for mobile applications like tabbed layouts etc.

In addition, a project created with this tool may be downloaded and started with easy and that’s what I’d like to show in the following short example.

Using Deferred Objects and Promises with Java 8 and JDeferred

Sun, 27 Sep 2015 00:00:00 +0200

Promises may help us when dealing with asynchronous code and we need to merge, pipe or track the progress and the results of single parts of computation in our applications.

In the following tutorial I’d like to demonstrate a small library, JDeferred that helps us for this specific use case.

Figure 1. JDeferred examples running in Eclipse IDE.

Dependencies

Using Maven here, we simply need to add one dependency for jdeferred-core to our pom.xml:

Creating and Providing HipChat Integrations with Atlassian Connect, Nodejs and Express

Tue, 18 Aug 2015 00:00:00 +0200

HipChat is Atlassian’s alternative to Slack and its solution to team collaboration chats. Atlassian Connect offers developer tools to bootstrap applications, connect to Atlassian’s cloud products with easy and in combination with HipChat’s REST APIs allows us to write integrations for such a chat server in no time.

In the following tutorial I’d like to show how to write an integration within a few steps using Atlassian Connect, Node.js and Express and how to connect the integration to a HipChat server.

Creating a hybrid mobile Application with Ionic, Cordova and AngularJS

Sun, 03 May 2015 00:00:00 +0200

Nowadays in the realm of hybrid mobile application development there is a variety of available frameworks worth having a look at.

In the following tutorial I’d like to demonstrate the development life-cycle for a complete mobile application using Ionic, Cordova and AngularJS (and others) covering every step from the initial project setup, creating Angular Controllers, Directives, adding Cordova Plug-Ins, running and testing the application in the browser and emulator up to finally running the application on an Android device and assembling files for a release.

Running JavaScript Tests with Maven, Jasmine and PhantomJS

Sun, 04 May 2014 00:00:00 +0200

Sometimes in a project there is the need to run tests for your client-side code, written in JavaScript from a Maven build.
One reason might be that Maven manages a complex build life-cycle in your project and you need a close integration for your JavaScript tests, another one might be that you’re in an environment where it is complicated to install and manage additional software like an integration- or build-server.

Creating a Chat Application using Java EE 7, Websockets and GlassFish 4

Tue, 13 Aug 2013 00:00:00 +0200

Java EE 7 is out now and so I was curious to play around with the new specifications and APIs from in this technology stack.

That’s why I didn’t hesitate to add yet another websocket-chat tutorial to the existing ones on the internet in favour of gathering some experience with this technology and a possible integration using a GlassFish 4 server, the new Java API for JSON Processing for data serialization combined with custom websocket encoders/decoders and finally adding some Bootstrap and jQuery on the client side.

HTML5 Server Send Events using Node.js or Jetty

Sun, 21 Oct 2012 00:00:00 +0200

The HTML5 working draft describes different techniques to push information from a server to the client and the one described in this tutorial are Server-Send Events (SSE).

Using Server-Send-Events eliminates the need to poll a server periodically for information using AJAX and is really easy to implement because of the simple specification and the fact that nearly all modern browsers already implement this specification.

The Client Side

Registering for Server Send Events (SSE) is quite easy .. simply create a new EventSource object that is bound to the URL where the events are propagated.

Video Manipulation using HTML 5 and Javascript

Sun, 05 Aug 2012 00:00:00 +0200

Some funny stuff can be done using HTML 5, canvas elements and the video events API.

In the following example we’re using these techniques to apply graphic effects to a video embedded in a HTML page..

The Goal

Please take a look at the following screencast on YouTube to get an idea of what the final example looks like or just take a look at the demo page.

As you can see a video is rendered and a clone is displayed with a strange swirl effect applied.

Compiling CoffeeScript with Maven

Fri, 18 May 2012 00:00:00 +0200

CoffeeScript is a neat language that is transcompiled into JavaScript but is more predictable and allows to write the same code with 1/3 fewer lines and of course with a (imho) nicer syntax.

CoffeeScript is nice but a vivid integration into our application build lifecycle with Maven is better and that is what the following example is all about.

Maven Dependencies

Though there are some alternatives, we’re using brew here so please add the following dependency to your Maven project:

JavaScript Snippets

Mon, 01 Mar 2010 00:00:00 +0100

Creating a Nodejs Module

1) Create a package.json using npm init

$ npm init

This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults.

See npm help json for definitive documentation on these fields and exactly what they do.

Use npm install <pkg> --save afterwards to install a package and save it as a dependency in the package.json file.