CucumberJS Simple Demo & Features

hello everybody this is canis and today i will be going over a live demonstration of chicken bridge is the behavior driven development framework for JavaScript environment for dependencies it is a must to have no GS installed because we will be using the node package manager to manage cucumber genius dependencies so without much ado let's just go ahead and take a look I have done this prior so I have noted version 13 point 12 installed on my computer any other node version works so this is the first dependency and the second dependency is a text editor so for our purposes today I will be using Visual Studio code feel free to use any other type of text editor of your choice so as a side note the project that we'll be working on today is going to be super simple in the interest of time and it's not meant to be like a fancy example it's just supposed to give you an overview an idea of how what is possible with cucumber yes how we can use it in a node.js project and hopefully it inspires you to use cucumber ge'ez in your next JavaScript based project but that said let's just dive straight into it I'm going to go ahead and quickly create a temporary project folder for our project coming to call it hello cucumber and let's just CPM to it and initialize our NPM project all right that should created it and now what we're gonna do is just open up our text editor here I'm gonna be using just student code so let's just look at what the package JSON that has been generated in this form we can see that we have NPM test that we'll be using to run the test we're gonna go ahead and modify that in just a bit so first things first you need to obviously install cucumber for this project so the way we do that is we just do NPM install cucumber cumber and we save it as a dev dependency and the reason we do that is because if we install it globally then we're going to be missing some directives - cucumber when we use it for our project so that's not something we want because cucumber is going to complain that it's not finding certain packages for our particular project so with that done let's just go ahead and take a look at this package right on up there you go cucumber has been added as I dev dependency so now what we can do is actually go ahead and set up our folder structure for this tiny application I'm going to create a sort my main app will go in a test folder where our tests will go and I will quickly create an app GS file which we can leave like for now and we can go ahead and create a new folder called features within the test directory next what we do is go ahead and create a new file at the root of our project so and we call it cucumber yes and what this is supposed to do is we're just gonna simply doing simple module exports on a default configuration for a cucumber here we just want to make sure that we have our format options this is actually nodes format options and what we want to do here is we want to create the snippet interface as synchronous because this is gonna be a very simple application there's gonna be no callbacks or crazy you know a sync awake cold a synchronous code essentially that you have to deal with elite super simple so we can just kind of set that up right here we can just call snippet interface a synchronous and I think this should do it with that done let's go ahead and now that the dev dependency is set up here what we can do is get rid of this default Testament and actually call cucumber Jas and because we want a lot tests within the test folder I am going to pass any directory the test directory in which the features folder contains and the reason we created the features folders because cucumber as a framework looks for this features folder and within these features you have dot feature files which will have all our scenarios and features listed and described in plain English and from there on we will be going at go ahead and creating steps so the steps are one get executed as the test steps and we'll get to it in just a bit so at this point what we actually want to do is create a new folder linked in our features folder and we give it a name of step definitions and if you can tell where this is going basically all our step definitions are going to be within the step definitions folders so that will be a JavaScript file and the reason that is done this way is because just as I mentioned prior cucumber uses the features folder extensively and all features are marked with dot feature phones and all steps are actually any and all JavaScript files within the features they all get automatically detected as step definitions so even if you don't have step definition between JavaScript files be careful because you might try to detect it as us definition and they might complain that oh there's nothing to find if you have like rogue JavaScript file just sitting there so what we want to do in this step theft javascript file is actually um call cucumber essentially so we're gonna just have constants right and this will be needed later on when we need to perform a search assertions for our tests once we call cucumber so from here let's grab the keywords that we have discussed in the slide given when then and we're going to require cucumber all right so we have now we actually have most of the things set up and we have called cucumber somewhere in our code so what we want to do now is just go ahead and test out that npm test command that we set up in our packages on here and see if it loads up you come so if we go in PM test all right we see that it pulls it up there's no scenarios or steps defined so that makes sense it's just so our project is pretty much set up this is actually the part where we will be taking in the examples and we come up from our behavior driven development example mapping workshops with our teams and turn those examples into scenarios so these scenarios are defined in the features folder as dot feature files and there's also a good time to actually explain to you the concept of the application we're doing it's a super simple application that'll tell us whether it is Friday or not because who doesn't want it to be fighting although it doesn't really apply to us because we do have weekend classes but you know let's just roll with it so let's just go ahead and create a new file within the tears folder and let's call it is is it Friday dot feature and here what we want to do is first use feature and here you can see autocomplete actually doing that for me because I do have a a plugin for Kerrigan syntax installed in visual city code hence I am using Visual Studio code I love its plugin ecosystem and I find that it makes development quite fast and easy so here let's just give some you know description here the feature is called is a Friday it and the description has everybody wants in a way and it's Friday because when I get out of work and just to get home next what we want to do is define a scenario so here let me just go ahead and use the scenario keyword and what we want to do is check for a test so our scenario here would be one day isn't writing right yes Monday's definitely not writing so how do we do that so we however given keyword we're just going to check given that today is Monday then whenever I ask whether it's Friday yet I will expect then that I should be told nope there we go so now that we have a tech table let's just type in p.m. test and see what it says ah this is something different so if we take a look at NPM test we can see that it gives us a bunch of warnings and there's three use now these three news stands for undefined and if we go down here we can see that says one scenario which we have defined here is undefined and the three steps that we have which is to give in one and then they're all undefined now if you actually go over here just look at these warnings you can see it gives us health food code snippets it actually tells us that hey this is undefined you should implement it with the following code snippet so you know what we'll do we'll exactly follow this this warning and we're gonna copy pasted these code snippets and we're just gonna dump it all into our step deaths let's save time I'm gone I've gone ahead and copy pasted the code snippets here so that's running tests now see what you convert has to say we got a P and a - - now these are for each of these step definitions and since the first definition was pending it actually went ahead and skip the latter two and in general it's just marked that okay so the first one is pending your overall scenarios just pending so go ahead and write your actual function and that's what you'll do so before that what I actually want to demonstrate is now that we see everything is pending I actually want to demonstrate to you how the tests would look if they were to fail and to do that what we will do is we'll simply go ahead and give some dummy data here so we'll say that given today is Monday so here let's just test out today is plenty then when I ask whether it's Friday or not I want the actual answer that we get from our application which will be a simple function we'll just call it is it Friday and we pass in they start today right so I asked this function is it Friday and I pass in Monday's August it shouldn't but let's just go ahead and set it up that way because I want Emma Street down and we'll create an assertion here that's already cool to what we get back from the function versus the expected answer and I you want to take some time here to just let you know that this expected answer is actually going to be from the future file that we define notice how we define this in double quotes and it's nope so this is the expected answer in our in our step definitions and similarly this then condition which reads I should be told string where actually if you notice this we take the string we pass it into a new function here that that gets called and then the assertion is gonna take in whatever we get from our function that we define later on and compare it to the expected answer that we get from the kerrigan file the feature files alright so what we now want to do is just go ahead and head to our app.js file and here what we want to do is just declare some dummy function that doesn't have anything because we don't really want to but in our logic just yet because it's a period of development so what we wanted to do just as a simple mario lot exports and what we can do here is just do is it Friday and that can actually be a function that takes them today just leave it at this and I'm just going to say come back to implement so essentially it's an empty function if there's nothing going on here yeah you just leave it as that now in order to get it to be called here we need to use that so let's just define let app equals to require so we're actually gonna have to go to folders up this is features three folders let's go into source and up and I believe that should right here and we just have to modify app is it Friday okay all right so now we should be calling this and what we can do is just all right so let's dive right in and just run in theme test and let's see what the cover says all right says that given today's Monday and when I asked what is Friday these two tests are actually past so if we have made some progress but then it fails or it says then I should be told nope so I wanted to demonstrate a failure so that's fine but in this case it says expected answer is not defined ah there we go okay so I left us a string I should have updated to the expected answer and now if we rerun NPM test we should see okay there you know that makes sense certian error undefined equals nope and obviously some fine because our function doesn't do anything something next logical step is to quickly go ahead and fill up some logic to make this pass and the easiest way to do that is to simply return nope let's rerun NPM test voila we have three steps passed and our whole scenario I think now we're starting to get a hang of how the whole framework sort of works so what we kind of can do now is just go ahead and add another scenario so here I'm gonna go ahead and type mother's 3 on here what we want to do is say Friday is writing we want given today is Friday and I asked whether it's Friday yet then I should be told thank God it's Friday so there you add a step definition where we said today is writing it's gonna copy paste I say today is Friday this is our condition we just set that to Friday and what we want to do quickly it's just a run the NPM test and see what it says so it fails and why does it do that well because on our in our future file we've said that if it is Friday should say thank God it's Friday TGIF but instead it's just returning no because that's how we have to find our function here so we can just add another condition here that whatever it is Friday we will display TGIF it's quickly go ahead and make that change I'm gonna say if today equals then we can return else we return nope and there we have it simple if we were to run into him test everything passes now that we've gone over multiple scenarios and seen and modified our code based on our tests it's time that I show you guys a really powerful feature of cucumber juice which is actually using variables and examples so in order to do that we'll have to swap out our file here and actually swap it out from a scenario to a scenario outline now what we need to do here is for scenario at length we have to make things as general as we can because this will take in variables and we want to make it modular so that it works for any day and not just a defined day like Monday or Friday so what we want to say is a scenario - today is or is not Friday is not fighting and for I give a condition we say given today is not one day but instead what we do here is double quotes add day and this is how we specify variables when I asked whether it's Friday yet then I should be told and again over here we need dynamic answers for dynamic days so we will switch this to be variable next what we need to do is we need to have an example subsection and here we started defining our examples and for our first variable just day we just create a bunch of terms and we can have answer here different tab what we want to do is you want to define a day so let's see Friday and where answer we wanted to thank God it's Friday very simple here whoops that's not thing now for another day let's just see one day like we had we want to say nope and for anything else really what we do is same thing nope that's not right no let's just save it Otto farm ask for me cos something again another plugin that does its pre neak so at this point we just start replacing our step definitions because we have changed our scenario outline over here and they don't match what we had there so let's just start changing that so instead of this we can get rid of the extra given here we only need three because we've kind of make things a modular and here instead as you remember we taking that string parameter like how cucumber just defines it and here we need to take in us get a date and instead of Monday over here what we want actually set it is to the given day that we get from the feature file this is fine this stays the same nothing changes here for this one however we have to just make sure that everything is okay and it seems like everything is okay I should be told this and grabs the expected answer from the condition so we're good to go oh yeah all that's remaining is running NPM fest and boom there we go we have in our future file three different scenarios actually because if you think this is just the outline she created using this examples well three different scenarios one we're days Friday one we're day is Monday and one where is anything else and all of them have asked because we have our definitions to find over here and we have our logic defined within our app so with that this concludes the live demo portion I hope that this have helped you understand a little bit more about cucumber within a node.js project-based environment but yeah that's all folks thanks for watching

Channel: devkanisk

Views: 5,337

Keywords: cucumber, cucumberJS, nodeJs, javascript, demo, tutorial, coding, visual studio, mac

Id: x4jP9ksCnMY

Length: 16min 1sec (961 seconds)

Published: Mon Mar 30 2020