Wrap External Libraries with Cypress
External libraries tend to be synchronous, so how do we integrate other powerful tools into the Cypress framework? This lesson walks us through merging in the Lodash library to Cypress to allow us to slice and dice data to more accurately assert on just the pieces of data we care about.
Instructor: [0:00] In this lesson, we're going to learn about wrapping external libraries in Cypress. Why might we want to do this? We can already see this is a more complex example. There's a lot more data.
[0:11] For instance, here we've run an assertion on our store, which has five to-dos in it. Maybe we only want to make an assertion against one of those.
[0:22] When we look at our test, we can see that we've clearly had to assert too much. We've had to list out every single to-do and all of its properties even though perhaps the only one we want to make an assertion on is this first one.
[0:35] Of course, there are typical libraries we might try to use for this type of problem, like lodash. Let's see if we can use lodash.filter, passing in the to-dos from the store. We'll inspect each to-do. If it has the ID of one, then we'll grab it. We hope this is just going to give us this first to-do.
[0:57] Let's make sure we import lodash. Of course, we see that lodash.filter.should is not a function because we haven't integrated lodash into Cypress. Remember that Cypress is asynchronous. It produces its own command chain, so we'll pull off the filter from here and tag on a then.
[1:19] Then we'll be past all the to-dos from the store. Then we can filter them, passing in these to-dos and filtering out each individual to-do in here. return todo.id == 1.
[1:35] Finally, we'll run our should. We'll see that we filtered out only one to-do. This is a ton of overhead just to filter our to-dos. Shouldn't we be able to incorporate filter into our Cypress command chain?
[1:55] The first thing we'll notice if we try this is that filter is already an existing Cypress command. Let's go ahead and rename this lodashFilter.
[2:05] Heading back into Cypress, we see that lodashFilter is not a function, which is what we want. We're ready to add one. Let's hop back into our custom commands file and require lodash.
[2:18] We're ready to add a new command, Cypress.Commands.add lo filter. This time, we are adding a child command, which means that we have a previous subject, true. Since we have a previous subject, the first argument will be subject. The second will be the function that we use to filter.
[2:39] Next, we'll return lodash.filter, passing in the subject and the function to filter with. If we reopen Cypress, we'll see that we filtered out our subject.
[2:49] Remember we're going to want to log this. Let's go back and make this the result.
[2:56] We'll run Cypress.log, passing in the name lodashFilter. The message will be JSON.stringify the result. We'll probably want console props. We'll return the result. Finally, we'll return the result from all of this.
[3:21] Now, in Cypress, we can see the filter. We can go in the console to see what it looks like. What if we want to incorporate every lodash method into Cypress? What if we want to wrap the whole library?
[3:33] Let's start by defining each of the lodash methods. We'll grab each of the function names from lodash. Then we'll map them because we know there's sometimes conflicts. We'll preface them each with lo and then the name of the real function.
[3:47] Then for each of those, we will define a Cypress command. We'll copy out the Cypress command. There we go. We'll get the real name of the lodash method by removing the lo preface because we're going to need to call the real method in lodash. There we go.
[4:08] Next we will define the name of the command. Some lodash methods have arcs. We'll just pass these through. Instead of filter, we'll call the lodash method that is defined. We'll change the name here so it updates in the log.
[4:26] Let's check this out in Cypress. Make sure everything still works the same way, and it does.
[4:33] Let's go ahead and show the power of using our lodash methods together. We'll use lodash.find to pick off the first to-do.
[4:42] Then we'll use lodash.pick to pick off just the text. This is no longer an array. It no longer has any other attributes. We're just asserting on the parts that we care about.
[4:54] We'll rerun this and see that find found us the entire to-do. Pick picked off just the text. Then our assertion runs only the assertion we care about. You can see that by wrapping this external library, we've given Cypress superpowers.