Pass router context to child components when testing in Enzyme/Jest

Adding a Link to a React component was easy as it sounds, except that it broke half of the unit tests. I started getting “Invariant Violation: You should not use <Link> outside a <Router>” which explains itself, but sorting it out took quite some time. In my component I’ve been using withRouter, but the tests are done on a disconnected component without the router and the Link component requires the router context. While mostly understood the issue, when trying most of the suggestions, I kept getting the above error, or “Warning: Failed context type: The context router is marked as required in Component, but its value is undefined“. So let’s see how to pass the router context to child components when testing in Enzyme/Jest.



Tagged with
Comment

React on TypeScript – Part 2

In the previous post I left some React on TypeScript build flow steps to my future self. The project is already in a pretty decent shape, TypeScript is working, there is linting, CSS modules support and unit testing. Now just adding some more loaders to Webpack to handle images and other files and Babel to add some more browser compatibility. I will continue working on the repository which I created in the previous post, check it out if you want to see how we got here.



Tagged with
Comment

Build and test React with TypeScript

For my test projects I’ve been using create-react-app, which is very nice to kick start a React project in Webpack build flow. Unfortunately making it work with TypeScript is somewhat a pain (doable though) as for example new versions of TS loaders will not work with Webpack 3 anymore which is used by the current version of create-react-app. Instead of using old libraries, let’s see what it takes to bootstrap a React web project/build workflow including:

  • build workflow setup using Webpack 4
  • TypeScript support
  • TS linting for code style checking
  • CSS module support to avoid clashing with other components
  • support unit testing with Jest and Enzyme

These are mostly fairly well documented things, you will find more details for each tools on their respective website. Here I summarize the steps and create a working configuration. At the end of the blog post you will also find a link to the complete repository.



Tagged with
Comment
Flipcard screenshot

Bootstrap card with flip side

Just looked into implementing a card with flip side based on Bootstrap’s cards (I love cards, everything is a card in this WordPress theme). I wanted to show some more contents when the visitor hovers over a card.

Here is the repo: https://github.com/seabadger-io/blog.flipcard

Here is the demo: https://seabadger-io.github.io/blog.flipcard

I’m not really impressed how it looks on mobiles, so probably I will skip such option or only use it for desktop and use some alternative on smaller screens. Also, since I wasn’t using an additional wrapper class it can result in surprises if someone edits a card, so fine tune it before using 😉 Nevertheless, it might be useful for some, so sharing it.



Tagged with
Comment

Sudoku grid – responsive squares

Admittedly not the most challenging task, but I found it entertaining. Generally speaking CSS is not very supportive when it comes to square based grids. To be more specific, making a responsive one which scales nicely. At the end I even decided to rather go with JS to make the rubrics squares, but I also reviewed the other option of making an equal side grid.



Tagged with
Comment

Caching remote resources – CORS or not

One of the Mobile Web Specialist students I’m mentoring came across the issue of caching remote resources from her Service Worker and I think it’s worth a little explanation. The course project includes some resources fetched from an external service and the application was throwing an exception, as these resources were not cached. It’s actually two issues, but let’s see what happens when we try to cache items from a remote origin.



Tagged with
Comment

SeaBadgerMD theme is now available

It took quite a while to make it ready, but my WordPress theme is now available on WordPress.org. There is still room for improvement and I will try to get back to it in the near future. If you spot any issue or have some feature idea, please feel free to report it on my GitHub repository. It’s a Bootstrap or actually MDBootstrap based Material Design theme. It features fully responsive design and a magazine front page which I plan to further improve.

For more details check out the SeaBadger MD theme page.



Tagged with
Comment

Create a Progressive Web Application

Progressive Web Applications are absolutely awesome and they will just get better and better. In my previous post I have shown how to implement caching using a ServiceWorker. Working offline is a big chunk of PWAs, now let’s add the missing pieces.



Tagged with
Comment

Implementing a Service Worker

I listened to a Udacity course on offline first and it was sometimes fairly hard to follow the implementation of a Service Worker. Since then I became a lot more familiar with this topic and rest assured, offline-first is an awesome experience. And actually, it’s a lot simpler to implement the basic functionality, than I thought.



Tagged with
Comment

Star rating using CSS gradient

I had this idea, that I could use the CSS gradient background to display the ratings of a restaurant. The results might be more interesting, than useful, but it certainly has some pros as well. At the end, it may look something like this:

Hearts and stars filled with gradient

In this example the rating can be set from 0 to 5 with 1/100 increments (or smaller I guess, if that makes sense). Looks the best though if I don’t go beyond 0.5 increments as otherwise it’s not really a pixel perfect solution.



Tagged with
Comment