An adventure in patience

As I have started writing new code using React hooks, I have noticed some occasional issues when testing components with async calls using the React.useEffect. I wanted to share some examples of some tricks I have learned and implemented in my own code.

I’ve created a repo @ https://github.com/Lukeghenco/async-hook-testing that you can follow along and code with. There is also a completed branch @ https://github.com/Lukeghenco/async-hook-testing/tree/complete if you just want to see the finished code. The repo already has React, React Testing Library, and Axios (async API calls) installed for the sake of brevity.

Please note this article assumes that…


A mini-rewrite case study of two testing libraries

The Dream of 100% Test Coverage

Learnings from a recent conversion

At Flatiron School, we have been adding a ton of new test coverage using Kent Dodd’s React Testing Library. Check out my other blog posts on React testing (Creating Readable Tests Using React Testing Library & Testing Async React Hooks)for some awesome tips on using the tool (I know, I know! That was a shameless plug). As we’ve been improving our overall front end (FE) test coverage, there have been certain React components using Enzyme tests that needed some attention.

Since I’ve been learning a lot in this conversion process, I wanted to share some solutions so that you too…


Reacting to Context

If you’ve recently been hearing a lot about the new React Context API and wanted to know more about it, this post is for you. This article will show some examples of how to use React context for managing shareable state and actions while avoiding the dreadful issues related to “Prop Drilling” in a React app.

This post is a continuation of my React series, so be sure to check out my other React posts (Creating Readable Tests Using React Testing Library & Testing Async React Hooks).

DISCLAMER!

This is not written using a version of React that had hooks. This…


Learn how to test drive your React code with BDD testing.

At Flatiron School, we’ve started using React to build almost all of our new client-side projects, as well as converting some of our older Backbone + Marionette apps to React. This has led to a concise and more performant code base on our front end and allowed us to write incredible apps like our in-browser Learn IDE (see How We Built the Learn IDE in Browser).

We are now 2+ years into using React in our codebase. I would like to say we’ve learned all there is to learn about React testing. However, what we’ve really seen is just a…


Now with Webpack as default asset bundler

Phoenix 1.4, now with webpack as the default asset bundler

Today I was trying to setup the new Phoenix 1.4 dev beta, because of its new default Webpack 4 setup (related: check out our recent post on how Flatiron School optimized Webpack for faster page loads). So I decided to share how to quickly download it and start up a project.

To install the new version, first you should make sure that you have Elixir installed (see Elixir Installation Guide). Also make sure to have Elixir’s package manager installed, too:

$ mix local.hex

If you currently have any previous versions of Phoenix installed, it would be a good idea to…


In part 1 we built a restful api using rails.

In part 2 we built up our asset pipeline to use angular, and installed bower.

In part 3 we built a basic angular app with nested routes using UI.router.

In part 4 we are going to use $resource to make our Angular app interface with our RESTful Rails API.

If you have done so, before you begin this section please make sure you have completed parts 1–3, otherwise this may not function correctly.

Step: 1 Checking our data base

Back in part 1 we created a simple database with a single note entry.

If you have…


Part: 3 Routing with ui.router

In this section we are going to use ui.router to make routes for our Note app.

Step: 1 Building some routes

Let’s delete our {{ “Hello “ + “World” }} from our app/views/application/index.html.erb and add the following code.

# app/views/application/index.html.erb<div class="angular-view-container" ui-view></div>

the ui-view is how ui.router displays the templates inside of our main html page.

The next action will be to build our routes. Open our app/assets/javascripts/angular-app/app.js file and add the following code

# app/assets/javascripts/angular-app/app.jsangular
.module(‘app’, [‘ui.router’, ‘ngResource’])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/’…


Part 2: Adding Angular to the Rails Project

Step: 1

To add angular to our rails project we need to add the bower rails gem to our #Gemfile

#Gemfile gem 'bower-rails'

Step: 2

Now we need to install the gem

$ bundle install

this will install bower so that we can start installing dependencies using bower.

Step: 3

We need to initialize the bower.json file so that we can add our dependencies. First we run a rails generator

$ rails g bower_rails:initialize json

in our root directory we now have a bower.json file. We need to add our dependencies. We will be using the latest versions of Angular, ui.router, and Angular-Resource. We only want…


function newPath(language, time, effort){ }; newPath("JavaScript", 0, "100%");

I have officially been learning to code for 5 months now. The road has been a tough one for sure, but one of the most rewarding ones. Considering this time in September, 2015 I could not write a single line of code.

now > then

I am getting close to graduating from FlatIron’s Learn Verified online coding bootcamp, and getting excited about my future career. …


It’s been a couple of week since my last post, but I have returned with a new project to talk about. I am on my 10th week with Flatiron’s Learn Verified online coding bootcamp, and the difficulty has ramped up. It is amazing to think that 10 weeks ago I was writing code like this:

a = 1 
b = 2
c = a + b

and now my code has evolved into something much more complex:

def genres_attributes=(genre_attributes)
if !genre_attributes.empty? && genre_attributes != ‘’
genre = Genre.find_or_create_by(genre_attributes)
self.genres << genre unless self.genres.include? genre
end
end

As I’ve learned more…

Luke Ghenco

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store