Have you ever wanted to write unit tests for your code, but you’ve found that it’s difficult to do so? Often this is the result of not writing code with testing in mind. An easy way to solve this is through utilizing , a development process in which you write your tests your app code. test-driven development before But, even if you’re not a fan of test-driven development, you can still make your code easier to test by employing a simple technique, , which we’ll discuss in this article. dependency injection What is Dependency Injection? Dependency injection is a pretty straightforward yet incredibly powerful technique. In short, rather than a function having its dependencies hard-coded into it, the function instead allows the developer using the function to pass it any needed dependencies through arguments. To help solidify the concept, let’s look at an example together. Parsing a Cookie String Photo by John Dancy on Unsplash Let’s say you want to write a JavaScript function that can parse individual cookie key-value pairs out of the string. document.cookie For example, say you want to check if there is a cookie called , and if its value is , then you want to enable some cool feature for that user browsing your site. enable_cool_feature true Unfortunately, the string is absolutely terrible to work with in JavaScript. It’d be nice if we could just look up a property value with something like , but alas, we cannot. document.cookie document.cookie.enable_cool_feature So, we’ll resort to writing our own cookie-parsing function that will provide a simple facade over some potentially complicated underlying code. (For the record, there are several JavaScript libraries and packages out there that have done exactly this, so don’t feel the need to re-write this function yourself in your own app unless you want to.) As a first pass, we might want to have a simple function defined like this: { } ( ) function getCookie cookieName /* body here */ This function would allow us to find a specific cookie’s value by calling it like this: getCookie( ) 'enable_cool_feature' A Sample Solution Photo by AbsolutVision on Unsplash A Google search on “how to parse the cookie string in JavaScript” reveals many different solutions from various developers. For this article, we’ll look at the solution provided by . It looks like this: W3Schools { name = cookieName + decodedCookie = ( .cookie) ca = decodedCookie.split( ) ( i = ; i < ca.length; i++) { c = ca[i] (c.charAt( ) == ) {
      c = c.substring( )
    } (c.indexOf(name) == ) { c.substring(name.length, c.length)
    }
  } } export ( ) function getCookie cookieName var '=' var decodeURIComponent document var ';' for var 0 var while 0 ' ' 1 if 0 return return '' Criticism of the Sample Solution Photo by FuYong Hua on Unsplash Now, what’s wrong with this? We won’t criticize the main body of the code itself, but rather we’ll look at this one line of code: decodedCookie = ( .cookie) var decodeURIComponent document The function has a dependency on the object and on the property! This may not seem like a big deal at first, but it does have some drawbacks. getCookie document cookie First, what if for whatever reason our code didn’t have access to the object? For instance, in the Node environment, the is . Let’s look at some sample test code to illustrate this. document document undefined Let’s use Jest as our testing framework and then write two tests: { getCookie } describe( , () => {
  it( , () => { .cookie = expect(getCookie( )).toEqual( )
  })

  it( , () => {
    expect(getCookie( )).toEqual( )
  })
}) import from './get-cookie-bad' 'getCookie - Bad' 'can correctly parse a cookie value for an existing cookie' document 'key2=value2' 'key2' 'value2' 'can correctly parse a cookie value for an nonexistent cookie' 'bad_key' '' Now let’s run our tests to see the output. ReferenceError: defined document is not Oh no! In the Node environment, the is not defined. Luckily, we can change our Jest config in our file to specify that our environment should be , and that will create a DOM for us to use in our tests. document jest.config.js jsdom .exports = { : } module testEnvironment 'jsdom' Now if we run our tests again, they pass. But, we still have a bit of a problem. We’re modifying the string globally, which means our tests our now interdependent. This can make for some odd test cases if our tests run in different orders. document.cookie For instance, if we were to write in our second test, it would still output . Oh no! That’s not what we want. Our first test is affecting our second test. In this case, the second test still passes, but it’s very possible to get into some confusing situations when you have tests that are not isolated from one another. console.log(document.cookie) key2=value2 To solve this, we could do a bit of cleanup after our first test’s statement: expect it( , () => { .cookie = expect(getCookie( )).toEqual( ) .cookie = }) 'can correctly parse a cookie value for an existing cookie' document 'key2=value2' 'key2' 'value2' document 'key2=; expires = Thu, 01 Jan 1970 00:00:00 GMT' (Generally I’d advise you do some cleanup in an method, which runs the code inside it after each test. But, deleting cookies isn’t as simple as just saying unfortunately.) afterEach document.cookie = '' A second problem with the W3Schools’ solution presents itself if you wanted to parse a cookie string not currently set in the property. How would you even do that? In this case, you can’t! document.cookie There is a Better Way Photo by Cam Adams on Unsplash Now that we’ve explored one possible solution and two of its problems, let’s look at a better way to write this method. We’ll use dependency injection! Our function signature will look a little different from our initial solution. This time, it will accept two arguments: { } ( ) function getCookie cookieString, cookieName /* body here */ So we can call it like this: getCookie( 'enable_cool_feature') < > someCookieStringHere A sample implementation might look like this: { name = cookieName + decodedCookie = (cookieString) ca = decodedCookie.split( ) ( i = ; i < ca.length; i++) { c = ca[i] (c.charAt( ) == ) {
      c = c.substring( )
    } (c.indexOf(name) == ) { c.substring(name.length, c.length)
    }
  } } export ( ) function getCookie cookieString, cookieName var '=' var decodeURIComponent var ';' for var 0 var while 0 ' ' 1 if 0 return return '' Note that the only difference between this function and the original function is that the function now accepts two arguments, and it uses the argument for the when decoding the cookie on line 3. cookieString Now let’s write two tests for this function. These two tests will test the same things that our original two tests did: { getCookie } describe( , () => {
  it( , () => { cookieString = cookieName = expect(getCookie(cookieString, cookieName)).toEqual( )
  })

  it( , () => { cookieString = cookieName = expect(getCookie(cookieString, cookieName)).toEqual( )
  })
}) import from './get-cookie-good' 'getCookie - Good' 'can correctly parse a cookie value for an existing cookie' const 'key1=value1;key2=value2;key3=value3' const 'key2' 'value2' 'can correctly parse a cookie value for an nonexistent cookie' const 'key1=value1;key2=value2;key3=value3' const 'bad_key' '' Note how we can completely control the cookie string that our method uses now. We don’t have to rely on the environment, we don’t run into any testing hangups, and we don’t have to assume that we’re always parsing a cookie directly from . document.cookie Much better! Conclusion That’s it! Dependency injection is incredibly simple to implement, and it will greatly improve your testing experience by making your tests easy to write and your dependencies easy to mock. (Not to mention it helps decouple your code, but that’s a topic for another day.) Thanks for reading! (Originally published ) here

STEPN

Google

Building an App That Uses All 7 New JavaScript ES2020 Features

How to Make Your Website Accessible: WCAG 2.1 W3C Recommendation

Dependency Injection to Make Your Code Testable [A How-To Guide]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Heroku for ChatOps: How to Start and Monitor Deployments From Slack

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Heroku for ChatOps: How to Start and Monitor Deployments From Slack

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps