Writing a React Component Test with Jest and Testing Library

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" ] }, [..] } ...

June 4, 2021 · 3 min · 559 words · Micha Kops

AWS Snippets

Install AWS CLI v2 $ 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 Generate Signed URLs with Linux Tools e.g. for accessing a website behind a CloudFront distribution using a canned policy. Write the policy file policy { "Statement": [ { "Resource": "https://xxxxxxxxxxxx.cloudfront.net/", "Condition": { "DateLessThan": { "AWS:EpochTime": 1648293147 } } } ] } Then apply the following commands[1] - you need to have OpenSSL installed. cat policy | tr -d "\n" | (1) tr -d " \t\n\r" | (2) openssl sha1 -sign private_key.pem | (3) openssl base64 -A | (4) tr -- '+=/' '-_~' (5) ...

March 1, 2018 · 2 min · 371 words · Micha Kops

Quick Mobile Application Prototyping with Ionic Creator

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. ...

November 17, 2015 · 3 min · 638 words · Micha Kops

Using Deferred Objects and Promises with Java 8 and JDeferred

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: ...

September 27, 2015 · 8 min · 1631 words · Micha Kops

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

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. ...

August 18, 2015 · 17 min · 3495 words · Micha Kops

Creating a hybrid mobile Application with Ionic, Cordova and AngularJS

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. ...

May 3, 2015 · 13 min · 2648 words · Micha Kops

Running JavaScript Tests with Maven, Jasmine and PhantomJS

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. ...

May 4, 2014 · 5 min · 938 words · Micha Kops

HTML5 Server Send Events using Node.js or Jetty

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. ...

October 21, 2012 · 4 min · 720 words · Micha Kops

Video Manipulation using HTML 5 and Javascript

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. ...

August 5, 2012 · 3 min · 636 words · Micha Kops

Compiling CoffeeScript with Maven

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: ...

May 18, 2012 · 2 min · 375 words · Micha Kops